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

src/views/realTimeSync/dataBaseToDataBase/addBaseRulesModal.vue

+<template>
+  <BasicModal
+    width="40%"
+    v-bind="$attrs"
+    @register="registerModal"
+    :title="title"
+    @ok="handleSubmit"
+  >
+    <BasicForm @register="registerForm">
+      <template #tableName>
+        <BasicTable @register="registerTable">
+          <template #toolbar>
+            <a-button type="primary" @click="handleAdd">添加</a-button>
+          </template>
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'action'">
+              <TableAction
+                :actions="[
+                  {
+                    icon: 'ic:outline-delete-outline',
+                    onClick: handleDeleteRule.bind(null, record),
+                  },
+                ]"
+              />
+            </template>
+          </template>
+        </BasicTable>
+      </template>
+      <template #choseTable>
+        <BasicTable @register="registerChoseTable">
+          <template #toolbar>
+            <a-button type="primary" @click="handleAdd">选择数据库</a-button>
+          </template>
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'action'">
+              <TableAction
+                :actions="[
+                  {
+                    icon: 'ic:outline-delete-outline',
+                    onClick: handleDeleteRule.bind(null, record),
+                  },
+                ]"
+              />
+            </template>
+          </template>
+        </BasicTable>
+      </template>
+    </BasicForm>
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import { BasicForm, useForm } from '@/components/Form';
+  import {
+    addBaseRulesChoseTableColumns,
+    addBaseRulesColumns,
+    addBaseRulesSchema,
+  } from '@/views/realTimeSync/dataBaseToDataBase/data';
+  import { BasicTable, TableAction, useTable } from '@/components/Table';
+
+  defineOptions({ name: 'KnowledgeModal' });
+
+  const emit = defineEmits(['success', 'register']);
+  const { createMessage } = useMessage();
+  const title = ref();
+  const tableData = ref([]);
+  //获取接口数据并放在下拉框里（这里是打开了一个弹框）
+  //初始化表单
+  const [registerForm, { resetFields }] = useForm({
+    labelWidth: 100,
+    labelAlign: 'left',
+    baseColProps: { lg: 24, md: 24 },
+    schemas: addBaseRulesSchema,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 23,
+    },
+  });
+
+  const [registerTable, { reload }] = useTable({
+    api: async () => {
+      const response = {
+        pageNum: '1',
+        pageSize: '10',
+        pages: '1',
+        total: tableData.value.length,
+        code: '',
+        message: '',
+        data: [],
+      };
+      let data = [];
+      data = tableData.value;
+      return { ...response, data: data };
+    },
+    pagination: false,
+    columns: addBaseRulesColumns,
+    useSearchForm: false,
+    showTableSetting: false,
+    actionColumn: {
+      width: 50,
+      title: '操作',
+      dataIndex: 'action',
+    },
+    scroll: { y: 500 },
+    bordered: true,
+    showIndexColumn: false,
+  });
+  const [registerChoseTable, { reload: reloadChoseTable }] = useTable({
+    api: async () => {
+      const response = {
+        pageNum: '1',
+        pageSize: '10',
+        pages: '1',
+        total: tableData.value.length,
+        code: '',
+        message: '',
+        data: [],
+      };
+      let data = [];
+      data = tableData.value;
+      return { ...response, data: data };
+    },
+    pagination: false,
+    columns: addBaseRulesChoseTableColumns,
+    useSearchForm: false,
+    showTableSetting: false,
+    actionColumn: {
+      width: 50,
+      title: '操作',
+      dataIndex: 'action',
+    },
+    scroll: { y: 500 },
+    bordered: true,
+    showIndexColumn: false,
+  });
+
+  //初始化弹框
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    resetFields;
+    setModalProps({ confirmLoading: false });
+    title.value = data.title;
+  });
+
+  function handleAdd() {
+    tableData.value.push({
+      businessId: tableData.value.length + 1,
+      dataSource: '',
+      dataTopic: '',
+    });
+    reload();
+    reloadChoseTable();
+  }
+  /** 删除按钮*/
+  function handleDeleteRule(record: Recordable) {
+    tableData.value.splice(
+      tableData.value.findIndex((item) => item.businessId === record.businessId),
+      1,
+    );
+    createMessage.success('删除成功!');
+    reload();
+    reloadChoseTable();
+  }
+  async function handleSubmit() {
+    closeModal();
+    createMessage.success('提交成功');
+    resetFields;
+  }
+</script>

src/views/realTimeSync/dataBaseToDataBase/addFieldRulesModal.vue

+<template>
+  <BasicModal
+    width="40%"
+    v-bind="$attrs"
+    @register="registerModal"
+    :title="title"
+    @ok="handleSubmit"
+  >
+    <BasicForm @register="registerForm">
+      <template #addField>
+        <Alert
+          show-icon
+          message="作用范围内的数据表的新增字段会自动匹配当前映射规则。"
+          type="info"
+          style="font-size: 15px"
+        />
+      </template>
+      <template #choseTable>
+        <BasicTable @register="registerTable">
+          <template #toolbar>
+            <a-button type="primary">添加数据表</a-button>
+          </template>
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'action'">
+              <TableAction
+                :actions="[
+                  {
+                    icon: 'ic:outline-delete-outline',
+                    onClick: handleDeleteRule.bind(null, record),
+                  },
+                ]"
+              />
+            </template>
+          </template>
+        </BasicTable>
+      </template>
+    </BasicForm>
+    <BasicTable @register="registerAddTable">
+      <template #toolbar>
+        <a-button type="primary" @click="handleAdd">添加</a-button>
+      </template>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'action'">
+          <TableAction
+            :actions="[
+              {
+                icon: 'ic:outline-delete-outline',
+                onClick: handleDeleteRule.bind(null, record),
+              },
+            ]"
+          />
+        </template>
+      </template>
+    </BasicTable>
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import { BasicForm, useForm } from '@/components/Form';
+  import {
+    addFieldRulesColumns,
+    addTableRulesSchema,
+    getMetadataColumns,
+  } from '@/views/realTimeSync/dataBaseToDataBase/data';
+  import { BasicTable, TableAction, useTable } from '@/components/Table';
+  import { getMetadataTableList } from '@/views/realTimeSync/dataBaseToDataBase/dataBaseData';
+  import { Alert } from 'ant-design-vue';
+
+  defineOptions({ name: 'KnowledgeModal' });
+
+  const emit = defineEmits(['success', 'register']);
+  const { createMessage } = useMessage();
+  const title = ref();
+  const tableData = ref(getMetadataTableList);
+  const addFieldData = ref([]);
+  //获取接口数据并放在下拉框里（这里是打开了一个弹框）
+  //初始化表单
+  const [registerForm, { resetFields }] = useForm({
+    labelWidth: 100,
+    labelAlign: 'left',
+    baseColProps: { lg: 24, md: 24 },
+    schemas: addTableRulesSchema,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 23,
+    },
+  });
+  const [registerTable] = useTable({
+    api: async () => {
+      const response = {
+        pageNu: '1',
+        pageSize: '5',
+        pages: '1',
+        total: tableData.value.length,
+        code: '',
+        message: '',
+        data: tableData.value,
+      };
+      return { ...response };
+    },
+    scroll: { y: 500 },
+    actionColumn: {
+      width: 50,
+      title: '操作',
+      dataIndex: 'action',
+    },
+    columns: getMetadataColumns,
+    showTableSetting: false,
+    striped: false,
+    showIndexColumn: false,
+    bordered: false,
+  });
+
+  const [registerAddTable, { reload }] = useTable({
+    api: async () => {
+      const response = {
+        pageNum: '1',
+        pageSize: '10',
+        pages: '1',
+        total: addFieldData.value.length,
+        code: '',
+        message: '',
+        data: [],
+      };
+      let data = [];
+      data = addFieldData.value;
+      return { ...response, data: data };
+    },
+    pagination: false,
+    columns: addFieldRulesColumns,
+    useSearchForm: false,
+    showTableSetting: false,
+    actionColumn: {
+      width: 50,
+      title: '操作',
+      dataIndex: 'action',
+    },
+    scroll: { y: 500 },
+    bordered: true,
+    showIndexColumn: false,
+  });
+  //初始化弹框
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    resetFields;
+    setModalProps({ confirmLoading: false });
+    title.value = data.title;
+  });
+
+  function handleAdd() {
+    addFieldData.value.push({
+      id: addFieldData.value.length + 1,
+      name: '',
+      type: '',
+      defaultValue: '',
+    });
+    console.log(addFieldData.value);
+    reload();
+  }
+  /** 删除按钮*/
+  function handleDeleteRule(record: Recordable) {
+    addFieldData.value.splice(
+      addFieldData.value.findIndex((item) => item.id === record.id),
+      1,
+    );
+    console.log(addFieldData.value);
+    createMessage.success('删除成功!');
+    reload();
+  }
+  async function handleSubmit() {
+    closeModal();
+    createMessage.success('提交成功');
+    resetFields;
+  }
+</script>

src/views/realTimeSync/dataBaseToDataBase/addTableRulesModal.vue

+<template>
+  <BasicModal
+    width="40%"
+    v-bind="$attrs"
+    @register="registerModal"
+    :title="title"
+    @ok="handleSubmit"
+  >
+    <BasicForm @register="registerForm">
+      <template #choseTable>
+        <BasicTable @register="registerTable">
+          <template #toolbar>
+            <a-button type="primary">选择数据表</a-button>
+          </template>
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'action'">
+              <TableAction
+                :actions="[
+                  {
+                    icon: 'ic:outline-delete-outline',
+                    onClick: handleDeleteRule.bind(null, record),
+                  },
+                ]"
+              />
+            </template>
+          </template>
+        </BasicTable>
+      </template>
+    </BasicForm>
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import { BasicForm, useForm } from '@/components/Form';
+  import {
+    addTableRulesSchema,
+    getMetadataColumns,
+  } from '@/views/realTimeSync/dataBaseToDataBase/data';
+  import { BasicTable, TableAction, useTable } from '@/components/Table';
+  import { getMetadataTableList } from '@/views/realTimeSync/dataBaseToDataBase/dataBaseData';
+
+  defineOptions({ name: 'KnowledgeModal' });
+
+  const emit = defineEmits(['success', 'register']);
+  const { createMessage } = useMessage();
+  const title = ref();
+  const tableData = ref(getMetadataTableList);
+  //获取接口数据并放在下拉框里（这里是打开了一个弹框）
+  //初始化表单
+  const [registerForm, { resetFields }] = useForm({
+    labelWidth: 100,
+    labelAlign: 'left',
+    baseColProps: { lg: 24, md: 24 },
+    schemas: addTableRulesSchema,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 23,
+    },
+  });
+  const [registerTable, { reload, getDataSource, getRowSelection, setSelectedRowKeys }] = useTable({
+    api: async () => {
+      const response = {
+        pageNu: '1',
+        pageSize: '5',
+        pages: '1',
+        total: tableData.value.length,
+        code: '',
+        message: '',
+        data: tableData.value,
+      };
+      return { ...response };
+    },
+    scroll: { y: 500 },
+    actionColumn: {
+      width: 50,
+      title: '操作',
+      dataIndex: 'action',
+    },
+    columns: getMetadataColumns,
+    showTableSetting: false,
+    striped: false,
+    showIndexColumn: false,
+    bordered: false,
+  });
+
+  //初始化弹框
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    resetFields;
+    setModalProps({ confirmLoading: false });
+    title.value = data.title;
+  });
+
+  /** 删除按钮*/
+  function handleDeleteRule(record: Recordable) {
+    tableData.value.splice(
+      tableData.value.findIndex((item) => item.businessId === record.businessId),
+      1,
+    );
+    createMessage.success('删除成功!');
+    reload();
+  }
+  async function handleSubmit() {
+    closeModal();
+    createMessage.success('提交成功');
+    resetFields;
+  }
+</script>

src/views/realTimeSync/dataBaseToDataBase/data.ts

@@ -733,3 +733,268 @@ export const serverSourceOptionsColumns: BasicColumn[] = [
     width: 120,
   },
 ];
+export const addBaseRulesSchema: FormSchema[] = [
+  {
+    field: 'name',
+    label: '规则名称',
+    component: 'Input',
+    colProps: { lg: 24, md: 24 },
+    required: true,
+  },
+  {
+    field: 'loadType',
+    label: '规则类型',
+    component: 'RadioGroup',
+    defaultValue: '1',
+    componentProps: {
+      options: [
+        { label: '批量映射数据库', value: '1' },
+        { label: '自定义库名映射规则', value: '2' },
+      ],
+    },
+  },
+  {
+    field: 'range',
+    label: '作用范围',
+    component: 'RadioGroup',
+    defaultValue: '1',
+    componentProps: {
+      options: [
+        { label: '全局', value: '1' },
+        { label: '自定义范围', value: '2' },
+      ],
+    },
+    ifShow: ({ model }) => model.loadType === '2',
+  },
+  {
+    field: 'choseTable',
+    label: '',
+    slot: 'choseTable',
+    ifShow: ({ model }) => model.loadType === '2' && model.range === '2',
+    colProps: { lg: 24, md: 24 },
+  },
+  {
+    field: 'prefix',
+    label: '添加前缀',
+    component: 'Input',
+    colProps: { lg: 24, md: 24 },
+    ifShow: ({ model }) => model.loadType === '2',
+  },
+  {
+    field: 'suffix',
+    label: '添加后缀',
+    component: 'Input',
+    colProps: { lg: 24, md: 24 },
+    ifShow: ({ model }) => model.loadType === '2',
+  },
+  {
+    field: 'change',
+    label: '替换',
+    component: 'Input',
+    colProps: { lg: 12, md: 12 },
+    ifShow: ({ model }) => model.loadType === '2',
+  },
+  {
+    field: 'onChange',
+    label: '替换为',
+    component: 'Input',
+    labelWidth: 50,
+    colProps: { lg: 12, md: 12 },
+    ifShow: ({ model }) => model.loadType === '2',
+  },
+  {
+    field: 'tableName',
+    label: '',
+    slot: 'tableName',
+    ifShow: ({ model }) => model.loadType === '1',
+    colProps: { lg: 24, md: 24 },
+  },
+];
+export const addBaseRulesColumns: BasicColumn[] = [
+  {
+    title: '源库',
+    dataIndex: 'dataSource',
+    width: 120,
+    edit: true,
+    editable: true,
+    editComponent: 'Select',
+    editComponentProps: {
+      options: [
+        { label: 'fbs_1_flashsyncA_stable3.flashsync_stable1', value: '1' },
+        { label: 'fbs_1_flashsyncA_stable3.flashsync_stable2', value: '2' },
+      ],
+    },
+  },
+  {
+    title: '目标库',
+    dataIndex: 'dataTopic',
+    width: 120,
+    edit: true,
+    editable: true,
+    editComponent: 'Select',
+    editComponentProps: {
+      options: [
+        { label: 'fbs_1_flashsyncA_stable3.flashsync_stable1', value: '1' },
+        { label: 'fbs_1_flashsyncA_stable3.flashsync_stable2', value: '2' },
+      ],
+    },
+  },
+];
+export const addBaseRulesChoseTableColumns: BasicColumn[] = [
+  {
+    title: '源库',
+    dataIndex: 'dataSource',
+    width: 120,
+    edit: true,
+    editable: true,
+    editComponent: 'Select',
+    editComponentProps: {
+      options: [
+        { label: 'fbs_1_flashsyncA_stable3.flashsync_stable1', value: '1' },
+        { label: 'fbs_1_flashsyncA_stable3.flashsync_stable2', value: '2' },
+      ],
+    },
+  },
+];
+export const addTableRulesSchema: FormSchema[] = [
+  {
+    field: 'name',
+    label: '规则名称',
+    component: 'Input',
+    colProps: { lg: 24, md: 24 },
+    required: true,
+  },
+  {
+    field: 'range',
+    label: '作用范围',
+    component: 'RadioGroup',
+    defaultValue: '1',
+    componentProps: {
+      options: [
+        { label: '全局', value: '1' },
+        { label: '自定义范围', value: '2' },
+      ],
+    },
+  },
+  {
+    field: 'addField',
+    label: '',
+    slot: 'addField',
+    colProps: { lg: 24, md: 24 },
+  },
+  {
+    field: 'choseTable',
+    label: '',
+    slot: 'choseTable',
+    ifShow: ({ model }) => model.range === '2',
+    colProps: { lg: 24, md: 24 },
+  },
+  {
+    field: 'prefix',
+    label: '添加前缀',
+    component: 'Input',
+    colProps: { lg: 24, md: 24 },
+  },
+  {
+    field: 'suffix',
+    label: '添加后缀',
+    component: 'Input',
+    colProps: { lg: 24, md: 24 },
+  },
+  {
+    field: 'change',
+    label: '替换',
+    component: 'Input',
+    colProps: { lg: 12, md: 12 },
+  },
+  {
+    field: 'onChange',
+    label: '替换为',
+    component: 'Input',
+    labelWidth: 50,
+    colProps: { lg: 12, md: 12 },
+  },
+];
+export const fieldMappingColumns: BasicColumn[] = [
+  {
+    title: '规则名称',
+    dataIndex: 'name',
+    width: 140,
+  },
+  {
+    title: '规则类型',
+    dataIndex: 'type',
+    width: 140,
+  },
+  {
+    title: '执行顺序',
+    width: 50,
+    dataIndex: 'executionSequence',
+    slots: { customRender: 'executionSequence' },
+  },
+];
+export const addFieldRulesColumns: BasicColumn[] = [
+  {
+    title: '字段名',
+    dataIndex: 'name',
+    width: 120,
+    edit: true,
+    editable: true,
+  },
+  {
+    title: '字段类型',
+    dataIndex: 'type',
+    width: 120,
+    edit: true,
+    editable: true,
+  },
+  {
+    title: '默认值',
+    dataIndex: 'defaultValue',
+    width: 120,
+    edit: true,
+    editable: true,
+  },
+];
+export const fieldMappingFormSchema: FormSchema[] = [
+  {
+    field: 'sourceTable',
+    label: '',
+    component: 'Select',
+    defaultValue: 'GXXADMIN',
+    componentProps: {
+      options: [
+        { label: 'GXXADMIN', value: 'GXXADMIN' },
+        { label: 'GXX_ADMIN', value: 'GXX_ADMIN' },
+        { label: 'GXX_ADMIN_1', value: 'GXX_ADMIN_1' },
+      ],
+    },
+    colProps: { lg: 6, md: 6 },
+  },
+  {
+    field: 'topicTable',
+    label: '',
+    component: 'Select',
+    defaultValue: 'FLASH_ORCL',
+    componentProps: {
+      options: [
+        { label: 'FLASH_ORCL', value: 'FLASH_ORCL' },
+        { label: 'FLASH_ORCL_1', value: 'FLASH_ORCL_1' },
+        { label: 'FLASH_ORCL_2', value: 'FLASH_ORCL_2' },
+      ],
+    },
+    colProps: { lg: 6, md: 6 },
+  },
+];
+export const fieldMappingRulesTableColumns: BasicColumn[] = [
+  {
+    title: '源表字段名',
+    dataIndex: 'dataSourceName',
+    width: 120,
+  },
+  {
+    title: '目标字段名',
+    dataIndex: 'topicName',
+    width: 120,
+  },
+];

src/views/realTimeSync/dataBaseToDataBase/dataBaseData.ts

@@ -1038,6 +1038,18 @@ export const tableMappingData: any[] = [
     dataBase: '',
   },
 ];
+export const fieldMappingData: any[] = [
+  {
+    businessId: '1',
+    name: '字段规则1',
+    type: '字段名规则1',
+  },
+  {
+    businessId: '1',
+    name: '字段规则2',
+    type: '字段名规则2',
+  },
+];
 export const writePolicyData: any[] = [
   {
     topicName: '0a5c81a6fd364805961918cd9764241d_01',
@@ -1065,3 +1077,29 @@ export const jsonData = `
 {
 }
 `;
+export const fieldMappingRulesTableData: any[] = [
+  {
+    topicName: 'ID',
+    dataSourceName: 'ID',
+  },
+  {
+    topicName: 'PERSON_NAME',
+    dataSourceName: 'pre_PERSON_NAME',
+  },
+  {
+    topicName: 'AGE',
+    dataSourceName: 'pre_AGE',
+  },
+  {
+    topicName: 'HEIGHT',
+    dataSourceName: 'pre_HEIGHT',
+  },
+  {
+    topicName: 'GENDER',
+    dataSourceName: 'pre_GENDER',
+  },
+  {
+    topicName: 'SOURCE',
+    dataSourceName: 'pre_SOURCE',
+  },
+];

src/views/realTimeSync/dataBaseToDataBase/optionPage.vue

@@ -13,8 +13,8 @@
           <Icon icon="iconoir:db" :size="40" :color="'#9064e9'" />
         </div>
         <div>
-          <div class="title">离线加载</div>
-          <div class="path">数据加载/离线加载</div>
+          <div class="title">实时同步-DEMO</div>
+          <div class="path">实时同步/DEMO工作区/DEMO/实时同步-DEMO</div>
         </div>
         <div class="buttonGroup">
           <a-button type="primary" @click="handleOperation">跳转运维</a-button>
@@ -268,9 +268,98 @@
           <div class="flex">
             <div style="width: 30%">
               <BasicForm @register="registerTableMappingForm" />
-              <BasicTable title="库名映射规则" @register="registerTableMappingTable">
+              <div>
+                <BasicTable title="库名映射规则" @register="registerTableMappingTable">
+                  <template #toolbar>
+                    <a-button type="primary" @click="addBaseRules">添加规则</a-button>
+                  </template>
+                  <template #executionSequence="{ index }">
+                    <div style="display: flex; justify-content: center; color: dimgray">
+                      <Icon
+                        style="font-size: 30px !important"
+                        icon="material-symbols-light:keyboard-double-arrow-up"
+                        @click="handleMoveTop(index)"
+                      />
+                      <Icon
+                        style="font-size: 20px !important; margin-right: 5px"
+                        icon="oui:arrow-down"
+                        @click="handleMoveDown(index)"
+                      />
+                      <Icon
+                        style="font-size: 20px !important"
+                        icon="oui:arrow-up"
+                        @click="handleMoveUp(index)"
+                      />
+                    </div>
+                  </template>
+                  <template #bodyCell="{ column, record }">
+                    <template v-if="column.key === 'action'">
+                      <TableAction
+                        :actions="[
+                          {
+                            icon: 'ic:outline-delete-outline',
+                            onClick: handleDeleteRule.bind(null, record),
+                          },
+                        ]"
+                      />
+                    </template>
+                  </template>
+                </BasicTable>
+              </div>
+              <div>
+                <BasicTable title="表名映射规则" @register="registerTableMappingTable">
+                  <template #toolbar>
+                    <a-button type="primary" @click="addTableRules">添加规则</a-button>
+                  </template>
+                  <template #executionSequence="{ index }">
+                    <div style="display: flex; justify-content: center; color: dimgray">
+                      <Icon
+                        style="font-size: 30px !important"
+                        icon="material-symbols-light:keyboard-double-arrow-up"
+                        @click="handleMoveTop(index)"
+                      />
+                      <Icon
+                        style="font-size: 20px !important; margin-right: 5px"
+                        icon="oui:arrow-down"
+                        @click="handleMoveDown(index)"
+                      />
+                      <Icon
+                        style="font-size: 20px !important"
+                        icon="oui:arrow-up"
+                        @click="handleMoveUp(index)"
+                      />
+                    </div>
+                  </template>
+                  <template #bodyCell="{ column, record }">
+                    <template v-if="column.key === 'action'">
+                      <TableAction
+                        :actions="[
+                          {
+                            icon: 'ic:outline-delete-outline',
+                            onClick: handleDeleteRule.bind(null, record),
+                          },
+                        ]"
+                      />
+                    </template>
+                  </template>
+                </BasicTable>
+              </div>
+              <a-button type="primary" @click="saveAndPreviewTableMapping">保存并预览</a-button>
+            </div>
+            <div style="width: 70%">
+              <BasicTable
+                v-if="tableMappingRulesTableShow"
+                @register="registerDataDirectionTable"
+              />
+            </div>
+          </div>
+        </TabPane>
+        <TabPane v-if="tabKey === '3'" key="6" tab="字段映射">
+          <div class="flex">
+            <div style="width: 50%">
+              <BasicTable title="规则配置" @register="registerFieldMappingTable">
                 <template #toolbar>
-                  <a-button type="primary" @click="handleDeleteRules">删除</a-button>
+                  <a-button type="primary" @click="addFieldRules">字段映射</a-button>
                 </template>
                 <template #executionSequence="{ index }">
                   <div style="display: flex; justify-content: center; color: dimgray">
@@ -294,7 +383,6 @@
                 <template #bodyCell="{ column, record }">
                   <template v-if="column.key === 'action'">
                     <TableAction
-                      stopButtonPropagation
                       :actions="[
                         {
                           icon: 'ic:outline-delete-outline',
@@ -306,16 +394,18 @@
                 </template>
               </BasicTable>
             </div>
-            <div style="width: 70%">
-              <BasicTable v-if="mappingRulesTableShow" @register="registerMappingRulesTable" />
+            <div style="width: 50%">
+              <Description size="middle" title="数据表" :bordered="false" />
+              <BasicForm @register="registerFieldMappingForm">
+                <template #formFooter>
+                  <a-button type="primary">保存并预览</a-button>
+                </template>
+              </BasicForm>
+              <Description size="middle" title="相关规则" :bordered="false" />
+              <BasicTable @register="registerFieldMappingRulesTable" />
             </div>
           </div>
         </TabPane>
-        <TabPane v-if="tabKey === '3'" key="6" tab="字段映射">
-          <!--          <BasicForm>-->
-
-          <!--          </BasicForm>-->
-        </TabPane>
         <TabPane v-if="tabKey === '3'" key="7" tab="策略">
           <Description size="middle" title="写入速率策略" :bordered="false" />
           <Alert
@@ -429,6 +519,9 @@
     <GetMetadataModal @register="registerGetMetadataModal" />
     <SaveModal @register="registerSaveModal" />
     <VersionManageModal @register="registerVersionManageModal" />
+    <AddBaseRulesModal @register="registerAddBaseRulesModal" />
+    <AddTableRulesModal @register="registerAddTableRulesModal" />
+    <AddFieldRulesModal @register="registerAddFieldRulesModal" />
   </PageWrapper>
 </template>
 <script lang="ts" setup>
@@ -452,6 +545,9 @@
     policyOptionFormSchema,
     serverOptionsFormSchema,
     serverSourceOptionsColumns,
+    fieldMappingColumns,
+    fieldMappingFormSchema,
+    fieldMappingRulesTableColumns,
   } from './data';
   import Icon from '@/components/Icon/Icon.vue';
   import { useMessage } from '@/hooks/web/useMessage';
@@ -467,6 +563,8 @@
     tableMappingData,
     writePolicyData,
     jsonData,
+    fieldMappingData,
+    fieldMappingRulesTableData,
   } from './dataBaseData';
   import { router } from '@/router';
   import { BasicTable, useTable, TableAction } from '@/components/Table';
@@ -476,6 +574,9 @@
   import VersionManageModal from '@/views/dataIntegration/dataLoading/dataEntryLake/versionManageModal.vue';
   import { Description } from '@/components/Description';
   import { CodeEditor, MODE } from '@/components/CodeEditor';
+  import AddBaseRulesModal from './addBaseRulesModal.vue';
+  import AddTableRulesModal from './addTableRulesModal.vue';
+  import AddFieldRulesModal from './addFieldRulesModal.vue';
 
   const emit = defineEmits(['success', 'register']);
   const { createMessage, createConfirm } = useMessage();
@@ -488,12 +589,16 @@
   const n = ref(1);
   const mappingRulesTableShow = ref(false);
   const mappingRulesTopicTableShow = ref(false);
+  const tableMappingRulesTableShow = ref(false);
   const getMetadataTable = ref(getMetadataTableList);
   const tableDetail = ref(false);
 
   const [registerGetMetadataModal, { openModal: openGetMetadataModal }] = useModal();
   const [registerSaveModal, { openModal: openSaveModal }] = useModal();
   const [registerVersionManageModal, { openModal: openVersionManageModal }] = useModal();
+  const [registerAddBaseRulesModal, { openModal: openAddBaseRulesModal }] = useModal();
+  const [registerAddTableRulesModal, { openModal: openAddTableRulesModal }] = useModal();
+  const [registerAddFieldRulesModal, { openModal: openAddFieldRulesModal }] = useModal();
 
   const mappingRulesFormSchema: FormSchema[] = [
     {
@@ -592,6 +697,16 @@
       span: 23,
     },
   });
+  const [registerFieldMappingForm] = useForm({
+    labelWidth: 180,
+    labelAlign: 'left',
+    baseColProps: { lg: 24, md: 24 },
+    schemas: fieldMappingFormSchema,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 23,
+    },
+  });
   const [registerServerOptionsForm] = useForm({
     labelWidth: 110,
     labelAlign: 'left',
@@ -664,6 +779,13 @@
     showIndexColumn: false,
     scroll: { y: 500 },
   });
+  const [registerFieldMappingRulesTable] = useTable({
+    dataSource: fieldMappingRulesTableData,
+    columns: fieldMappingRulesTableColumns,
+    pagination: true,
+    showIndexColumn: false,
+    scroll: { y: 500 },
+  });
   const [registerWritePolicyTable] = useTable({
     dataSource: writePolicyData,
     columns: writePolicyColumns,
@@ -731,6 +853,18 @@
     },
     scroll: { y: 200 },
   });
+  const [registerFieldMappingTable] = useTable({
+    dataSource: fieldMappingData,
+    columns: fieldMappingColumns,
+    pagination: false,
+    showIndexColumn: false,
+    actionColumn: {
+      width: 50,
+      title: '操作',
+      dataIndex: 'action',
+    },
+    scroll: { y: 200 },
+  });
 
   const [registerDataSourceTable] = useTable({
     api: async () => {
@@ -879,7 +1013,24 @@
       title: '数据加载版本管理',
     });
   }
-
+  function addBaseRules() {
+    openAddBaseRulesModal(true, {
+      title: '库名映射规则',
+    });
+  }
+  function addTableRules() {
+    openAddTableRulesModal(true, {
+      title: '表名映射规则',
+    });
+  }
+  function addFieldRules() {
+    openAddFieldRulesModal(true, {
+      title: '字段名映射规则',
+    });
+  }
+  function saveAndPreviewTableMapping() {
+    tableMappingRulesTableShow.value = true;
+  }
   function handleDeleteRules() {
     const selectedKeys = getRowSelection().selectedRowKeys;
     if (selectedKeys !== undefined) {