<template> <a-modal :width="modalWidth" :visible="visible" :footer="null" @cancel="handleCancel" cancelText="关闭"> <!--table区 --> <div class="marginCss"> <a-table ref="table" size="small" bordered rowKey="id" :columns="columns" :dataSource="dataSource" :rowClassName="setdataCss" :loading="loading" :scroll="{ y: 700 }" :pagination="false"> <span slot="dataVersionTitle1"><a-icon type="smile-o"/> 版本:{{ dataVersion1Num }}</span> <span slot="dataVersionTitle2"><a-icon type="smile-o"/> 版本:{{ dataVersion2Num }}</span> <template slot="avatarslot" slot-scope="text, record"> <div class="anty-img-wrap"> <img :src="getAvatarView(record)"/> </div> </template> </a-table> </div> </a-modal> </template> <script> import {getAction} from '@/api/manage' export default { name: 'DataLogCompareModal', data() { return { modalWidth: 1000, modaltoggleFlag: true, confirmDirty: false, title: '操作', visible: false, model: {}, confirmLoading: false, headers: {}, //版本号 dataVersion1Num: '', dataVersion2Num: '', //表头 columns: [ { title: '字段名', align: 'left', dataIndex: 'code', width: '30%', }, { align: 'left', dataIndex: 'dataVersion1', width: '30%', slots: {title: 'dataVersionTitle1'}, }, { title: '', dataIndex: 'imgshow', align: 'center', scopedSlots: {customRender: "avatarslot"}, width: '10%', }, { align: 'left', dataIndex: 'dataVersion2', width: '30%', slots: {title: 'dataVersionTitle2'}, } ], //数据集 dataSource: [], loading: false, url: { queryCompareUrl: "/sys/dataLog/queryCompareList", }, } }, created() { }, methods: { loadData(dataId1, dataId2) { this.dataSource = []; let that = this; getAction(that.url.queryCompareUrl, {dataId1: dataId1, dataId2: dataId2}).then((res) => { if (res.success) { that.dataVersion1Num = res.result[0].dataVersion; that.dataVersion2Num = res.result[1].dataVersion; let json1 = JSON.parse(res.result[0].dataContent); let json2 = JSON.parse(res.result[1].dataContent); for (var item1 in json1) { for (var item2 in json2) { if (item1 == item2) { this.dataSource.push({ code: item1, imgshow: '', dataVersion1: json1[item1], dataVersion2: json2[item2], }) } } } } else { console.log(res.message); } }) }, compareModal(dataId1, dataId2) { this.visible = true this.loadData(dataId1, dataId2); }, handleCancel() { this.close() }, modalFormOk() { }, close() { this.$emit('close'); this.visible = false; this.disableSubmit = false; }, setdataCss(record) { let className = 'trcolor'; const dataVersion1 = record.dataVersion1; const dataVersion2 = record.dataVersion2; if (dataVersion1 != dataVersion2) { return className; } }, getAvatarView: function (avatar) { if (avatar.dataVersion1 != avatar.dataVersion2) { return "/goright.png"; } else { return ""; } }, } } </script> <style scoped> .anty-img-wrap { height: 25px; position: relative; } .anty-img-wrap > img { max-height: 100%; } .marginCss { margin-top: 20px; } @import '../../../assets/less/index.less'; </style>