数据入湖-准实时-->映射规则配置-弹窗

src/views/dataIntegration/dataLakePunctual/addDataConversionRuleModal.vue

+<template>
+  <BasicModal width="40%" v-bind="$attrs" @register="registerModal" @ok="handleSubmit">
+    <template #title>
+      <span style="font-size: 23px; font-weight: lighter">新建规则</span>
+    </template>
+    <Span style="font-size: 18px">
+      <Icon
+        style="margin-right: 5px; font-size: 18px"
+        :color="'#5cb3ff'"
+        icon="material-symbols:table-convert-outline"
+      />数据转换规则
+    </Span>
+    <List>
+      <Row :gutter="16">
+        <template v-for="item in cardRuleList" :key="item.title">
+          <Col :span="12">
+            <ListItem>
+              <Card :hoverable="true" class="sceneSelectionCard" @click="handleNewModal(item.type)">
+                <div class="sceneSelectionTitle">
+                  {{ item.title }}
+                </div>
+                <div class="sceneSelectionDescription">
+                  {{ item.description }}
+                </div>
+              </Card>
+            </ListItem>
+          </Col>
+        </template>
+      </Row>
+    </List>
+  </BasicModal>
+  <NewFieldRuleModal @register="registerNewFieldRuleModal" />
+  <FieldNameMappingRuleModal @register="registerFieldNameMappingRuleModal" />
+  <FieldTypeMappingRuleModal @register="registerFieldTypeMappingRuleModal" />
+  <SingleTableFieldMappingRuleModal @register="registerSingleTableFieldMappingRuleModal" />
+</template>
+<script lang="ts" setup>
+  import { onMounted } from 'vue';
+  import Icon from '@/components/Icon/Icon.vue';
+  import { BasicModal, useModal, useModalInner } from '@/components/Modal';
+  import { cardRuleList } from './mock';
+  import { Card, Row, Col, List, ListItem } from 'ant-design-vue';
+  import NewFieldRuleModal from './newFieldRuleModal.vue';
+  import FieldNameMappingRuleModal from './fieldNameMappingRuleModal.vue';
+  import FieldTypeMappingRuleModal from './fieldTypeMappingRuleModal.vue';
+  import SingleTableFieldMappingRuleModal from './singleTableFieldMappingRuleModal.vue';
+
+  const emit = defineEmits(['register']);
+
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async () => {});
+
+  const [registerNewFieldRuleModal, { openModal: openNewFieldRuleModal }] = useModal();
+  const [registerFieldNameMappingRuleModal, { openModal: openFieldNameMappingRuleModal }] = useModal();
+  const [registerFieldTypeMappingRuleModal, { openModal: openFieldTypeMappingRuleModal }] = useModal();
+  const [registerSingleTableFieldMappingRuleModal, { openModal: openSingleTableFieldMappingRuleModal }] = useModal();
+
+  function handleNewModal(type) {
+    console.log(type);
+    switch (type) {
+      case 'newFieldRule':
+        console.log('Handling new field rule');
+        openNewFieldRuleModal(true);
+        break;
+      case 'fieldNameMappingRule':
+        console.log('Handling field name mapping rule');
+        openFieldNameMappingRuleModal(true);
+        break;
+      case 'fieldTypeMappingRule':
+        console.log('Handling field type mapping rule');
+        openFieldTypeMappingRuleModal(true);
+        break;
+      case 'singleTableFieldMappingRule':
+        console.log('Handling single table field mapping rule');
+        openSingleTableFieldMappingRuleModal(true);
+        break;
+      default:
+        console.log('Unknown rule type');
+    }
+  }
+
+  function handleSubmit() {
+    closeModal();
+  }
+
+  onMounted(() => {
+    setModalProps({ canFullscreen: false, okText: '下一步' });
+  });
+</script>
+<style lang="scss" scoped>
+  .sceneSelectionCard {
+    height: 170px;
+    flex-direction: column;
+  }
+
+  .sceneSelectionIcon {
+    font-size: 40px !important;
+    margin-bottom: 16px;
+  }
+
+  .sceneSelectionTitle {
+    font-size: 18px;
+    font-weight: bold;
+    margin-bottom: 8px;
+  }
+
+  .sceneSelectionDescription {
+    font-size: 14px;
+    color: #78787c;
+    text-align: left;
+    line-height: 1.2;
+  }
+</style>

src/views/dataIntegration/dataLakePunctual/dataLakePunctual.data.ts

@@ -104,6 +104,26 @@ export const getMetadataColumns: BasicColumn[] = [
     dataIndex: 'tableName',
   },
 ];
+/**源端配置-right-表单 */
+export const LoadingStrategyFormSchema: FormSchema[] = [
+  {
+    field: 'primaryKeyColumn',
+    label: '主键列',
+    component: 'Select',
+    colProps: { lg: 23, md: 23 },
+    componentProps: {
+      mode: 'multiple'
+    },
+    ifShow: false,
+    required: true,
+  },
+  {
+    field: 'notCustomSQLTable',
+    component: 'Slot',
+    slot: 'notCustomSQLTable',
+    // ifShow: false,
+  },
+];
 
 /**源端配置-右-列表字段配置 */
 export const notCustomSQLColumns: BasicColumn[] = [
@@ -119,6 +139,228 @@ export const notCustomSQLColumns: BasicColumn[] = [
 
 ];
 
+/**映射规则配置-新增规则按钮-新增字段规则表单*/
+export const NewFieldRuleFormSchema: FormSchema[] = [
+  {
+    field: 'ruleName',
+    label: '规则名称',
+    component: 'Input',
+    required: true,
+  },
+  {
+    field: 'newFieldRuleAlert',
+    slot: 'newFieldRuleAlert',
+  },
+  {
+    field: 'newFieldName',
+    label: '新增字段名称',
+    component: 'Input',
+    required: true,
+  },
+  {
+    field: 'newFieldType',
+    label: '新增字段类型',
+    component: 'Input',
+    required: true,
+  },
+  {
+    field: 'fieldExpression',
+    label: '字段表达式',
+    component: 'Input',
+    required: true,
+  },
+];
+/**映射规则配置-新增规则按钮-字段名映射规则表单*/
+export const FieldNameMappingRuleFormSchema: FormSchema[] = [
+  {
+    field: 'ruleName',
+    label: '规则名称',
+    component: 'Input',
+    required: true,
+  },
+  {
+    field: 'regularExpressionAlert',
+    slot: 'regularExpressionAlert',
+  },
+  {
+    field: 'regularExpression',
+    label: '正则表达式',
+    component: 'Checkbox',
+    componentProps: ({ formModel, formActionType }) => ({
+      onChange: () => {
+        const flag = formModel.regularExpression;
+        formActionType.updateSchema([{ field: 'sourceDatabaseNameExpression', ifShow: flag }]);
+        formActionType.updateSchema([{ field: 'targetLibraryNameExpression', ifShow: flag }]);
+      },
+    }),
+  },
+  {
+    field: 'sourceDatabaseNameExpression',
+    label: '源库名表达式',
+    component: 'Input',
+    defaultValue: '^(.*)$',
+    required: true,
+    ifShow: false,
+  },
+  {
+    field: 'targetLibraryNameExpression',
+    label: '目标库名表达式',
+    defaultValue: 'test_$1_obs',
+    component: 'Input',
+    ifShow: false,
+  },
+  {
+    field: 'addPrefix',
+    label: '添加前缀',
+    component: 'Checkbox',
+    componentProps: ({ formModel, formActionType }) => ({
+      onChange: () => {
+        const flag = formModel.addPrefix;
+        formActionType.updateSchema([{ field: 'prefixExpression', ifShow: flag }]);
+      },
+    }),
+  },
+  {
+    field: 'prefixExpression',
+    label: '表达式',
+    component: 'Input',
+    defaultValue: 'test_',
+    required: true,
+    ifShow: false,
+  },
+  {
+    field: 'addSuffixation',
+    label: '添加后缀',
+    component: 'Checkbox',
+    componentProps: ({ formModel, formActionType }) => ({
+      onChange: () => {
+        const flag = formModel.addSuffixation;
+        formActionType.updateSchema([{ field: 'suffixationExpression', ifShow: flag }]);
+      },
+    }),
+  },
+  {
+    field: 'suffixationExpression',
+    label: '表达式',
+    component: 'Input',
+    defaultValue: '_obs',
+    required: true,
+    ifShow: false,
+  },
+  {
+    field: 'reviewButton',
+    label: '',
+    slot: 'reviewButton',
+  },
+  {
+    field: 'reviewTable',
+    label: '',
+    slot: 'reviewTable',
+  },
+];
+
+/**映射规则配置-新增规则按钮-字段名称映射规则列-列表字段 */
+export const fieldNameMappingRuleColumns: BasicColumn[] = [
+  {
+    title: '源字段名',
+    dataIndex: 'fieldName',
+    labelWidth: 160,
+  },
+  {
+    title: '目标字段名',
+    dataIndex: 'targetFieldName',
+  },
+];
+
+/**映射规则配置-新增规则按钮-字段类型映射规则表单*/
+export const FieldTypeMappingRuleFormSchema: FormSchema[] = [
+  {
+    field: 'ruleName',
+    label: '规则名称',
+    component: 'Input',
+    required: true,
+  },
+  {
+    field: 'newFieldRuleAlert',
+    slot: 'newFieldRuleAlert',
+  },
+  {
+    field: 'sourceFieldType',
+    label: '源字段类型',
+    component: 'Input',
+    required: true,
+  },
+  {
+    field: 'targetFieldType',
+    label: '目标字段类型',
+    component: 'Input',
+    required: true,
+  },
+];
+
+/**映射规则配置-新增规则按钮-单表字段映射规则表单*/
+export const SingleTableFieldMappingRuleFormSchema: FormSchema[] = [
+  {
+    field: 'ruleName',
+    label: '规则名称',
+    component: 'Input',
+    required: true,
+  },
+  {
+    field: 'selectiveDataTable',
+    label: '选择数据表',
+    component: 'Select',
+    componentProps: {
+      options: [
+        { label: 'table_1', value: 'table_1' },
+        { label: 'table_2', value: 'table_2' },
+        { label: 'table_3', value: 'table_3' },
+        { label: 'table_4', value: 'table_4' },
+      ],
+    },
+    required: true,
+  },
+  {
+    field: 'mappingTable',
+    slot: 'mappingTable',
+  },
+];
+
+/**映射规则配置-新增规则按钮-单目标表字段映射规则列-列表字段 */
+export const singleGoalFieldNameMappingRuleColumns: BasicColumn[] = [
+  {
+    title: '字段名',
+    dataIndex: 'targetFieldName',
+    edit: true,
+  },
+  {
+    title: '字段类型',
+    dataIndex: 'fieldType',
+    edit: true,
+  },
+  {
+    title: '注释',
+    dataIndex: 'annotation',
+  },
+];
+
+/**映射规则配置-新增规则按钮-单源表字段映射规则列-列表字段 */
+export const singleSourceFieldNameMappingRuleColumns: BasicColumn[] = [
+  {
+    title: '字段名',
+    dataIndex: 'fieldName',
+  },
+  {
+    title: '字段类型',
+    dataIndex: 'fieldType',
+  },
+  {
+    title: '注释',
+    dataIndex: 'annotation',
+  },
+];
+
+
 /**映射规则配置-数据转换规则-列表字段 */
 export const mappingRuleConfigurationColumns: BasicColumn[] = [
   {
@@ -132,7 +374,7 @@ export const mappingRuleConfigurationColumns: BasicColumn[] = [
     title: '规则内容',
     dataIndex: 'ruleContent',
     align: 'left',
-
+    slots: { customRender: 'ruleContent' },
   },
 
 ];

src/views/dataIntegration/dataLakePunctual/fieldNameMappingRuleModal.vue

+<template>
+  <BasicModal
+    v-bind="$attrs"
+    @register="registerModal"
+    title="全局新增字段规则"
+    @ok="handleSubmit"
+    style="width: 35%"
+    minHeight="50"
+  >
+    <BasicForm @register="registerForm">
+      <template #regularExpressionAlert>
+        <Alert
+          show-icon
+          style="font-size: 12px"
+          message="示例：去除源端字段名中下划线+数字后缀；原字段名表达式填写_[0-9]*，目标字段名表达式不填写任何内容"
+          type="info"
+        />
+      </template>
+      <template #reviewButton>
+        <a-button style="width: 100%; color: white; background-color: #24a866">预览</a-button>
+      </template>
+      <template #reviewTable>
+        <div style="display: flex">
+          <div style="width: 35%; padding: 0 5px 5px">
+            <BasicTree toolbar search :treeData="fieldNameTableTreeData" @select="handleSelect" />
+          </div>
+          <BasicTable style="width: 100%" @register="registerFieldNameMappingRuleTable" />
+        </div>
+      </template>
+    </BasicForm>
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { onMounted } from 'vue';
+  import { Alert } from 'ant-design-vue';
+  import { BasicTree } from '@/components/Tree';
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { BasicForm, useForm } from '@/components/Form';
+  import { FieldNameMappingRuleFormSchema } from './dataLakePunctual.data';
+  import {
+    fieldNameTableTreeData,
+    fieldNameMappingRuleTableList,
+  } from './mock';
+  import BasicTable from '@/components/Table/src/BasicTable.vue';
+  import { useTable } from '@/components/Table';
+  import { fieldNameMappingRuleColumns } from './dataLakePunctual.data';
+
+  const fieldNameMappingRuleTable = ref(fieldNameMappingRuleTableList);
+  const emit = defineEmits(['success', 'register']);
+  const [registerForm, { validate }] = useForm({
+    labelWidth: 100,
+    labelAlign: 'left',
+    baseColProps: { span: 24 },
+    schemas: FieldNameMappingRuleFormSchema,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 23,
+    },
+  });
+  //初始化弹框
+  const [registerModal, { closeModal, setModalProps }] = useModalInner(async () => {});
+
+  const [registerFieldNameMappingRuleTable] = useTable({
+    api: async () => {
+      const response = {
+        pageNu: '1',
+        pageSize: '5',
+        pages: '1',
+        total: fieldNameMappingRuleTable.value.length,
+        code: '',
+        message: '',
+        data: fieldNameMappingRuleTable.value,
+      };
+      return { ...response };
+    },
+    scroll: { y: 300 },
+    rowKey: 'businessId',
+    formConfig: {
+      labelWidth: 160,
+    },
+    columns: fieldNameMappingRuleColumns,
+    showTableSetting: false,
+    showIndexColumn: false,
+    bordered: false,
+    pagination: false,
+  });
+
+  async function handleSubmit() {
+    try {
+      setModalProps({ confirmLoading: true });
+      await validate();
+      closeModal();
+    } finally {
+      setModalProps({ confirmLoading: false });
+    }
+    // closeModal();
+  }
+
+  function handleSelect(keys) {
+    emit('select', keys[0]);
+  }
+
+  onMounted(() => {
+    setModalProps({ canFullscreen: false });
+  });
+</script>

src/views/dataIntegration/dataLakePunctual/fieldTypeMappingRuleModal.vue

+<template>
+  <BasicModal
+    v-bind="$attrs"
+    @register="registerModal"
+    title="全局字段类型映射规则"
+    @ok="handleSubmit"
+    minHeight="50"
+  >
+    <BasicForm @register="registerForm">
+      <template #newFieldRuleAlert>
+        <Alert
+          show-icon
+          style="font-size: 12px"
+          message="示例：int类型替换varchar类型；源类型下拉框选择int，目标类型下拉框选择varchar(10);
+                  备注：不支持有精度设置的类型转换，例如，varchar(10),number(10,2)等"
+          type="info"
+        />
+      </template>
+    </BasicForm>
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { onMounted } from 'vue';
+  import { Alert } from 'ant-design-vue';
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { BasicForm, useForm } from '@/components/Form';
+  import { FieldTypeMappingRuleFormSchema } from './dataLakePunctual.data';
+
+  const emit = defineEmits(['success', 'register']);
+  const [registerForm, { validate }] = useForm({
+    labelWidth: 100,
+    baseColProps: { span: 24 },
+    schemas: FieldTypeMappingRuleFormSchema,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 23,
+    },
+  });
+  //初始化弹框
+  const [registerModal, { closeModal, setModalProps }] = useModalInner(async () => {});
+
+  async function handleSubmit() {
+    try {
+      setModalProps({ confirmLoading: true });
+      await validate();
+      closeModal();
+    } finally {
+      setModalProps({ confirmLoading: false });
+    }
+    // closeModal();
+  }
+  onMounted(() => {
+    setModalProps({ canFullscreen: false });
+  });
+</script>

src/views/dataIntegration/dataLakePunctual/index.vue

@@ -60,20 +60,64 @@
           </div>
         </TabPane>
         <TabPane key="2" tab="映射规则配置">
-          <BasicTable title="数据转换规则" @register="registerMappingRuleConfigurationTable">
+          <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 #ruleType="{ text, record }">
               {{text}}
               <Icon :size="15" icon="ant-design:question-circle-filled" />
             </template>
+            <template #ruleContent="{ text, record }">
+<!--              {{text}}-->
+              <div v-if="text === '新增字段'" style="display: flex">
+                <AInput
+                  placeholder="字段名"
+                />&nbsp;&nbsp;
+                <Select
+                  style="width:100%"
+                  placeholder="字段类型"
+                  :options="theTypeOfField"
+                />&nbsp;&nbsp;
+                <AInput
+                  placeholder="字段表达式"
+                />
+              </div>
+
+              <div v-if="text === '字段名称'" style="display: flex">
+                <AInput
+                  placeholder="输入源列名"
+                />
+                <Icon :color="'rgb(207,208,214)'" icon="ant-design:right-outlined" />
+                <AInput
+                  placeholder="输入目标列名"
+                />
+              </div>
+              <div v-if="text === '字段类型'" style="display: flex">
+                <AInput
+                  placeholder="输入源字段类型"
+                />
+                <Icon :color="'rgb(207,208,214)'" icon="ant-design:right-outlined" />
+                <AInput
+                  placeholder="输入目标字段类型"
+                />
+              </div>
+              <div v-if="text === '表名'" style="display: flex">
+                <AInput
+                  placeholder="输入源表名"
+                />
+                <Icon :color="'rgb(207,208,214)'" icon="ant-design:right-outlined" />
+                <AInput
+                  placeholder="输入目标表名"
+                />
+              </div>
+
+            </template>
             <template #bodyCell="{ column, record }">
               <template v-if="column.key === 'action'">
                 <TableAction
@@ -118,18 +162,18 @@
   import { h, ref, onMounted } from 'vue';
   import { BasicTree } from '@/components/Tree';
   import { BasicForm, FormSchema, useForm } from '@/components/Form';
-  import { notCustomSQLColumns,sourceSideConfigurationFormSchema, mappingRuleConfigurationColumns } from './dataLakePunctual.data';
+  import { notCustomSQLColumns,sourceSideConfigurationFormSchema, mappingRuleConfigurationColumns,LoadingStrategyFormSchema } from './dataLakePunctual.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 { tableTreeData,notCustomSQLTableList,mappingRuleConfigurationTableList } from './mock'
+  import { tableTreeData,notCustomSQLTableList,mappingRuleConfigurationTableList,theTypeOfField} from './mock'
   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 './getMetadataModal.vue';
-  import AddDataConversionRuleModal from '@/views/dataIntegration/dataLoading/dataEntryLake/addDataConversionRuleModal.vue';
+  import AddDataConversionRuleModal from './addDataConversionRuleModal.vue';
 
   const route = useRoute();
   const emit = defineEmits(['success', 'register']);
@@ -142,26 +186,6 @@
   let isParsingSQL = ref(false);
   const selectKey = ref('0');
 
-  const LoadingStrategyFormSchema: FormSchema[] = [
-    {
-      field: 'primaryKeyColumn',
-      label: '主键列',
-      component: 'Select',
-      colProps: { lg: 23, md: 23 },
-      componentProps: {
-        mode: 'multiple'
-      },
-      ifShow: false,
-      required: true,
-    },
-    {
-      field: 'notCustomSQLTable',
-      component: 'Slot',
-      slot: 'notCustomSQLTable',
-      // ifShow: false,
-    },
-  ];
-
   const [registerGetMetadataModal, { openModal: openGetMetadataModal }] = useModal();
   const [registerAddRuleModal, { openModal: openAddRuleModal }] = useModal();
 

src/views/dataIntegration/dataLakePunctual/mock.ts

+import {FormSchema} from "@/components/Form";
+
 /**源端配置-中间树-表头列表*/
 export const tableTreeData = [
   {
@@ -375,21 +377,347 @@ export const mappingRuleConfigurationTableList = [
   {
     businessId: '1',
     ruleType: '[全局] 新增字段规则1',
-    ruleContent: '新增字段名称:a, 字段类型:string, 字段表达式:asd',
+    ruleContent: '新增字段',
   },
   {
     businessId: '2',
     ruleType: '[全局] 字段名称映射规则1',
-    ruleContent: '原字段名称:未配置, 目标字段名称:未配置',
+    ruleContent: '字段名称',
   },
   {
     businessId: '3',
     ruleType: '[全局] 字段类型映射规则1',
-    ruleContent: '源字段类型:timestamp, 目标字段类型:string',
+    ruleContent: '字段类型',
   },
   {
     businessId: '4',
-    ruleType: '[单表] 字段映射规则1',
-    ruleContent: '源表名:table_2',
+    ruleType: '[全局] 表名映射规则1',
+    ruleContent: '表名',
+  },
+];
+
+/**映射规则配置-新增规则按钮-卡片规则列表 */
+export const cardRuleList = [
+  {
+    title: '【全局】新增字段规则',
+    type: 'newFieldRule',
+    description: '为源端所有数据表都新增一个字段，例如为每张表增加一个入库时间列',
+  },
+  {
+    title: '【全局】字段名称映射规则',
+    type: 'fieldNameMappingRule',
+    description: '通过正则表达式，将全局匹配的源端中的字段名称全部映射为输入的目标字段名称',
+  },
+  {
+    title: '【全局】字段类型映射规则',
+    type: 'fieldTypeMappingRule',
+    description: '将全局匹配的源端中的字段类型全部映射为所选的目标字段类型',
+  },
+
+  {
+    title: '【全局】字段映射规则',
+    type: 'singleTableFieldMappingRule',
+    description: '根据业务需求，对选中的源端表进行详情字段名、类型、注释 的映射配置',
+  },
+];
+/**映射规则配置-字段名称映射规则-树形结构数据*/
+export const fieldNameTableTreeData = [
+  {
+    title: 'table1_1',
+    key: '1',
+    icon: 'majesticons:table-line',
+    sql: 'SELECT uuid, catalog_id FROM bm_datasource',
+  },
+  {
+    title: 'table1_2',
+    key: '2',
+    icon: 'majesticons:table-line',
+    sql: 'SELECT uuid, catalog_id, name, description FROM user_info',
+  },
+  {
+    title: 'table1_3',
+    key: '3',
+    icon: 'majesticons:table-line',
+    sql: 'SELECT uuid, user_id, username, email FROM customer_details',
+  },
+];
+/**映射规则配置-字段名称映射规则-列表*/
+export const fieldNameMappingRuleTableList = [
+  {
+    businessId: '1',
+    ownershipTableId: '1',
+    fieldName: 'uuid',
+    targetFieldName: 'test_uuid_obs',
+    fieldType: 'VARCHAR(50)',
+  },
+  {
+    businessId: '2',
+    ownershipTableId: '1',
+    fieldName: 'catalog_id',
+    targetFieldName: 'test_catalog_id_obs',
+    fieldType: 'BIGINT(19)',
+  },
+  {
+    businessId: '3',
+    ownershipTableId: '1',
+    fieldName: 'name',
+    targetFieldName: 'test_name_obs',
+    fieldType: 'VARCHAR(255)',
+  },
+  {
+    businessId: '4',
+    ownershipTableId: '1',
+    fieldName: 'description',
+    targetFieldName: 'test_description_obs',
+    fieldType: 'TEXT',
+  },
+  {
+    businessId: '5',
+    ownershipTableId: '2',
+    fieldName: 'uuid',
+    targetFieldName: 'test_uuid_obs_2',
+    fieldType: 'VARCHAR(50)',
+  },
+  {
+    businessId: '6',
+    ownershipTableId: '2',
+    fieldName: 'user_id',
+    targetFieldName: 'test_user_id_obs',
+    fieldType: 'BIGINT(19)',
+  },
+  {
+    businessId: '7',
+    ownershipTableId: '2',
+    fieldName: 'username',
+    targetFieldName: 'test_username_obs',
+    fieldType: 'VARCHAR(255)',
+  },
+  {
+    businessId: '8',
+    ownershipTableId: '2',
+    fieldName: 'email',
+    targetFieldName: 'test_email_obs',
+    fieldType: 'VARCHAR(255)',
+  },
+  {
+    businessId: '9',
+    ownershipTableId: '3',
+    fieldName: 'uuid',
+    targetFieldName: 'test_uuid_obs_3',
+    fieldType: 'VARCHAR(50)',
+  },
+  {
+    businessId: '10',
+    ownershipTableId: '3',
+    fieldName: 'order_id',
+    targetFieldName: 'test_order_id_obs',
+    fieldType: 'BIGINT(19)',
+  },
+  {
+    businessId: '11',
+    ownershipTableId: '3',
+    fieldName: 'total_amount',
+    targetFieldName: 'test_total_amount_obs',
+    fieldType: 'DECIMAL(10,2)',
   },
 ];
+
+/**映射规则配置-新增规则按钮-源字段名称映射规则-列表*/
+export const sourceFieldNameMappingRuleTableList = [
+  {
+    businessId: '1',
+    ownershipTableId: '1',
+    fieldName: 'uuid',
+    targetFieldName: 'test_uuid_obs',
+    annotation: '-',
+    fieldType: 'VARCHAR(50)',
+  },
+  {
+    businessId: '2',
+    ownershipTableId: '1',
+    fieldName: 'catalog_id',
+    targetFieldName: 'test_catalog_id_obs',
+    annotation: '-',
+    fieldType: 'BIGINT(19)',
+  },
+  {
+    businessId: '3',
+    ownershipTableId: '1',
+    fieldName: 'name',
+    targetFieldName: 'test_name_obs',
+    annotation: '-',
+    fieldType: 'VARCHAR(255)',
+  },
+  {
+    businessId: '4',
+    ownershipTableId: '1',
+    fieldName: 'description',
+    targetFieldName: 'test_description_obs',
+    annotation: '-',
+    fieldType: 'TEXT',
+  },
+  {
+    businessId: '5',
+    ownershipTableId: '2',
+    fieldName: 'uuid',
+    targetFieldName: 'test_uuid_obs_2',
+    annotation: '-',
+    fieldType: 'VARCHAR(50)',
+  },
+  {
+    businessId: '6',
+    ownershipTableId: '2',
+    fieldName: 'user_id',
+    targetFieldName: 'test_user_id_obs',
+    annotation: '-',
+    fieldType: 'BIGINT(19)',
+  },
+  {
+    businessId: '7',
+    ownershipTableId: '2',
+    fieldName: 'username',
+    targetFieldName: 'test_username_obs',
+    annotation: '-',
+    fieldType: 'VARCHAR(255)',
+  },
+  {
+    businessId: '8',
+    ownershipTableId: '2',
+    fieldName: 'email',
+    targetFieldName: 'test_email_obs',
+    annotation: '-',
+    fieldType: 'VARCHAR(255)',
+  },
+  {
+    businessId: '9',
+    ownershipTableId: '3',
+    fieldName: 'uuid',
+    targetFieldName: 'test_uuid_obs_3',
+    annotation: '-',
+    fieldType: 'VARCHAR(50)',
+  },
+  {
+    businessId: '10',
+    ownershipTableId: '3',
+    fieldName: 'order_id',
+    targetFieldName: 'test_order_id_obs',
+    annotation: '-',
+    fieldType: 'BIGINT(19)',
+  },
+  {
+    businessId: '11',
+    ownershipTableId: '3',
+    fieldName: 'total_amount',
+    targetFieldName: 'test_total_amount_obs',
+    annotation: '-',
+    fieldType: 'DECIMAL(10,2)',
+  },
+];
+/**映射规则配置-新增规则按钮-目标字段名称映射规则-列表*/
+export const goalFieldNameMappingRuleTableList = [
+  {
+    businessId: '1',
+    ownershipTableId: '1',
+    targetFieldName: 'test_uuid_obs',
+    annotation: '-',
+    fieldType: 'VARCHAR(50)',
+  },
+  {
+    businessId: '2',
+    ownershipTableId: '1',
+    targetFieldName: 'test_catalog_id_obs',
+    annotation: '-',
+    fieldType: 'BIGINT(19)',
+  },
+  {
+    businessId: '3',
+    ownershipTableId: '1',
+    targetFieldName: 'test_name_obs',
+    annotation: '-',
+    fieldType: 'VARCHAR(255)',
+  },
+  {
+    businessId: '4',
+    ownershipTableId: '1',
+    targetFieldName: 'test_description_obs',
+    annotation: '-',
+    fieldType: 'TEXT',
+  },
+  {
+    businessId: '5',
+    ownershipTableId: '2',
+    targetFieldName: 'test_uuid_obs_2',
+    annotation: '-',
+    fieldType: 'VARCHAR(50)',
+  },
+  {
+    businessId: '6',
+    ownershipTableId: '2',
+    targetFieldName: 'test_user_id_obs',
+    annotation: '-',
+    fieldType: 'BIGINT(19)',
+  },
+  {
+    businessId: '7',
+    ownershipTableId: '2',
+    targetFieldName: 'test_username_obs',
+    annotation: '-',
+    fieldType: 'VARCHAR(255)',
+  },
+  {
+    businessId: '8',
+    ownershipTableId: '2',
+    targetFieldName: 'test_email_obs',
+    annotation: '-',
+    fieldType: 'VARCHAR(255)',
+  },
+  {
+    businessId: '9',
+    ownershipTableId: '3',
+    targetFieldName: 'test_uuid_obs_3',
+    annotation: '-',
+    fieldType: 'VARCHAR(50)',
+  },
+  {
+    businessId: '10',
+    ownershipTableId: '3',
+    targetFieldName: 'test_order_id_obs',
+    annotation: '-',
+    fieldType: 'BIGINT(19)',
+  },
+  {
+    businessId: '11',
+    ownershipTableId: '3',
+    targetFieldName: 'test_total_amount_obs',
+    annotation: '-',
+    fieldType: 'DECIMAL(10,2)',
+  },
+];
+
+/**映射规则配置-下拉框-字段类型*/
+export const theTypeOfField = [
+  {
+    label: 'string',
+    value: 'string',
+  },
+  {
+    label: 'int',
+    value: 'int',
+  },
+  {
+    label: 'float',
+    value: 'float',
+  },
+  {
+    label: 'double',
+    value: 'double',
+  },
+  {
+    label: 'decimal',
+    value: 'decimal',
+  },
+  {
+    label: 'timestamp',
+    value: 'timestamp',
+  },
+ ]

src/views/dataIntegration/dataLakePunctual/newFieldRuleModal.vue

+<template>
+  <BasicModal
+    v-bind="$attrs"
+    @register="registerModal"
+    title="全局新增字段规则"
+    @ok="handleSubmit"
+    minHeight="50"
+  >
+    <BasicForm @register="registerForm">
+      <template #newFieldRuleAlert>
+        <Alert
+          show-icon
+          style="font-size: 12px"
+          message="示例：为源端所有数据表新增一个入库时间列：新增字段名称填写“load_time”，字段类型选择date，字段表达式填写from_unixtime(unix_timestamp())"
+          type="info"
+        />
+      </template>
+    </BasicForm>
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { onMounted } from 'vue';
+  import { Alert } from 'ant-design-vue';
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { BasicForm, useForm } from '@/components/Form';
+  import { NewFieldRuleFormSchema } from './dataLakePunctual.data';
+
+  const emit = defineEmits(['success', 'register']);
+  const [registerForm, { validate }] = useForm({
+    labelWidth: 100,
+    baseColProps: { span: 24 },
+    schemas: NewFieldRuleFormSchema,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 23,
+    },
+  });
+  //初始化弹框
+  const [registerModal, { closeModal, setModalProps }] = useModalInner(async () => {});
+
+  async function handleSubmit() {
+    try {
+      setModalProps({ confirmLoading: true });
+      await validate();
+      closeModal();
+    } finally {
+      setModalProps({ confirmLoading: false });
+    }
+    // closeModal();
+  }
+
+  onMounted(() => {
+    setModalProps({ canFullscreen: false });
+  });
+</script>

src/views/dataIntegration/dataLakePunctual/singleTableFieldMappingRuleModal.vue

+<template>
+  <BasicModal
+    v-bind="$attrs"
+    @register="registerModal"
+    title="全局新增字段规则"
+    @ok="handleSubmit"
+    style="width: 35%"
+    minHeight="50"
+  >
+    <BasicForm @register="registerForm">
+      <template #mappingTable>
+        <div style="display: flex">
+          <BasicTable title="源端" @register="registerSourceFieldNameMappingRuleTable" />
+          <BasicTable title="目标端" @register="registerGoalFieldNameMappingRuleTable" />
+        </div>
+      </template>
+    </BasicForm>
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { ref, onMounted } from 'vue';
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { BasicForm, useForm } from '@/components/Form';
+  import { SingleTableFieldMappingRuleFormSchema } from './dataLakePunctual.data';
+  import {
+    sourceFieldNameMappingRuleTableList,
+    goalFieldNameMappingRuleTableList,
+  } from './mock';
+  import BasicTable from '@/components/Table/src/BasicTable.vue';
+  import { useTable } from '@/components/Table';
+  import {
+    fieldNameMappingRuleColumns, singleGoalFieldNameMappingRuleColumns,
+    singleSourceFieldNameMappingRuleColumns
+  } from './dataLakePunctual.data';
+
+  const sourceFieldNameMappingRuleTable = ref(sourceFieldNameMappingRuleTableList);
+  const goalFieldNameMappingRuleTable = ref(goalFieldNameMappingRuleTableList);
+  const emit = defineEmits(['success', 'register']);
+  const [registerForm, { validate }] = useForm({
+    labelWidth: 100,
+    labelAlign: 'left',
+    baseColProps: { span: 24 },
+    schemas: SingleTableFieldMappingRuleFormSchema,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 23,
+    },
+  });
+  //初始化弹框
+  const [registerModal, { closeModal, setModalProps }] = useModalInner(async () => {});
+
+  const [registerSourceFieldNameMappingRuleTable] = useTable({
+    api: async () => {
+      const response = {
+        pageNu: '1',
+        pageSize: '5',
+        pages: '1',
+        total: sourceFieldNameMappingRuleTable.value.length,
+        code: '',
+        message: '',
+        data: sourceFieldNameMappingRuleTable.value,
+      };
+      return { ...response };
+    },
+    scroll: { y: 300 },
+    rowKey: 'businessId',
+    formConfig: {
+      labelWidth: 160,
+    },
+    columns: singleSourceFieldNameMappingRuleColumns,
+    showTableSetting: false,
+    showIndexColumn: false,
+    bordered: false,
+    pagination: false,
+  });
+
+  const [registerGoalFieldNameMappingRuleTable] = useTable({
+    api: async () => {
+      const response = {
+        pageNu: '1',
+        pageSize: '5',
+        pages: '1',
+        total: goalFieldNameMappingRuleTable.value.length,
+        code: '',
+        message: '',
+        data: goalFieldNameMappingRuleTable.value,
+      };
+      return { ...response };
+    },
+    scroll: { y: 300 },
+    rowKey: 'businessId',
+    formConfig: {
+      labelWidth: 160,
+    },
+    columns: singleGoalFieldNameMappingRuleColumns,
+    showTableSetting: false,
+    showIndexColumn: false,
+    bordered: false,
+    pagination: false,
+  });
+
+  async function handleSubmit() {
+    try {
+      setModalProps({ confirmLoading: true });
+      await validate();
+      closeModal();
+    } finally {
+      setModalProps({ confirmLoading: false });
+    }
+    // closeModal();
+  }
+
+  onMounted(() => {
+    setModalProps({ canFullscreen: false });
+  });
+</script>