修改数据库到数据库配置页面

src/views/realTimeSync/dataBaseToDataBase/data.ts

-import {BasicColumn, FormSchema} from "@/components/Table";
+import { BasicColumn, FormSchema } from '@/components/Table';
 
 export const columns: BasicColumn[] = [
   {
@@ -268,3 +268,58 @@ export const mappingRuleConfigurationColumns: BasicColumn[] = [
     slots: { customRender: 'executionSequence' },
   },
 ];
+export const dataDirectionColumns: BasicColumn[] = [
+  {
+    title: '源库',
+    dataIndex: 'dataBaseSource',
+    width: 120,
+  },
+  {
+    title: '目标库',
+    dataIndex: 'dataBaseDirection',
+    width: 120,
+  },
+];
+export const getMetadataColumns: BasicColumn[] = [
+  {
+    title: '数据库',
+    dataIndex: 'dataBase',
+    width: 80,
+  },
+  {
+    title: '表名',
+    dataIndex: 'tableName',
+    width: 120,
+  },
+];
+export const tableDetailColumns: BasicColumn[] = [
+  {
+    title: '列名',
+    dataIndex: 'name',
+    width: 80,
+  },
+  {
+    title: '详情',
+    dataIndex: 'detail',
+    width: 120,
+  },
+];
+export const tableDetailFormSchema: FormSchema[] = [
+  {
+    field: 'tableName',
+    label: '',
+    component: 'Select',
+    defaultValue: '1',
+    componentProps: {
+      showArrow: true,
+      mode: 'multiple',
+      options: [
+        { label: 'id', value: '1' },
+        { label: 'name', value: '2' },
+        { label: 'age', value: '3' },
+        { label: 'address', value: '4' },
+      ],
+    },
+    colProps: { lg: 12, md: 12 },
+  },
+];

src/views/realTimeSync/dataBaseToDataBase/dataBaseData.ts

@@ -838,3 +838,159 @@ export const tableTreeData = [
     sql: 'SELECT * FROM supplier_info', // 假设 supplier_info 表没有在 isCustomSQLTableList 中定义字段
   },
 ];
+export const dataDirectionData: any[] = [
+  {
+    dataBaseSource: '0a5ca1a6fd364a05961918cd97b4241d_01',
+    children: [
+      {
+        dataBaseSource: 'fbs 1 flashsyncA stable3.flashsync stable2',
+        dataBaseDirection: 'fbs 1 flashsyncA stable3.flashsync stable2',
+      },
+      {
+        dataBaseSource: 'fbs 1 flashsyncA stable3.flashsync stable2',
+        dataBaseDirection: 'fbs 1 flashsyncA stable3.flashsync stable2',
+      },
+      {
+        dataBaseSource: 'fbs 1 flashsyncA stable3.flashsync stable2',
+        dataBaseDirection: 'fbs 1 flashsyncA stable3.flashsync stable2',
+      },
+    ],
+    dataBaseDirection: '0a5ca1a6fd364a05961918cd97b4241d_01',
+  },
+  {
+    dataBaseSource: '0a5ca1a6fd364a05961918cd97b4241d_02',
+    children: [
+      {
+        dataBaseSource: 'fbs_1_flashsyncA_stable3.flashsync_stable2',
+        dataBaseDirection: 'fbs_1_flashsyncA_stable3.flashsync_stable2',
+      },
+      {
+        dataBaseSource: 'fbs_1_flashsyncA_stable3.flashsync_stable2',
+        dataBaseDirection: 'fbs_1_flashsyncA_stable3.flashsync_stable2',
+      },
+      {
+        dataBaseSource: 'fbs_1_flashsyncA_stable3.flashsync_stable2',
+        dataBaseDirection: 'fbs_1_flashsyncA_stable3.flashsync_stable2',
+      },
+    ],
+    dataBaseDirection: '0a5ca1a6fd364a05961918cd97b4241d_02',
+  },
+  {
+    dataBaseSource: '0a5ca1a6fd364a05961918cd97b4241d_03',
+    children: [
+      {
+        dataBaseSource: 'fbs_1_flashsyncA_stable3.flashsync_stable2',
+        dataBaseDirection: 'fbs_1_flashsyncA_stable3.flashsync_stable2',
+      },
+      {
+        dataBaseSource: 'fbs_1_flashsyncA_stable3.flashsync_stable2',
+        dataBaseDirection: 'fbs_1_flashsyncA_stable3.flashsync_stable2',
+      },
+      {
+        dataBaseSource: 'fbs_1_flashsyncA_stable3.flashsync_stable2',
+        dataBaseDirection: 'fbs_1_flashsyncA_stable3.flashsync_stable2',
+      },
+    ],
+    dataBaseDirection: '0a5ca1a6fd364a05961918cd97b4241d_03',
+  },
+];
+export const getMetadataTableList = [
+  {
+    dataBase: 'bm_datasource1',
+    businessId: '12',
+    children: [
+      {
+        tableName: 'bm_datasource',
+        businessId: '0',
+      },
+      {
+        tableName: 'user_info',
+        businessId: '1',
+      },
+      {
+        tableName: 'customer_details',
+        businessId: '2',
+      },
+    ],
+  },
+  {
+    dataBase: 'bm_datasource2',
+    businessId: '13',
+    children: [
+      {
+        tableName: 'order_history',
+        businessId: '3',
+      },
+      {
+        tableName: 'product_inventory',
+        businessId: '4',
+      },
+      {
+        tableName: 'transaction_logs',
+        businessId: '5',
+      },
+      {
+        tableName: 'employee_records',
+        businessId: '6',
+      },
+    ],
+  },
+  {
+    dataBase: 'bm_datasourc3',
+    businessId: '14',
+    children: [
+      {
+        tableName: 'payment_details',
+        businessId: '7',
+      },
+      {
+        tableName: 'shipping_addresses',
+        businessId: '8',
+      },
+    ],
+  },
+  {
+    dataBase: 'bm_datasource4',
+    businessId: '15',
+    children: [
+      {
+        tableName: 'invoice_data',
+        businessId: '9',
+      },
+      {
+        tableName: 'customer_feedback',
+        businessId: '10',
+      },
+      {
+        tableName: 'supplier_info',
+        businessId: '11',
+      },
+    ],
+  },
+];
+export const tableDetailData = [
+  {
+    name: 'id',
+    detail: 'INT(11,0)',
+  },
+  {
+    name: 'name',
+    detail: 'VARCHAR(255,0)',
+  },
+  {
+    name: 'age',
+    detail: 'INT(11,0)',
+  },
+  {
+    name: 'gender',
+    detail: 'VARCHAR(255,0)',
+  },
+  {
+    name: 'address',
+    detail: 'VARCHAR(255,0)',
+  },
+  {
+    name: 'phone',
+    detail: 'VARCHAR(255,0)',
+  },
+];

src/views/realTimeSync/dataBaseToDataBase/getMetadataModal.vue

+<template>
+  <BasicModal
+    width="35%"
+    v-bind="$attrs"
+    @register="registerModal"
+    title="获取元数据"
+    @ok="handleSubmit"
+  >
+    <div style="display: flex; justify-content: space-between">
+      <a-input-search style="width: 220px" />
+    </div>
+    <BasicTable @register="registerTable" />
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { BasicTable, useTable } from '@/components/Table';
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { getMetadataTableList } from './dataBaseData';
+  import { getMetadataColumns } from './data';
+  import { useMessage } from '@/hooks/web/useMessage';
+
+  const emit = defineEmits(['success', 'register']);
+  const unfold = ref(false);
+  let startId = ref();
+  const { createMessage } = useMessage();
+  let endId = ref();
+  let getMetadataTable = ref(getMetadataTableList);
+
+  const [registerTable, { reload, getDataSource, getRowSelection, setSelectedRowKeys }] = useTable({
+    api: async () => {
+      const response = {
+        pageNu: '1',
+        pageSize: '5',
+        pages: '1',
+        total: getMetadataTable.value.length,
+        code: '',
+        message: '',
+        data: getMetadataTable.value,
+      };
+      return { ...response };
+    },
+    scroll: { y: 500 },
+    rowKey: 'businessId',
+    rowSelection: true,
+    columns: getMetadataColumns,
+    showTableSetting: false,
+    striped: false,
+    showIndexColumn: false,
+    bordered: false,
+  });
+
+  //初始化弹框
+  const [registerModal, { closeModal }] = useModalInner(async () => {});
+
+  function handleClick() {
+    unfold.value = !unfold.value;
+  }
+
+  /**确定按钮*/
+  async function handleSubmit() {
+    createMessage.success('获取元数据成功');
+    closeModal();
+  }
+
+  function handleSelect() {
+    const selectedRowKeys = getRowSelection().selectedRowKeys;
+    const ids = ref([...selectedRowKeys]);
+    const dataIds = ref(getDataSource());
+
+    if (startId.value && endId.value) {
+      for (let i = startId.value - 1; i <= endId.value - 1 && i < getDataSource().length; i++) {
+        const businessId = dataIds.value[i].businessId;
+        if (!ids.value.includes(businessId)) {
+          ids.value.push(businessId);
+        }
+      }
+    }
+
+    setSelectedRowKeys(ids.value);
+  }
+
+  function handleResetInputs() {
+    const selectedRowKeys = getRowSelection().selectedRowKeys;
+    const ids = ref([...selectedRowKeys]);
+    const dataIds = ref(getDataSource());
+
+    if (startId.value && endId.value) {
+      const startIndex = startId.value - 1;
+      const endIndex = endId.value - 1;
+
+      // 过滤掉与 i 相等的值
+      const filteredIds = ids.value.filter((id) => {
+        for (let i = startIndex; i <= endIndex && i < getDataSource().length; i++) {
+          if (dataIds.value[i].businessId === id) {
+            return false;
+          }
+        }
+        return true;
+      });
+
+      // // 清空 startId 和 endId
+      // startId.value = null;
+      // endId.value = null;
+
+      setSelectedRowKeys(filteredIds);
+    }
+  }
+</script>
+<style scoped lang="scss">
+  .getMetadataInput {
+    width: 120px;
+  }
+</style>