<!-- 可见创意灵感账号 --> <template> <div class="app-container"> <!-- 查询 --> <div class="search-wrap"> <el-form :inline="true" :model="formData" @submit.native.prevent> <el-form-item label="appkey/校验包名"> <el-input v-model.trim="formData.keyword" placeholder="请输入appkey/校验包名" style="width: 240px" ></el-input> </el-form-item> <el-form-item label="日期"> <el-date-picker v-model="formData.gmtCreate" :class="'create-date'" size="small" style="height:36px" value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" @change="clearData" /> </el-form-item> <el-form-item> <el-button type="primary" @click="handleSearch">查询</el-button> </el-form-item> </el-form> </div> <!-- 操作 --> <div class="operation-wrap"> <el-upload ref="upload" class="upload-wrap" :accept="uploadOption.accept" :data="uploadOption.data" :action="uploadOption.action" :headers="uploadOption.headers" :limit="uploadOption.limit" :show-file-list="uploadOption.showFileList" :before-upload="onBeforeUpload" :on-success="onSuccess" :on-error="onError" > <el-button type="primary" icon="el-icon-upload" :loading="uploadOption.loading" >上传关系表</el-button> </el-upload> <el-button @click="handleUploadTemplate">下载关系表</el-button> <el-button class="fr" @click="userUserlibRefresh">刷新</el-button> </div> <!-- 展示数据 --> <el-table border class="seachTable" :data="tableData"> <el-table-column prop="packageName" label="包名" :show-overflow-tooltip="true" width="280" > <template slot-scope="scope"> <span>{{tableShowContent(scope.row.packageName)}}</span> </template> </el-table-column> <el-table-column prop="appKey" label="APPKEY" min-width="100" > <template slot-scope="scope"> <span>{{tableShowContent(scope.row.appKey)}}</span> </template> </el-table-column> <el-table-column prop="categoryFirstName" label="一级标签" min-width="150" :show-overflow-tooltip="true" > <template slot-scope="scope"> <span>{{tableShowContent(scope.row.categoryFirstName)}}</span> </template> </el-table-column> <el-table-column prop="categorySecondName" label="二级标签" min-width="150" :show-overflow-tooltip="true" > <template slot-scope="scope"> <span>{{tableShowContent(scope.row.categorySecondName)}}</span> </template> </el-table-column> <el-table-column prop="categoryThirdName" label="三级标签" min-width="150" :show-overflow-tooltip="true" > <template slot-scope="scope"> <span>{{tableShowContent(scope.row.categoryThirdName)}}</span> </template> </el-table-column> <el-table-column prop="gmtCreate" label="上传时间" min-width="150" :show-overflow-tooltip="true" > <template slot-scope="scope"> <span>{{tableShowContent(scope.row.gmtCreate)}}</span> </template> </el-table-column> </el-table> <!-- 分页 --> <pagination v-show="pageInfo.total > 0" :total="pageInfo.total" :page.sync="pageInfo.current" :limit.sync="pageInfo.size" @pagination="paginationChange" /> </div> </template> <script> // api import { userUserlibExport, userUserlibSearch, userUserlibRefresh } from "@/api/audience/featured"; import { getToken } from "@/utils/auth"; import { hackDownloadFileNew } from "@/utils/ruoyi"; export default { data() { return { formData: { keyword: "", gmtCreate: [] }, tableData: [], pageInfo: { total: 0, current: 1, size: 10, }, uploadOption: { data: { check: false, }, loading: false, action: window.location.protocol + process.env.VUE_APP_BASE_API + "/system/userlib/upload", accept: ".xlsx,.xls", showFileList: false, headers: { Authorization: "Bearer " + getToken(), }, limit: 1, } }; }, mounted() { this.getTableData(); }, methods: { // 刷新 userUserlibRefresh() { userUserlibRefresh() .then(res => { this.msgSuccess(res.data) this.getTableData() }) .catch(err => { this.msgError(err); }) }, // 查询 handleSearch() { this.pageInfo.current = 1; this.getTableData(); }, // 清空时间 clearData(val) { if (val === null) { this.dateSelect = [] } }, // 分页改变 paginationChange() { this.getTableData(); }, onBeforeUpload() { this.uploadOption.loading = true; }, onSuccess(response) { this.uploadOption.loading = false; let data = response.data if (response.code === 200) { let errorDetails = data.errorDetails if (errorDetails.length && errorDetails[0].content) { let h = this.$createElement this.$confirm( '提示', { title: '提示', message: h('div', null, [ h('p', null, 'APPKEY存在重复,重复APPKEY:'), h('p', { style: {'word-break': 'break-all'} }, errorDetails[0].content) ]), showCancelButton: true, confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' } ) } else { this.msgSuccess(data.message ? data.message : '上传成功') this.getTableData(); } } else { this.msgError('导入模版失败,请重试'); } this.$refs["upload"].clearFiles(); }, onError() { this.$refs["upload"].clearFiles(); this.uploadOption.loading = false; this.msgError("导入模版失败,请重试"); }, // 实例调用 // 获取展示数据 async getTableData() { try { let params = this.getParams(); let res = await userUserlibSearch(params); this.tableData = res.data.records; this.pageInfo.total = res.data.total; } catch (error) { console.error("获取展示数据", error); } }, // 获取关系列表 async handleUploadTemplate() { try { let res = await userUserlibExport(); hackDownloadFileNew( res.data, "关系列表_" + new Date().getTime() ); } catch (error) { console.error("获取关系列表失败", error); } }, // utils getParams() { let result = { ...this.formData, ...this.pageInfo, }; if (result.gmtCreate && result.gmtCreate.length) { result.gmtCreate = result.gmtCreate } else { delete result.gmtCreate } delete result.total; return result; }, tableShowContent(val) { return val ? val : '-' } }, }; </script> <style lang="scss" scoped> .search-wrap { margin-bottom: 20px; border-bottom: 1px dashed #e4e4e4; .el-button--primary { min-width: 80px; } } .operation-wrap { margin-bottom: 20px; .upload-wrap { display: inline-block; } } /deep/.create-date input { height: 36px; } /deep/.audience-description { height: 80px; .el-form-item--medium { margin-bottom: 0; height: 80px; .el-textarea__inner { height: 80px; } } } /deep/.create-date { input { height: 34px; } } </style>