181 lines
8.5 KiB
HTML
181 lines
8.5 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>MarketingSystemDataTool</title>
|
||
<link rel="stylesheet" href="./vendor/element-plus.min.css">
|
||
<link rel="stylesheet" href="./styles.css">
|
||
</head>
|
||
<body>
|
||
<div id="app">
|
||
<el-container>
|
||
<el-header height="56px">
|
||
<el-row align="middle" justify="space-between">
|
||
<el-col :span="24">
|
||
<div class="title">导出工具</div>
|
||
</el-col>
|
||
</el-row>
|
||
</el-header>
|
||
<el-main>
|
||
<el-row :gutter="16">
|
||
<el-col :span="24">
|
||
<el-card>
|
||
<template #header>
|
||
<div style="display:flex;align-items:center;gap:8px">
|
||
<span>模板列表</span>
|
||
<el-button type="primary" size="small" @click="createVisible=true">新增模板</el-button>
|
||
</div>
|
||
</template>
|
||
<el-table :data="templates" size="small" stripe>
|
||
<el-table-column prop="id" label="ID" width="80"></el-table-column>
|
||
<el-table-column prop="name" label="名称"></el-table-column>
|
||
<el-table-column prop="datasource" label="数据源" width="120"></el-table-column>
|
||
<el-table-column prop="file_format" label="格式" width="100"></el-table-column>
|
||
<el-table-column prop="explain_score" label="评分" width="100"></el-table-column>
|
||
<el-table-column label="操作" width="260">
|
||
<template #default="scope">
|
||
<el-button size="small" type="primary" @click="openExport(scope.row)">导出任务</el-button>
|
||
<el-button size="small" @click="openEdit(scope.row)">编辑</el-button>
|
||
<el-button size="small" type="danger" @click="removeTemplate(scope.row.id)">删除</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :span="24">
|
||
<el-card header="导出任务">
|
||
<div v-if="job.id" class="job">
|
||
任务 {{ job.id }} 状态：<b>{{ job.status }}</b> 行数：{{ job.total_rows || '' }}
|
||
<el-button v-if="job.files && job.files.length" type="success" size="small" @click="download(job.id)">下载</el-button>
|
||
</div>
|
||
<div v-else>暂无任务</div>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
</el-main>
|
||
</el-container>
|
||
<el-dialog v-model="createVisible" title="新增模板" :width="createWidth">
|
||
<el-form :model="form" label-width="110px">
|
||
<el-form-item label="模板名称"><el-input v-model="form.name" placeholder="模板名称" /></el-form-item>
|
||
<el-form-item label="数据源">
|
||
<el-select v-model="form.datasource" placeholder="选择">
|
||
<el-option label="营销系统" value="marketing" />
|
||
<el-option label="易码通" value="ymt" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="导出场景">
|
||
<el-select v-model="form.main_table" placeholder="选择场景">
|
||
<el-option label="订单数据" value="order" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="订单类型">
|
||
<el-radio-group v-model="form.orderType">
|
||
<el-radio :label="1">直充卡密</el-radio>
|
||
<el-radio :label="2">立减金</el-radio>
|
||
<el-radio :label="3">红包</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item label="字段选择">
|
||
<el-cascader
|
||
v-model="form.fieldsSel"
|
||
:options="fieldOptions"
|
||
:props="{ multiple: true, checkStrictly: true }"
|
||
collapse-tags
|
||
collapse-tags-tooltip
|
||
placeholder="按场景逐级选择，可多选"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item label="数据权限">
|
||
<el-select v-model="form.permissionMode" style="width:160px">
|
||
<el-option label="所有" value="all" />
|
||
<el-option label="按创建者" value="creator" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item v-if="form.permissionMode==='creator'" label="创建者列表"><el-input v-model="form.creatorRaw" placeholder="如：1,2,3" /></el-form-item>
|
||
<el-form-item label="时间范围">
|
||
<el-date-picker v-model="form.timeRange" type="datetimerange" range-separator="至" start-placeholder="开始" end-placeholder="结束" />
|
||
</el-form-item>
|
||
<el-row :gutter="8">
|
||
<el-col :span="12">
|
||
<el-form-item label="输出格式">
|
||
<el-select v-model="form.file_format" :teleported="false" placeholder="请选择" style="width:160px">
|
||
<el-option v-for="opt in formatOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="可见性">
|
||
<el-select v-model="form.visibility" clearable :teleported="false" style="width:160px" placeholder="请选择">
|
||
<el-option v-for="opt in visibilityOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-form-item label="所有者ID"><el-input v-model="form.owner_id" /></el-form-item>
|
||
</el-form>
|
||
<template #footer>
|
||
<el-button @click="resizeDialog('create', -100)">缩小</el-button>
|
||
<el-button @click="resizeDialog('create', 100)">放大</el-button>
|
||
<el-button @click="createVisible=false">取消</el-button>
|
||
<el-button type="primary" @click="createTemplate">创建并校验</el-button>
|
||
</template>
|
||
</el-dialog>
|
||
<el-dialog v-model="editVisible" title="编辑模板" :width="editWidth">
|
||
<el-form :model="edit" label-width="110px">
|
||
<el-form-item label="模板名称"><el-input v-model="edit.name" /></el-form-item>
|
||
<el-form-item label="输出格式">
|
||
<el-select v-model="edit.file_format" :teleported="false" placeholder="请选择" style="width:160px">
|
||
<el-option v-for="opt in formatOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="可见性">
|
||
<el-select v-model="edit.visibility" clearable :teleported="false" style="width:160px" placeholder="请选择">
|
||
<el-option v-for="opt in visibilityOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-form>
|
||
<template #footer>
|
||
<el-button @click="resizeDialog('edit', -100)">缩小</el-button>
|
||
<el-button @click="resizeDialog('edit', 100)">放大</el-button>
|
||
<el-button @click="editVisible=false">取消</el-button>
|
||
<el-button type="primary" @click="saveEdit">保存</el-button>
|
||
</template>
|
||
</el-dialog>
|
||
<el-dialog v-model="exportVisible" title="执行导出" width="700px">
|
||
<el-form :model="exportForm" label-width="110px">
|
||
<el-form-item label="订单类型">
|
||
<el-radio-group v-model="exportForm.orderType">
|
||
<el-radio :label="1">直充卡密</el-radio>
|
||
<el-radio :label="2">立减金</el-radio>
|
||
<el-radio :label="3">红包</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item label="数据权限">
|
||
<el-select v-model="exportForm.permissionMode" style="width:160px">
|
||
<el-option label="所有" value="all" />
|
||
<el-option label="按创建者" value="creator" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item v-if="exportForm.permissionMode==='creator'" label="创建者列表"><el-input v-model="exportForm.creatorRaw" placeholder="如：1,2,3" /></el-form-item>
|
||
<el-form-item label="时间范围">
|
||
<el-date-picker v-model="exportForm.timeRange" type="datetimerange" range-separator="至" start-placeholder="开始" end-placeholder="结束" />
|
||
</el-form-item>
|
||
<el-form-item label="输出格式">
|
||
<el-select v-model="exportForm.file_format" :teleported="false" placeholder="请选择" style="width:160px">
|
||
<el-option v-for="opt in formatOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-form>
|
||
<template #footer>
|
||
<el-button @click="exportVisible=false">取消</el-button>
|
||
<el-button type="primary" @click="submitExport">执行并分析</el-button>
|
||
</template>
|
||
</el-dialog>
|
||
</div>
|
||
<script src="./vendor/vue.global.prod.js"></script>
|
||
<script src="./vendor/element-plus.full.min.js"></script>
|
||
<script src="./main.js"></script>
|
||
</body>
|
||
</html>
|