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

src/router/routes/index.ts

@@ -692,6 +692,31 @@ export const sqlExecuteRoute: AppRouteRecordRaw = {
     },
   ],
 };
+
+/**实时同步-数据库到数据库*/
+export const dataBaseToDataBaseRoute: AppRouteRecordRaw = {
+  path: '/realTimeSync/dataBaseToDataBase',
+  name: 'dataBaseToDataBase',
+  component: LAYOUT,
+  meta: {
+    title: '数据库到数据库',
+    icon: '',
+    hidden: true,
+    currentActiveMenu: '/realTimeSync/dataBaseToDataBase',
+  },
+  children: [
+    {
+      path: 'optionPage',
+      name: 'optionPage',
+      component: () => import('@/views/realTimeSync/dataBaseToDataBase/optionPage.vue'),
+      meta: {
+        title: '数据库到数据库配置',
+        icon: '',
+      },
+    },
+  ],
+};
+
 /**shell开发*/
 export const shellExecuteRoute: AppRouteRecordRaw = {
   path: '/scriptDevelopment/shellDevelopment/shellExecute',
@@ -888,6 +913,7 @@ export const basicRoutes = [
   DataStandardRoute,
   kinshipParseRoute,
   serviceDevelopmentRoute,
+  dataBaseToDataBaseRoute,
   RootRoute,
   sqlExecuteRoute,
   shellExecuteRoute,

src/views/realTimeSync/dataBaseToDataBase/data.ts

@@ -226,3 +226,45 @@ export const formSchemaNewFolder: any = [
   //   },
   // },
 ];
+export const isCustomSQLColumns: BasicColumn[] = [
+  {
+    title: '列名',
+    dataIndex: 'fieldName',
+  },
+  {
+    title: '类型',
+    dataIndex: 'fieldType',
+  },
+];
+export const notCustomSQLColumns: BasicColumn[] = [
+  {
+    title: '列名',
+    dataIndex: 'fieldName',
+  },
+  {
+    title: '类型',
+    dataIndex: 'fieldType',
+  },
+  {
+    title: '数据转换',
+    dataIndex: 'dataConversion',
+    slots: { customRender: 'dataConversion' },
+  },
+];
+export const mappingRuleConfigurationColumns: BasicColumn[] = [
+  {
+    title: '规则名称',
+    dataIndex: 'ruleName',
+    width: 200,
+  },
+  {
+    title: '规则内容',
+    dataIndex: 'ruleContent',
+  },
+  {
+    title: '执行顺序',
+    width: 100,
+    dataIndex: 'executionSequence',
+    slots: { customRender: 'executionSequence' },
+  },
+];

src/views/realTimeSync/dataBaseToDataBase/dataBaseData.ts

@@ -154,17 +154,687 @@ export const TreeData: any[] = [
 ];
 export const cardList = [
   {
-    title: '数据库离线加载',
-    scene: 'databaseOfflineLoading',
+    title: '数据库到数据库',
+    scene: 'optionPage',
     icon: 'iconoir:db',
-    color: '#9064e9',
+    pathIcon: 'bytesize:arrow-right',
+    endpointIcon: 'iconoir:db',
+    color: '#1255c9',
+    pathColor: '#7bd8fa',
     description: '支持数据加载导数据仓库（数据加载功能），也支持数仓将数据写入业务库（卸载功能）',
   },
   {
-    title: '文件离线加载',
+    title: '数据库到消息队列',
     scene: 'fileOfflineLoading',
-    icon: 'tabler:file-isr',
-    color: '#9064e9',
+    icon: 'iconoir:db',
+    pathIcon: 'bytesize:arrow-right',
+    endpointIcon: 'oi:envelope-closed',
+    color: '#1255c9',
+    pathColor: '#7bd8fa',
     description: '支持将文件定期加载入数据仓库中',
   },
 ];
+export const isCustomSQLTableList = [
+  {
+    businessId: '14',
+    ownershipTableId: '0',
+    fieldName: 'uuid',
+    fieldType: 'VARCHAR(50,0)',
+  },
+  {
+    businessId: '15',
+    ownershipTableId: '0',
+    fieldName: 'catalog_id',
+    fieldType: 'BIGINT(19,0)',
+  },
+  {
+    businessId: '1',
+    ownershipTableId: '1',
+    fieldName: 'uuid',
+    fieldType: 'VARCHAR(50,0)',
+  },
+  {
+    businessId: '2',
+    ownershipTableId: '1',
+    fieldName: 'catalog_id',
+    fieldType: 'BIGINT(19,0)',
+  },
+  {
+    businessId: '3',
+    ownershipTableId: '1',
+    fieldName: 'name',
+    fieldType: 'VARCHAR(255,0)',
+  },
+  {
+    businessId: '4',
+    ownershipTableId: '1',
+    fieldName: 'description',
+    fieldType: 'TEXT',
+  },
+  {
+    businessId: '5',
+    ownershipTableId: '2',
+    fieldName: 'uuid',
+    fieldType: 'VARCHAR(50,0)',
+  },
+  {
+    businessId: '6',
+    ownershipTableId: '2',
+    fieldName: 'user_id',
+    fieldType: 'BIGINT(19,0)',
+  },
+  {
+    businessId: '7',
+    ownershipTableId: '2',
+    fieldName: 'username',
+    fieldType: 'VARCHAR(255,0)',
+  },
+  {
+    businessId: '8',
+    ownershipTableId: '2',
+    fieldName: 'email',
+    fieldType: 'VARCHAR(255,0)',
+  },
+  {
+    businessId: '9',
+    ownershipTableId: '3',
+    fieldName: 'uuid',
+    fieldType: 'VARCHAR(50,0)',
+  },
+  {
+    businessId: '10',
+    ownershipTableId: '3',
+    fieldName: 'order_id',
+    fieldType: 'BIGINT(19,0)',
+  },
+  {
+    businessId: '11',
+    ownershipTableId: '3',
+    fieldName: 'total_amount',
+    fieldType: 'DECIMAL(10,2)',
+  },
+  {
+    businessId: '12',
+    ownershipTableId: '4',
+    fieldName: 'uuid',
+    fieldType: 'VARCHAR(50,0)',
+  },
+  {
+    businessId: '13',
+    ownershipTableId: '4',
+    fieldName: 'product_id',
+    fieldType: 'BIGINT(19,0)',
+  },
+  {
+    businessId: '14',
+    ownershipTableId: '4',
+    fieldName: 'product_name',
+    fieldType: 'VARCHAR(255,0)',
+  },
+  {
+    businessId: '15',
+    ownershipTableId: '4',
+    fieldName: 'price',
+    fieldType: 'DECIMAL(10,2)',
+  },
+  {
+    businessId: '16',
+    ownershipTableId: '5',
+    fieldName: 'uuid',
+    fieldType: 'VARCHAR(50,0)',
+  },
+  {
+    businessId: '17',
+    ownershipTableId: '5',
+    fieldName: 'category_id',
+    fieldType: 'BIGINT(19,0)',
+  },
+  {
+    businessId: '18',
+    ownershipTableId: '5',
+    fieldName: 'category_name',
+    fieldType: 'VARCHAR(255,0)',
+  },
+  {
+    businessId: '19',
+    ownershipTableId: '6',
+    fieldName: 'uuid',
+    fieldType: 'VARCHAR(50,0)',
+  },
+  {
+    businessId: '20',
+    ownershipTableId: '6',
+    fieldName: 'customer_id',
+    fieldType: 'BIGINT(19,0)',
+  },
+  {
+    businessId: '21',
+    ownershipTableId: '6',
+    fieldName: 'customer_name',
+    fieldType: 'VARCHAR(255,0)',
+  },
+  {
+    businessId: '22',
+    ownershipTableId: '7',
+    fieldName: 'uuid',
+    fieldType: 'VARCHAR(50,0)',
+  },
+  {
+    businessId: '23',
+    ownershipTableId: '7',
+    fieldName: 'customer_id',
+    fieldType: 'BIGINT(19,0)',
+  },
+  {
+    businessId: '24',
+    ownershipTableId: '7',
+    fieldName: 'order_date',
+    fieldType: 'DATE',
+  },
+  {
+    businessId: '25',
+    ownershipTableId: '8',
+    fieldName: 'uuid',
+    fieldType: 'VARCHAR(50,0)',
+  },
+  {
+    businessId: '26',
+    ownershipTableId: '8',
+    fieldName: 'product_id',
+    fieldType: 'BIGINT(19,0)',
+  },
+  {
+    businessId: '27',
+    ownershipTableId: '8',
+    fieldName: 'stock_quantity',
+    fieldType: 'INT(11,0)',
+  },
+  {
+    businessId: '28',
+    ownershipTableId: '8',
+    fieldName: 'last_updated',
+    fieldType: 'TIMESTAMP',
+  },
+  {
+    businessId: '29',
+    ownershipTableId: '9',
+    fieldName: 'uuid',
+    fieldType: 'VARCHAR(50,0)',
+  },
+  {
+    businessId: '30',
+    ownershipTableId: '9',
+    fieldName: 'user_id',
+    fieldType: 'BIGINT(19,0)',
+  },
+  {
+    businessId: '31',
+    ownershipTableId: '9',
+    fieldName: 'address',
+    fieldType: 'VARCHAR(255,0)',
+  },
+  {
+    businessId: '32',
+    ownershipTableId: '9',
+    fieldName: 'phone_number',
+    fieldType: 'VARCHAR(20,0)',
+  },
+  {
+    businessId: '33',
+    ownershipTableId: '10',
+    fieldName: 'uuid',
+    fieldType: 'VARCHAR(50,0)',
+  },
+  {
+    businessId: '34',
+    ownershipTableId: '10',
+    fieldName: 'category_id',
+    fieldType: 'BIGINT(19,0)',
+  },
+  {
+    businessId: '35',
+    ownershipTableId: '10',
+    fieldName: 'category_description',
+    fieldType: 'TEXT',
+  },
+  {
+    businessId: '36',
+    ownershipTableId: '10',
+    fieldName: 'parent_category_id',
+    fieldType: 'BIGINT(19,0)',
+  },
+];
+export const isBatchCustomSQLTableList = [
+  {
+    businessId: '1',
+    ownershipTableId: '1',
+    fieldName: 'uuid',
+    fieldType: 'VARCHAR(50,0)',
+  },
+  {
+    businessId: '2',
+    ownershipTableId: '1',
+    fieldName: 'catalog_id',
+    fieldType: 'BIGINT(19,0)',
+  },
+  {
+    businessId: '3',
+    ownershipTableId: '1',
+    fieldName: 'name',
+    fieldType: 'VARCHAR(255,0)',
+  },
+  {
+    businessId: '4',
+    ownershipTableId: '1',
+    fieldName: 'description',
+    fieldType: 'TEXT',
+  },
+  {
+    businessId: '5',
+    ownershipTableId: '2',
+    fieldName: 'uuid',
+    fieldType: 'VARCHAR(50,0)',
+  },
+  {
+    businessId: '6',
+    ownershipTableId: '2',
+    fieldName: 'user_id',
+    fieldType: 'BIGINT(19,0)',
+  },
+  {
+    businessId: '7',
+    ownershipTableId: '2',
+    fieldName: 'username',
+    fieldType: 'VARCHAR(255,0)',
+  },
+  {
+    businessId: '8',
+    ownershipTableId: '2',
+    fieldName: 'email',
+    fieldType: 'VARCHAR(255,0)',
+  },
+  {
+    businessId: '9',
+    ownershipTableId: '3',
+    fieldName: 'uuid',
+    fieldType: 'VARCHAR(50,0)',
+  },
+  {
+    businessId: '10',
+    ownershipTableId: '3',
+    fieldName: 'order_id',
+    fieldType: 'BIGINT(19,0)',
+  },
+  {
+    businessId: '11',
+    ownershipTableId: '3',
+    fieldName: 'total_amount',
+    fieldType: 'DECIMAL(10,2)',
+  },
+  {
+    businessId: '12',
+    ownershipTableId: '4',
+    fieldName: 'uuid',
+    fieldType: 'VARCHAR(50,0)',
+  },
+  {
+    businessId: '13',
+    ownershipTableId: '4',
+    fieldName: 'product_id',
+    fieldType: 'BIGINT(19,0)',
+  },
+  {
+    businessId: '14',
+    ownershipTableId: '4',
+    fieldName: 'product_name',
+    fieldType: 'VARCHAR(255,0)',
+  },
+  {
+    businessId: '15',
+    ownershipTableId: '4',
+    fieldName: 'price',
+    fieldType: 'DECIMAL(10,2)',
+  },
+];
+export const notCustomSQLTableList = [
+  // bm_datasource
+  {
+    businessId: '1',
+    ownershipTableId: '0',
+    fieldName: 'uuid',
+    fieldType: 'VARCHAR(50,0)',
+  },
+  {
+    businessId: '2',
+    ownershipTableId: '0',
+    fieldName: 'catalog_id',
+    fieldType: 'BIGINT(19,0)',
+  },
+
+  // user_info
+  {
+    businessId: '3',
+    ownershipTableId: '1',
+    fieldName: 'user_id',
+    fieldType: 'INT(11,0)',
+  },
+  {
+    businessId: '4',
+    ownershipTableId: '1',
+    fieldName: 'username',
+    fieldType: 'VARCHAR(50,0)',
+  },
+  {
+    businessId: '5',
+    ownershipTableId: '1',
+    fieldName: 'email',
+    fieldType: 'VARCHAR(100,0)',
+  },
+
+  // customer_details
+  {
+    businessId: '6',
+    ownershipTableId: '2',
+    fieldName: 'customer_id',
+    fieldType: 'INT(11,0)',
+  },
+  {
+    businessId: '7',
+    ownershipTableId: '2',
+    fieldName: 'first_name',
+    fieldType: 'VARCHAR(50,0)',
+  },
+  {
+    businessId: '8',
+    ownershipTableId: '2',
+    fieldName: 'last_name',
+    fieldType: 'VARCHAR(50,0)',
+  },
+  {
+    businessId: '9',
+    ownershipTableId: '2',
+    fieldName: 'address',
+    fieldType: 'VARCHAR(255,0)',
+  },
+
+  // order_history
+  {
+    businessId: '10',
+    ownershipTableId: '3',
+    fieldName: 'order_id',
+    fieldType: 'INT(11,0)',
+  },
+  {
+    businessId: '11',
+    ownershipTableId: '3',
+    fieldName: 'customer_id',
+    fieldType: 'INT(11,0)',
+  },
+  {
+    businessId: '12',
+    ownershipTableId: '3',
+    fieldName: 'order_date',
+    fieldType: 'DATETIME',
+  },
+
+  // product_inventory
+  {
+    businessId: '13',
+    ownershipTableId: '4',
+    fieldName: 'product_id',
+    fieldType: 'INT(11,0)',
+  },
+  {
+    businessId: '14',
+    ownershipTableId: '4',
+    fieldName: 'quantity',
+    fieldType: 'INT(11,0)',
+  },
+  {
+    businessId: '15',
+    ownershipTableId: '4',
+    fieldName: 'price',
+    fieldType: 'DECIMAL(10,2)',
+  },
+
+  // transaction_logs
+  {
+    businessId: '16',
+    ownershipTableId: '5',
+    fieldName: 'log_id',
+    fieldType: 'INT(11,0)',
+  },
+  {
+    businessId: '17',
+    ownershipTableId: '5',
+    fieldName: 'transaction_type',
+    fieldType: 'VARCHAR(50,0)',
+  },
+  {
+    businessId: '18',
+    ownershipTableId: '5',
+    fieldName: 'amount',
+    fieldType: 'DECIMAL(10,2)',
+  },
+
+  // employee_records
+  {
+    businessId: '19',
+    ownershipTableId: '6',
+    fieldName: 'employee_id',
+    fieldType: 'INT(11,0)',
+  },
+  {
+    businessId: '20',
+    ownershipTableId: '6',
+    fieldName: 'name',
+    fieldType: 'VARCHAR(100,0)',
+  },
+  {
+    businessId: '21',
+    ownershipTableId: '6',
+    fieldName: 'position',
+    fieldType: 'VARCHAR(100,0)',
+  },
+
+  // payment_details
+  {
+    businessId: '22',
+    ownershipTableId: '7',
+    fieldName: 'payment_id',
+    fieldType: 'INT(11,0)',
+  },
+  {
+    businessId: '23',
+    ownershipTableId: '7',
+    fieldName: 'payment_method',
+    fieldType: 'VARCHAR(50,0)',
+  },
+  {
+    businessId: '24',
+    ownershipTableId: '7',
+    fieldName: 'amount',
+    fieldType: 'DECIMAL(10,2)',
+  },
+
+  // shipping_addresses
+  {
+    businessId: '25',
+    ownershipTableId: '8',
+    fieldName: 'address_id',
+    fieldType: 'INT(11,0)',
+  },
+  {
+    businessId: '26',
+    ownershipTableId: '8',
+    fieldName: 'customer_id',
+    fieldType: 'INT(11,0)',
+  },
+  {
+    businessId: '27',
+    ownershipTableId: '8',
+    fieldName: 'address',
+    fieldType: 'VARCHAR(255,0)',
+  },
+
+  // invoice_data
+  {
+    businessId: '28',
+    ownershipTableId: '9',
+    fieldName: 'invoice_id',
+    fieldType: 'INT(11,0)',
+  },
+  {
+    businessId: '29',
+    ownershipTableId: '9',
+    fieldName: 'invoice_date',
+    fieldType: 'DATETIME',
+  },
+  {
+    businessId: '30',
+    ownershipTableId: '9',
+    fieldName: 'total_amount',
+    fieldType: 'DECIMAL(10,2)',
+  },
+
+  // customer_feedback
+  {
+    businessId: '31',
+    ownershipTableId: '10',
+    fieldName: 'feedback_id',
+    fieldType: 'INT(11,0)',
+  },
+  {
+    businessId: '32',
+    ownershipTableId: '10',
+    fieldName: 'customer_id',
+    fieldType: 'INT(11,0)',
+  },
+  {
+    businessId: '33',
+    ownershipTableId: '10',
+    fieldName: 'feedback_text',
+    fieldType: 'TEXT',
+  },
+
+  // supplier_info
+  {
+    businessId: '34',
+    ownershipTableId: '11',
+    fieldName: 'supplier_id',
+    fieldType: 'INT(11,0)',
+  },
+  {
+    businessId: '35',
+    ownershipTableId: '11',
+    fieldName: 'company_name',
+    fieldType: 'VARCHAR(100,0)',
+  },
+  {
+    businessId: '36',
+    ownershipTableId: '11',
+    fieldName: 'contact_person',
+    fieldType: 'VARCHAR(100,0)',
+  },
+];
+export const mappingRuleConfigurationTableList = [
+  {
+    businessId: '1',
+    ruleName: '[单表] 字段映射规则',
+    ruleContent: '源表名:table_1',
+  },
+  {
+    businessId: '2',
+    ruleName: '[全局] 新增字段规则',
+    ruleContent: '新增字段名称:a, 字段类型:string, 字段表达式:asd',
+  },
+  {
+    businessId: '3',
+    ruleName: '[全局] 字段名称映射规则',
+    ruleContent: '原字段名称:未配置, 目标字段名称:未配置',
+  },
+  {
+    businessId: '4',
+    ruleName: '[全局] 字段类型映射规则',
+    ruleContent: '源字段类型:timestamp, 目标字段类型:string',
+  },
+  {
+    businessId: '5',
+    ruleName: '[单表] 字段映射规则',
+    ruleContent: '源表名:table_2',
+  },
+];
+export const tableTreeData = [
+  {
+    title: 'bm_datasource',
+    key: '0',
+    icon: 'majesticons:table-line',
+    sql: 'SELECT uuid, catalog_id FROM bm_datasource',
+  },
+  {
+    title: 'user_info',
+    key: '1',
+    icon: 'majesticons:table-line',
+    sql: 'SELECT uuid, catalog_id, name, description FROM user_info',
+  },
+  {
+    title: 'customer_details',
+    key: '2',
+    icon: 'majesticons:table-line',
+    sql: 'SELECT uuid, user_id, username, email FROM customer_details',
+  },
+  {
+    title: 'order_history',
+    key: '3',
+    icon: 'majesticons:table-line',
+    sql: 'SELECT uuid, order_id, total_amount FROM order_history',
+  },
+  {
+    title: 'product_inventory',
+    key: '4',
+    icon: 'majesticons:table-line',
+    sql: 'SELECT uuid, product_id, product_name, price FROM product_inventory',
+  },
+  {
+    title: 'transaction_logs',
+    key: '5',
+    icon: 'majesticons:table-line',
+    sql: 'SELECT uuid, category_id, category_name FROM transaction_logs',
+  },
+  {
+    title: 'employee_records',
+    key: '6',
+    icon: 'majesticons:table-line',
+    sql: 'SELECT uuid, customer_id, customer_name FROM employee_records',
+  },
+  {
+    title: 'payment_details',
+    key: '7',
+    icon: 'majesticons:table-line',
+    sql: 'SELECT uuid, customer_id, order_date FROM payment_details',
+  },
+  {
+    title: 'shipping_addresses',
+    key: '8',
+    icon: 'majesticons:table-line',
+    sql: 'SELECT uuid, product_id, stock_quantity, last_updated FROM shipping_addresses',
+  },
+  {
+    title: 'invoice_data',
+    key: '9',
+    icon: 'majesticons:table-line',
+    sql: 'SELECT uuid, user_id, address, phone_number FROM invoice_data',
+  },
+  {
+    title: 'customer_feedback',
+    key: '10',
+    icon: 'majesticons:table-line',
+    sql: 'SELECT uuid, category_id, category_description, parent_category_id FROM customer_feedback',
+  },
+  {
+    title: 'supplier_info',
+    key: '11',
+    icon: 'majesticons:table-line',
+    sql: 'SELECT * FROM supplier_info', // 假设 supplier_info 表没有在 isCustomSQLTableList 中定义字段
+  },
+];

src/views/realTimeSync/dataBaseToDataBase/optionPage.vue

+<template>
+  <PageWrapper class="content-padding" contentBackground @back="goBack">
+    <template #headerContent>
+      <div class="modal_top">
+        <Icon
+          icon="ep:arrow-left-bold"
+          :size="20"
+          style="margin-right: 5px"
+          :color="'#a3a7b1'"
+          @click="goBack"
+        />
+        <div>
+          <Icon icon="iconoir:db" :size="40" :color="'#9064e9'" />
+        </div>
+        <div>
+          <div class="title">离线加载</div>
+          <div class="path">数据加载/离线加载</div>
+        </div>
+        <div class="buttonGroup">
+          <a-button type="primary" @click="handleOperation">跳转运维</a-button>
+          <a-button type="primary" @click="handleSave">保存</a-button>
+          <a-button type="primary" @click="handleDebug">调试</a-button>
+          <a-button type="primary" @click="handleRun">运行</a-button>
+          <a-button type="primary" @click="handlePublish">发布</a-button>
+          <a-button type="primary" @click="handleGobalDeply">全局配置</a-button>
+          <a-button type="primary" @click="handleParameterConfiguration">参数配置</a-button>
+          <a-button type="primary" @click="handleVersionManagement">版本管理</a-button>
+        </div>
+      </div>
+    </template>
+    <div style="background-color: #edf8f8">
+      <div style="margin-right: 100px; margin-left: 100px">
+        <Icon
+          style="margin-right: 100px"
+          icon="material-symbols:drive-file-move-outline-sharp"
+          :size="40"
+          :color="'#54c8e8'"
+          @click="handleChangeTab('5')"
+        />
+        <Icon
+          style="margin-right: 10px"
+          icon="tabler:database-export"
+          :size="40"
+          :color="'#54c8e8'"
+          @click="handleChangeTab('1')"
+        />
+        <Icon style="margin-right: 10px" icon="quill:arrow-right" :size="35" :color="'#000000'" />
+        <Icon
+          style="margin-right: 10px"
+          icon="simple-icons:apachekafka"
+          :size="40"
+          :color="'#54c8e8'"
+          @click="handleChangeTab('2')"
+        />
+        <Icon style="margin-right: 10px" icon="quill:arrow-right" :size="35" :color="'#2f3031'" />
+        <Icon
+          style="margin-right: 10px"
+          icon="tabler:database-export"
+          :size="40"
+          :color="'#54c8e8'"
+          @click="handleChangeTab('3')"
+        />
+        <Icon style="margin-right: 10px" icon="quill:arrow-right" :size="35" :color="'#2f3031'" />
+        <Icon
+          style="margin-right: 10px"
+          icon="grommet-icons:settings-option"
+          :size="40"
+          :color="'#54c8e8'"
+          @click="handleChangeTab('4')"
+        />
+      </div>
+      <div style="margin-right: 100px; margin-left: 95px; margin-top: 5px">
+        <span class="path" style="margin-right: 95px">数据流向</span>
+        <span class="path" style="margin-right: 55px">源端</span>
+        <span class="path" style="margin-right: 55px">Kafka端</span>
+        <span class="path" style="margin-right: 45px">目标端</span>
+        <span class="path" style="margin-right: 20px">任务配置</span>
+      </div>
+    </div>
+    <div>
+      <Tabs>
+        <TabPane v-if="tabKey === '1'" key="1" tab="源端配置">
+          <div style="display: flex">
+            <BasicForm @register="registerSourceSideConfigurationForm" style="width: 30%">
+              <template #getMetadata>
+                <a-button @click="handleGetMetadata" type="primary">获取元数据</a-button>
+              </template>
+            </BasicForm>
+            <div style="width: 20%; padding: 0 5px 5px">
+              <BasicTree
+                toolbar
+                search
+                v-if="!metadataAcquisitionModeFlag"
+                :checkable="true"
+                :actionList="actionList"
+                :treeData="tableTreeData"
+                v-model:checkedKeys="myCheckedKeys"
+                @select="handleSelect"
+              >
+                <template #headerTitle>
+                  表名
+                  <a v-if="myCheckedKeys.length > 0" @click="handleDeplys" style="margin-left: 2px"
+                    >批量配置</a
+                  >
+                  <a v-else style="color: grey; margin-left: 2px">批量配置</a>
+                </template>
+              </BasicTree>
+              <div v-else>
+                <div style="display: flex; justify-content: space-between">
+                  <strong>自定义查询SQL</strong>
+                  <a-button type="primary" style="margin-right: 5px" @click="handleParsingSQL"
+                    >解析SQL</a-button
+                  >
+                </div>
+                <CodeEditor v-model:value="sql" style="height: 100%" />
+              </div>
+            </div>
+            <BasicForm @register="registerLoadingStrategyForm" style="width: 50%">
+              <template #quantityBasedAlert>
+                <Alert
+                  show-icon
+                  style="font-size: 12px"
+                  message="基于数量的加载策略，要求在进行数据加载时，源端的表不要发生数据变更，否则可能会出现数据加载异常。"
+                  type="info"
+                />
+              </template>
+              <template #conditionBasedAlert>
+                <Alert
+                  show-icon
+                  message="基于条件的加载策略，要求选中的切分列的数据分布均匀，否则会出现数据倾斜，影响数据加载性能，其中切分的类型推荐使用数值型或时间类型，不支持字符串类型的字段作为切分列，否则也会丢数。"
+                  type="info"
+                  style="font-size: 12px"
+                />
+              </template>
+              <template #isCustomSQLAlert>
+                <Alert
+                  show-icon
+                  message="自定义SQL模式下，只支持查询SQL，且无论是新增还是修改SQL都需要点击解析SQL对字段更新。"
+                  type="warning"
+                  style="font-size: 12px"
+                />
+              </template>
+              <template #parsingSQL>
+                <a-button type="primary" @click="handleParsingSQL">解析SQL</a-button>
+              </template>
+              <template #isCustomSQLTable>
+                <BasicTable @register="registerIsCustomSQLTable" />
+              </template>
+              <template #isBatchCustomSQLTable>
+                <BasicTable @register="registerIsBatchCustomSQLTable" />
+              </template>
+              <template #notCustomSQLTable>
+                <BasicTable @register="registerNotCustomSQLTable">
+                  <template #bodyCell="{ column, record }">
+                    <template v-if="column.key === 'action'">
+                      <TableAction
+                        :actions="[
+                          {
+                            label: '删除',
+                            onClick: handleDelete.bind(null, record),
+                          },
+                        ]"
+                      />
+                    </template>
+                  </template>
+                  <template #dataConversion="{ record }">
+                    <Icon icon="tdesign:edit-2" @click="handleConversion(record)" />
+                  </template>
+                </BasicTable>
+              </template>
+            </BasicForm>
+          </div>
+        </TabPane>
+        <TabPane v-if="tabKey === '1'" key="2" tab="过滤规则">
+          <!--          <BasicForm>-->
+
+          <!--          </BasicForm>-->
+        </TabPane>
+        <TabPane v-if="tabKey === '2'" key="3" tab="Kafka配置">
+          <!--          <BasicForm>-->
+
+          <!--          </BasicForm>-->
+        </TabPane>
+        <TabPane v-if="tabKey === '2'" key="4" tab="映射规则">
+          <BasicTable title="数据转换规则" @register="registerMappingRuleConfigurationTable">
+            <template #toolbar>
+              <a-button
+                :disabled="getRowSelection().selectedRowKeys <= 0"
+                type="primary"
+                @click="handleDeleteRules"
+                >删除规则</a-button
+              >
+              <a-button type="primary" @click="handleAddRule">新增规则</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
+                  stopButtonPropagation
+                  :actions="[
+                    {
+                      icon: 'iconamoon:edit',
+                      onClick: handleEdit.bind(null, record),
+                    },
+                    {
+                      icon: 'ic:outline-delete-outline',
+                      onClick: handleDeleteRule.bind(null, record),
+                    },
+                  ]"
+                />
+              </template>
+            </template>
+          </BasicTable>
+        </TabPane>
+        <TabPane v-if="tabKey === '3'" key="5" tab="表映射">
+          <!--          <BasicForm>-->
+
+          <!--          </BasicForm>-->
+        </TabPane>
+        <TabPane v-if="tabKey === '3'" key="6" tab="字段映射">
+          <!--          <BasicForm>-->
+
+          <!--          </BasicForm>-->
+        </TabPane>
+        <TabPane v-if="tabKey === '3'" key="7" tab="策略">
+          <!--          <BasicForm>-->
+
+          <!--          </BasicForm>-->
+        </TabPane>
+        <TabPane v-if="tabKey === '4'" key="8" tab="策略配置">
+          <!--          <BasicTable>-->
+
+          <!--          </BasicTable>-->
+          <!--          <BasicTable>-->
+
+          <!--          </BasicTable>-->
+        </TabPane>
+        <TabPane v-if="tabKey === '4'" key="9" tab="服务配置">
+          <!--          <BasicTable>-->
+
+          <!--          </BasicTable>-->
+          <!--          <BasicTable>-->
+
+          <!--          </BasicTable>-->
+        </TabPane>
+        <TabPane v-if="tabKey === '5'" key="10" tab="数据流向">
+          <Img src="src/assets/images/dataDirection.png" style="width: 1800px"/>
+        </TabPane>
+        <TabPane v-if="tabKey === '5'" key="11" tab="表映射关系">
+          <!--          <BasicTable>-->
+
+          <!--          </BasicTable>-->
+          <!--          <BasicTable>-->
+
+          <!--          </BasicTable>-->
+        </TabPane>
+      </Tabs>
+    </div>
+    <GetMetadataModal @register="registerGetMetadataModal" />
+    <DeplysModal @register="registerDeplysModal" />
+    <AddDataConversionRuleModal @register="registerAddRuleModal" />
+    <DataOptionsModal @register="registerDataOptionsModal" />
+    <GlobalOptionsModal @register="registerGlobalOptionsModal" />
+    <SaveModal @register="registerSaveModal" />
+    <VersionManageModal @register="registerVersionManageModal" />
+    <RunOptionsModal @register="registerRunOptionsModal" />
+  </PageWrapper>
+</template>
+<script lang="ts" setup>
+  import { Tabs, TabPane, Alert, Modal } from 'ant-design-vue';
+  import { h, ref, onMounted } from 'vue';
+  import { BasicTree } from '@/components/Tree';
+  import { BasicForm, FormSchema, useForm } from '@/components/Form';
+  import { isCustomSQLColumns, notCustomSQLColumns, mappingRuleConfigurationColumns } from './data';
+  import Icon from '@/components/Icon/Icon.vue';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import { PageWrapper } from '@/components/Page';
+  import { useRoute } from 'vue-router';
+  import {
+    isCustomSQLTableList,
+    isBatchCustomSQLTableList,
+    notCustomSQLTableList,
+    mappingRuleConfigurationTableList,
+    tableTreeData,
+  } from './dataBaseData';
+  import { router } from '@/router';
+  import { DeleteOutlined } from '@ant-design/icons-vue';
+  import { BasicTable, useTable, TableAction } from '@/components/Table';
+  import { useModal } from '@/components/Modal';
+  import GetMetadataModal from '@/views/dataIntegration/dataLoading/dataEntryLake/getMetadataModal.vue';
+  import DeplysModal from '@/views/dataIntegration/dataLoading/dataEntryLake/DeplysModal.vue';
+  import CodeEditor from '@/components/CodeEditor/src/CodeEditor.vue';
+  import AddDataConversionRuleModal from '@/views/dataIntegration/dataLoading/dataEntryLake/addDataConversionRuleModal.vue';
+  import DataOptionsModal from '@/views/dataIntegration/dataLoading/dataEntryLake/dataOptionsModal.vue';
+  import GlobalOptionsModal from '@/views/dataIntegration/dataLoading/dataEntryLake/globalOptionsModal.vue';
+  import SaveModal from '@/views/dataIntegration/dataLoading/dataEntryLake/saveModal.vue';
+  import VersionManageModal from '@/views/dataIntegration/dataLoading/dataEntryLake/versionManageModal.vue';
+  import RunOptionsModal from '@/views/dataIntegration/dataLoading/dataEntryLake/runOptionsModal.vue';
+
+  const emit = defineEmits(['success', 'register']);
+  const { createMessage, createConfirm } = useMessage();
+  const route = useRoute();
+  const myCheckedKeys = ref([]);
+  let isCustomSQLTable = ref(isCustomSQLTableList);
+  let isBatchCustomSQLTable = ref(isBatchCustomSQLTableList);
+  let notCustomSQLTable = ref(notCustomSQLTableList);
+  let mappingRuleConfigurationTable = ref(mappingRuleConfigurationTableList);
+  let sql = ref('SELECT * FROM user_info,customer_details,order_history,product_inventory');
+  let metadataAcquisitionModeFlag = ref();
+  let customSQLFlag = ref();
+  let isParsingSQL = ref(false);
+  let loadType = ref('全量数据加载');
+  const selectKey = ref('0');
+  const tabKey = ref('1');
+
+  const sourceSideConfigurationFormSchema: FormSchema[] = [
+    {
+      field: 'loadType',
+      label: '加载方式',
+      component: 'RadioGroup',
+      defaultValue: '全量数据加载',
+      componentProps: ({ formModel }) => ({
+        onChange: () => {
+          loadType.value = formModel.loadType;
+        },
+        options: [
+          { label: '全量数据加载', value: '全量数据加载' },
+          { label: '增量数据加载', value: '增量数据加载' },
+        ],
+      }),
+    },
+    {
+      field: 'metadataAcquisitionMode',
+      label: '元数据获取方式',
+      component: 'RadioGroup',
+      defaultValue: '从JDBC获取元数据',
+      componentProps: ({ formModel, formActionType }) => ({
+        onChange: () => {
+          isParsingSQL.value = false;
+          metadataAcquisitionModeFlag.value = formModel.metadataAcquisitionMode === '自定义SQL';
+          const flag = !metadataAcquisitionModeFlag.value;
+          updateSchema([{ field: 'filterCondition', ifShow: flag && customSQLFlag.value }]);
+          updateSchema([{ field: 'notCustomSQLTable', ifShow: flag && customSQLFlag.value }]);
+          updateSchema([{ field: 'customSQL', ifShow: flag }]);
+          updateSchema([{ field: 'querySQL', ifShow: flag && !customSQLFlag.value }]);
+          updateSchema([{ field: 'parsingSQL', ifShow: flag && !customSQLFlag.value }]);
+          updateSchema([{ field: 'isCustomSQLAlert', ifShow: flag && !customSQLFlag.value }]);
+          updateSchema([
+            {
+              field: 'isCustomSQLTable',
+              ifShow: flag && !customSQLFlag.value && isParsingSQL.value,
+            },
+          ]);
+          updateSchema([{ field: 'sourceDataTableName', ifShow: !flag }]);
+          updateSchema([{ field: 'isBatchCustomSQLTable', ifShow: !flag && isParsingSQL.value }]);
+          formActionType.updateSchema([{ field: 'dataBase', ifShow: flag }]);
+          formActionType.updateSchema([{ field: 'metadataType', ifShow: flag }]);
+          formActionType.updateSchema([{ field: 'getMetadata', ifShow: flag }]);
+        },
+        options: [
+          { label: '从JDBC获取元数据', value: '从JDBC获取元数据' },
+          { label: '自定义SQL', value: '自定义SQL' },
+          { label: '导入元数据文件', value: '导入元数据文件' },
+        ],
+      }),
+    },
+    {
+      field: 'dataSource',
+      label: '数据源',
+      component: 'Select',
+      required: true,
+      defaultValue: 'KunOB数据源',
+      componentProps: {
+        placeholder: '请选择数据源',
+        options: [
+          { label: 'KunOB数据源', value: 'KunOB数据源' },
+          { label: 'MongoDB数据源', value: 'MongoDB数据源' },
+          { label: 'AmazonS3', value: 'AmazonS3' },
+        ],
+      },
+    },
+    {
+      field: 'dataBase',
+      label: '数据库',
+      component: 'Cascader',
+      required: true,
+      componentProps: {
+        placeholder: '请选择数据源',
+        displayRender: ({ labels }) => {
+          return labels[labels.length - 1];
+        },
+        options: [
+          {
+            value: '数据库对象资源',
+            label: '数据库对象资源',
+            children: [
+              {
+                value: '数据中台工作区01',
+                label: '数据中台工作区01',
+                children: [
+                  {
+                    value: 'ArgoDB_Dev01',
+                    label: 'ArgoDB_Dev01',
+                  },
+                  {
+                    value: 'ArgoDB_Dev02',
+                    label: 'ArgoDB_Dev02',
+                  },
+                  {
+                    value: 'GbaseDB_Dev01',
+                    label: 'GbaseDB_Dev01',
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+    },
+    {
+      field: 'metadataType',
+      label: '元数据类型',
+      component: 'Input',
+      required: true,
+      componentProps: {
+        placeholder: '以,分隔输入元数据类型',
+      },
+    },
+    {
+      field: 'getMetadata',
+      label: ' ',
+      slot: 'getMetadata',
+    },
+    {
+      field: 'maximumNumberOfDatabaseConnections',
+      label: '源库最大连接数',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入源库最大连接数',
+      },
+    },
+  ];
+
+  const LoadingStrategyFormSchema: FormSchema[] = [
+    {
+      field: 'loadingStrategy',
+      label: '加载策略',
+      component: 'RadioGroup',
+      defaultValue: '基于数量',
+      componentProps: ({ formModel, formActionType }) => ({
+        onChange: () => {
+          const flag = formModel.loadingStrategy === '基于数量';
+          formActionType.updateSchema([{ field: 'quantityBasedAlert', ifShow: flag }]);
+          formActionType.updateSchema([{ field: 'conditionBasedAlert', ifShow: !flag }]);
+          formActionType.updateSchema([{ field: 'cutDivision', ifShow: !flag }]);
+        },
+        options: [
+          { label: '基于数量', value: '基于数量' },
+          { label: '基于条件', value: '基于条件' },
+        ],
+      }),
+    },
+    {
+      field: 'quantityBasedAlert',
+      slot: 'quantityBasedAlert',
+    },
+    {
+      field: 'conditionBasedAlert',
+      slot: 'conditionBasedAlert',
+      ifShow: false,
+    },
+    {
+      field: 'cutDivision',
+      label: '切分列',
+      component: 'Input',
+      colProps: { lg: 11, md: 11 },
+      componentProps: {
+        placeholder: '',
+      },
+      ifShow: false,
+      required: true,
+    },
+    {
+      field: 'divide',
+      component: 'Divider',
+    },
+    {
+      field: 'customSQL',
+      label: '自定义SQL',
+      component: 'RadioGroup',
+      defaultValue: '否',
+      required: true,
+      componentProps: ({ formModel, formActionType }) => ({
+        onChange: () => {
+          isParsingSQL.value = false;
+          customSQLFlag.value = formModel.customSQL === '否';
+          formActionType.updateSchema([{ field: 'filterCondition', ifShow: customSQLFlag.value }]);
+          formActionType.updateSchema([
+            { field: 'notCustomSQLTable', ifShow: customSQLFlag.value },
+          ]);
+          formActionType.updateSchema([{ field: 'querySQL', ifShow: !customSQLFlag.value }]);
+          formActionType.updateSchema([{ field: 'parsingSQL', ifShow: !customSQLFlag.value }]);
+          formActionType.updateSchema([
+            { field: 'isCustomSQLAlert', ifShow: !customSQLFlag.value },
+          ]);
+          formActionType.updateSchema([
+            { field: 'isCustomSQLTable', ifShow: !customSQLFlag.value && isParsingSQL.value },
+          ]);
+        },
+        options: [
+          { label: '是', value: '是' },
+          { label: '否', value: '否' },
+        ],
+      }),
+    },
+    {
+      field: 'filterCondition',
+      label: '过滤条件',
+      component: 'InputTextArea',
+      componentProps: {
+        placeholder: '请输入',
+      },
+    },
+    {
+      field: 'notCustomSQLTable',
+      slot: 'notCustomSQLTable',
+    },
+    {
+      field: 'querySQL',
+      label: '查询SQL',
+      component: 'InputTextArea',
+      componentProps: {
+        placeholder: '请输入',
+      },
+      ifShow: false,
+    },
+    {
+      field: 'parsingSQL',
+      label: ' ',
+      slot: 'parsingSQL',
+      ifShow: false,
+    },
+    {
+      field: 'isCustomSQLAlert',
+      slot: 'isCustomSQLAlert',
+      ifShow: false,
+    },
+    {
+      field: 'isCustomSQLTable',
+      slot: 'isCustomSQLTable',
+      ifShow: isParsingSQL.value,
+    },
+    {
+      field: 'sourceDataTableName',
+      label: '源端数据表名',
+      component: 'Input',
+      colProps: { lg: 11, md: 11 },
+      componentProps: {
+        placeholder: '',
+      },
+      ifShow: false,
+    },
+    {
+      field: 'isBatchCustomSQLTable',
+      slot: 'isBatchCustomSQLTable',
+      ifShow: isParsingSQL.value,
+    },
+  ];
+
+  const [registerGetMetadataModal, { openModal: openGetMetadataModal }] = useModal();
+  const [registerDeplysModal, { openModal: openDeplysModal }] = useModal();
+  const [registerAddRuleModal, { openModal: openAddRuleModal }] = useModal();
+  const [registerDataOptionsModal, { openModal: openDataOptionsModal }] = useModal();
+  const [registerGlobalOptionsModal, { openModal: openGlobalOptionsModal }] = useModal();
+  const [registerSaveModal, { openModal: openSaveModal }] = useModal();
+  const [registerVersionManageModal, { openModal: openVersionManageModal }] = useModal();
+  const [registerRunOptionsModal, { openModal: openRunOptionsModal }] = useModal();
+
+  const [
+    registerSourceSideConfigurationForm,
+    {
+      getFieldsValue,
+      validate: validateSourceSideConfigurationForm,
+      submit: submitSourceSideConfiguration,
+    },
+  ] = useForm({
+    labelWidth: 180,
+    labelAlign: 'left',
+    baseColProps: { lg: 24, md: 24 },
+    schemas: sourceSideConfigurationFormSchema,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 23,
+    },
+  });
+
+  const [registerLoadingStrategyForm, { updateSchema, setFieldsValue }] = useForm({
+    labelWidth: 180,
+    labelAlign: 'left',
+    baseColProps: { lg: 24, md: 24 },
+    schemas: LoadingStrategyFormSchema,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 23,
+    },
+  });
+
+  const [registerIsCustomSQLTable, { reload: isCustomSQLTableReload }] = useTable({
+    api: async () => {
+      isCustomSQLTable.value = isCustomSQLTableList.filter((item) => {
+        return item.ownershipTableId[0] === selectKey.value;
+      });
+      const response = {
+        pageNu: '1',
+        pageSize: '5',
+        pages: '1',
+        total: isCustomSQLTable.value.length,
+        code: '',
+        message: '',
+        data: isCustomSQLTable.value,
+      };
+      return { ...response };
+    },
+    scroll: { y: 300 },
+    rowKey: 'businessId',
+    columns: isCustomSQLColumns,
+    showTableSetting: false,
+    showIndexColumn: false,
+    bordered: false,
+  });
+
+  const [registerIsBatchCustomSQLTable] = useTable({
+    api: async () => {
+      const response = {
+        pageNu: '1',
+        pageSize: '5',
+        pages: '1',
+        total: isBatchCustomSQLTable.value.length,
+        code: '',
+        message: '',
+        data: isBatchCustomSQLTable.value,
+      };
+      return { ...response };
+    },
+    scroll: { y: 300 },
+    rowKey: 'businessId',
+    columns: isCustomSQLColumns,
+    showTableSetting: false,
+    showIndexColumn: false,
+    bordered: false,
+  });
+
+  const [registerNotCustomSQLTable, { reload: notCustomSQLTableReload }] = useTable({
+    api: async () => {
+      notCustomSQLTable.value = notCustomSQLTableList.filter(
+        (item) => item.ownershipTableId[0] === selectKey.value,
+      );
+      const response = {
+        pageNu: '1',
+        pageSize: '5',
+        pages: '1',
+        total: notCustomSQLTable.value.length,
+        code: '',
+        message: '',
+        data: notCustomSQLTable.value,
+      };
+      return { ...response };
+    },
+    scroll: { y: 300 },
+    rowKey: 'businessId',
+    columns: notCustomSQLColumns,
+    showTableSetting: false,
+    showIndexColumn: false,
+    bordered: false,
+    handleSearchInfoFn(info) {
+      // console.log('handleSearchInfoFn', info);
+      return info;
+    },
+    actionColumn: {
+      width: 60,
+      title: '操作',
+      dataIndex: 'action',
+      // slots: { customRender: 'action' },
+    },
+  });
+
+  const [registerMappingRuleConfigurationTable, { getRowSelection }] = useTable({
+    api: async () => {
+      const response = {
+        pageNu: '1',
+        pageSize: '5',
+        pages: '1',
+        total: mappingRuleConfigurationTable.value.length,
+        code: '',
+        message: '',
+        data: mappingRuleConfigurationTable.value,
+      };
+      return { ...response };
+    },
+    scroll: { y: 300 },
+    rowKey: 'businessId',
+    columns: mappingRuleConfigurationColumns,
+    showTableSetting: false,
+    showIndexColumn: false,
+    rowSelection: true,
+    bordered: false,
+    actionColumn: {
+      width: 100,
+      title: '操作',
+      dataIndex: 'action',
+      // slots: { customRender: 'action' },
+    },
+  });
+
+  const actionList = [
+    {
+      //删除
+      render: () => {
+        return h(DeleteOutlined, {
+          class: 'ml-2',
+          onClick: () => {
+            handleDeleteTable();
+          },
+        });
+      },
+    },
+  ];
+
+  onMounted(() => {
+    setFieldsValue({
+      sourceDataTableName: 'user_info,customer_details,order_history,product_inventory',
+    });
+  });
+
+  // 删除节点
+  const handleDeleteTable = () => {
+    Modal.confirm({
+      title: '确认删除',
+      content: '确定要删除此表吗？',
+      okText: '确认',
+      cancelText: '取消',
+      onOk() {
+        createMessage.success('删除成功!');
+      },
+      onCancel() {
+        console.log('取消删除');
+        createMessage.info('取消删除');
+      },
+    });
+  };
+
+  function handleChangeTab(key) {
+    tabKey.value = key;
+  }
+
+  function handleDelete() {
+    Modal.confirm({
+      title: '确认删除',
+      content: '确认删除选中字段吗？',
+      okText: '确认',
+      cancelText: '取消',
+      onOk() {
+        createMessage.success('删除成功!');
+      },
+      onCancel() {
+        console.log('取消删除');
+        createMessage.info('取消删除');
+      },
+    });
+  }
+
+  function handleSelect(keys) {
+    isParsingSQL.value = false;
+    console.log('keys', getFieldsValue());
+    selectKey.value = keys.toString();
+    const querySQL = tableTreeData.filter((item) => item.key === keys.toString())[0].sql;
+    setFieldsValue({ querySQL: querySQL });
+    isCustomSQLTableReload();
+    notCustomSQLTableReload();
+    // emit('select', keys[0]);
+  }
+
+  function goBack() {
+    router.back();
+  }
+
+  async function handleSave() {
+    try {
+      const isValid = await validateSourceSideConfigurationForm();
+      if (!isValid) {
+        createMessage.error('表单校验未通过，请检查输入');
+        return;
+      }
+      await submitSourceSideConfiguration();
+      createMessage.success('保存成功');
+      router.back();
+    } catch (error) {
+      console.error('保存失败:', error);
+      createMessage.error('表单校验未通过，请检查输入');
+    }
+  }
+
+  function handlePublish() {
+    openSaveModal(true, {
+      title: '发布新版本',
+    });
+  }
+
+  function handleDeplys() {
+    console.log('myCheckedKeys', myCheckedKeys.value);
+    openDeplysModal(true, {
+      loadType,
+      myCheckedKeys,
+    });
+  }
+
+  function handleGetMetadata() {
+    openGetMetadataModal(true);
+  }
+
+  function handleAddRule() {
+    openAddRuleModal();
+  }
+  function handleParameterConfiguration() {
+    openDataOptionsModal(true, {
+      title: '数据加载参数配置',
+    });
+  }
+  function handleGobalDeply() {
+    openGlobalOptionsModal(true, {
+      title: '数据加载全局配置',
+    });
+  }
+  function handleVersionManagement() {
+    openVersionManageModal(true, {
+      title: '数据加载版本管理',
+    });
+  }
+  function handleRun() {
+    openRunOptionsModal(true, {
+      title: '参数列表',
+    });
+  }
+
+  function handleConversion(record) {
+    createMessage.success('数据转换成功' + record.fieldType);
+  }
+
+  function handleEdit(record) {
+    createMessage.success('编辑：' + record);
+  }
+
+  function handleDeleteRule(record) {
+    createMessage.success('删除规则成功' + record);
+  }
+
+  function handleDeleteRules() {
+    createMessage.success('批量删除数据转换规则成功' + getRowSelection().selectedRowKeys);
+  }
+
+  function handleMoveTop(source) {
+    [mappingRuleConfigurationTable.value[source], mappingRuleConfigurationTable.value[0]] = [
+      mappingRuleConfigurationTable.value[0],
+      mappingRuleConfigurationTable.value[source],
+    ];
+  }
+
+  function handleMoveDown(source) {
+    if (mappingRuleConfigurationTable.value[source + 1]) {
+      [
+        mappingRuleConfigurationTable.value[source],
+        mappingRuleConfigurationTable.value[source + 1],
+      ] = [
+        mappingRuleConfigurationTable.value[source + 1],
+        mappingRuleConfigurationTable.value[source],
+      ];
+    }
+  }
+
+  function handleMoveUp(source) {
+    if (mappingRuleConfigurationTable.value[source - 1]) {
+      [
+        mappingRuleConfigurationTable.value[source],
+        mappingRuleConfigurationTable.value[source - 1],
+      ] = [
+        mappingRuleConfigurationTable.value[source - 1],
+        mappingRuleConfigurationTable.value[source],
+      ];
+    }
+  }
+
+  function handleParsingSQL() {
+    isParsingSQL.value = true;
+    updateSchema([
+      {
+        field: 'isCustomSQLTable',
+        ifShow: !metadataAcquisitionModeFlag.value && !customSQLFlag.value && isParsingSQL.value,
+      },
+    ]);
+    updateSchema([
+      {
+        field: 'isBatchCustomSQLTable',
+        ifShow: metadataAcquisitionModeFlag.value && isParsingSQL.value,
+      },
+    ]);
+  }
+</script>
+<style lang="scss" scoped>
+  .content-padding {
+    background-color: white;
+  }
+  .modal_top {
+    padding: 0 0 -10 0;
+    display: flex;
+    align-items: center;
+    .title {
+      font-size: 16px;
+      font-weight: 500;
+    }
+    .path {
+      font-size: 14px;
+      color: gray;
+    }
+    .buttonGroup {
+      margin-left: auto;
+      display: flex;
+      gap: 5px;
+      align-items: center;
+    }
+  }
+</style>

src/views/realTimeSync/dataBaseToDataBase/sceneSelectionModal.vue

@@ -17,6 +17,18 @@
                     :icon="item.icon"
                     :color="item.color"
                   />
+                  <Icon
+                    class="sceneSelectionIcon"
+                    v-if="item.pathIcon"
+                    :icon="item.pathIcon"
+                    :color="item.pathColor"
+                  />
+                  <Icon
+                    class="sceneSelectionIcon"
+                    v-if="item.endpointIcon"
+                    :icon="item.endpointIcon"
+                    :color="item.pathColor"
+                  />
                 </div>
                 <div class="sceneSelectionTitle">
                   {{ item.title }}
@@ -45,7 +57,7 @@
 
   function handleNewModal(scene) {
     router.push({
-      path: '/dataIntegration/dataLoading/dataEntryLake/' + scene,
+      path: '/realTimeSync/dataBaseToDataBase/' + scene,
     });
   }
 </script>