feat：数据流转 新增其他属性和pem上传文件

@@ -55,31 +55,6 @@ export const modeForm: FormSchema[] = [
   },
 ];
 
-export const modeKafkaInseretKeyAndValueForm: FormSchema[] = [
-  {
-    field: 'key',
-    label: 'Key',
-    colProps: { span: 12 },
-    required: true,
-    component: 'Input',
-    componentProps: {
-      maxLength: 255,
-      placeholder: '请输入Key',
-    },
-  },
-  {
-    field: 'value',
-    label: 'Value',
-    colProps: { span: 12 },
-    required: true,
-    component: 'Input',
-    componentProps: {
-      maxLength: 255,
-      placeholder: '请输入Value',
-    },
-  },
-];
-
 export const modeApiInseretKeyAndValueForm: FormSchema[] = [
   {
     field: 'key',
@@ -116,7 +91,7 @@ export const modeKafkaForm: FormSchema[] = [
       maxLength: 255,
       placeholder: '请输入名称',
     },
-    dynamicRules: ({ values }) => {
+    dynamicRules: () => {
       return [
         {
           required: true,
@@ -242,11 +217,10 @@ export const modeKafkaForm: FormSchema[] = [
     },
   },
   {
-    field: '1',
+    field: 'otherProperties',
     label: '其他属性',
     colProps: { span: 24 },
-    slot: 'addValue',
-    component: 'Input',
+    component: 'JAddInput',
   },
   {
     field: 'addMetadataKeyValuesAsKafkaHeaders',
@@ -496,7 +470,7 @@ export const modeRabbitMqForm: FormSchema[] = [
       maxLength: 255,
       placeholder: '请输入名称',
     },
-    dynamicRules: ({ values }) => {
+    dynamicRules: () => {
       return [
         {
           required: true,
@@ -637,11 +611,10 @@ export const modeRabbitMqForm: FormSchema[] = [
     },
   },
   {
-    field: '1',
+    field: 'clientProperties',
     label: '客户端属性',
     colProps: { span: 24 },
-    component: 'InputTextArea',
-    slot: 'addKeyAndValue',
+    component: 'JAddInput',
   },
   {
     field: 'description',
@@ -854,35 +827,11 @@ export const modeApiForm: FormSchema[] = [
     },
   },
   {
-    field: 'Header',
-    label: 'Header',
-    colProps: { span: 12 },
-    required: true,
-    component: 'Input',
-    defaultValue: 'Content-Type',
-    componentProps: {
-      maxLength: 255,
-      placeholder: 'Content-Type',
-    },
-  },
-  {
-    field: 'Value',
-    label: 'Value',
-    colProps: { span: 12 },
-    required: true,
-    component: 'Input',
-    defaultValue: 'application/json',
-    componentProps: {
-      maxLength: 255,
-      placeholder: 'application/json',
-    },
-  },
-  {
-    field: '1',
-    label: '',
+    field: 'headers',
+    label: 'Headers',
     colProps: { span: 24 },
-    component: 'Input',
-    slot: 'addKeyAndValue',
+    defaultValue: '{"Content-Type":"application/json"}',
+    component: 'JAddInput',
   },
 
   {

 <template>
   <div class="transfer-config-mode">
     <BasicForm :showSubmitButton="false" @register="register">
-      <template #addKeyAndValue="{ field }">
-        <span style="display: none">{{ field }}</span>
-        <div>
-          <div>
-            <template v-for="(item, index) in keyAndValueArr" :key="index">
-              <span style="display: none">{{ item + index }}</span>
-              <BasicForm
-                :showResetButton="false"
-                :showSubmitButton="false"
-                @register="registerKeyAndValue"
-              />
-            </template>
-            <div>
-              <a-button type="primary" class="mr-4" @click="addKeyAndValueFunc">添加</a-button>
-              <a-button color="error" @click="removeKeyAndValueFunc">删除</a-button>
-            </div>
-          </div>
-        </div>
-      </template>
       <template #uploadAdd1="{ field }">
         <span style="display: none">{{ field }}</span>
         <a-upload-dragger
@@ -86,16 +67,12 @@
 <script lang="ts">
   import { defineComponent, ref, reactive, nextTick } from 'vue';
   import { BasicForm, useForm } from '/@/components/Form';
-  import { modeApiForm, modeApiInseretKeyAndValueForm, CredentialsEnum } from '../config';
+  import { modeApiForm, CredentialsEnum } from '../config';
   import { InboxOutlined } from '@ant-design/icons-vue';
   import { Upload } from 'ant-design-vue';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { uploadApi } from '/@/api/personal/index';
 
-  interface IKeyAndValue {
-    key: string;
-    value: string;
-  }
   export default defineComponent({
     components: {
       BasicForm,
@@ -111,27 +88,16 @@
       let fileList1: any = ref<[]>([]);
       let fileList2: any = ref<[]>([]);
       let fileList3: any = ref<[]>([]);
-      const keyAndValueArr = ref<[]>([]);
-      const temp = ref({});
-      let tempObj = ref({});
-      const otherPropertiesValues = reactive({
-        headers: {},
-      });
       const credentialsV: any = reactive({
         credentials: {
           type: '',
         },
       });
-      const keyAndValueArrTemp = ref<[]>([]);
-      const keyAndValueObj = reactive<IKeyAndValue>({
-        key: '',
-        value: '',
-      });
       const sonValues: any = reactive({
         configuration: {},
       });
       const [register, { validate, setFieldsValue, resetFields: defineClearFunc }] = useForm({
-        labelWidth: 80,
+        labelWidth: 120,
         schemas: modeApiForm,
         actionColOptions: {
           span: 14,
@@ -143,16 +109,6 @@
         submitFunc: customSubmitFunc,
       });
 
-      const [
-        registerKeyAndValue,
-        { validate: validateKeyAndValue, resetFields: defineClearKeyAndValueFunc },
-      ] = useForm({
-        labelWidth: 80,
-        schemas: modeApiInseretKeyAndValueForm,
-        actionColOptions: {
-          span: 14,
-        },
-      });
       const setStepTwoFieldsValueFunc = (v, v1) => {
         setFieldsValue(v);
         setFieldsValue({
@@ -163,14 +119,16 @@
           username: v.credentials?.username,
           type: v.credentials?.type,
         });
-        fileList1.value = [{ name: v.credentials?.caCertFileName.slice(39) }];
-        fileList2.value = [{ name: v.credentials?.certFileName.slice(39) }];
-        fileList3.value = [{ name: v.credentials?.privateKeyFileName.slice(39) }];
+        fileList1.value = [{ name: v.credentials?.caCertFileName.slice(39), uid: '4' }];
+        fileList2.value = [{ name: v.credentials?.certFileName.slice(39), uid: '5' }];
+        fileList3.value = [{ name: v.credentials?.privateKeyFileName.slice(39), uid: '6' }];
+        caCertFileName.value = v.credentials?.caCertFileName;
+        certFileName.value = v.credentials?.certFileName;
+        privateKeyFileName.value = v.credentials?.privateKeyFileName;
       };
       const customClearStepTwoValueFunc = async () => {
         nextTick(() => {
           defineClearFunc();
-          defineClearKeyAndValueFunc();
           fileList1.value = [];
           fileList2.value = [];
           fileList3.value = [];
@@ -190,24 +148,6 @@
         } finally {
         }
       }
-      const tempGetKeyAndVal = async () => {
-        temp.value = await validateKeyAndValue();
-      };
-
-      const getDefaultValue = async () => {
-        await tempGetKeyAndVal();
-        keyAndValueArrTemp.value.push(temp.value as never);
-      };
-
-      const addKeyAndValueFunc = async () => {
-        keyAndValueArr.value.push(keyAndValueObj as never);
-        await tempGetKeyAndVal();
-        tempObj.value = temp.value;
-        keyAndValueArrTemp.value.push(tempObj.value as never);
-      };
-      const removeKeyAndValueFunc = () => {
-        keyAndValueArr.value.splice(0, 1);
-      };
       /**
        * 上传图片
        */
@@ -244,9 +184,6 @@
 
       const getSonValueFunc = async () => {
         sonValues.configuration = await validate();
-        if (keyAndValueArrTemp.value.length != 0) {
-          await getDefaultValue();
-        }
         credentialsV.credentials.type = sonValues.configuration.type;
         if (credentialsV.credentials.type == CredentialsEnum.IS_BASIC) {
           credentialsV.credentials.username = sonValues.configuration.username;
@@ -259,25 +196,14 @@
           credentialsV.credentials.privateKeyFileName = privateKeyFileName.value;
           credentialsV.credentials.password = sonValues.configuration.password;
         }
-        const kong = {};
-        let kongTemp = {};
-        keyAndValueArrTemp.value.map((item: any) => {
-          kong[item.key] = item.value;
-        });
-        kongTemp = JSON.parse(JSON.stringify(kong));
-        otherPropertiesValues.headers = kongTemp;
-        Object.assign(sonValues.configuration, otherPropertiesValues, credentialsV);
+        Object.assign(sonValues.configuration, credentialsV);
         return sonValues;
       };
       return {
         register,
         setStepTwoFieldsValueFunc,
         customClearStepTwoValueFunc,
-        addKeyAndValueFunc,
-        removeKeyAndValueFunc,
         getSonValueFunc,
-        keyAndValueArr,
-        registerKeyAndValue,
         handleChange,
         fileList1,
         fileList2,

 <template>
   <div class="transfer-config-mode">
-    <BasicForm :showSubmitButton="false" @register="register">
-      <template #addValue="{ field }">
-        <span style="display: none">{{ field }}</span>
-        <div>
-          <div>
-            <div v-if="keyAndValueArr.length > 0">
-              <template v-for="(item, index) in keyAndValueArr" :key="index">
-                <span style="display: none">{{ item + index }}</span>
-                <BasicForm
-                  :showResetButton="false"
-                  :showSubmitButton="false"
-                  @register="registerKeyAndValue"
-                />
-              </template>
-            </div>
-            <div>
-              <a-button type="primary" class="mr-4" @click="addKeyAndValueFunc">添加</a-button>
-              <a-button color="error" @click="removeKeyAndValueFunc">删除</a-button>
-            </div>
-          </div>
-        </div>
-      </template>
-    </BasicForm>
+    <BasicForm :showSubmitButton="false" @register="register" />
   </div>
 </template>
 <script lang="ts">
   import { defineComponent, ref, reactive, nextTick } from 'vue';
   import { BasicForm, useForm } from '/@/components/Form';
-  import { modeKafkaForm, modeKafkaInseretKeyAndValueForm } from '../config';
+  import { modeKafkaForm } from '../config';
   import { Alert, Divider, Descriptions } from 'ant-design-vue';
 
-  interface IKeyAndValue {
-    key: string;
-    value: string;
-  }
-
   export default defineComponent({
     components: {
       BasicForm,
@@ -46,26 +19,15 @@
     },
     emits: ['next', 'prev', 'register'],
     setup(_, { emit }) {
-      const temp = ref({});
-      let tempObj = ref({});
       const keyAndValueArr: any = ref<[]>([]);
-      const keyAndValueArrTemp = ref<[]>([]);
       const vType = ref('');
-      const keyAndValueObj = reactive<IKeyAndValue>({
-        key: '',
-        value: '',
-      });
       const sonValues = reactive({
         configuration: {},
       });
-      const otherPropertiesValues = reactive({
-        otherProperties: {},
-      });
       const clearName = ref('');
-
       const [register, { validate, setFieldsValue, resetFields: defineClearFunc, clearValidate }] =
         useForm({
-          labelWidth: 80,
+          labelWidth: 120,
           schemas: modeKafkaForm,
           actionColOptions: {
             span: 14,
@@ -76,17 +38,6 @@
           resetFunc: customResetFunc,
         });
 
-      const [
-        registerKeyAndValue,
-        { validate: validateKeyAndValue, resetFields: defineClearKeyAndValueFunc },
-      ] = useForm({
-        labelWidth: 80,
-        schemas: modeKafkaInseretKeyAndValueForm,
-        actionColOptions: {
-          span: 14,
-        },
-      });
-
       const clearValidateFunc = async () => {
         await clearValidate(['name']);
       };
@@ -103,46 +54,15 @@
       const customClearStepTwoValueFunc = async () => {
         nextTick(() => {
           defineClearFunc();
-          defineClearKeyAndValueFunc();
         });
       };
       async function customResetFunc() {
         emit('prev');
       }
-
-      const tempGetKeyAndVal = async () => {
-        temp.value = await validateKeyAndValue();
-      };
-
-      const getDefaultValue = async () => {
-        await tempGetKeyAndVal();
-        keyAndValueArrTemp.value.push(temp.value as never);
-      };
-
-      const addKeyAndValueFunc = async () => {
-        keyAndValueArr.value.push(keyAndValueObj as never);
-        await tempGetKeyAndVal();
-        tempObj.value = temp.value;
-        keyAndValueArrTemp.value.push(tempObj.value as never);
-      };
-      const removeKeyAndValueFunc = () => {
-        keyAndValueArr.value.splice(0, 1);
-      };
-
       const getSonValueFunc = async () => {
         try {
           sonValues.configuration = await validate();
-          if (keyAndValueArrTemp.value.length != 0) {
-            await getDefaultValue();
-          }
-          const kong = {};
-          let kongTemp = {};
-          keyAndValueArrTemp.value.map((item: any) => {
-            kong[item.key] = item.value;
-          });
-          kongTemp = JSON.parse(JSON.stringify(kong));
-          otherPropertiesValues.otherProperties = kongTemp;
-          Object.assign(sonValues.configuration, otherPropertiesValues);
+          Object.assign(sonValues.configuration);
           return sonValues;
         } catch (e) {
           return e;
@@ -155,9 +75,6 @@
         register,
         setStepTwoFieldsValueFunc,
         customClearStepTwoValueFunc,
-        addKeyAndValueFunc,
-        registerKeyAndValue,
-        removeKeyAndValueFunc,
         customResetFunc,
       };
     },

@@ -6,6 +6,7 @@
         <a-upload-dragger
           v-model:fileList="fileList1"
           name="file"
+          :key="1"
           :multiple="false"
           @change="handleChange('T', $event)"
           :before-upload="() => false"
@@ -27,6 +28,7 @@
         <a-upload-dragger
           v-model:fileList="fileList2"
           name="file"
+          :key="2"
           :multiple="false"
           @change="handleChange('F', $event)"
           :before-upload="() => false"
@@ -48,6 +50,7 @@
         <a-upload-dragger
           v-model:fileList="fileList3"
           name="file"
+          :key="3"
           :multiple="false"
           @change="handleChange('C', $event)"
           :before-upload="() => false"
@@ -103,7 +106,7 @@
         configuration: {},
       });
       const [register, { validate, setFieldsValue, resetFields: defineClearFunc }] = useForm({
-        labelWidth: 80,
+        labelWidth: 120,
         schemas: modeMqttForm,
         actionColOptions: {
           span: 14,
@@ -158,9 +161,27 @@
           username: v.credentials?.username,
           type: v.credentials?.type,
         });
-        fileList1.value = [{ name: v.credentials?.caCertFileName.slice(39) }];
-        fileList2.value = [{ name: v.credentials?.certFileName.slice(39) }];
-        fileList3.value = [{ name: v.credentials?.privateKeyFileName.slice(39) }];
+        fileList1.value = [
+          {
+            name: v.credentials?.caCertFileName.slice(39),
+            uid: '1',
+          },
+        ];
+        fileList2.value = [
+          {
+            name: v.credentials?.certFileName.slice(39),
+            uid: '2',
+          },
+        ];
+        fileList3.value = [
+          {
+            name: v.credentials?.privateKeyFileName.slice(39),
+            uid: '3',
+          },
+        ];
+        caCertFileName.value = v.credentials?.caCertFileName;
+        certFileName.value = v.credentials?.certFileName;
+        privateKeyFileName.value = v.credentials?.privateKeyFileName;
       };
       const customClearStepTwoValueFunc = async () => {
         nextTick(() => {

 <template>
   <div class="transfer-config-mode">
-    <BasicForm :showSubmitButton="false" @register="register">
-      <template #addKeyAndValue="{ field }">
-        <span style="display: none">{{ field }}</span>
-        <div>
-          <div>
-            <template v-for="(item, index) in keyAndValueArr" :key="index">
-              <span style="display: none">{{ item + index }}</span>
-              <BasicForm
-                :showResetButton="false"
-                :showSubmitButton="false"
-                @register="registerKeyAndValue"
-              />
-            </template>
-            <div>
-              <a-button type="primary" class="mr-4" @click="addKeyAndValueFunc">添加</a-button>
-              <a-button color="error" @click="removeKeyAndValueFunc">删除</a-button>
-            </div>
-          </div>
-        </div>
-      </template>
-    </BasicForm>
+    <BasicForm :showSubmitButton="false" @register="register" />
   </div>
 </template>
 <script lang="ts">
-  import { defineComponent, ref, reactive, nextTick } from 'vue';
+  import { defineComponent, reactive, nextTick } from 'vue';
   import { BasicForm, useForm } from '/@/components/Form';
-  import { modeRabbitMqForm, modeKafkaInseretKeyAndValueForm } from '../config';
+  import { modeRabbitMqForm } from '../config';
 
-  interface IKeyAndValue {
-    key: string;
-    value: string;
-  }
   export default defineComponent({
     components: {
       BasicForm,
     },
     emits: ['next', 'prev', 'register'],
     setup(_, { emit }) {
-      const temp = ref({});
-      let tempObj = ref({});
-      const otherPropertiesValues = reactive({
-        clientProperties: {},
-      });
-
-      const keyAndValueArrTemp = ref<[]>([]);
-      const keyAndValueObj = reactive<IKeyAndValue>({
-        key: '',
-        value: '',
-      });
-      const keyAndValueArr = ref<[]>([]);
       const sonValues = reactive({
         configuration: {},
       });
 
       const [register, { validate, setFieldsValue, resetFields: defineClearFunc }] = useForm({
-        labelWidth: 80,
+        labelWidth: 120,
         schemas: modeRabbitMqForm,
         actionColOptions: {
           span: 14,
         },
         resetButtonOptions: {
           text: '上一步',
-          type: 'primary',
         },
 
         resetFunc: customResetFunc,
         submitFunc: customSubmitFunc,
       });
 
-      const [registerKeyAndValue, { validate: validateKeyAndValue }] = useForm({
-        labelWidth: 80,
-        schemas: modeKafkaInseretKeyAndValueForm,
-        actionColOptions: {
-          span: 14,
-        },
-      });
-
       const setStepTwoFieldsValueFunc = (v, v1) => {
         setFieldsValue(v);
         setFieldsValue({
@@ -99,37 +54,10 @@
         } finally {
         }
       }
-      const tempGetKeyAndVal = async () => {
-        temp.value = await validateKeyAndValue();
-      };
-
-      const getDefaultValue = async () => {
-        await tempGetKeyAndVal();
-        keyAndValueArrTemp.value.push(temp.value as never);
-      };
 
-      const addKeyAndValueFunc = async () => {
-        keyAndValueArr.value.push(keyAndValueObj as never);
-        await tempGetKeyAndVal();
-        tempObj.value = temp.value;
-        keyAndValueArrTemp.value.push(tempObj.value as never);
-      };
-      const removeKeyAndValueFunc = () => {
-        keyAndValueArr.value.splice(0, 1);
-      };
       const getSonValueFunc = async () => {
         sonValues.configuration = await validate();
-        if (keyAndValueArrTemp.value.length != 0) {
-          await getDefaultValue();
-        }
-        const kong = {};
-        let kongTemp = {};
-        keyAndValueArrTemp.value.map((item: any) => {
-          kong[item.key] = item.value;
-        });
-        kongTemp = JSON.parse(JSON.stringify(kong));
-        otherPropertiesValues.clientProperties = kongTemp;
-        Object.assign(sonValues.configuration, otherPropertiesValues);
+        Object.assign(sonValues.configuration);
         return sonValues;
       };
 
@@ -138,10 +66,6 @@
         register,
         setStepTwoFieldsValueFunc,
         customClearStepTwoValueFunc,
-        keyAndValueArr,
-        registerKeyAndValue,
-        addKeyAndValueFunc,
-        removeKeyAndValueFunc,
       };
     },
   });