<template> <div> <a-card size="small" :bordered="false" class="erpMessageManagement-wrap searchBoxNormal"> <!-- 搜索条件 --> <div ref="tableSearch" class="table-page-search-wrapper"> <a-form layout="inline" id="erpMessageManagement-form" @keyup.enter.native="$refs.table.refresh(true)"> <a-row :gutter="15"> <a-col :md="6" :sm="24"> <a-form-item label="校验时间"> <rangeDate ref="rangeDate" id="erpMessageManagement-rangeDate" @change="dateChange" /> </a-form-item> </a-col> <a-col :md="4" :sm="24"> <a-form-item label="校验结果"> <a-select clearable placeholder="请选择校验结果" id="erpMessageManagement-checkResult" v-model="queryParam.resultType"> <a-select-option value="right" id="erpMessageManagement-checkResult-success"> 成功 </a-select-option> <a-select-option value="error" id="erpMessageManagement-checkResult-fail"> 失败 </a-select-option> </a-select> </a-form-item> </a-col> <a-col :md="4" :sm="24"> <a-form-item label="业务编号"> <a-input id="erpMessageManagement-bizNo" v-model.trim="queryParam.bizNo" allowClear placeholder="请输入业务编号"/> </a-form-item> </a-col> <a-col :md="4" :sm="24"> <a-form-item label="业务名称"> <a-input id="erpMessageManagement-bizName" v-model.trim="queryParam.bizName" allowClear placeholder="请输入业务名称"/> </a-form-item> </a-col> <a-col :md="4" :sm="24" style="margin-bottom: 10px;"> <a-button type="primary" @click="$refs.table.refresh(true)" :disabled="disabled" id="erpMessageManagement-refresh">查询</a-button> <a-button style="margin-left: 5px" @click="resetSearchForm" :disabled="disabled" id="erpMessageManagement-reset">重置</a-button> </a-col> </a-row> </a-form> </div> </a-card> <!-- 列表 --> <a-card size="small" :bordered="false"> <a-spin :spinning="spinning" tip="Loading..."> <s-table class="sTable fixPagination" id="erpMessageManagement-table" ref="table" :style="{ height: tableHeight+70+'px' }" size="small" :rowKey="(record) => record.id" :columns="columns" :data="loadData" :scroll="{ y: tableHeight }" :defaultLoadData="false" bordered> <!-- 处理状态 --> <template slot="syncStatus" slot-scope="text, record"> <span v-if="record.disposeType&&record.disposeType=='NO_DISPOSE'">未处理</span> <span v-else-if="record.disposeType&&record.disposeType=='RUN_DISPOSE'">处理中</span> <span v-else-if="record.disposeType&&record.disposeType=='YES_DISPOSE'">已处理</span> <span v-else>--</span> </template> <!-- 错误信息 --> <template slot="errInfo" slot-scope="text, record"> {{ record.disposeDesc }} </template> <!-- 验证结果 --> <template slot="resultType" slot-scope="text, record"> <span :style="{color:text=='right'?'green':'red'}">{{ text=='right'?'成功':'失败' }}</span> </template> <!-- 操作 --> <template slot="action" slot-scope="text, record"> <div> <a-button size="small" type="link" class="button-info" @click="handleCli(record)" :id="'erpMessageManagement-handle-btn'+record.id">处理</a-button> <a-button v-if="record.bizNo" size="small" type="link" class="button-info" @click="handleAgainVeriy(record)" :id="'erpMessageManagement-reOperate-btn'+record.id">重新验证</a-button> </div> </template> </s-table> </a-spin> </a-card> <!-- 新增/编辑 --> <editModal :openModal="openModal" :nowData="nowData" @close="closeModal" /> </div> </template> <script> import { commonMixin } from '@/utils/mixin' // 组件 import { STable, VSelect } from '@/components' import rangeDate from '@/views/common/rangeDate.vue' import editModal from './editModal.vue' // 接口 import { queryCheckResultPage, datacheckReset } from '@/api/mqmsg' export default { name: 'DataValidManagementList', mixins: [commonMixin], components: { STable, VSelect, rangeDate, editModal }, data () { return { spinning: false, disabled: false, // 查询、重置按钮是否可操作 tableHeight: 0, // 列表高度 // 查询参数 queryParam: { beginDate: '', // 开始时间 endDate: '', // 结束时间 resultType: undefined, // 校验结果 bizName: '', // 业务名称 bizNo: '' // 业务编号 }, // 表头 columns: [ { title: '序号', dataIndex: 'no', width: '3.5%', align: 'center' }, { title: '业务名称', dataIndex: 'bizName', width: '8%', align: 'center', customRender: function (text) { return text || '--' } }, { title: '校验内容', dataIndex: 'validContent', width: '14%', align: 'center', customRender: function (text) { return text || '--' } }, { title: '业务编号', dataIndex: 'bizNo', width: '8%', align: 'center', customRender: function (text) { return text || '--' } }, { title: '校验结果', dataIndex: 'resultType', scopedSlots: { customRender: 'resultType' }, width: '6%', align: 'center' }, { title: '错误信息', dataIndex: 'resultInfo', width: '10%', align: 'center', customRender: function (text) { return text || '--' } }, { title: '校验时间', dataIndex: 'checkDate', width: '10%', align: 'center', customRender: function (text) { return text || '--' } }, { title: '处理状态', scopedSlots: { customRender: 'syncStatus' }, width: '6%', align: 'center' }, { title: '处理描述', scopedSlots: { customRender: 'errInfo' }, width: '18%', align: 'center' }, { title: '处理时间', dataIndex: 'disposeDate', width: '10%', align: 'center', customRender: function (text) { return text || '--' } }, { title: '操作', scopedSlots: { customRender: 'action' }, width: '10%', align: 'center' } ], // 加载数据方法 必须为 Promise 对象 loadData: parameter => { this.disabled = true this.spinning = true // 获取列表数据 有分页 return queryCheckResultPage(Object.assign(parameter, this.queryParam)).then(res => { let data if (res.status == 200) { data = res.data // 计算表格序号 const no = (data.pageNo - 1) * data.pageSize for (var i = 0; i < data.list.length; i++) { data.list[i].no = no + i + 1 data.list[i].validContent = data.list[i].nodeName + ',' + data.list[i].checkContent } this.disabled = false } this.spinning = false return data }) }, openModal: false, // 新增编辑调拨类型 弹框 nowData: null // 当前记录数据 } }, methods: { // 同步时间 change dateChange (date) { this.queryParam.beginDate = date[0] ? date[0] : '' this.queryParam.endDate = date[1] ? date[1] : '' }, // 重置 resetSearchForm () { this.queryParam = { beginDate: '', // 开始时间 endDate: '', // 结束时间 resultType: undefined, // 校验结果 bizName: '', // 业务名称 bizNo: '' // 业务编号 } this.$refs.rangeDate.resetDate() this.$refs.table.refresh(true) }, // 处理 handleCli (row) { this.nowData = row this.openModal = true }, // 处理完成 closeModal (flag) { this.nowData = null this.openModal = false if (flag) { this.$refs.table.refresh() } }, // 重新验证 handleAgainVeriy (row) { const _this = this this.$confirm({ title: '提示', content: '重新验证会保留原数据,并重新生成一条无处理状态与处理描述的相同数据,确认重新验证吗?', centered: true, onOk () { _this.spinning = true datacheckReset({ bizName: row.bizName, bizNo: row.bizNo, nodeCode: row.nodeCode }).then(res => { if (res.status == 200) { _this.$message.success(res.message) _this.$refs.table.refresh() } _this.spinning = false }) } }) }, // 初始化 pageInit () { const _this = this this.$nextTick(() => { // 页面渲染完成后的回调 _this.setTableH() }) }, // 计算表格高度 setTableH () { const tableSearchH = this.$refs.tableSearch.offsetHeight this.tableHeight = window.innerHeight - tableSearchH - 190 } }, watch: { '$store.state.app.winHeight' (newValue, oldValue) { // 窗口变更时,需同时更改表格高度 this.setTableH() } }, mounted () { if (!this.$store.state.app.isNewTab) { // 页签刷新时调用 this.pageInit() this.resetSearchForm() } }, activated () { // 如果是新页签打开,则重置当前页面 if (this.$store.state.app.isNewTab) { this.pageInit() this.resetSearchForm() } // 仅刷新列表,不重置页面 if (this.$store.state.app.updateList) { this.pageInit() this.$refs.table.refresh() } } } </script> <style lang="less" scope> .ant-table-tbody .ant-table-row{ height:42px !important; } </style>