<!--用户选择框-->
|
<template>
|
<div>
|
<BasicModal v-bind="$attrs" @register="register" title="数据对比" width="50%" destroyOnClose :showOkBtn="false">
|
<a-row :gutter="6" v-if="dataVersionList" style="margin-left: 2px">
|
<span style="margin-top: 5px; margin-right: 3px; margin-left: 4px">版本对比:</span>
|
<a-select placeholder="版本号" @change="handleChange1" v-model:value="params.dataId1">
|
<a-select-option v-for="(log, logindex) in dataVersionList" :key="log.value" :value="log.value">
|
{{ log.text }}
|
</a-select-option>
|
</a-select>
|
|
<a-select placeholder="版本号" @change="handleChange2" style="padding-left: 10px" v-model:value="params.dataId2">
|
<a-select-option v-for="(log, logindex) in dataVersionList" :key="log.value" :value="log.value">
|
{{ log.text }}
|
</a-select-option>
|
</a-select>
|
</a-row>
|
<BasicTable
|
:columns="columns"
|
v-bind="getBindValue"
|
:rowClassName="setDataCss"
|
:striped="false"
|
:showIndexColumn="false"
|
:pagination="false"
|
:canResize="false"
|
:bordered="true"
|
:dataSource="dataSource"
|
:searchInfo="searchInfo"
|
v-if="isUpdate"
|
>
|
<template #dataVersionTitle1="{ record }"> <Icon icon="icon-park-outline:grinning-face" /> 版本:{{ dataVersion1Num }} </template>
|
<template #dataVersionTitle2="{ record }"> <Icon icon="icon-park-outline:grinning-face" /> 版本:{{ dataVersion2Num }} </template>
|
<template #avatarslot="{ record }">
|
<div class="anty-img-wrap" v-if="record.dataVersion1 != record.dataVersion2">
|
<Icon icon="mdi:arrow-right-bold" style="color: red"></Icon>
|
</div>
|
</template>
|
</BasicTable>
|
</BasicModal>
|
</div>
|
</template>
|
<script lang="ts">
|
import { defineComponent, unref, ref, reactive, watch } from 'vue';
|
import { BasicModal, useModalInner } from '/@/components/Modal';
|
import { queryCompareList, queryDataVerList } from './datalog.api';
|
import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
|
import { useAttrs } from '/@/hooks/core/useAttrs';
|
import { selectProps } from '/@/components/Form/src/jeecg/props/props';
|
import { useMessage } from '/@/hooks/web/useMessage';
|
|
export default defineComponent({
|
name: 'DataLogCompareModal',
|
components: {
|
//此处需要异步加载BasicTable
|
BasicModal,
|
BasicTable: createAsyncComponent(() => import('/@/components/Table/src/BasicTable.vue'), { loading: true }),
|
},
|
props: {
|
...selectProps,
|
},
|
emits: ['register', 'btnOk'],
|
setup(props, { emit, refs }) {
|
const { createMessage } = useMessage();
|
const attrs = useAttrs();
|
const getBindValue = Object.assign({}, unref(props), unref(attrs));
|
const dataSource = ref([]);
|
const dataVersion1Num = ref('');
|
const dataVersion2Num = ref('');
|
const isUpdate = ref(true);
|
const searchInfo = {};
|
const dataId1 = ref('');
|
const dataId2 = ref('');
|
const dataId = ref('');
|
const dataTable1 = ref('');
|
const dataID3 = ref('');
|
const dataTable = ref('');
|
const confirmLoading = ref(false);
|
const dataVersionList = ref([]);
|
let params = reactive({ dataId1: '', dataId2: '' });
|
let dataLog = reactive({});
|
const [register, { setModalProps, closeModal }] = useModalInner(async (data) => {
|
isUpdate.value = !!data?.isUpdate;
|
if (unref(isUpdate)) {
|
let checkedRows = data.selectedRows;
|
dataTable.value = checkedRows[0].dataTable;
|
dataId.value = checkedRows[0].dataId;
|
dataId1.value = checkedRows[0].id;
|
dataId2.value = checkedRows[1].id;
|
params.dataId1 = dataId1.value;
|
params.dataId2 = dataId2.value;
|
await initDataVersionList();
|
await initTableData();
|
}
|
});
|
|
//定义表格列
|
const columns = [
|
{
|
title: '字段名',
|
dataIndex: 'code',
|
width: 20,
|
align: 'left',
|
},
|
{
|
dataIndex: 'dataVersion1',
|
align: 'left',
|
width: 60,
|
slots: { title: 'dataVersionTitle1' },
|
},
|
{
|
title: '',
|
dataIndex: 'imgshow',
|
align: 'center',
|
slots: { customRender: 'avatarslot' },
|
width: 5,
|
},
|
{
|
align: 'left',
|
dataIndex: 'dataVersion2',
|
width: 60,
|
filters: [],
|
filterMultiple: false,
|
slots: { title: 'dataVersionTitle2' },
|
},
|
];
|
async function initTableData() {
|
console.info('params', params);
|
queryCompareList(unref(params)).then((res) => {
|
console.info('test', res);
|
dataVersion1Num.value = res[0].dataVersion;
|
dataVersion2Num.value = res[1].dataVersion;
|
let json1 = JSON.parse(res[0].dataContent);
|
let json2 = JSON.parse(res[1].dataContent);
|
let data = [];
|
for (var item1 in json1) {
|
for (var item2 in json2) {
|
if (item1 == item2) {
|
data.push({
|
code: item1,
|
imgshow: '',
|
dataVersion1: json1[item1],
|
dataVersion2: json2[item2],
|
});
|
}
|
}
|
}
|
dataSource.value = data;
|
});
|
}
|
function handleChange1(value) {
|
if (params.dataId2 == value) {
|
createMessage.warning('相同版本号不能比较');
|
return;
|
}
|
params.dataId1 = value;
|
initTableData();
|
}
|
function handleChange2(value) {
|
if (params.dataId1 == value) {
|
createMessage.warning('相同版本号不能比较');
|
return;
|
}
|
params.dataId2 = value;
|
initTableData();
|
}
|
function setDataCss(record) {
|
let className = 'trcolor';
|
const dataVersion1 = record.dataVersion1;
|
const dataVersion2 = record.dataVersion2;
|
if (dataVersion1 != dataVersion2) {
|
return className;
|
}
|
}
|
async function initDataVersionList() {
|
queryDataVerList({ dataTable: dataTable.value, dataId: dataId.value }).then((res) => {
|
dataVersionList.value = res.map((value, key, arr) => {
|
let item = {};
|
item['text'] = value['dataVersion'];
|
item['value'] = value['id'];
|
return item;
|
});
|
});
|
}
|
|
return {
|
//config,
|
searchInfo,
|
dataSource,
|
setDataCss,
|
isUpdate,
|
dataVersionList,
|
dataVersion1Num,
|
dataVersion2Num,
|
queryCompareList,
|
initDataVersionList,
|
register,
|
handleChange1,
|
handleChange2,
|
params,
|
getBindValue,
|
columns,
|
};
|
},
|
});
|
</script>
|
<style scoped>
|
.anty-img-wrap {
|
height: 25px;
|
position: relative;
|
}
|
|
.anty-img-wrap > img {
|
max-height: 100%;
|
}
|
|
.marginCss {
|
margin-top: 20px;
|
}
|
</style>
|
