|  | @@ -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>
 |