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

src/views/realTimeSync/dataBaseToDataBase/data.ts

@@ -256,14 +256,40 @@ export const mappingRuleConfigurationColumns: BasicColumn[] = [
     title: '规则名称',
     dataIndex: 'ruleName',
     width: 200,
+    edit: true,
+    editable: true,
+    editComponent: 'Input',
   },
   {
-    title: '规则内容',
-    dataIndex: 'ruleContent',
+    title: '规则类型',
+    dataIndex: 'ruleType',
+    width: 100,
+  },
+  {
+    title: '数据表',
+    dataIndex: 'dataTable',
+    width: 120,
+    edit: true,
+    editable: true,
+    editComponent: 'Select',
+    editComponentProps: {
+      options: [
+        { label: '数据表1', value: '数据表1' },
+        { label: '数据表2', value: '数据表2' },
+      ],
+    },
+  },
+  {
+    title: '规则详情',
+    dataIndex: 'ruleDetail',
+    width: 200,
+    edit: true,
+    editable: true,
+    editComponent: 'Input',
   },
   {
     title: '执行顺序',
-    width: 100,
+    width: 50,
     dataIndex: 'executionSequence',
     slots: { customRender: 'executionSequence' },
   },
@@ -323,3 +349,359 @@ export const tableDetailFormSchema: FormSchema[] = [
     colProps: { lg: 12, md: 12 },
   },
 ];
+export const sourceSideConfigurationFormSchema: FormSchema[] = [
+  {
+    field: 'sourceType',
+    label: '源端类型',
+    component: 'Select',
+    required: true,
+    componentProps: {
+      placeholder: '请选择源端类型',
+      options: [
+        { label: 'MYSQL', value: '1' },
+        { label: 'ORACLE', value: '2' },
+        { label: 'KUNDB', value: '3' },
+      ],
+    },
+  },
+  {
+    field: 'analysisType',
+    label: ' ',
+    component: 'Select',
+    componentProps: {
+      options: [
+        { label: '本地解析', value: '1' },
+        { label: 'Xstream', value: '2' },
+      ],
+    },
+    ifShow: ({ model }) => model.sourceType === '2',
+  },
+  {
+    field: 'version',
+    label: ' ',
+    component: 'Select',
+    componentProps: {
+      options: [
+        { label: '高可用版本', value: '1' },
+        { label: '分布式版本', value: '2' },
+      ],
+    },
+    ifShow: ({ model }) => model.sourceType === '3',
+  },
+  {
+    field: 'analysisAlter1',
+    label: '',
+    slot: 'analysisAlter1',
+    ifShow: ({ model }) => model.sourceType === '2' && model.analysisType === '1',
+  },
+  {
+    field: 'analysisAlter1',
+    label: '',
+    slot: 'analysisAlter1',
+    ifShow: ({ model }) => model.sourceType === '2' && model.analysisType === '2',
+  },
+  {
+    field: 'RpcIp1',
+    label: 'Rpc地址',
+    component: 'Input',
+    ifShow: ({ model }) => model.sourceType === '2' && model.analysisType === '1',
+  },
+  {
+    field: 'RpcIp2',
+    label: 'Rpc地址',
+    component: 'Input',
+    ifShow: ({ model }) => model.sourceType === '3' && model.version === '2',
+  },
+  {
+    field: 'mysqlServer',
+    label: 'MYSQL server',
+    component: 'Input',
+    ifShow: ({ model }) => model.sourceType === '3' && model.version === '1',
+  },
+  {
+    field: 'dataSource',
+    label: '数据源',
+    component: 'Select',
+    required: true,
+    componentProps: {
+      placeholder: '请选择数据源',
+      options: [
+        { label: 'KunOB数据源', value: '1' },
+        { label: 'MongoDB数据源', value: '2' },
+        { label: 'AmazonS3', value: '3' },
+      ],
+    },
+  },
+  {
+    field: 'dataBase',
+    label: '数据库',
+    component: 'Select',
+    componentProps: {
+      mode: 'multiple',
+      placeholder: '请选择数据源',
+      options: [
+        { label: 'KunOBDB', value: '1' },
+        { label: 'MongoDB', value: '2' },
+        { label: 'AmazonS3DB', value: '3' },
+      ],
+    },
+  },
+  {
+    field: 'xstreaName',
+    label: 'xstream服务名称',
+    component: 'Input',
+    ifShow: ({ model }) => model.sourceType === '2' && model.analysisType === '2',
+  },
+  {
+    field: 'loadType',
+    label: '数据表获取方式',
+    component: 'RadioGroup',
+    defaultValue: '1',
+    componentProps: {
+      options: [
+        { label: '直接选表', value: '1' },
+        { label: '规则过滤', value: '2' },
+      ],
+    },
+  },
+  {
+    field: 'include',
+    label: '包含',
+    component: 'InputTextArea',
+    ifShow: ({ model }) => model.loadType === '2',
+  },
+  {
+    field: 'exclude',
+    label: '排除',
+    component: 'InputTextArea',
+    ifShow: ({ model }) => model.loadType === '2',
+  },
+  {
+    field: 'getMetadata',
+    label: ' ',
+    slot: 'getMetadata',
+    ifShow: ({ model }) => model.loadType === '1',
+  },
+  {
+    field: 'previewMetadata',
+    label: ' ',
+    slot: 'previewMetadata',
+    ifShow: ({ model }) => model.loadType === '2',
+  },
+];
+export const kafkaOptionsColumns: BasicColumn[] = [
+  {
+    title: '',
+    editable: true,
+    edit: true,
+    dataIndex: 'name',
+    width: 120,
+  },
+];
+export const kafkaOptionsFormSchema: FormSchema[] = [
+  {
+    field: 'kafkaOptions1',
+    label: '',
+    slot: 'kafkaOptions1',
+    colProps: { lg: 24, md: 24 },
+  },
+  {
+    field: 'topicType',
+    label: 'Topic配置方式',
+    component: 'RadioGroup',
+    defaultValue: '1',
+    required: true,
+    componentProps: {
+      options: [{ label: '自定义数量', value: '1' }],
+    },
+    colProps: { lg: 24, md: 24 },
+  },
+  {
+    field: 'kafkaOptions2',
+    label: '',
+    slot: 'kafkaOptions2',
+    colProps: { lg: 24, md: 24 },
+  },
+  {
+    field: 'num',
+    label: 'Topic数量',
+    component: 'InputNumber',
+    componentProps: {
+      min: 1,
+      max: 50,
+    },
+    defaultValue: 1,
+    required: true,
+    colProps: { lg: 4, md: 4 },
+  },
+  {
+    field: 'kafkaOptionsGenerate',
+    label: '',
+    slot: 'kafkaOptionsGenerate',
+    colProps: { lg: 24, md: 24 },
+  },
+  {
+    field: 'kafkaOptions3',
+    label: '',
+    slot: 'kafkaOptions3',
+    colProps: { lg: 24, md: 24 },
+  },
+];
+export const mappingRulesTopicTableColumns: BasicColumn[] = [
+  {
+    title: 'Topic',
+    dataIndex: 'name',
+    width: 140,
+  },
+  {
+    title: 'Db',
+    dataIndex: 'dataBase',
+    width: 120,
+    edit: true,
+    editable: true,
+    editComponent: 'Select',
+    editComponentProps: {
+      showArrow: true,
+      mode: 'multiple',
+      options: [
+        { label: '请选择', value: '' },
+        { label: 'fbs_1_flashsyncA_stable3.flashsync_stable1', value: '1' },
+        { label: 'fbs_1_flashsyncA_stable3.flashsync_stable2', value: '2' },
+      ],
+    },
+  },
+  {
+    title: 'Table名称表达式',
+    dataIndex: 'remark',
+    width: 100,
+    edit: true,
+    editable: true,
+  },
+];
+export const mappingRulesTableColumns: BasicColumn[] = [
+  {
+    title: '源表名',
+    dataIndex: 'dataSourceName',
+    width: 120,
+  },
+  {
+    title: 'Topic名称',
+    dataIndex: 'topicName',
+    width: 120,
+  },
+];
+export const tableMappingFormSchema: FormSchema[] = [
+  {
+    field: 'dataSource',
+    label: '目标数据源',
+    component: 'Select',
+    componentProps: {
+      placeholder: '请选择数据源',
+      options: [
+        { label: 'KunOBDB', value: '1' },
+        { label: 'MongoDB', value: '2' },
+        { label: 'AmazonS3DB', value: '3' },
+      ],
+    },
+    required: true,
+  },
+];
+export const tableMappingColumns: BasicColumn[] = [
+  {
+    title: '规则名称',
+    dataIndex: 'name',
+    width: 140,
+  },
+  {
+    title: '执行顺序',
+    width: 50,
+    dataIndex: 'executionSequence',
+    slots: { customRender: 'executionSequence' },
+  },
+];
+export const writePolicyColumns: BasicColumn[] = [
+  {
+    title: 'Topic名称',
+    dataIndex: 'topicName',
+    width: 120,
+  },
+  {
+    title: '表数量',
+    dataIndex: 'tableNum',
+    width: 120,
+  },
+  {
+    title: '并发数',
+    dataIndex: 'concurrency',
+    edit: true,
+    editable: true,
+    width: 120,
+  },
+  {
+    title: '条数',
+    dataIndex: 'num',
+    edit: true,
+    editable: true,
+    width: 120,
+  },
+  {
+    title: '时间间隔/s',
+    dataIndex: 'timeInterval',
+    edit: true,
+    editable: true,
+    width: 120,
+  },
+];
+export const policyOptionFormSchema: FormSchema[] = [
+  {
+    field: 'policyOption',
+    label: '',
+    slot: 'policyOption',
+    colProps: { lg: 24, md: 24 },
+  },
+  {
+    field: 'ddl',
+    label: 'ddl变更策略',
+    component: 'Select',
+    defaultValue: '1',
+    componentProps: {
+      options: [{ label: 'DB-DB源端DDL处理默认策略', value: '1' }],
+    },
+  },
+  {
+    field: 'data',
+    label: '数据积压策略',
+    component: 'Select',
+    defaultValue: '1',
+    componentProps: {
+      options: [{ label: '数据积压默认策略', value: '1' }],
+    },
+  },
+  {
+    field: 'exception',
+    label: '数据异常策略',
+    component: 'Select',
+    defaultValue: '1',
+    componentProps: {
+      options: [{ label: '目标端数据异常默认策略', value: '1' }],
+    },
+  },
+  {
+    field: 'system',
+    label: '系统异常策略',
+    component: 'Select',
+    defaultValue: '1',
+    componentProps: {
+      options: [{ label: '系统异常默认策略', value: '1' }],
+    },
+  },
+  {
+    field: 'config',
+    label: '一致性检查策略',
+    component: 'Select',
+    defaultValue: '1',
+    componentProps: {
+      options: [{ label: '一致性检查默认策略', value: '1' }],
+    },
+  },
+];

src/views/realTimeSync/dataBaseToDataBase/dataBaseData.ts

+import { tableMappingColumns } from '@/views/realTimeSync/dataBaseToDataBase/data';
+
 export const tableList: any[] = [
   {
     businessId: 1,
@@ -737,33 +739,6 @@ export const notCustomSQLTableList = [
     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',
@@ -994,3 +969,95 @@ export const tableDetailData = [
     detail: 'VARCHAR(255,0)',
   },
 ];
+export const filterRuleCardList = [
+  {
+    title: '数据操作过滤',
+    type: '数据操作过滤',
+    description: '支持在数据同步阶段对当前任务选中表操作过滤',
+  },
+  {
+    title: '数据值过滤',
+    type: '数据值过滤',
+    description: '支持在数据同步阶段对当前任务选中表的数据操作过滤',
+  },
+  {
+    title: '字段过滤',
+    type: '字段过滤',
+    description: '支持在数据同步阶段对当前任务选中表的字段操作过滤',
+  },
+];
+export const mappingRulesTopicTableData: any[] = [
+  {
+    name: '0a5c81a6fd364805961918cd9764241d_01',
+    dataBase: '',
+  },
+  {
+    name: '0a5c81a6fd364805961918cd9764241d_03',
+    dataBase: '',
+  },
+  {
+    name: '0a5c81a6fd364805961918cd9764241d_02',
+    dataBase: '',
+  },
+];
+export const mappingRulesTableData: any[] = [
+  {
+    topicName: '0a5c81a6fd364805961918cd9764241d_01',
+    dataSourceName: 'fbs_1_flashsyncA_stable3.flashsync_stable1',
+  },
+  {
+    topicName: '0a5c81a6fd364805961918cd9764241d_03',
+    dataSourceName: 'fbs_1_flashsyncA_stable3.flashsync_stable2',
+  },
+  {
+    topicName: '0a5c81a6fd364805961918cd9764241d_02',
+    dataSourceName: 'fbs_1_flashsyncA_stable3.flashsync_stable3',
+  },
+  {
+    topicName: '0a5c81a6fd364805961918cd9764241d_02',
+    dataSourceName: 'fbs_1_flashsyncA_stable3.flashsync_stable1',
+  },
+  {
+    topicName: '0a5c81a6fd364805961918cd9764241d_01',
+    dataSourceName: 'fbs_1_flashsyncA_stable3.flashsync_stable2',
+  },
+  {
+    topicName: '0a5c81a6fd364805961918cd9764241d_03',
+    dataSourceName: 'fbs_1_flashsyncA_stable3.flashsync_stable3',
+  },
+];
+export const tableMappingData: any[] = [
+  {
+    businessId: '1',
+    name: '0a5c81a6fd364805961918cd9764241d_01',
+    dataBase: '',
+  },
+  {
+    businessId: '2',
+    name: '0a5c81a6fd364805961918cd9764241d_03',
+    dataBase: '',
+  },
+];
+export const writePolicyData: any[] = [
+  {
+    topicName: '0a5c81a6fd364805961918cd9764241d_01',
+    tableNum: '3',
+    concurrency: '1',
+    num: '5000',
+    timeInterval: '1',
+  },
+  {
+    topicName: '0a5c81a6fd364805961918cd9764241d_02',
+    tableNum: '3',
+    concurrency: '1',
+    num: '5000',
+    timeInterval: '1',
+  },
+  {
+    topicName: '0a5c81a6fd364805961918cd9764241d_03',
+    tableNum: '3',
+    concurrency: '1',
+    num: '5000',
+    timeInterval: '1',
+  },
+];

src/views/realTimeSync/dataBaseToDataBase/optionPage.vue

@@ -121,25 +121,46 @@
           </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="映射规则">
+          <List>
+            <Row :gutter="16">
+              <template v-for="item in filterRuleCardList" :key="item.title">
+                <Col :span="5">
+                  <ListItem>
+                    <Card :hoverable="true" class="sceneSelectionCard">
+                      <div class="sceneSelectionTitle">
+                        {{ item.title }}
+                        <a-button
+                          type="primary"
+                          style="float: right"
+                          @click="addProperty(item.type)"
+                          >添加规则</a-button
+                        >
+                      </div>
+                      <div class="sceneSelectionDescription">
+                        {{ item.description }}
+                      </div>
+                    </Card>
+                  </ListItem>
+                </Col>
+              </template>
+            </Row>
+          </List>
+          <Alert
+            show-icon
+            message="             1、notin、in的过滤规则，请用英文逗号将枚举值隔开，若有特殊字符请添加转义
+             2、仅支持数值型、时问类型的字段进行大小比较选定范围
+             3、时间类型的仅支持YYYY-MMM-DD HH:mm:ss格式的值比较"
+            type="info"
+            style="font-size: 15px; white-space: pre-wrap"
+          />
           <BasicTable title="数据转换规则" @register="registerMappingRuleConfigurationTable">
             <template #toolbar>
               <a-button
                 :disabled="getRowSelection().selectedRowKeys <= 0"
                 type="primary"
                 @click="handleDeleteRules"
-                >删除规则</a-button
+                >删除</a-button
               >
-              <a-button type="primary" @click="handleAddRule">新增规则</a-button>
             </template>
             <template #executionSequence="{ index }">
               <div style="display: flex; justify-content: center; color: dimgray">
@@ -165,10 +186,6 @@
                 <TableAction
                   stopButtonPropagation
                   :actions="[
-                    {
-                      icon: 'iconamoon:edit',
-                      onClick: handleEdit.bind(null, record),
-                    },
                     {
                       icon: 'ic:outline-delete-outline',
                       onClick: handleDeleteRule.bind(null, record),
@@ -179,10 +196,120 @@
             </template>
           </BasicTable>
         </TabPane>
+        <TabPane v-if="tabKey === '2'" key="3" tab="Kafka配置">
+          <BasicForm @register="registerKafkaOptionsForm">
+            <template #kafkaOptionsGenerate>
+              <a-button @click="kafkaOptionsGenerate" type="primary">生成Topic列表</a-button>
+            </template>
+            <template #kafkaOptions1>
+              <Alert
+                show-icon
+                message="实时同步解析后数据暂存Kaia中待目标端消费，故提供页面配置供用户配置T0pic信息,支持用户自定义Topic数量和名称;Topic数量清根据源端选择表进行选择，此处数量不宜过大
+                         否则服务负载过大可能导致整体延迟较高;Topic名称将会根据创建任务的UUID自动生成，用户也可以根据业务手动修改保存。"
+                type="info"
+                style="font-size: 13px"
+              />
+            </template>
+            <template #kafkaOptions2>
+              <Alert
+                show-icon
+                message="推荐设置的数量不要超过当前选择表的数量，且不支持在任务启动后切换模式，并不建议随意删除、修改Topic否则会导致数据丢失。"
+                type="warning"
+                style="font-size: 13px"
+              />
+            </template>
+            <template #kafkaOptions3>
+              <Alert
+                show-icon
+                message="修改Topic数量配置后，请一定要点击生成Topic列表，否则映射规则无法应用最新的配置。"
+                type="info"
+                style="font-size: 13px"
+              />
+            </template>
+          </BasicForm>
+          <div style="width: 40%">
+            <BasicTable @register="registerKafkaOptionsTable" />
+          </div>
+        </TabPane>
+        <TabPane v-if="tabKey === '2'" key="4" tab="映射规则">
+          <div class="flex">
+            <div style="width: 50%">
+              <BasicForm @register="registerMappingRulesForm">
+                <template #mappingRulesBtn>
+                  <a-button @click="mappingRules" type="primary">预览</a-button>
+                </template>
+                <template #mappingRules1>
+                  <Alert
+                    show-icon
+                    message="根据Kafka配置中的Topic数量，用户可以根据源端表业务更新流量进行映射规则配置。"
+                    type="info"
+                    style="font-size: 14px"
+                  />
+                </template>
+                <template #mappingRules2>
+                  <Alert
+                    show-icon
+                    message="源端表没有匹配的topic，会按照默认策略进行匹配topic。不支持用户在发布版本并运行任务后在修改topic映射规则，可能会导致数据去失。"
+                    type="warning"
+                    style="font-size: 14px"
+                  />
+                </template>
+                <template #mappingRulesTable v-if="mappingRulesTopicTableShow">
+                  <BasicTable @register="registerMappingRulesTopicTable" />
+                </template>
+              </BasicForm>
+            </div>
+            <div style="width: 50%">
+              <BasicTable v-if="mappingRulesTableShow" @register="registerMappingRulesTable" />
+            </div>
+          </div>
+        </TabPane>
         <TabPane v-if="tabKey === '3'" key="5" tab="表映射">
-          <!--          <BasicForm>-->
-
-          <!--          </BasicForm>-->
+          <div class="flex">
+            <div style="width: 30%">
+              <BasicForm @register="registerTableMappingForm" />
+              <BasicTable title="库名映射规则" @register="registerTableMappingTable">
+                <template #toolbar>
+                  <a-button type="primary" @click="handleDeleteRules">删除</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: 'ic:outline-delete-outline',
+                          onClick: handleDeleteRule.bind(null, record),
+                        },
+                      ]"
+                    />
+                  </template>
+                </template>
+              </BasicTable>
+            </div>
+            <div style="width: 70%">
+              <BasicTable v-if="mappingRulesTableShow" @register="registerMappingRulesTable" />
+            </div>
+          </div>
         </TabPane>
         <TabPane v-if="tabKey === '3'" key="6" tab="字段映射">
           <!--          <BasicForm>-->
@@ -190,25 +317,30 @@
           <!--          </BasicForm>-->
         </TabPane>
         <TabPane v-if="tabKey === '3'" key="7" tab="策略">
-          <!--          <BasicForm>-->
-
-          <!--          </BasicForm>-->
+          <Description size="middle" title="写入速率策略" :bordered="false" />
+          <Alert
+            show-icon
+            message="并发数是指对处理每个topic在目标端创建的最大连接数，一张表最多创建1个连接。"
+            type="info"
+            style="font-size: 14px"
+          />
+          <BasicTable @register="registerWritePolicyTable" />
         </TabPane>
         <TabPane v-if="tabKey === '4'" key="8" tab="策略配置">
-          <!--          <BasicTable>-->
-
-          <!--          </BasicTable>-->
-          <!--          <BasicTable>-->
-
-          <!--          </BasicTable>-->
+          <Description size="middle" title="服务策略配置" :bordered="false" />
+          <BasicForm @register="registerPolicyOptionsForm">
+            <template #policyOption>
+              <Alert
+                show-icon
+                message="服务策略请在策略指标配置中心配置。"
+                type="info"
+                style="font-size: 15px"
+              />
+            </template>
+          </BasicForm>
         </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" />
@@ -219,13 +351,12 @@
       </Tabs>
     </div>
     <GetMetadataModal @register="registerGetMetadataModal" />
-    <AddDataConversionRuleModal @register="registerAddRuleModal" />
     <SaveModal @register="registerSaveModal" />
     <VersionManageModal @register="registerVersionManageModal" />
   </PageWrapper>
 </template>
 <script lang="ts" setup>
-  import { Tabs, TabPane, Alert, Modal } from 'ant-design-vue';
+  import { Tabs, TabPane, Alert, Col, ListItem, List, Card, Row } from 'ant-design-vue';
   import { ref, onMounted } from 'vue';
   import { BasicForm, FormSchema, useForm } from '@/components/Form';
   import {
@@ -234,186 +365,101 @@
     getMetadataColumns,
     tableDetailColumns,
     tableDetailFormSchema,
+    sourceSideConfigurationFormSchema,
+    kafkaOptionsColumns,
+    kafkaOptionsFormSchema,
+    mappingRulesTopicTableColumns,
+    mappingRulesTableColumns,
+    tableMappingFormSchema,
+    tableMappingColumns,
+    writePolicyColumns,
+    policyOptionFormSchema,
   } 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 {
-    mappingRuleConfigurationTableList,
     dataDirectionData,
     getMetadataTableList,
     tableDetailData,
+    filterRuleCardList,
+    mappingRulesTopicTableData,
+    mappingRulesTableData,
+    tableMappingData,
+    writePolicyData,
   } from './dataBaseData';
   import { router } from '@/router';
   import { BasicTable, useTable, TableAction } from '@/components/Table';
   import { useModal } from '@/components/Modal';
   import GetMetadataModal from './getMetadataModal.vue';
-  import AddDataConversionRuleModal from '@/views/dataIntegration/dataLoading/dataEntryLake/addDataConversionRuleModal.vue';
   import SaveModal from '@/views/dataIntegration/dataLoading/dataEntryLake/saveModal.vue';
   import VersionManageModal from '@/views/dataIntegration/dataLoading/dataEntryLake/versionManageModal.vue';
+  import { Description } from '@/components/Description';
 
   const emit = defineEmits(['success', 'register']);
   const { createMessage, createConfirm } = useMessage();
   const route = useRoute();
-  let mappingRuleConfigurationTable = ref(mappingRuleConfigurationTableList);
+  const mappingRuleConfigurationTable = ref([]);
+  const kafkaOptionDataTable = ref([]);
   const tabKey = ref('1');
-  let getMetadataTable = ref(getMetadataTableList);
+  const n = ref('1');
+  const mappingRulesTableShow = ref(false);
+  const mappingRulesTopicTableShow = ref(false);
+  const getMetadataTable = ref(getMetadataTableList);
   const tableDetail = ref(false);
 
-  const sourceSideConfigurationFormSchema: FormSchema[] = [
-    {
-      field: 'sourceType',
-      label: '源端类型',
-      component: 'Select',
-      required: true,
-      componentProps: {
-        placeholder: '请选择源端类型',
-        options: [
-          { label: 'MYSQL', value: '1' },
-          { label: 'ORACLE', value: '2' },
-          { label: 'KUNDB', value: '3' },
-        ],
-      },
-    },
-    {
-      field: 'analysisType',
-      label: ' ',
-      component: 'Select',
-      componentProps: {
-        options: [
-          { label: '本地解析', value: '1' },
-          { label: 'Xstream', value: '2' },
-        ],
-      },
-      ifShow: ({ model }) => model.sourceType === '2',
-    },
-    {
-      field: 'version',
-      label: ' ',
-      component: 'Select',
-      componentProps: {
-        options: [
-          { label: '高可用版本', value: '1' },
-          { label: '分布式版本', value: '2' },
-        ],
-      },
-      ifShow: ({ model }) => model.sourceType === '3',
-    },
-    {
-      field: 'analysisAlter1',
-      label: '',
-      slot: 'analysisAlter1',
-      ifShow: ({ model }) => model.sourceType === '2' && model.analysisType === '1',
-    },
+  const [registerGetMetadataModal, { openModal: openGetMetadataModal }] = useModal();
+  const [registerSaveModal, { openModal: openSaveModal }] = useModal();
+  const [registerVersionManageModal, { openModal: openVersionManageModal }] = useModal();
+
+  const mappingRulesFormSchema: FormSchema[] = [
     {
-      field: 'analysisAlter1',
+      field: 'mappingRules1',
       label: '',
-      slot: 'analysisAlter1',
-      ifShow: ({ model }) => model.sourceType === '2' && model.analysisType === '2',
-    },
-    {
-      field: 'RpcIp1',
-      label: 'Rpc地址',
-      component: 'Input',
-      ifShow: ({ model }) => model.sourceType === '2' && model.analysisType === '1',
-    },
-    {
-      field: 'RpcIp2',
-      label: 'Rpc地址',
-      component: 'Input',
-      ifShow: ({ model }) => model.sourceType === '3' && model.version === '2',
-    },
-    {
-      field: 'mysqlServer',
-      label: 'MYSQL server',
-      component: 'Input',
-      ifShow: ({ model }) => model.sourceType === '3' && model.version === '1',
-    },
-    {
-      field: 'dataSource',
-      label: '数据源',
-      component: 'Select',
-      required: true,
-      componentProps: {
-        placeholder: '请选择数据源',
-        options: [
-          { label: 'KunOB数据源', value: '1' },
-          { label: 'MongoDB数据源', value: '2' },
-          { label: 'AmazonS3', value: '3' },
-        ],
-      },
+      slot: 'mappingRules1',
+      colProps: { lg: 24, md: 24 },
     },
     {
-      field: 'dataBase',
-      label: '数据库',
-      component: 'Select',
-      componentProps: {
-        mode: 'multiple',
-        placeholder: '请选择数据源',
-        options: [
-          { label: 'KunOBDB', value: '1' },
-          { label: 'MongoDB', value: '2' },
-          { label: 'AmazonS3DB', value: '3' },
-        ],
-      },
-    },
-    {
-      field: 'xstreaName',
-      label: 'xstream服务名称',
-      component: 'Input',
-      ifShow: ({ model }) => model.sourceType === '2' && model.analysisType === '2',
-    },
-    {
-      field: 'loadType',
-      label: '数据表获取方式',
+      field: 'topicMappingType',
+      label: 'Topic映射关系',
       component: 'RadioGroup',
       defaultValue: '1',
-      componentProps: {
+      required: true,
+      componentProps: ({ formModel }) => ({
+        onChange: () => {
+          mappingRulesTopicTableShow.value = formModel.topicMappingType === '2';
+        },
         options: [
-          { label: '直接选表', value: '1' },
-          { label: '规则过滤', value: '2' },
+          { label: '默认', value: '1' },
+          { label: '自定义', value: '2' },
         ],
-      },
-    },
-    {
-      field: 'include',
-      label: '包含',
-      component: 'InputTextArea',
-      ifShow: ({ model }) => model.loadType === '2',
+      }),
+      colProps: { lg: 24, md: 24 },
     },
     {
-      field: 'exclude',
-      label: '排除',
-      component: 'InputTextArea',
-      ifShow: ({ model }) => model.loadType === '2',
+      field: 'mappingRules2',
+      label: '',
+      slot: 'mappingRules2',
+      colProps: { lg: 24, md: 24 },
     },
     {
-      field: 'getMetadata',
-      label: ' ',
-      slot: 'getMetadata',
-      ifShow: ({ model }) => model.loadType === '1',
+      field: 'mappingRulesTable',
+      label: '',
+      slot: 'mappingRulesTable',
+      colProps: { lg: 24, md: 24 },
     },
     {
-      field: 'previewMetadata',
-      label: ' ',
-      slot: 'previewMetadata',
-      ifShow: ({ model }) => model.loadType === '2',
+      field: 'mappingRulesBtn',
+      label: '',
+      slot: 'mappingRulesBtn',
+      colProps: { lg: 24, md: 24 },
     },
   ];
 
-  const [registerGetMetadataModal, { openModal: openGetMetadataModal }] = useModal();
-  const [registerAddRuleModal, { openModal: openAddRuleModal }] = useModal();
-  const [registerSaveModal, { openModal: openSaveModal }] = useModal();
-  const [registerVersionManageModal, { openModal: openVersionManageModal }] = useModal();
-
   const [
     registerSourceSideConfigurationForm,
-    {
-      getFieldsValue,
-      validate: validateSourceSideConfigurationForm,
-      submit: submitSourceSideConfiguration,
-    },
+    { validate: validateSourceSideConfigurationForm, submit: submitSourceSideConfiguration },
   ] = useForm({
     labelWidth: 180,
     labelAlign: 'left',
@@ -424,8 +470,47 @@
       span: 23,
     },
   });
-
-  const [registerMappingRuleConfigurationTable, { getRowSelection }] = useTable({
+  const [registerKafkaOptionsForm, { getFieldsValue }] = useForm({
+    labelWidth: 110,
+    labelAlign: 'left',
+    baseColProps: { lg: 24, md: 24 },
+    schemas: kafkaOptionsFormSchema,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 23,
+    },
+  });
+  const [registerMappingRulesForm] = useForm({
+    labelWidth: 110,
+    labelAlign: 'left',
+    baseColProps: { lg: 24, md: 24 },
+    schemas: mappingRulesFormSchema,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 23,
+    },
+  });
+  const [registerTableMappingForm] = useForm({
+    labelWidth: 110,
+    labelAlign: 'left',
+    baseColProps: { lg: 12, md: 12 },
+    schemas: tableMappingFormSchema,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 23,
+    },
+  });
+  const [registerPolicyOptionsForm] = useForm({
+    labelWidth: 180,
+    labelAlign: 'left',
+    baseColProps: { lg: 24, md: 24 },
+    schemas: policyOptionFormSchema,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 23,
+    },
+  });
+  const [registerMappingRuleConfigurationTable, { getRowSelection, reload }] = useTable({
     api: async () => {
       const response = {
         pageNu: '1',
@@ -446,7 +531,7 @@
     rowSelection: true,
     bordered: false,
     actionColumn: {
-      width: 100,
+      width: 50,
       title: '操作',
       dataIndex: 'action',
       // slots: { customRender: 'action' },
@@ -461,6 +546,53 @@
     scroll: { y: 500 },
   });
 
+  const [registerKafkaOptionsTable] = useTable({
+    title: 'Topic列表',
+    dataSource: kafkaOptionDataTable,
+    columns: kafkaOptionsColumns,
+    pagination: false,
+    bordered: false,
+    striped: false,
+    showIndexColumn: false,
+    scroll: { y: 200 },
+  });
+
+  const [registerMappingRulesTopicTable] = useTable({
+    dataSource: mappingRulesTopicTableData,
+    columns: mappingRulesTopicTableColumns,
+    pagination: false,
+    showIndexColumn: false,
+    scroll: { y: 200 },
+  });
+
+  const [registerMappingRulesTable] = useTable({
+    dataSource: mappingRulesTableData,
+    columns: mappingRulesTableColumns,
+    pagination: true,
+    showIndexColumn: false,
+    scroll: { y: 500 },
+  });
+  const [registerWritePolicyTable] = useTable({
+    dataSource: writePolicyData,
+    columns: writePolicyColumns,
+    pagination: true,
+    showIndexColumn: false,
+    scroll: { y: 500 },
+  });
+
+  const [registerTableMappingTable] = useTable({
+    dataSource: tableMappingData,
+    columns: tableMappingColumns,
+    pagination: false,
+    showIndexColumn: false,
+    actionColumn: {
+      width: 50,
+      title: '操作',
+      dataIndex: 'action',
+    },
+    scroll: { y: 200 },
+  });
+
   const [registerDataSourceTable] = useTable({
     api: async () => {
       const response = {
@@ -511,11 +643,27 @@
   });
 
   function handleGetMetadata(type) {
-    tableDetail.value = true;
     if (type === 'get') {
       openGetMetadataModal(true);
     }
+    tableDetail.value = true;
+  }
+
+  function kafkaOptionsGenerate() {
+    const num = getFieldsValue().num;
+    const data = [];
+    for (let i = 1; i < num + 1; i++) {
+      data.push({
+        businessId: i,
+        name: '0a5c81a6fd364805961918cd9764241d_0' + i,
+      });
     }
+    kafkaOptionDataTable.value = data;
+  }
+  function mappingRules() {
+    mappingRulesTableShow.value = true;
+  }
+
   onMounted(() => {});
 
   function handleChangeTab(key) {
@@ -548,25 +696,50 @@
     });
   }
 
-  function handleAddRule() {
-    openAddRuleModal();
-  }
   function handleVersionManagement() {
     openVersionManageModal(true, {
       title: '数据加载版本管理',
     });
   }
 
-  function handleEdit(record) {
-    createMessage.success('编辑：' + record);
+  function handleDeleteRules() {
+    const selectedKeys = getRowSelection().selectedRowKeys;
+    if (selectedKeys !== undefined) {
+      selectedKeys.forEach((key) => {
+        const index = mappingRuleConfigurationTable.value.findIndex(
+          (item) => item.businessId === key,
+        );
+        if (index !== -1) {
+          mappingRuleConfigurationTable.value.splice(index, 1);
+        }
+      });
+      createMessage.success('批量删除数据转换规则成功');
     }
-
-  function handleDeleteRule(record) {
-    createMessage.success('删除规则成功' + record);
   }
 
-  function handleDeleteRules() {
-    createMessage.success('批量删除数据转换规则成功' + getRowSelection().selectedRowKeys);
+  /**新增属性*/
+  function addProperty(type) {
+    const data = {
+      businessId: n.value + 1,
+      name: '',
+      dataTable: '',
+      ruleDetail: '',
+      ruleType: type,
+    };
+    mappingRuleConfigurationTable.value.push(data);
+    n.value++;
+    reload();
+  }
+  /** 删除按钮*/
+  function handleDeleteRule(record: Recordable) {
+    mappingRuleConfigurationTable.value.splice(
+      mappingRuleConfigurationTable.value.findIndex(
+        (item) => item.businessId === record.businessId,
+      ),
+      1,
+    );
+    createMessage.success('删除成功!');
+    reload();
   }
 
   function handleMoveTop(source) {
@@ -623,4 +796,15 @@
       align-items: center;
     }
   }
+  .sceneSelectionDescription {
+    font-size: 14px;
+    color: gray;
+    text-align: left;
+    line-height: 1.2;
+  }
+  .sceneSelectionTitle {
+    font-size: 18px;
+    font-weight: bold;
+    margin-bottom: 8px;
+  }
 </style>