<template> <div class="app-container"> <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px"> <el-form-item> <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> <el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport">导出</el-button> </el-form-item> </el-form> <el-table v-loading="loading" :data="reportList"> <el-table-column label="日期" align="center" prop="date" /> <el-table-column label="客户ID" align="center" prop="customerId" /> <el-table-column label="公司名称" align="center" prop="customerName" /> <el-table-column label="绑定媒体账户" align="center" prop="accountNum" /> <el-table-column label="绑定监测账户" align="center" prop="monitorNum" /> <el-table-column label="优化经理数量" align="center" prop="managerNum" /> <el-table-column label="优化师数量" align="center" prop="operateNum" /> <el-table-column label="批量创建使用次数" align="center" prop="batchCreateNum" /> <el-table-column label="创建计划的数量" align="center" prop="planCreateNum" /> <el-table-column label="最后创建计划日期" align="center" prop="planLastDate" /> <el-table-column label="历史投放广告数量" align="center" prop="historyPlanNum" /> <el-table-column label="使用素材库创建素材数" align="center" prop="storeMaterialNum" /> <el-table-column label="使用标题库创建素材数" align="center" prop="storeTitleNum" /> <el-table-column label="使用定向库创建素材数" align="center" prop="storeRetargetNum" /> <el-table-column label="智投规则使用次数" align="center" prop="intellRuleNum" /> <el-table-column label="预警规则使用次数" align="center" prop="warnRuleNum" /> </el-table> </div> </template> <script> import { listReport, exportReport } from "@/api/report/operate"; import { hackDownloadFile } from '@/utils/ruoyi' export default { data() { return { // 遮罩层 loading: true, // 报表信息表格数据 reportList: [], // 弹出层标题 title: "", // 是否显示弹出层 open: false, // 查询参数 queryParams: {}, // 表单参数 form: {}, // 表单校验 rules: {} }; }, created() { this.getList(); }, methods: { /** 查询用户信息列表 */ getList() { this.loading = true; listReport(this.queryParams).then(response => { this.reportList = response.data; this.loading = false; }); }, /** 搜索按钮操作 */ handleQuery() { this.getList(); }, /** 导出按钮操作 */ handleExport() { const queryParams = this.queryParams; this.$confirm('是否确认导出所有用户信息数据项?', "警告", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" }).then(function() { // return exportReport(queryParams).then(res=>{ console.log(res) hackDownloadFile(res.data) }).catch(error=>{ console.error(error) }); }); } } }; </script>