修改数据库到数据库

src/views/realTimeSync/dataBaseToDataBase/addBaseRulesModal.vue

@@ -8,6 +8,7 @@
   >
     <BasicForm @register="registerForm">
       <template #tableName>
+        <div>
           <BasicTable @register="registerTable">
             <template #toolbar>
               <a-button type="primary" @click="handleAdd">添加</a-button>
@@ -25,6 +26,14 @@
               </template>
             </template>
           </BasicTable>
+        </div>
+        <div>
+          <BasicTable @register="registerPreviewTable">
+            <template #toolbar>
+              <a-button type="primary" @click="handlePreview">预览</a-button>
+            </template>
+          </BasicTable>
+        </div>
       </template>
       <template #choseTable>
         <BasicTable @register="registerChoseTable">
@@ -66,6 +75,7 @@
   const { createMessage } = useMessage();
   const title = ref();
   const tableData = ref([]);
+  const previewTableData = ref([]);
   //获取接口数据并放在下拉框里（这里是打开了一个弹框）
   //初始化表单
   const [registerForm, { resetFields }] = useForm({
@@ -103,11 +113,35 @@
       title: '操作',
       dataIndex: 'action',
     },
-    scroll: { y: 500 },
+    scroll: { y: 300 },
+    bordered: true,
+    showIndexColumn: false,
+  });
+  const [registerPreviewTable, { reload: reloadPreviewTable }] = useTable({
+    api: async () => {
+      const response = {
+        pageNum: '1',
+        pageSize: '10',
+        pages: '1',
+        total: previewTableData.value.length,
+        code: '',
+        message: '',
+        data: [],
+      };
+      let data = [];
+      data = previewTableData.value;
+      return { ...response, data: data };
+    },
+    pagination: false,
+    columns: addBaseRulesColumns,
+    useSearchForm: false,
+    showTableSetting: false,
+    scroll: { y: 300 },
     bordered: true,
     showIndexColumn: false,
   });
   const [registerChoseTable, { reload: reloadChoseTable }] = useTable({
+    title: '已选数据库: 0/2',
     api: async () => {
       const response = {
         pageNum: '1',
@@ -152,6 +186,10 @@
     reload();
     reloadChoseTable();
   }
+  function handlePreview() {
+    previewTableData.value = tableData.value;
+    reloadPreviewTable();
+  }
   /** 删除按钮*/
   function handleDeleteRule(record: Recordable) {
     tableData.value.splice(

src/views/realTimeSync/dataBaseToDataBase/addFieldRulesModal.vue

@@ -37,7 +37,7 @@
     </BasicForm>
     <BasicTable @register="registerAddTable">
       <template #toolbar>
-        <a-button type="primary" @click="handleAdd">添加</a-button>
+        <a-button type="primary" @click="handleAdd">添加字段</a-button>
       </template>
       <template #bodyCell="{ column, record }">
         <template v-if="column.key === 'action'">
@@ -60,7 +60,7 @@
   import { useMessage } from '@/hooks/web/useMessage';
   import { BasicForm, useForm } from '@/components/Form';
   import {
-    addFieldRulesColumns,
+    addFieldRulesColumns, addFieldRulesSchema,
     addTableRulesSchema,
     getMetadataColumns,
   } from '@/views/realTimeSync/dataBaseToDataBase/data';
@@ -81,7 +81,7 @@
     labelWidth: 100,
     labelAlign: 'left',
     baseColProps: { lg: 24, md: 24 },
-    schemas: addTableRulesSchema,
+    schemas: addFieldRulesSchema,
     showActionButtonGroup: false,
     actionColOptions: {
       span: 23,
@@ -114,6 +114,7 @@
   });
 
   const [registerAddTable, { reload }] = useTable({
+    title:'新增字段',
     api: async () => {
       const response = {
         pageNum: '1',

src/views/realTimeSync/dataBaseToDataBase/data.ts

@@ -294,6 +294,33 @@ export const mappingRuleConfigurationColumns: BasicColumn[] = [
     slots: { customRender: 'executionSequence' },
   },
 ];
+export const mappingRuleConfigurationFormSchema: FormSchema[] = [
+  {
+    field: 'name',
+    label: ' ',
+    labelWidth: 20,
+    componentProps: {
+      placeholder: '输入关键字搜索',
+    },
+    component: 'Input',
+    colProps: { span: 4 },
+  },
+  {
+    field: 'ruleType',
+    label: ' ',
+    labelWidth: 20,
+    componentProps: {
+      placeholder: '规则类型',
+      options: [
+        { label: '数据操作过滤', value: '1' },
+        { label: '数据值过滤', value: '2' },
+        { label: '字段过滤', value: '3' },
+      ],
+    },
+    component: 'Select',
+    colProps: { span: 4 },
+  },
+];
 export const dataDirectionColumns: BasicColumn[] = [
   {
     title: '源库',
@@ -306,6 +333,18 @@ export const dataDirectionColumns: BasicColumn[] = [
     width: 120,
   },
 ];
+export const dataDirectionFormSchema: FormSchema[] = [
+  {
+    field: 'name',
+    label: ' ',
+    labelWidth: 20,
+    componentProps: {
+      placeholder: '输入关键字搜索',
+    },
+    component: 'Input',
+    colProps: { span: 4 },
+  },
+];
 export const getMetadataColumns: BasicColumn[] = [
   {
     title: '数据库',
@@ -592,6 +631,18 @@ export const mappingRulesTableColumns: BasicColumn[] = [
     width: 120,
   },
 ];
+export const mappingRulesTableFormSchema: FormSchema[] = [
+  {
+    field: 'name',
+    label: ' ',
+    labelWidth: 20,
+    componentProps: {
+      placeholder: '输入关键字搜索',
+    },
+    component: 'Input',
+    colProps: { span: 6 },
+  },
+];
 export const tableMappingFormSchema: FormSchema[] = [
   {
     field: 'dataSource',
@@ -640,7 +691,7 @@ export const writePolicyColumns: BasicColumn[] = [
     width: 120,
   },
   {
-    title: '条数',
+    title: '写入策略条数',
     dataIndex: 'num',
     edit: true,
     editable: true,
@@ -858,7 +909,7 @@ export const addBaseRulesChoseTableColumns: BasicColumn[] = [
     },
   },
 ];
-export const addTableRulesSchema: FormSchema[] = [
+export const addFieldRulesSchema: FormSchema[] = [
   {
     field: 'name',
     label: '规则名称',
@@ -917,6 +968,59 @@ export const addTableRulesSchema: FormSchema[] = [
     colProps: { lg: 12, md: 12 },
   },
 ];
+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: '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: '规则名称',
@@ -961,7 +1065,7 @@ export const addFieldRulesColumns: BasicColumn[] = [
 export const fieldMappingFormSchema: FormSchema[] = [
   {
     field: 'sourceTable',
-    label: '',
+    label: ' ',
     component: 'Select',
     defaultValue: 'GXXADMIN',
     componentProps: {
@@ -975,7 +1079,7 @@ export const fieldMappingFormSchema: FormSchema[] = [
   },
   {
     field: 'topicTable',
-    label: '',
+    label: ' ',
     component: 'Select',
     defaultValue: 'FLASH_ORCL',
     componentProps: {
@@ -995,7 +1099,7 @@ export const fieldMappingRulesTableColumns: BasicColumn[] = [
     width: 120,
   },
   {
-    title: '目标字段名',
+    title: '目标表字段名',
     dataIndex: 'topicName',
     width: 120,
   },

src/views/realTimeSync/dataBaseToDataBase/dataBaseData.ts

@@ -1041,12 +1041,12 @@ export const tableMappingData: any[] = [
 export const fieldMappingData: any[] = [
   {
     businessId: '1',
-    name: '字段规则1',
+    name: 'gxxadmin.FLASH_TEST4添加前缀',
     type: '字段名规则1',
   },
   {
     businessId: '1',
-    name: '字段规则2',
+    name: 'gxxadmin.flashsync5替换文案',
     type: '字段名规则2',
   },
 ];

src/views/realTimeSync/dataBaseToDataBase/optionPage.vue

@@ -388,7 +388,7 @@
             <div style="width: 50%">
               <BasicTable title="规则配置" @register="registerFieldMappingTable">
                 <template #toolbar>
-                  <a-button type="primary" @click="addFieldRules">字段映射</a-button>
+                  <a-button type="primary" @click="addFieldRules">字段名映射</a-button>
                 </template>
                 <template #executionSequence="{ index }">
                   <div style="display: flex; justify-content: center; color: dimgray">
@@ -427,13 +427,20 @@
               <Description size="middle" title="数据表" :bordered="false" />
               <BasicForm @register="registerFieldMappingForm">
                 <template #formFooter>
-                  <a-button type="primary">保存并预览</a-button>
+                  <a-button
+                    style="margin-left: 20px"
+                    type="primary"
+                    @click="saveAndPreviewFieldMapping"
+                    >保存并预览</a-button
+                  >
                 </template>
               </BasicForm>
-              <Description size="middle" title="相关规则" :bordered="false" />
+              <div v-if="relevantRules === 'true'">
+                <span style="margin-left: 20px; font-size: 15px; font-weight: bold">相关规则</span>
                 <BasicTable @register="registerFieldMappingRulesTable" />
               </div>
             </div>
+          </div>
         </TabPane>
         <TabPane v-if="tabKey === '3'" key="7" tab="策略">
           <Description size="middle" title="写入速率策略" :bordered="false" />
@@ -624,6 +631,9 @@
     fieldMappingFormSchema,
     fieldMappingRulesTableColumns,
     messageFormSchema,
+    mappingRuleConfigurationFormSchema,
+    mappingRulesTableFormSchema,
+    dataDirectionFormSchema,
   } from './data';
   import Icon from '@/components/Icon/Icon.vue';
   import { useMessage } from '@/hooks/web/useMessage';
@@ -653,6 +663,7 @@
   import AddBaseRulesModal from './addBaseRulesModal.vue';
   import AddTableRulesModal from './addTableRulesModal.vue';
   import AddFieldRulesModal from './addFieldRulesModal.vue';
+  import { associationSearchInfoFormSchema } from '@/views/mallResourceDevelopment/file/fileByApply/data';
 
   const emit = defineEmits(['success', 'register']);
   const { createMessage, createConfirm } = useMessage();
@@ -664,6 +675,7 @@
   const tabKey = ref('1');
   const n = ref(1);
   const scene = ref();
+  const relevantRules = ref('false');
   const isEdit = ref(true);
   const version = ref('V1');
   const isStart = ref('false');
@@ -801,7 +813,7 @@
     },
   });
   const [registerFieldMappingForm] = useForm({
-    labelWidth: 180,
+    labelWidth: 10,
     labelAlign: 'left',
     baseColProps: { lg: 24, md: 24 },
     schemas: fieldMappingFormSchema,
@@ -850,17 +862,30 @@
     showIndexColumn: false,
     rowSelection: true,
     bordered: false,
+    useSearchForm: true,
+    formConfig: {
+      labelWidth: 120,
+      showActionButtonGroup: false,
+      schemas: mappingRuleConfigurationFormSchema,
+      autoSubmitOnEnter: true,
+    },
     actionColumn: {
       width: 50,
       title: '操作',
       dataIndex: 'action',
-      // slots: { customRender: 'action' },
     },
   });
 
   const [registerDataDirectionTable] = useTable({
     dataSource: dataDirectionData,
     columns: dataDirectionColumns,
+    useSearchForm: true,
+    formConfig: {
+      labelWidth: 120,
+      showActionButtonGroup: false,
+      schemas: dataDirectionFormSchema,
+      autoSubmitOnEnter: true,
+    },
     pagination: true,
     showIndexColumn: false,
     scroll: { y: 500 },
@@ -888,6 +913,13 @@
   const [registerMappingRulesTable] = useTable({
     dataSource: mappingRulesTableData,
     columns: mappingRulesTableColumns,
+    useSearchForm: true,
+    formConfig: {
+      labelWidth: 120,
+      showActionButtonGroup: false,
+      schemas: mappingRulesTableFormSchema,
+      autoSubmitOnEnter: true,
+    },
     pagination: true,
     showIndexColumn: false,
     scroll: { y: 500 },
@@ -1176,6 +1208,10 @@
     });
   }
 
+  function saveAndPreviewFieldMapping() {
+    relevantRules.value = 'true';
+  }
+
   /**新增属性*/
   function addProperty(type) {
     const data = {