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

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',
+  },
+];