修改数据库到消息队列配置页面

src/views/realTimeSync/dataBaseToDataBase/data.ts

@@ -998,3 +998,11 @@ export const fieldMappingRulesTableColumns: BasicColumn[] = [
     width: 120,
   },
 ];
+export const messageFormSchema: FormSchema[] = [
+  {
+    field: 'type',
+    label: '是否保存schema版本',
+    component: 'Switch',
+    colProps: { lg: 6, md: 6 },
+  },
+];

src/views/realTimeSync/dataBaseToDataBase/dataBaseData.ts

@@ -167,7 +167,7 @@ export const cardList = [
   },
   {
     title: '数据库到消息队列',
-    scene: 'fileOfflineLoading',
+    scene: 'message',
     icon: 'iconoir:db',
     pathIcon: 'bytesize:arrow-right',
     endpointIcon: 'oi:envelope-closed',

src/views/realTimeSync/dataBaseToDataBase/optionPage.vue

@@ -441,7 +441,7 @@
           </BasicForm>
         </TabPane>
         <TabPane v-if="tabKey === '4'" key="9" tab="服务配置">
-          <div class="flex">
+          <div class="flex" v-if="scene === 'optionPage'">
             <div style="width: 50%">
               <Description size="middle" title="源端配置" :bordered="false" />
               <BasicForm @register="registerServerOptionsForm" />
@@ -518,6 +518,52 @@
               <CodeEditor v-model:value="jsonData" :mode="MODE.JSON" />
             </div>
           </div>
+          <div v-if="scene === 'message'">
+            <Description size="middle" title="源端配置" :bordered="false" />
+            <Alert
+              show-icon
+              message="支持将源端schema变化进行版本信息统计。"
+              type="info"
+              style="font-size: 15px"
+            />
+            <div>
+              <BasicForm @register="registerMessageForm" />
+            </div>
+            <div>
+              <BasicTable @register="registerServerSourceOptionsTable">
+                <template #toolbar>
+                  <a-button type="primary" @click="addServerSourceOptions">添加参数</a-button>
+                </template>
+                <template #bodyCell="{ column, record }">
+                  <template v-if="column.key === 'action'">
+                    <TableAction
+                      :actions="[
+                        {
+                          icon: 'ic:outline-delete-outline',
+                          onClick: deleteServerSourceOptions.bind(null, record),
+                        },
+                      ]"
+                    />
+                  </template>
+                </template>
+              </BasicTable>
+            </div>
+            <Description size="middle" title="配置预览" :bordered="false">
+              <template #action>
+                <Icon
+                  style="font-size: 30px !important"
+                  icon="fa6-regular:copy"
+                  @click="handleCopy"
+                />
+                <Icon
+                  style="font-size: 30px !important; margin-right: 5px"
+                  icon="icon-park-outline:reload"
+                  @click="handleReload"
+                />
+              </template>
+            </Description>
+            <CodeEditor v-model:value="jsonData" :mode="MODE.JSON" />
+          </div>
         </TabPane>
         <TabPane v-if="tabKey === '5'" key="10" tab="数据流向">
           <Img src="src/assets/images/dataDirection.png" style="width: 1800px" />
@@ -559,6 +605,7 @@
     fieldMappingColumns,
     fieldMappingFormSchema,
     fieldMappingRulesTableColumns,
+    messageFormSchema,
   } from './data';
   import Icon from '@/components/Icon/Icon.vue';
   import { useMessage } from '@/hooks/web/useMessage';
@@ -598,6 +645,7 @@
   const serverTopicOptionsTable = ref([]);
   const tabKey = ref('1');
   const n = ref(1);
+  const scene = ref();
   const isEdit = ref(true);
   const version = ref('V1');
   const versionOptions = [
@@ -744,6 +792,16 @@
       span: 23,
     },
   });
+  const [registerMessageForm] = useForm({
+    labelWidth: 250,
+    labelAlign: 'left',
+    baseColProps: { lg: 24, md: 24 },
+    schemas: messageFormSchema,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 23,
+    },
+  });
   const [registerMappingRuleConfigurationTable, { getRowSelection, reload }] = useTable({
     api: async () => {
       const response = {
@@ -1131,6 +1189,7 @@
 
   onMounted(() => {
     isEdit.value = route.query.isEdit;
+    scene.value = route.query.scene;
   });
 </script>
 <style lang="scss" scoped>

src/views/realTimeSync/dataBaseToDataBase/sceneSelectionModal.vue

@@ -57,7 +57,10 @@
 
   function handleNewModal(scene) {
     router.push({
-      path: '/realTimeSync/dataBaseToDataBase/' + scene,
+      path: '/realTimeSync/dataBaseToDataBase/optionPage',
+      query: {
+        scene: scene,
+      },
     });
   }
 </script>

src/views/realTimeSync/dataBaseToMessageQueue/index.vue

-<template>
-  <div>数据库到消息队列</div>
-</template>
-
-<script>
-export default {
-  name: "index"
-}
-</script>
-
-<style scoped>
-
-</style>