修改元数据

fa4c203d · 罗林杰 · 22cd5d75 · fa4c203d · fa4c203d · fa4c203d
Commit fa4c203d authored Nov 12, 2024 by 罗林杰
3 changed files
--- a/src/views/metadata/metadataComparison/data.ts
+++ b/src/views/metadata/metadataComparison/data.ts
+import { DescItem } from '@/components/Description';
+import { BasicColumn, FormSchema } from '@/components/Table';
+import { treeData } from '@/views/metadata/metadataComparison/metadataComparisomData';
+export const refundSchema: DescItem[] = [
+  {
+    field: 'dataSource',
+    label: '数据源',
+  },
+  {
+    field: 'type',
+    label: '资产类型',
+  },
+  {
+    field: 'owner',
+    label: '拥有者',
+  },
+  {
+    field: 'changeTime',
+    label: '版本生成时间',
+  },
+  {
+    field: 'remark',
+    label: '注释',
+  },
+];
+export const columns: BasicColumn[] = [
+  {
+    title: '列名',
+    dataIndex: 'name',
+    width: 120,
+  },
+  {
+    title: '字段类型',
+    dataIndex: 'type',
+    width: 120,
+  },
+  {
+    title: '长度',
+    dataIndex: 'length',
+    width: 120,
+  },
+  {
+    title: '精度',
+    dataIndex: 'precision',
+    width: 120,
+  },
+  {
+    title: '可空',
+    dataIndex: 'isNull',
+    width: 120,
+  },
+  {
+    title: '注释',
+    dataIndex: 'remark',
+    width: 120,
+  },
+];
+export const indexColumns: BasicColumn[] = [
+  {
+    title: '名称',
+    dataIndex: 'name',
+    width: 120,
+  },
+  {
+    title: '索引字段',
+    dataIndex: 'filed',
+    width: 120,
+  },
+  {
+    title: '类型',
+    dataIndex: 'type',
+    width: 120,
+  },
+];
+export const mainSchema: FormSchema[] = [
+  {
+    field: 'name',
+    label: '请选择基准表',
+    component: 'TreeSelect',
+    componentProps: {
+      treeData: treeData,
+      fieldNames: {
+        label: 'title',
+        value: 'businessId',
+      },
+    },
+    defaultValue: '111',
+    colProps: { lg: 8, md: 8 },
+  },
+];
+export const lastSchema: FormSchema[] = [
+  {
+    field: 'name',
+    label: '请选择参照表',
+    component: 'TreeSelect',
+    componentProps: {
+      treeData: treeData,
+      fieldNames: {
+        label: 'title',
+        value: 'businessId',
+      },
+    },
+    defaultValue: '112',
+    colProps: { lg: 8, md: 8 },
+  },
+];
--- a/src/views/metadata/metadataComparison/index.vue
+++ b/src/views/metadata/metadataComparison/index.vue
 <template>
-  <PageWrapper dense contentFullHeight fixedHeight contentClass="flex" />
+  <PageWrapper title="元数据对比" contentFullHeight contentBackground contentClass="flex">
+    <template #footer>
+      <div style="display: flex; justify-content: flex-end; padding-bottom: 10px">
+        <a-button style="margin-right: 5px" type="primary" @click="handleImport">导出</a-button>
+      </div>
+    </template>
+    <div class="w-1/2 xl:w-1/2">
+      <div>
+        <BasicForm @register="registerMainForm" />
+        <Description
+          size="middle"
+          title="基本信息"
+          :bordered="false"
+          :column="2"
+          :data="mainData"
+          :schema="refundSchema"
+        />
+        <Description size="middle" title="列信息" :bordered="false" />
+        <BasicTable @register="registerMainTable" />
+        <Description size="middle" title="索引" :bordered="false" />
+        <BasicTable @register="registerMainIndexTable" />
+      </div>
+    </div>
+    <div class="w-1/2 xl:w-1/2">
+      <div>
+        <BasicForm @register="registerLastForm" />
+        <Description
+          size="middle"
+          title="基本信息"
+          :bordered="false"
+          :column="2"
+          :data="lastData"
+          :schema="refundSchema"
+        />
+        <Description size="middle" title="列信息" :bordered="false" />
+        <BasicTable @register="registerLastTable" />
+        <Description size="middle" title="索引" :bordered="false" />
+        <BasicTable @register="registerLastIndexTable" />
+      </div>
+    </div>
+  </PageWrapper>
 </template>
 <script lang="ts" setup>
-  import { reactive, onMounted, ref } from 'vue';
+  import { BasicTable, useTable } from '@/components/Table';
-  import { useTable } from '@/components/Table';
  import { PageWrapper } from '@/components/Page';
+  import { Description } from '@/components/Description';
+  import {
+    refundSchema,
+    columns,
+    indexColumns,
+    mainSchema,
+    lastSchema,
+  } from '@/views/metadata/metadataComparison/data';
+  import {
+    lastData,
+    lastTableData,
+    lastTableIndexData,
+    mainData,
+    mainTableData,
+    mainTableIndexData,
+  } from '@/views/metadata/metadataComparison/metadataComparisomData';
  import { useMessage } from '@/hooks/web/useMessage';
-  import { useModal } from '@/components/Modal';
+  import { BasicForm, useForm } from '@/components/Form';
-  import { useRoute, onBeforeRouteLeave } from 'vue-router';
-  import { useFilterStore } from '@/store/modules/filterData';
-  import { sourceColumns, sourceSearchFormSchema } from '@/views/metadata/data';
-  import { metadataData } from '@/views/metadata/metadataData';
  defineOptions({ name: 'Metadata' });
-  const title = ref('admin-个人工作区');
  const { createMessage } = useMessage();
-  const filterStore = useFilterStore();
+  const [registerMainForm] = useForm({
-  const route = useRoute();
+    labelWidth: 100,
-  const [registerModal, { openModal }] = useModal();
+    schemas: mainSchema,
-  const searchInfo = reactive<Recordable>({});
+    showActionButtonGroup: false,
-  const tableData = ref([]);
+  });
-  const selectedNode = ref(null);
+  const [registerLastForm] = useForm({
-  const [registerTable, { reload, updateTableDataRecord, getSearchInfo, getForm }] = useTable({
+    labelWidth: 100,
-    title: title,
+    schemas: lastSchema,
-    api: async () => {
+    showActionButtonGroup: false,
-      const response = {
+  });
-        pageNum: '1',
+  const [registerMainTable] = useTable({
-        pageSize: '10',
+    dataSource: mainTableData,
-        pages: '1',
+    columns,
-        total: tableData.value.length,
+    pagination: false,
-        code: '',
-        message: '',
-        data: [],
-      };
-      //过滤data中的数据，取出等于params.deptId的数据
-      var data = [];
-      data = tableData.value.filter((item) => item.parentId !== 0);
-      return { ...response, data: data };
-    },
-    rowKey: 'businessId',
-    striped: false,
-    columns: sourceColumns,
-    formConfig: {
-      labelWidth: 120,
-      schemas: sourceSearchFormSchema,
-      autoSubmitOnEnter: true,
-      resetFunc: () => {},
-    },
-    useSearchForm: true,
    showIndexColumn: false,
-    showTableSetting: false,
+    scroll: { y: 300 },
-    bordered: true,
-    handleSearchInfoFn(info) {
-      tableData.value = metadataData.filter(
-        (item) =>
-          (info.name === undefined || item.name.includes(info.name)) &&
-          (info.workSpaceName === undefined ||
-            info.workSpaceName === '数据库对象资源' ||
-            item.workSpaceName.includes(info.workSpaceName)),
-      );
-      console.log('tableData', tableData.value);
-      console.log('info', info);
-      return info;
-    },
  });
-  onMounted(() => {
+  const [registerLastTable] = useTable({
-    tableData.value = metadataData;
+    dataSource: lastTableData,
-    const path = route.path;
+    columns,
-    if (filterStore.getSearchParams[path]) {
+    pagination: false,
-      if (JSON.parse(filterStore.getSearchParams[path] !== {})) {
+    showIndexColumn: false,
-        const params = JSON.parse(filterStore.getSearchParams[path]);
+    scroll: { y: 300 },
-        console.log('11111111111111111111111111111', params);
-        getForm().setFieldsValue({
-          page: params.page,
-          pageSize: params.pageSize,
-          username: params.username,
-          flag: params.flag,
-        });
-        searchInfo.deptId = params.deptId;
-      }
-    }
  });
-  onBeforeRouteLeave((to, from, next) => {
+  const [registerMainIndexTable] = useTable({
-    const params = Object.assign({}, getSearchInfo(), getForm().getFieldsValue());
+    dataSource: mainTableIndexData,
-    // console.log('path', from.path);
+    columns: indexColumns,
-    // console.log('params', params);
+    pagination: false,
-    filterStore.setSearchParams({
+    showIndexColumn: false,
-      path: from.path,
+    scroll: { y: 300 },
-      param: {
-        ...params,
-      },
-    });
-    next(); // 允许导航
  });
-</script>
+  const [registerLastIndexTable] = useTable({
+    dataSource: lastTableIndexData,
-<style scoped>
+    columns: indexColumns,
-  .charts-container {
+    pagination: false,
-    display: flex;
+    showIndexColumn: false,
-    justify-content: space-between;
+    scroll: { y: 300 },
-    gap: 20px;
+  });
-  }
+  function handleImport() {
+    createMessage.success('导出完成');
-  .chart {
-    margin: 20px 0 0 15px;
-    width: calc(50% - 10px); /* 确保两个图表并排显示 */
-    height: 400px;
-    background-color: white;
  }
-</style>
+</script>
--- a/src/views/metadata/metadataComparison/metadataComparisomData.ts
+++ b/src/views/metadata/metadataComparison/metadataComparisomData.ts
+export const mainData = {
+  dataSource: 'mysql24.connector_foundation1.tb_1',
+  size: '254K',
+  type: 'MySQL',
+  owner: '张三',
+  changeTime: '2023-06-14 10:04:04',
+  remark: '无',
+};
+export const lastData = {
+  dataSource: 'mysql24.connector_foundation1.tb_1',
+  size: '254K',
+  type: 'MySQL',
+  owner: '张三',
+  changeTime: '2023-06-14 10:04:04',
+  remark: '无',
+};
+export const mainTableData: any[] = [
+  {
+    name: 'ID',
+    type: 'INT',
+    length: 11,
+    precision: null,
+    isNull: 'false',
+    remark: '主键',
+  },
+  {
+    name: 'Name',
+    type: 'VARCHAR',
+    length: 255,
+    precision: null,
+    isNull: 'true',
+    remark: '姓名',
+  },
+  {
+    name: 'Age',
+    type: 'TINYINT',
+    length: 3,
+    precision: null,
+    isNull: 'true',
+    remark: '年龄',
+  },
+  {
+    name: 'BirthDate',
+    type: 'DATE',
+    length: null,
+    precision: null,
+    isNull: 'true',
+    remark: '出生日期',
+  },
+  {
+    name: 'Email',
+    type: 'VARCHAR',
+    length: 100,
+    precision: null,
+    isNull: 'true',
+    remark: '电子邮件',
+  },
+  {
+    name: 'Salary',
+    type: 'DECIMAL',
+    length: 10,
+    precision: 2,
+    isNull: 'true',
+    remark: '薪资',
+  },
+];
+export const lastTableData: any[] = [
+  {
+    name: 'ID',
+    type: 'INT',
+    length: 11,
+    precision: null,
+    isNull: 'false',
+    remark: '主键',
+  },
+  {
+    name: 'Name',
+    type: 'VARCHAR',
+    length: 255,
+    precision: null,
+    isNull: 'false',
+    remark: '姓名',
+  },
+  {
+    name: 'Age',
+    type: 'TINYINT',
+    length: 3,
+    precision: null,
+    isNull: 'true',
+    remark: '年龄',
+  },
+  {
+    name: 'BirthDate',
+    type: 'DATE',
+    length: null,
+    precision: null,
+    isNull: 'true',
+    remark: '出生日期',
+  },
+  {
+    name: 'Email',
+    type: 'VARCHAR',
+    length: 100,
+    precision: null,
+    isNull: 'true',
+    remark: '电子邮件',
+  },
+  {
+    name: 'Salary',
+    type: 'DECIMAL',
+    length: 10,
+    precision: 2,
+    isNull: 'true',
+    remark: '薪资',
+  },
+];
+export const mainTableIndexData: any[] = [
+  {
+    name: 'name',
+    type: 'UNIQUE',
+    filed: 'name',
+  },
+];
+export const lastTableIndexData: any[] = [];
+export const treeData: any[] = [
+  {
+    title: '物理模型',
+    businessId: '1',
+    parentId: '0',
+    children: [
+      {
+        title: '工作区1',
+        businessId: '11',
+        parentId: '1',
+        children: [
+          {
+            title: 'mysql1',
+            businessId: '111',
+            parentId: '11',
+          },
+          {
+            title: 'mysql2',
+            businessId: '112',
+            parentId: '11',
+          },
+        ],
+      },
+      {
+        title: '工作区2',
+        businessId: '12',
+        parentId: '1',
+        children: [
+          {
+            title: 'mysql3',
+            businessId: '121',
+            parentId: '12',
+          },
+          {
+            title: 'mysql4',
+            businessId: '122',
+            parentId: '12',
+          },
+        ],
+      },
+    ],
+  },
+];