234 lines
12 KiB
HTML
234 lines
12 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 label="数据源" width="120">
|
||
<template #default="scope">{{ dsLabel(scope.row.datasource) }}</template>
|
||
</el-table-column>
|
||
<el-table-column prop="file_format" label="格式" width="100"></el-table-column>
|
||
<el-table-column prop="field_count" label="字段数" width="100"></el-table-column>
|
||
<el-table-column prop="exec_count" label="执行次数" width="120"></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 ref="createFormRef" :model="form" :rules="createRules" label-width="110px" status-icon>
|
||
<el-form-item label="模板名称" required show-message prop="name"><el-input v-model="form.name" placeholder="模板名称" /></el-form-item>
|
||
<el-form-item label="数据源" required show-message>
|
||
<el-select v-model="form.datasource" placeholder="选择" :teleported="false">
|
||
<el-option v-for="opt in datasourceOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="导出场景" required show-message>
|
||
<el-select v-model="form.main_table" placeholder="选择场景">
|
||
<el-option label="订单数据" value="order" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="订单类型" required show-message prop="orderType">
|
||
<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="字段选择" required show-message prop="fieldsSel">
|
||
<el-cascader
|
||
ref="fieldsCascader"
|
||
v-model="form.fieldsSel"
|
||
:options="fieldOptions"
|
||
:props="{ multiple: true, checkStrictly: false, expandTrigger: 'hover', checkOnClickNode: true, checkOnClickLeaf: true }"
|
||
collapse-tags
|
||
collapse-tags-tooltip
|
||
placeholder="按场景逐级选择，可多选"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item label="数据权限" required show-message prop="permissionMode">
|
||
<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="创建者列表" :required="true" show-message prop="creatorRaw"><el-input v-model="form.creatorRaw" placeholder="如：1,2,3" /></el-input></el-form-item>
|
||
|
||
<el-row :gutter="8">
|
||
<el-col :span="12">
|
||
<el-form-item label="输出格式" required show-message prop="file_format">
|
||
<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="可见性" required show-message prop="visibility">
|
||
<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>
|
||
<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 ref="editFormRef" :model="edit" :rules="editRules" label-width="110px">
|
||
<el-form-item label="模板名称" required show-message prop="name"><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="exportTitle" width="700px">
|
||
<el-form ref="exportFormRef" :model="exportForm" :rules="exportRules" label-width="110px" status-icon>
|
||
<el-divider content-position="left">筛选条件</el-divider>
|
||
<el-row :gutter="8">
|
||
<el-col :span="12">
|
||
<el-form-item label="时间范围" required show-message prop="dateRange">
|
||
<el-date-picker v-model="exportForm.dateRange" type="datetimerange" start-placeholder="开始时间" end-placeholder="结束时间" value-format="YYYY-MM-DD HH:mm:ss" />
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-divider content-position="left">层级筛选</el-divider>
|
||
<el-row :gutter="8" v-if="isOrder">
|
||
<el-col :span="12">
|
||
<el-form-item label="创建者" prop="creator">
|
||
<el-select v-model="exportForm.creatorIds" multiple filterable :teleported="false" placeholder="请选择创建者" style="width:100%">
|
||
<el-option v-for="opt in creatorOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="分销商ID" prop="resellerId">
|
||
<el-input v-model.number="exportForm.resellerId" :disabled="!hasCreators" placeholder="reseller_id" />
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="8" v-if="isOrder">
|
||
<el-col :span="12">
|
||
<el-form-item label="计划ID" prop="planId">
|
||
<el-input v-model.number="exportForm.planId" :disabled="!hasReseller" placeholder="plan_id" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="KEY批次ID" prop="keyBatchId">
|
||
<el-input v-model.number="exportForm.keyBatchId" :disabled="!hasPlan" placeholder="key_batch_id" />
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="8" v-if="isOrder">
|
||
<el-col :span="12">
|
||
<el-form-item label="兑换批次ID" prop="codeBatchId">
|
||
<el-input v-model.number="exportForm.codeBatchId" :disabled="!hasKeyBatch" placeholder="code_batch_id" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="商品ID" prop="productId">
|
||
<el-input v-model.number="exportForm.productId" :disabled="!hasCodeBatch" placeholder="product_id" />
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="8">
|
||
<el-col :span="12">
|
||
<el-form-item label="支付流水号" prop="outTradeNo"><el-input v-model="exportForm.outTradeNo" placeholder="out_trade_no" /></el-input></el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="账户" prop="account"><el-input v-model="exportForm.account" placeholder="account" /></el-input></el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-row :gutter="8" v-if="isOrder">
|
||
<el-col :span="12" v-if="exportType===3">
|
||
<el-form-item label="红包批次号" prop="cashActivityId"><el-input v-model="exportForm.cashActivityId" placeholder="order_cash.cash_activity_id" /></el-input></el-form-item>
|
||
</el-col>
|
||
<el-col :span="12" v-if="exportType===2">
|
||
<el-form-item label="立减金批次" prop="voucherChannelActivityId"><el-input v-model="exportForm.voucherChannelActivityId" placeholder="order_voucher.channel_activity_id" /></el-input></el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="8" v-if="isOrder">
|
||
<el-col :span="12" v-if="exportType===2">
|
||
<el-form-item label="立减金批次(批次表)" prop="voucherBatchChannelActivityId"><el-input v-model="exportForm.voucherBatchChannelActivityId" placeholder="voucher_batch.channel_activity_id" /></el-input></el-form-item>
|
||
</el-col>
|
||
<el-col :span="12" v-if="exportType===1">
|
||
<el-form-item label="商户业务号" prop="outBizNo"><el-input v-model="exportForm.outBizNo" placeholder="merchant_key_send.out_biz_no" /></el-input></el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<!-- 输出格式按模板设置，不在此显示 -->
|
||
</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>
|