<template>
|
<div>
|
<BasicModal v-bind="$attrs" @register="registerModal" title="数据对比窗口" :minHeight="300" width="800px" @ok="handleSubmit">
|
<a-spin :spinning="confirmLoading">
|
<a-form @submit="handleSubmit" :form="form" class="form">
|
<a-row class="form-row" :gutter="24">
|
<a-col :md="12" :sm="8">
|
<a-form-item label="数据库表名" :label-col="{ span: 6 }" :wrapper-col="{ span: 15 }" name="dataTable">
|
<a-input placeholder="请输入数据库表名" v-model:value="dataTable" disabled />
|
</a-form-item>
|
</a-col>
|
|
<a-col :md="12" :sm="8">
|
<a-form-item label="数据ID" :label-col="{ span: 5 }" :wrapper-col="{ span: 15 }">
|
<a-input placeholder="请输入数据ID" v-model:value="dataId" disabled />
|
</a-form-item>
|
</a-col>
|
</a-row>
|
|
<a-row class="form-row" :gutter="24">
|
<a-col :md="12" :sm="8">
|
<a-form-item label="版本号1" :label-col="{ span: 6 }" :wrapper-col="{ span: 15 }">
|
<a-select placeholder="请选择版本号" @change="handleChange1" v-model:value="dataVersion1">
|
<a-select-option v-for="(log, logindex) in dataVersionList" :key="logindex.toString()" :value="log.id">
|
{{ log.dataVersion }}
|
</a-select-option>
|
</a-select>
|
</a-form-item>
|
</a-col>
|
<a-col :md="12" :sm="8">
|
<a-form-item label="版本号2" :label-col="{ span: 5 }" :wrapper-col="{ span: 15 }">
|
<a-select placeholder="请选择版本号" @change="handleChange2" v-model:value="dataVersion2">
|
<a-select-option v-for="(log, logindex) in dataVersionList" :key="logindex.toString()" :value="log.id">
|
{{ log.dataVersion }}
|
</a-select-option>
|
</a-select>
|
</a-form-item>
|
</a-col>
|
</a-row>
|
</a-form>
|
</a-spin>
|
</BasicModal>
|
<DataLogCompareModal @register="registerDataLogCompareModal"></DataLogCompareModal>
|
</div>
|
</template>
|
<script lang="ts" setup>
|
import { BasicModal, useModal, useModalInner } from '/@/components/Modal';
|
import { queryDataVerList } from './datalog.api';
|
import { reactive, ref, unref } from 'vue';
|
import DataLogCompareModal from './DataLogCompareModal.vue';
|
const dataId1 = ref('');
|
const dataId2 = ref('');
|
const dataId = ref('');
|
const dataTable1 = ref('');
|
const dataID3 = ref('');
|
const dataTable = ref('');
|
const confirmLoading = ref(false);
|
const isUpdate = ref(true);
|
const dataVersionList = ref([]);
|
let dataLog = reactive({});
|
//表单赋值
|
const [registerModal, { 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;
|
initDataVersionList();
|
}
|
});
|
|
const [registerDataLogCompareModal, { openModal }] = useModal();
|
|
function handleChange1(value) {
|
dataId1.value = value;
|
}
|
|
function handleChange2(value) {
|
dataId2.value = value;
|
}
|
|
function handleSubmit() {
|
let result = { dataId1: dataId1.value, dataId2: dataId2.value };
|
openModal(true, {
|
result,
|
isUpdate: true,
|
});
|
closeModal();
|
}
|
|
function initDataVersionList() {
|
queryDataVerList({ dataTable: dataTable.value, dataId: dataId.value }).then((res) => {
|
dataVersionList.value = res.map((value, key, arr) => {
|
arr['label'] = value;
|
return arr;
|
});
|
console.info(dataVersionList.value);
|
});
|
}
|
</script>
|
|
<style scoped lang="less">
|
.detail-iframe {
|
border: 0;
|
width: 100%;
|
height: 100%;
|
min-height: 600px;
|
}
|
</style>
|
