<!-- * @Description: * @Autor: renchao * @LastEditTime: 2023-11-02 13:39:17 --> <template> <div class="djxxTable"> <div class="tableBox"> <div class="title"> {{ title }} <div class="checkbox"> <el-checkbox-group v-model="checkList" @change="checkChange"> <el-checkbox v-for="item in qsztList" :key="item.value" :label="item.value">{{ item.label }}</el-checkbox> </el-checkbox-group> </div> </div> <div class="xxTableBox rollTable"> <table class="xxTable"> <tr v-for="(item, colindex) in columns" :key="colindex"> <td> {{ item.label }} </td> <td v-for="(row, index) in tableData" :key="index" :class="[ row.qszt == '2' ? 'lishi' : '', row.qszt == '0' ? 'linshi' : '', row.qlzt == '4' ? 'linshi' : '', item.prop == 'qszt' && row.qlzt == '3' ? 'linshiIcon' : '', item.prop == 'qszt' && row.qlzt == '2' ? 'linshiIcon' : '', item.prop == 'qszt' && row.qlzt == '1' ? 'xianshiIcon' : '', item.prop == 'qszt' && row.qlzt == '4' ? 'zhuxiaoIcon' : '' ]"> <div class="setbut" v-if="item.prop == 'cz'"> <el-button type="text" icon="el-icon-edit-outline" @click="editDialog(row)">编辑</el-button> <el-button type="text" icon="el-icon-edit-outline" @click="editDialog(row,'D')">删除</el-button> </div> <div class="icon" v-if="item.prop == 'qszt' &&row.qlzt == '1'"> 有效 </div> <div class="icon" v-if="item.prop == 'qszt' && row.qlzt == '2'"> 正在补录 </div> <div class="icon" v-if="item.prop == 'qszt' && row.qlzt == '3'"> 正在申请 </div> <div class="icon" v-if="item.prop == 'qszt' && row.qlzt == '4'"> 正在注销 </div> <p v-if="!['djyy','fj'].includes(item.prop)"> <span v-if="item.prop == 'qszt'"> {{ getQsztName(row[item.prop]) }} </span> <span v-else>{{ row[item.prop] }}</span> </p> <el-tooltip v-else effect="dark" :content="row[item.prop]" placement="top" popper-class="tooltip-width"> <span class="ellipsis-line"> {{ row[item.prop] }} </span> </el-tooltip> </td> <td v-for="count in emptycolNum" :key="~count"></td> </tr> </table> </div> </div> </div> </template> <script> import { datas } from "./qlxxFormData.js"; import { getYydjList } from "@/api/djbDetail.js"; import { getSjlx, getDictLeabel } from "@/utils/dictionary.js"; export default { data () { return { title: "异议登记信息", qsztList: datas.columns().qsztList, checkList: datas.columns().checkList, //传递参数 bdcdyid: this.$route.query.bdcdyid, qllx: this.$route.query.qllx, //列表数据 tableData: [], //空列值个数 emptycolNum: datas.columns().emptycolNum, //列名称对象 columns: datas.columns().YYDJ, }; }, created () { this.loadData(); }, methods: { /** * @description: loadData * @author: renchao */ loadData () { if (this.$parent.addRepairRecord) { this.columns.unshift({ prop: "cz", label: "操作" }) } getYydjList({ bdcdyid: this.bdcdyid, qllx: this.qllx, qszt: this.checkList, }).then((res) => { if (res.code === 200) { this.tableData = res.result; this.tableData.forEach((item) => { item.sjlx = getSjlx(item.sjlx); item.dybdclx = getDictLeabel(item.dybdclx, 'A27') }); if (this.tableData.length < datas.columns().emptycolNum) { this.emptycolNum = datas.columns().emptycolNum - this.tableData.length; } else { this.emptycolNum = 0; } } }); }, /** * @description: checkChange * @author: renchao */ checkChange () { if (this.checkList.length === 0) { this.tableData = []; this.emptycolNum = datas.columns().emptycolNum; } else { this.loadData(); } }, /** * @description: getQsztName * @param {*} code * @author: renchao */ getQsztName (code) { let name = ""; for (let item of this.qsztList) { if (item.value == code) { name = item.label; break; } } return name; }, // 新增一条补录信息 /** * @description: 新增一条补录信息 * @param {*} row * @param {*} del * @author: renchao */ editDialog (row, del) { this.$confirm('此操作将新增一条补录信息, 是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { this.$parent.addRepairRecord(row, del) // this.$message({ // type: 'success', // message: '补录成功!' // }); }).catch(() => { this.$message({ type: 'info', message: '取消编辑' }); }); }, }, }; </script> <style lang="scss" scoped> @import "./qlxxCommon.scss"; </style>