dbsd_kczx_java/ant-design-vue-jeecg/src/views/system/modules/DataLogCompareModal.vue

163 lines
4.1 KiB
Java

<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>