版本对比

src/router/routes/index.ts

@@ -214,6 +214,15 @@ export const DataWarehousephysicalModelRoute: AppRouteRecordRaw = {
         icon: '',
       },
     },
+    {
+      path: 'logicalModel/version-comparison',
+      name: 'logicalVersionComparisonModel',
+      component: () => import('@/views/dataWarehousePlanning/logicalModel/modelDetail/versionComparison/index.vue'),
+      meta: {
+        title: '版本对比',
+        icon: '',
+      },
+    },
   ],
 };
 export const ModelRoute: AppRouteRecordRaw = {

src/views/dataWarehousePlanning/logicalModel/modelDetail/connectionTable.vue

@@ -9,18 +9,22 @@
       <template #bodyCell="{ column, record }">
         <template v-if="column.key === 'action'">
           <TableAction
-            :actions="[
-              {
-                // 编辑
-                icon: 'clarity:note-edit-line',
-                onClick: handleConnectionEditModel.bind(null, record),
-              },
-              {
-                // 删除
-                icon: 'ant-design:delete-outlined',
-                color: 'error',
-              },
-            ]"
+            :actions="
+              editFlag
+                ? [
+                    {
+                      // 编辑
+                      icon: 'clarity:note-edit-line',
+                      onClick: handleConnectionEditModel.bind(null, record),
+                    },
+                    {
+                      // 删除
+                      icon: 'ant-design:delete-outlined',
+                      color: 'error',
+                    },
+                  ]
+                : []
+            "
           />
         </template>
       </template>

src/views/dataWarehousePlanning/logicalModel/modelDetail/index.vue

@@ -16,6 +16,18 @@
     </template>
 
     <template #footer>
+      <div v-if="versionFlag" style="background-color: #eaedf7; padding: 8px 20px; display: flex">
+        <div style="flex: 1">
+          <span>选择版本：</span>
+          <Select :options="options" style="width: 200px" v-model:value="version" />
+        </div>
+        <div>
+          <a-button type="primary" @click="handleBack"><RollbackOutlined />回退至该版本</a-button>
+          <a-button type="primary" style="margin-left: 20px" danger @click="handleExitLook"
+            >退出查看</a-button
+          >
+        </div>
+      </div>
       <Tabs v-model:activeKey="tabsKey">
         <Tabs.TabPane key="1" tab="基本信息">
           <Descriptions v-if="info" title="基本信息" style="margin: 10px 12px" :column="2">
@@ -81,30 +93,33 @@
           <EntityTable :editFlag="editFlag" />
           <ConnectionTable :editFlag="editFlag" />
         </Tabs.TabPane>
-        <Tabs.TabPane key="3" v-if="!editFlag" tab="跨模型实体关联关系">
+        <Tabs.TabPane key="3" v-if="!editFlag && !versionFlag" tab="跨模型实体关联关系">
           <CrossTable />
         </Tabs.TabPane>
       </Tabs>
     </template>
-    <TurnPhysicalModel @register="turnPhysicalModal" @success="turnPhysicalSuccess" />
+    <TurnPhysicalModel @register="turnPhysicalModal" />
+    <VersionDetailModel @register="versionDetailModal" @set-version-flag="setVersionFlag" />
   </PageWrapper>
 </template>
 <script lang="ts" setup>
   import { reactive, onMounted, ref, nextTick } from 'vue';
   import { PageWrapper } from '@/components/Page';
-  import { useRoute, onBeforeRouteLeave, useRouter } from 'vue-router';
+  import { useRoute, onBeforeRouteLeave } from 'vue-router';
   import { useFilterStore } from '@/store/modules/filterData';
-  import { Descriptions, Tabs } from 'ant-design-vue';
+  import { Descriptions, Tabs, Select } from 'ant-design-vue';
   import EntityTable from './entityTable.vue';
   import ConnectionTable from './connectionTable.vue';
   import CrossTable from './crossTable.vue';
   import { infoData } from '@/views/dataWarehousePlanning/logicalModel/modelDetail/modelData';
   import { FormSchema } from '@/components/Form';
   import { useModal } from '@/components/Modal';
+  import { RollbackOutlined } from '@ant-design/icons-vue';
   import TurnPhysicalModel from './turnPhysicalModel.vue';
+  import VersionDetailModel from './versionModel.vue';
 
-  const { push } = useRouter();
   const [turnPhysicalModal, { openModal: turnPhysical }] = useModal();
+  const [versionDetailModal, { openModal: versionDetail }] = useModal();
   defineOptions({ name: 'AccountManagement' });
   const tableRefresh = ref(true);
   const filterStore = useFilterStore();
@@ -116,7 +131,17 @@
    */
   const tabsKey = ref('1');
   const info = reactive({ ...infoData });
+  // 是否为编辑
   let editFlag = ref(false);
+  // 是否为历史版本查看
+  let versionFlag = ref(false);
+  let version = ref();
+  const options = reactive([
+    {
+      label: 'V1.0 2023-06-15 15:34:40',
+      value: 'V1.0 2023-06-15 15:34:40',
+    },
+  ]);
   const schemas: FormSchema[] = [
     {
       field: 'txt',
@@ -187,15 +212,15 @@
    */
   function handleTurnModel() {
     turnPhysical(true, {
-      sUpdate: false,
+      isUpdate: false,
     });
   }
   /**
    * 历史记录
    */
   function handleVersion() {
-    push({
-      path: '/dataWarehousePlanning/logicalModel/version-manage',
+    versionDetail(true, {
+      isUpdate: false,
     });
   }
   /**
@@ -233,6 +258,17 @@
     editFlag.value = false;
     tabsKey.value = '1';
   }
+  // 模态框点击查看版本
+  function setVersionFlag(flag) {
+    versionFlag.value = flag;
+    tabsKey.value = '1';
+  }
+  // 回退
+  function handleBack() {}
+  // 退出查看
+  function handleExitLook() {
+    setVersionFlag(false);
+  }
   onMounted(() => {
     const path = route.path;
     if (filterStore.getSearchParams[path]) {

src/views/dataWarehousePlanning/logicalModel/modelDetail/model.data.ts

@@ -520,3 +520,30 @@ export const turnPhysicalModelFormSchema: any[] = [
     colProps: { lg: 24, md: 24 },
   },
 ];
+export const versionModelFormSchema: any[] = [
+  {
+    field: 'key',
+    component: 'Input',
+    componentProps: {
+      placeholder: '输入关联关系名称搜索',
+    },
+    colProps: { lg: 12, md: 12 },
+  },
+  {
+    field: 'operator',
+    component: 'Select',
+    componentProps: {
+      placeholder: '发布人',
+    },
+    colProps: { lg: 12, md: 12 },
+  },
+  {
+    field: 'timeRange',
+    component: 'RangePicker',
+    componentProps: {
+      format: 'YYYY-MM-DD HH:mm:ss',
+      placeholder: ['开始时间', '结束时间'],
+    },
+    colProps: { lg: 24, md: 24 },
+  },
+];

src/views/dataWarehousePlanning/logicalModel/modelDetail/modelData.ts

@@ -85,3 +85,28 @@ export const crossData: any[] = [
     sonNum: '1',
   },
 ];
+export const versionTreeData: any[] = [
+  {
+    version: 'V1.x',
+    time: '2023/06/15 15:34:40',
+    remark: '',
+    created: '',
+    key: '0-0',
+    children: [
+      {
+        version: 'V1.1',
+        time: '2023/06/15 15:43:08',
+        remark: 'v2',
+        created: 'admin',
+        key: '0-0-0',
+      },
+      {
+        version: 'V1.0',
+        time: '2023/06/15 15:34:40',
+        remark: '1',
+        created: '',
+        key: '0-0-1',
+      },
+    ],
+  },
+];

src/views/dataWarehousePlanning/logicalModel/modelDetail/versionComparison/comparison.data.ts

+import { DescItem } from '@/components/Description';
+import {BasicColumn} from "@/components/Table";
+
+export const comparisonInfoSchema: DescItem[] = [
+  {
+    field: 'describe',
+    label: '模型描述',
+  },
+  {
+    field: 'entityNum',
+    label: '实体数量',
+  },
+  {
+    field: 'createTime',
+    label: '创建时间',
+  },
+  {
+    field: 'updateTime',
+    label: '更新时间',
+  },
+  {
+    field: 'uploadTime',
+    label: '发布时间',
+  },
+  {
+    field: 'createdBy',
+    label: '创建者',
+  },
+  {
+    field: 'uploadBy',
+    label: '发布者',
+  },
+];
+export const entityColumns: BasicColumn[] = [
+  {
+    title: '实体名称',
+    dataIndex: 'name',
+    minWidth: 80,
+    // onEditRow: true,
+  },
+  {
+    title: '实体描述',
+    dataIndex: 'txt',
+    minWidth: 80,
+    // onEditRow: true,
+  },
+  {
+    title: '实体英文名',
+    dataIndex: 'engName',
+    minWidth: 80,
+    // onEditRow: true,
+  },
+  {
+    title: '资产责任人',
+    dataIndex: 'person',
+    minWidth: 80,
+    // onEditRow: true,
+  },
+  {
+    title: '所属部门',
+    dataIndex: 'deptName',
+    minWidth: 80,
+  },
+];
+export const connectionTable: BasicColumn[] = [
+  {
+    title: '名称',
+    dataIndex: 'name',
+    minWidth: 80,
+    // onEditRow: true,
+  },
+  {
+    title: '父实体名称',
+    dataIndex: 'fatherName',
+    minWidth: 80,
+    // onEditRow: true,
+  },
+  {
+    title: '父实体属性PK',
+    dataIndex: 'fatherPK',
+    minWidth: 80,
+    // onEditRow: true,
+  },
+  {
+    title: '父端基数',
+    dataIndex: 'fatherNum',
+    minWidth: 80,
+    // onEditRow: true,
+  },
+  {
+    title: '子实体名称',
+    dataIndex: 'sonName',
+    minWidth: 80,
+  },
+  {
+    title: '子实体属性PK',
+    dataIndex: 'sonPK',
+    minWidth: 80,
+  },
+  {
+    title: '子端基数',
+    dataIndex: 'sonNum',
+    minWidth: 80,
+  },
+];

src/views/dataWarehousePlanning/logicalModel/modelDetail/versionComparison/comparisonData.ts

+export const comparisonInfoData = {
+  describe: 'DW层的数仓模型',
+  entityNum: '2',
+  createTime: '2023-06-15 15:11:56',
+  updateTime: '2023-06-15 15:33:18',
+  uploadTime: '2023-06-15 15:11:56',
+  createdBy: 'admin',
+  uploadBy: 'admin',
+};
+export const entityData: any[] = [
+  {
+    businessId: '1',
+    name: 'dw_产品合约行情历史',
+    txt: 'dw_产品合约行情历史',
+    engName: 'dw_prd_contract_quot_h_s',
+    person: 'admin',
+    deptName: '机构管理/数据平台治理部',
+  },
+  {
+    businessId: '2',
+    name: 'dw_合约',
+    txt: 'dw_合约',
+    engName: 'dw_prd_contract_f',
+    person: 'admin',
+    deptName: '机构管理/数据平台治理部',
+  },
+];

src/views/dataWarehousePlanning/logicalModel/modelDetail/versionComparison/detail.vue

+<template>
+  <div style="margin: 20px">
+    <div class="comparsion-title">基本信息</div>
+    <Description
+      size="middle"
+      :bordered="false"
+      :column="2"
+      :data="comparisonInfoData"
+      :schema="comparisonInfoSchema"
+    />
+    <Divider style="width: 50%" />
+    <div class="comparsion-title">实体信息</div>
+    <BasicTable @register="entityTable" />
+    <Divider style="width: 50%" />
+    <div class="comparsion-title">实体关联关系</div>
+    <BasicTable @register="contactTable" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { reactive, onMounted, ref, nextTick } from 'vue';
+  import { Description } from '@/components/Description';
+  import { comparisonInfoSchema, entityColumns, connectionTable } from './comparison.data';
+  import { comparisonInfoData } from './comparisonData';
+  import { Divider } from 'ant-design-vue';
+  import BasicTable from '@/components/Table/src/BasicTable.vue';
+  import { useTable } from '@/components/Table';
+  import {
+    entityData,
+    connectionData,
+  } from '@/views/dataWarehousePlanning/logicalModel/modelDetail/modelData';
+
+  const [entityTable, {}] = useTable({
+    title: '',
+    // 定高
+    scroll: { y: 150 },
+    // 数据
+    api: async (params) => {
+      const response = {
+        // pageNu: '1',
+        // pageSize: '10',
+        // pages: '1',
+        // total: entityData.length,
+        code: '',
+        message: '',
+        data: entityData,
+      };
+      return { ...response };
+    },
+    rowKey: 'businessId',
+    // 列
+    columns: entityColumns,
+    useSearchForm: false,
+    showIndexColumn: false,
+    showTableSetting: false,
+    bordered: true,
+    pagination: false,
+    handleSearchInfoFn(info) {
+      return info;
+    },
+  });
+
+  const [contactTable, {}] = useTable({
+    title: '',
+    // 定高
+    scroll: { y: 150, x: 500 },
+    // 数据
+    api: async (params) => {
+      console.log('params:', params);
+      const response = {
+        // pageNu: '1',
+        // pageSize: '10',
+        // pages: '1',
+        // total: entityData.length,
+        code: '',
+        message: '',
+        data: connectionData,
+      };
+      return { ...response };
+    },
+    rowKey: 'businessId',
+    // 列
+    columns: connectionTable,
+    useSearchForm: false,
+    showTableSetting: false,
+    showIndexColumn: false,
+    bordered: true,
+    pagination: false,
+    handleSearchInfoFn(info) {
+      return info;
+    },
+  });
+</script>
+
+<style scoped>
+  .comparsion-title {
+    font-size: 18px;
+    font-weight: 550;
+    margin-bottom: 20px;
+  }
+</style>

src/views/dataWarehousePlanning/logicalModel/modelDetail/versionComparison/index.vue

+<template>
+  <PageWrapper title="版本对比" contentBackground headerSticky>
+    <template #extra>
+      <a-button type="primary" @click="handleCancel">取消对比</a-button>
+      <a-button type="primary" @click="handleExit">退出对比</a-button>
+    </template>
+    <template #footer>
+      <div style="width: 100%; display: flex">
+        <div style="flex: 1">
+          <div style="background-color: #eaedf7; padding: 8px 20px; flex: 1">
+            <span>选择基准版本：</span>
+            <Select :options="options" style="width: 200px" v-model:value="basicVersion" />
+          </div>
+          <Detail />
+        </div>
+        <div style="flex: 1">
+          <div style="background-color: #eaedf7; padding: 8px 20px; flex: 1">
+            <span>选择对比版本：</span>
+            <Select :options="options" style="width: 200px" v-model:value="compareVersion" />
+          </div>
+          <Detail />
+        </div>
+      </div>
+    </template>
+  </PageWrapper>
+</template>
+
+<script lang="ts" setup>
+  import { reactive, onMounted, ref, nextTick } from 'vue';
+  import { Descriptions, Tabs, Select } from 'ant-design-vue';
+  import { PageWrapper } from '@/components/Page';
+  import Detail from './detail.vue';
+  import { useRouter } from 'vue-router';
+
+  defineOptions({ name: 'AccountManagement' });
+  const { push } = useRouter();
+  const basicVersion = ref();
+  const compareVersion = ref();
+  const options = reactive([
+    {
+      label: 'V1.0 2023-06-15 15:34:40',
+      value: 'V1.0 2023-06-15 15:34:40',
+    },
+  ]);
+  function handleCancel() {
+    push({
+      path: '/dataWarehousePlanning/logicalModel/detail',
+    });
+  }
+  function handleExit() {
+    push({
+      path: '/dataWarehousePlanning/logicalModel/detail',
+    });
+  }
+</script>
+
+<style scoped></style>

src/views/dataWarehousePlanning/logicalModel/modelDetail/versionModel.vue

+<template>
+  <BasicModal
+    width="40%"
+    v-bind="$attrs"
+    @register="registerModal"
+    :title="getTitle"
+    @ok="handleSubmit"
+  >
+    <BasicForm @register="registerForm" />
+    <BasicTree :treeData="versionTreeData">
+      <template #title="item">
+        <div style="flex: 1">
+          <div style="display: flex">
+            <div style="flex: 1">
+              <span style="font-size: 18px">{{ item.version }}</span>
+              <span style="margin-left: 10px">{{ item.time }}</span>
+              <span style="margin-left: 30px">{{ item.created }}</span>
+            </div>
+            <div>
+              <!--按钮-->
+              <!--查看-->
+              <FileSearchOutlined @click="handleDetail" class="my-icon" />
+              <!--对比-->
+              <VerticalAlignMiddleOutlined @click="handleComparison" rotate="90" class="my-icon" />
+              <!--回滚-->
+              <RollbackOutlined class="my-icon" />
+              <!--删除-->
+              <DeleteOutlined class="my-icon" style="color: red" />
+            </div>
+          </div>
+          <div>
+            <span>{{ item.remark }}</span>
+          </div>
+        </div>
+      </template>
+    </BasicTree>
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { ref, unref, defineEmits } from 'vue';
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { BasicTree } from '@/components/Tree';
+  import { BasicForm, useForm } from '@/components/Form';
+  import { versionModelFormSchema } from './model.data';
+  import { versionTreeData } from './modelData';
+  import {
+    FileSearchOutlined,
+    VerticalAlignMiddleOutlined,
+    RollbackOutlined,
+    DeleteOutlined,
+  } from '@ant-design/icons-vue';
+  import { useRouter } from 'vue-router';
+
+  const { push } = useRouter();
+
+  defineOptions({ name: 'ModelModal' });
+  const emit = defineEmits();
+
+  const isUpdate = ref(false);
+  const isMove = ref(false);
+  const rowId = ref('');
+  //获取接口数据并放在下拉框里（这里是打开了一个弹框）
+  //初始化表单
+  const [registerForm, { getFieldsValue, setFieldsValue, updateSchema, resetFields, validate }] =
+    useForm({
+      labelWidth: 100,
+      baseColProps: { lg: 12, md: 24 },
+      schemas: versionModelFormSchema,
+      showActionButtonGroup: false,
+      actionColOptions: {
+        span: 23,
+      },
+    });
+  //初始化弹框
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    await resetFields();
+    setModalProps({ confirmLoading: false });
+    isUpdate.value = !!data?.isUpdate;
+    isMove.value = !!data?.isMove;
+    if (unref(isUpdate)) {
+      // 获取行数据的id
+      rowId.value = data.record.businessId;
+      // 塞值
+      await setFieldsValue({
+        ...data.record,
+      });
+    }
+  });
+  function handleDetail() {
+    emit('setVersionFlag', true);
+    closeModal();
+  }
+  function handleComparison() {
+    push({
+      path: '/dataWarehousePlanning/logicalModel/version-comparison',
+    });
+  }
+  // const getTitle = computed(() => (isUpdate.value ? '编辑实体' : '新建实体'));
+  const getTitle = '转物理模型';
+
+  /**确定按钮*/
+  async function handleSubmit() {
+    await validate();
+    closeModal();
+  }
+</script>
+<style scoped>
+  .my-icon {
+    font-size: 18px;
+    margin-right: 10px;
+  }
+</style>