文件加载-改

src/views/dataIntegration/dataLoading/fileLoading/addDataConversionRuleModal.vue

@@ -29,8 +29,8 @@
       </Row>
     </List>
   </BasicModal>
-  <NewFieldRuleModal @register="registerNewFieldRuleModal" />
-  <DataTransformationRuleModal @register="registerDataTransformationRuleModal" />
+  <AddFieldRuleModal @register="addFieldRuleModal" />
+  <DataChangeRule @register="dataChangeRule" />
   <DataFilterRuleModal @register="dataFilterRuleModal" />
 </template>
 <script lang="ts" setup>
@@ -39,26 +39,24 @@
   import { BasicModal, useModal, useModalInner } from '@/components/Modal';
   import { Card, Row, Col, List, ListItem } from 'ant-design-vue';
   import { cardRuleList } from './fileData';
-  import NewFieldRuleModal from '@/views/dataIntegration/dataLoading/dataEntryLake/newFieldRuleModal.vue';
-  import DataTransformationRuleModal from '@/views/dataIntegration/dataLoading/dataEntryLake/dataTransformationRuleModal.vue';
-  import SingleTableFieldMappingRuleModal from '@/views/dataIntegration/dataLoading/dataEntryLake/singleTableFieldMappingRuleModal.vue';
   import DataFilterRuleModal from './dataFilterRuleModal.vue';
+  import AddFieldRuleModal from './addFieldRuleModal.vue';
+  import DataChangeRule from './dataChangeRule.vue';
 
   const [registerModal, { setModalProps, closeModal }] = useModalInner(async () => {});
 
-  const [registerNewFieldRuleModal, { openModal: openNewFieldRuleModal }] = useModal();
-  const [registerDataTransformationRuleModal, { openModal: openDataTransformationRuleModal }] =
-    useModal();
+  const [addFieldRuleModal, { openModal: openAddFieldRuleModal }] = useModal();
+  const [dataChangeRule, { openModal: openDataChangeRule }] = useModal();
   const [dataFilterRuleModal, { openModal: openDataFilterRuleModal }] = useModal();
 
   function handleNewModal(type) {
     console.log(type);
     switch (type) {
       case 'newFieldRule':
-        openNewFieldRuleModal(true);
+        openAddFieldRuleModal(true);
         break;
       case 'dataTransformationRule':
-        openDataTransformationRuleModal(true);
+        openDataChangeRule(true);
         break;
       case 'dataFilterRule':
         openDataFilterRuleModal(true);

src/views/dataIntegration/dataLoading/fileLoading/addFieldRuleModal.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 { addFieldRuleModal } from './file.data';
+
+  const emit = defineEmits(['success', 'register']);
+  const [registerForm, { validate }] = useForm({
+    labelWidth: 100,
+    baseColProps: { span: 24 },
+    schemas: addFieldRuleModal,
+    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/dataLoading/fileLoading/dataChangeRule.vue

+<template>
+  <BasicModal
+    v-bind="$attrs"
+    @register="registerModal"
+    title="数据转换规则"
+    @ok="handleSubmit"
+    minHeight="50"
+  >
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { onMounted } from 'vue';
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { BasicForm, useForm } from '@/components/Form';
+  import { dataChangeRuleFormSchema } from './file.data';
+
+  const [registerForm, { validate }] = useForm({
+    labelWidth: 100,
+    baseColProps: { span: 24 },
+    schemas: dataChangeRuleFormSchema,
+    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/dataLoading/fileLoading/file.data.ts

@@ -515,3 +515,176 @@ export const dataFilterRuleModalFormSchema: FormSchema[] = [
     } as InputProps,
   },
 ];
+export const addFieldRuleModal: FormSchema[] = [
+  {
+    field: 'ruleName',
+    label: '规则名称',
+    component: 'Input',
+    required: true,
+  },
+  {
+    field: 'newFieldRuleAlert',
+    slot: 'newFieldRuleAlert',
+  },
+  {
+    field: 'newFieldName',
+    label: '新增字段名称',
+    component: 'Input',
+    required: true,
+  },
+  {
+    field: 'newFieldType',
+    label: '新增字段类型',
+    component: 'Select',
+    componentProps: {
+      options: [
+        { label: 'INT', value: 'INT' },
+        { label: 'BIGINT', value: 'BIGINT' },
+        { label: 'DECIMAL', value: 'DECIMAL' },
+        { label: 'VARCHAR', value: 'VARCHAR' },
+      ],
+    },
+    required: true,
+  },
+  {
+    field: 'fieldExpression',
+    label: '字段表达式',
+    component: 'Input',
+    required: true,
+  },
+];
+export const dataChangeRuleFormSchema: 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: 'conversionResultWriting',
+    label: '转换结果写入',
+    component: 'RadioGroup',
+    defaultValue: '覆盖已有字段',
+    componentProps: {
+      options: [
+        { label: '覆盖已有字段', value: '覆盖已有字段' },
+        { label: '写入新增字段', value: '写入新增字段' },
+      ],
+    },
+    required: true,
+  },
+  {
+    field: 'selectExistingField',
+    label: '选择已有字段',
+    component: 'Select',
+    componentProps: {
+      options: [
+        { label: 'total_amount', value: 'total_amount' },
+        { label: 'payment_id', value: 'payment_id' },
+        { label: 'position', value: 'position' },
+        { label: 'employee_id', value: 'employee_id' },
+      ],
+    },
+    required: ({ model }) => {
+      return model.conversionResultWriting === '覆盖已有字段';
+    },
+    show: ({ model }) => {
+      return model.conversionResultWriting === '覆盖已有字段';
+    },
+  },
+  {
+    field: 'newFieldName',
+    label: '新增字段名称',
+    component: 'Input',
+    required: ({ model }) => {
+      return model.conversionResultWriting === '写入新增字段';
+    },
+    show: ({ model }) => {
+      return model.conversionResultWriting === '写入新增字段';
+    },
+  },
+  {
+    field: 'newFieldType',
+    label: '新增字段类型',
+    component: 'Select',
+    componentProps: {
+      options: [
+        { label: 'INT', value: 'INT' },
+        { label: 'BIGINT', value: 'BIGINT' },
+        { label: 'DECIMAL', value: 'DECIMAL' },
+        { label: 'VARCHAR', value: 'VARCHAR' },
+      ],
+    },
+    required: ({ model }) => {
+      return model.conversionResultWriting === '写入新增字段';
+    },
+    show: ({ model }) => {
+      return model.conversionResultWriting === '写入新增字段';
+    },
+  },
+  {
+    field: 'conversionRule',
+    label: '转换规则',
+    required: true,
+    component: 'RadioGroup',
+    defaultValue: '自定义',
+    componentProps: {
+      options: [
+        { label: '配置规则', value: '配置规则' },
+        { label: '自定义', value: '自定义' },
+      ],
+    },
+  },
+  {
+    field: 'customRule',
+    label: '自定义规则',
+    component: 'InputTextArea',
+    show: ({ model }) => {
+      return model.conversionRule === '自定义';
+    },
+  },
+];
+export const partDataHandleFormSchema: FormSchema[] = [
+  {
+    field: 'partitionType',
+    label: '分区类型',
+    component: 'RadioGroup',
+    defaultValue: '单值分区',
+    componentProps: {
+      options: [{ label: '单值分区', value: '单值分区' }],
+    },
+  },
+  {
+    field: 'overwritesTheSingleValuePartitionRawData',
+    label: '覆盖单值分区原数据',
+    component: 'Switch',
+    defaultValue: false,
+  },
+  {
+    field: 'partitionKeyName',
+    label: '分区键名',
+    component: 'Input',
+    show: ({ model }) => {
+      return model.overwritesTheSingleValuePartitionRawData;
+    },
+  },
+  {
+    field: 'partitionKeyValue',
+    label: '分区键值',
+    component: 'Input',
+  },
+];

src/views/dataIntegration/dataLoading/fileLoading/index.vue

 <template>
-  <PageWrapper class="content-padding" :title="modelName" contentBackground headerSticky @back="goBack">
+  <PageWrapper
+    class="content-padding"
+    :title="modelName"
+    contentBackground
+    headerSticky
+    @back="goBack"
+  >
     <template #extra>
       <a-button type="primary">跳转运维</a-button>
       <a-button :disabled="isDebug" type="primary" @click="handleSave">保存</a-button>
@@ -10,7 +16,7 @@
       <a-button type="primary" @click="handleGobalDeply">全局配置</a-button>
       <a-button type="primary" @click="handleParameterConfiguration">参数配置</a-button>
       <a-button type="primary">版本管理</a-button>
-<!--      <a-button type="primary" @click="handleVersionManagement">版本管理</a-button>-->
+      <!--      <a-button type="primary" @click="handleVersionManagement">版本管理</a-button>-->
     </template>
     <template #footer>
       <Tabs v-model:activeKey="activeKey">
@@ -371,7 +377,7 @@
       </Tabs>
     </template>
     <ViewLogModal @register="registerViewLogsModal" />
-    <PartitionedDataProcessingModal @register="registerPartitionedDataProcessingModal" />
+    <PartitionDataHandleModal @register="partitionDataHandleModal" />
     <ClearConfigurationModal @register="registerClearConfigurationModal" />
     <BatchScaleNameMappingModal @register="registerBatchScaleNameMappingModal" />
     <AddDataConversionRuleModal @register="registerAddRuleModal" />
@@ -451,7 +457,6 @@
     tabularPresentationTableList,
   } from '@/views/dataIntegration/dataLoading/dataEntryLake/mock';
   import ViewLogModal from '@/views/dataIntegration/dataLoading/dataEntryLake/ViewLogModal.vue';
-  import PartitionedDataProcessingModal from '@/views/dataIntegration/dataLoading/dataEntryLake/PartitionedDataProcessingModal.vue';
   import ClearConfigurationModal from '@/views/dataIntegration/dataLoading/dataEntryLake/ClearConfigurationModal.vue';
   import BatchScaleNameMappingModal from '@/views/dataIntegration/dataLoading/dataEntryLake/BatchScaleNameMappingModal.vue';
   import AddDataConversionRuleModal from '@/views/dataIntegration/dataLoading/fileLoading/addDataConversionRuleModal.vue';
@@ -460,11 +465,13 @@
   import GlobalOptionsModal from '@/views/dataIntegration/dataLoading/dataEntryLake/globalOptionsModal.vue';
   import DataOptionsModal from '@/views/dataIntegration/dataLoading/dataEntryLake/dataOptionsModal.vue';
   import VersionManageModal from '@/views/dataIntegration/dataLoading/dataEntryLake/versionManageModal.vue';
+  import PartitionDataHandleModal from '@/views/dataIntegration/dataLoading/fileLoading/partitionDataHandleModal.vue';
 
   const [registerSaveModal, { openModal: openSaveModal }] = useModal();
   const [registerGlobalOptionsModal, { openModal: openGlobalOptionsModal }] = useModal();
   const [registerDataOptionsModal, { openModal: openDataOptionsModal }] = useModal();
   const [registerVersionManageModal, { openModal: openVersionManageModal }] = useModal();
+  const [partitionDataHandleModal, { openModal: openPartitionDataHandleModal }] = useModal();
   const isSave = ref(false);
   async function handleSave() {
     createMessage.success('保存成功');
@@ -531,7 +538,7 @@
   }
   const isUpload = ref(false);
   function handleSaveSuccess() {
-    isUpload.value = true
+    isUpload.value = true;
   }
   function handleGobalDeply() {
     openGlobalOptionsModal(true, {
@@ -900,13 +907,8 @@
   // tabs3
   const dataSourceKey = ref('');
   const indexSelect = ref(false);
-
-  const [
-    registerPartitionedDataProcessingModal,
-    { openModal: openPartitionedDataProcessingModal },
-  ] = useModal();
   function handlePartitionedDataProcessing() {
-    openPartitionedDataProcessingModal();
+    openPartitionDataHandleModal();
   }
   const [registerClearConfigurationModal, { openModal: openClearConfigurationModal }] = useModal();
   function handleClearConfiguration(record) {

src/views/dataIntegration/dataLoading/fileLoading/partitionDataHandleModal.vue

+<template>
+  <BasicModal
+    v-bind="$attrs"
+    @register="registerModal"
+    title="分区数据处理"
+    @ok="handleSubmit"
+    minHeight="50"
+  >
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { onMounted } from 'vue';
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { BasicForm, useForm } from '@/components/Form';
+  import { partDataHandleFormSchema } from './file.data';
+  import { useMessage } from '@/hooks/web/useMessage';
+
+  const emit = defineEmits(['success', 'register']);
+  const { createMessage } = useMessage();
+
+  //获取接口数据并放在下拉框里（这里是打开了一个弹框）
+  //初始化表单
+  const [registerForm] = useForm({
+    labelWidth: 180,
+    labelAlign: 'left',
+    baseColProps: { span: 24 },
+    schemas: partDataHandleFormSchema,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 23,
+    },
+  });
+  //初始化弹框
+  const [registerModal, { closeModal, setModalProps }] = useModalInner(async () => {});
+
+  onMounted(() => {
+    setModalProps({ canFullscreen: false });
+  });
+
+  async function handleSubmit() {
+    closeModal();
+  }
+</script>