|
@@ -0,0 +1,197 @@
|
|
|
+<template>
|
|
|
+ <div class="my-layout">
|
|
|
+ <el-card class="mt8" shadow="never" :body-style="{ paddingBottom: '0' }">
|
|
|
+ <el-form :inline="true" @submit.stop.prevent>
|
|
|
+ <el-form-item>
|
|
|
+ <el-date-picker v-model="state.filter.beginDate" type="date" placeholder="开始日期"
|
|
|
+ style="width: 140px;"></el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-date-picker v-model="state.filter.endDate" type="date" placeholder="结束日期"
|
|
|
+ style="width: 140px;"></el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-select placeholder="全部平台" v-model="state.filter.tenantId" value-key="id" clearable style="width: 160px;">
|
|
|
+ <el-option v-for="item in state.tenantList" :key="item.id" :label="item.name"
|
|
|
+ :value="item.id"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-select placeholder="全部状态" v-model="state.filter.status" clearable style="width: 100px;">
|
|
|
+ <el-option label="未报备" value="1"></el-option>
|
|
|
+ <el-option label="报备成功" value="2"></el-option>
|
|
|
+ <el-option label="报备失败" value="3"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-input v-model="state.filter.keyword" placeholder="夸克ID、推广平台昵称、手机号" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" icon="ele-Search" @click="onQuery"> 查询 </el-button>
|
|
|
+ <el-button :loading="state.excelLoading" type="primary" @click="onDownExcel"> 导出Excel </el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </el-card>
|
|
|
+ <el-card class="my-fill mt8" shadow="never">
|
|
|
+ <el-table v-loading="state.loading" :data="state.listData" row-key="id" height="'100%'"
|
|
|
+ style="width: 100%; height: 100%">
|
|
|
+ <el-table-column label="所属平台" prop="orgName" min-width="120" show-overflow-tooltip />
|
|
|
+ <el-table-column label="所属下级" min-width="120" show-overflow-tooltip >
|
|
|
+ <template #default="{ row }">
|
|
|
+ <span v-if="row.userRole === '1'">无</span>
|
|
|
+ <span v-else>{{ row.userName }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="申请时间" prop="createdTime" min-width="180" show-overflow-tooltip />
|
|
|
+ <el-table-column label="夸克ID" prop="kuaKeID" min-width="160" show-overflow-tooltip />
|
|
|
+ <el-table-column label="推广平台昵称" prop="name" min-width="120" show-overflow-tooltip />
|
|
|
+ <el-table-column label="手机号" prop="phone" min-width="120" show-overflow-tooltip />
|
|
|
+ <el-table-column label="行业" prop="industry" min-width="120" show-overflow-tooltip />
|
|
|
+ <el-table-column label="推广平台" prop="platfrom" min-width="120" show-overflow-tooltip />
|
|
|
+ <el-table-column label="状态" prop="status" min-width="120" show-overflow-tooltip>
|
|
|
+ <template #default="{ row }">
|
|
|
+ <span v-if="row.status==1">未报备</span>
|
|
|
+ <span v-if="row.status == 2">报备成功</span>
|
|
|
+ <span v-if="row.status == 3">报备失败</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作" width="180" header-align="center" align="center" fixed="right">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <el-button v-if="row.status==1" size="small" text type="primary" @click="onYes(row)">报备成功</el-button>
|
|
|
+ <el-button v-if="row.status == 1" size="small" text type="primary" @click="onNo(row)">报备失败</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <div class="my-flex my-flex-end" style="margin-top: 20px">
|
|
|
+ <el-pagination v-model:currentPage="state.pageInput.currentPage"
|
|
|
+ v-model:page-size="state.pageInput.pageSize" :total="state.total" :page-sizes="[10, 20, 50, 100]" small
|
|
|
+ background @size-change="onSizeChange" @current-change="onCurrentChange"
|
|
|
+ layout="total, sizes, prev, pager, next, jumper" />
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script lang="ts" setup name="admin/kuake">
|
|
|
+import { onMounted, reactive, onBeforeMount, getCurrentInstance} from 'vue'
|
|
|
+import { PageInputAdKuaKePageInput, AdKuaKePageOutput, TenantSelectListOutput } from '/@/api/admin/data-contracts'
|
|
|
+import { KuaKeApi } from '/@/api/admin/KuaKe'
|
|
|
+import { TenantApi } from '/@/api/admin/Tenant'
|
|
|
+import { formatPast } from '/@/utils/formatTime'
|
|
|
+
|
|
|
+import eventBus from '/@/utils/mitt'
|
|
|
+
|
|
|
+
|
|
|
+const { proxy } = getCurrentInstance() as any
|
|
|
+
|
|
|
+
|
|
|
+const state = reactive({
|
|
|
+ loading: false,
|
|
|
+ filter: {
|
|
|
+ beginDate: '',
|
|
|
+ endDate: '',
|
|
|
+ tenantId: '',
|
|
|
+ status:'',
|
|
|
+ keyword: ''
|
|
|
+ }, pageInput: {
|
|
|
+ currentPage: 1,
|
|
|
+ pageSize: 20,
|
|
|
+ } as PageInputAdKuaKePageInput,
|
|
|
+ total: 0,
|
|
|
+ listData: [] as Array<AdKuaKePageOutput>,
|
|
|
+ tenantList: [] as Array<TenantSelectListOutput>,
|
|
|
+ excelLoading:false
|
|
|
+})
|
|
|
+onMounted(() => {
|
|
|
+ onTenants();
|
|
|
+ onQuery()
|
|
|
+ eventBus.off('refreshKuaKeInfo')
|
|
|
+ eventBus.on('refreshKuaKeInfo', async () => {
|
|
|
+ onQuery()
|
|
|
+ })
|
|
|
+
|
|
|
+})
|
|
|
+onBeforeMount(() => {
|
|
|
+ eventBus.off('refreshKuaKeInfo')
|
|
|
+})
|
|
|
+//查询
|
|
|
+const onQuery = async () => {
|
|
|
+ state.loading = true
|
|
|
+ state.pageInput.filter = state.filter
|
|
|
+ if (state.filter.beginDate != '')
|
|
|
+ state.pageInput.filter.beginDate = formatPast(state.filter.beginDate)
|
|
|
+ if (state.filter.endDate != '')
|
|
|
+ state.pageInput.filter.endDate = formatPast(state.filter.endDate)
|
|
|
+
|
|
|
+ const res = await new KuaKeApi().getPage(state.pageInput).catch(() => {
|
|
|
+ state.loading = false
|
|
|
+ })
|
|
|
+ state.listData = res?.data?.list ?? []
|
|
|
+ state.total = res?.data?.total ?? 0
|
|
|
+ state.loading = false
|
|
|
+}
|
|
|
+//平台列表
|
|
|
+const onTenants = async () => {
|
|
|
+ let input: any = {}
|
|
|
+ const res = await new TenantApi().getAll(input).catch(() => {
|
|
|
+
|
|
|
+ })
|
|
|
+ state.tenantList = res?.data ?? []
|
|
|
+}
|
|
|
+//导出推广码模板
|
|
|
+const onDownExcel = () => {
|
|
|
+ proxy.$modal
|
|
|
+ .confirm('请确定是否导出Excel文件')
|
|
|
+ .then(async () => {
|
|
|
+ state.excelLoading = true
|
|
|
+ state.pageInput.filter = state.filter
|
|
|
+ if (state.filter.beginDate != '')
|
|
|
+ state.pageInput.filter.beginDate = formatPast(state.filter.beginDate)
|
|
|
+ if (state.filter.endDate != '')
|
|
|
+ state.pageInput.filter.endDate = formatPast(state.filter.endDate)
|
|
|
+
|
|
|
+ const res = await new KuaKeApi().getExcel(state.pageInput).catch(() => {
|
|
|
+ state.excelLoading = false
|
|
|
+ })
|
|
|
+ if (res?.success) {
|
|
|
+ state.excelLoading = false
|
|
|
+ window.open(res.data, '_self');
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(() => { })
|
|
|
+}
|
|
|
+//报备成功
|
|
|
+const onYes = (row: AdKuaKePageOutput) => {
|
|
|
+ let ids = new Array<number>;
|
|
|
+ ids.push(row.id);
|
|
|
+ proxy.$modal
|
|
|
+ .confirm('确认报备成功')
|
|
|
+ .then(async () => {
|
|
|
+ await new KuaKeApi().updateStatus({ ids: ids, status:2 }, { loading: true, showSuccessMessage: true })
|
|
|
+ onQuery()
|
|
|
+ })
|
|
|
+ .catch(() => { })
|
|
|
+}
|
|
|
+//报备失败
|
|
|
+const onNo = (row: AdKuaKePageOutput) => {
|
|
|
+ let ids = new Array<number>;
|
|
|
+ ids.push(row.id);
|
|
|
+ proxy.$modal
|
|
|
+ .confirm('确认报备失败')
|
|
|
+ .then(async () => {
|
|
|
+ await new KuaKeApi().updateStatus({ ids: ids, status: 3 }, { loading: true, showSuccessMessage: true })
|
|
|
+ onQuery()
|
|
|
+ })
|
|
|
+ .catch(() => { })
|
|
|
+}
|
|
|
+const onSizeChange = (val: number) => {
|
|
|
+ state.pageInput.pageSize = val
|
|
|
+ onQuery()
|
|
|
+}
|
|
|
+
|
|
|
+const onCurrentChange = (val: number) => {
|
|
|
+ state.pageInput.currentPage = val
|
|
|
+ onQuery()
|
|
|
+}
|
|
|
+
|
|
|
+</script>
|