Merge branch 'f-dev' into 'main'

feat：数据流转新增其他属性 和pem上传文件  pref：优化Tree箭头等其他优化

See merge request huang/yun-teng-iot-front!252

@@ -27,6 +27,8 @@ import { BasicUpload } from '/@/components/Upload';
 import { StrengthMeter } from '/@/components/StrengthMeter';
 import { IconPicker } from '/@/components/Icon';
 import { CountdownInput } from '/@/components/CountDown';
+//自定义组件
+import JAddInput from './jeecg/components/JAddInput.vue';
 
 const componentMap = new Map<ComponentType, Component>();
 
@@ -61,6 +63,8 @@ componentMap.set('IconPicker', IconPicker);
 componentMap.set('InputCountDown', CountdownInput);
 
 componentMap.set('Upload', BasicUpload);
+//注册自定义组件
+componentMap.set('JAddInput', JAddInput);
 
 export function add(compName: ComponentType, component: Component) {
   componentMap.set(compName, component);

+<template>
+  <div v-for="(param, index) in dynamicInput.params" :key="index" style="display: flex">
+    <a-input
+      placeholder="请输入参数key"
+      v-model:value="param.label"
+      style="width: 30%; margin-bottom: 5px"
+      @input="emitChange"
+    />
+    <a-input
+      placeholder="请输入参数value"
+      v-model:value="param.value"
+      style="width: 30%; margin: 0 0 5px 5px"
+      @input="emitChange"
+    />
+    <MinusCircleOutlined
+      v-if="dynamicInput.params.length > min"
+      class="dynamic-delete-button"
+      @click="remove(param)"
+      style="width: 50px"
+    />
+  </div>
+  <div>
+    <a-button type="dashed" style="width: 60%" @click="add">
+      <PlusOutlined />
+      新增
+    </a-button>
+  </div>
+</template>
+<script lang="ts">
+  import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons-vue';
+  import { defineComponent, reactive, UnwrapRef, watchEffect } from 'vue';
+  import { propTypes } from '/@/utils/propTypes';
+  import { isEmpty } from '/@/utils/is';
+
+  interface Params {
+    label: string;
+    value: string;
+  }
+
+  export default defineComponent({
+    name: 'JAddInput',
+    components: {
+      MinusCircleOutlined,
+      PlusOutlined,
+    },
+    //--------------不继承Antd Design Vue Input的所有属性 否则控制台报大片警告--------------
+    inheritAttrs: false,
+    props: {
+      value: propTypes.object.def({}),
+      //自定义删除按钮多少才会显示
+      min: propTypes.integer.def(0),
+    },
+    emits: ['change', 'update:value'],
+    setup(props, { emit }) {
+      //input动态数据
+      const dynamicInput: UnwrapRef<{ params: Params[] }> = reactive({ params: [] });
+      //删除Input
+      const remove = (item: Params) => {
+        let index = dynamicInput.params.indexOf(item);
+        if (index !== -1) {
+          dynamicInput.params.splice(index, 1);
+        }
+        emitChange();
+      };
+      //新增Input
+      const add = () => {
+        dynamicInput.params.push({
+          label: '',
+          value: '',
+        });
+        emitChange();
+      };
+
+      //监听传入数据value
+      watchEffect(() => {
+        initVal();
+      });
+
+      /**
+       * 初始化数值
+       */
+      function initVal() {
+        dynamicInput.params = [];
+        if (props.value) {
+          let jsonObj = props.value;
+          Object.keys(jsonObj).forEach((key) => {
+            dynamicInput.params.push({ label: key, value: jsonObj[key] });
+          });
+        }
+        // if (props.value && props.value.indexOf('{') == 0) {
+        //   let jsonObj = JSON.parse(props.value);
+        //   Object.keys(jsonObj).forEach((key) => {
+        //     dynamicInput.params.push({ label: key, value: jsonObj[key] });
+        //   });
+        // }
+      }
+      /**
+       * 数值改变
+       */
+      function emitChange() {
+        let obj = {};
+        if (dynamicInput.params.length > 0) {
+          dynamicInput.params.forEach((item) => {
+            obj[item['label']] = item['value'];
+          });
+        }
+        emit('change', isEmpty(obj) ? '' : obj);
+        emit('update:value', isEmpty(obj) ? '' : obj);
+        // emit('change', isEmpty(obj) ? '' : JSON.stringify(obj));
+        // emit('update:value', isEmpty(obj) ? '' : JSON.stringify(obj));
+      }
+
+      return {
+        dynamicInput,
+        emitChange,
+        remove,
+        add,
+      };
+    },
+  });
+</script>
+<style scoped>
+  .dynamic-delete-button {
+    cursor: pointer;
+    position: relative;
+    top: 4px;
+    font-size: 24px;
+    color: #999;
+    transition: all 0.3s;
+  }
+
+  .dynamic-delete-button:hover {
+    color: #777;
+  }
+
+  .dynamic-delete-button[disabled] {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+</style>

@@ -109,4 +109,5 @@ export type ComponentType =
   | 'IconPicker'
   | 'Render'
   | 'Slider'
+  | 'JAddInput'
   | 'Rate';

@@ -473,14 +473,14 @@
 </script>
 <style lang="less">
   .fold-left {
-    z-index: 9999;
+    z-index: 1;
     cursor: pointer;
     position: absolute;
     top: 0.85rem;
     left: 1.1rem;
   }
   .fold-right {
-    z-index: 9999;
+    z-index: 1;
     cursor: pointer;
     position: absolute;
     top: 0.85rem;

@@ -32,7 +32,7 @@ export const CoapSchemas: FormSchema[] = [
   {
     field: 'coapDeviceType',
     component: 'Select',
-    label: 'CoAP类型',
+    label: 'CoAP 设备类型',
     defaultValue: 'DEFAULT',
     componentProps: {
       options: [
@@ -45,7 +45,7 @@ export const CoapSchemas: FormSchema[] = [
   {
     field: 'transportPayloadType',
     component: 'Select',
-    label: '设备消息',
+    label: 'CoAP 设备消息 Payload',
     defaultValue: 'JSON',
     componentProps: {
       options: [
@@ -59,14 +59,14 @@ export const CoapSchemas: FormSchema[] = [
   {
     field: 'powerMode',
     component: 'Select',
-    label: '模式',
+    label: 'Power Saving Mode',
     defaultValue: 'DRX',
     componentProps: {
       options: [
-        { label: 'Power Saving Mode', value: 'PSM' },
-        { label: 'Discontinuous Reception', value: 'DRX' },
+        { label: 'Power Saving Mode (PSM)', value: 'PSM' },
+        { label: 'Discontinuous Reception (DRX)', value: 'DRX' },
         {
-          label: 'Extended Discontinuous Reception',
+          label: 'Extended Discontinuous Reception (eDRX)',
           value: 'E_DRX',
         },
       ],
@@ -76,7 +76,7 @@ export const CoapSchemas: FormSchema[] = [
   {
     field: 'psmActivityTimer',
     component: 'InputNumber',
-    label: 'Timer',
+    label: 'PSM Activity Timer',
     required: true,
     defaultValue: '10',
     componentProps: {
@@ -132,7 +132,7 @@ export const CoapSchemas: FormSchema[] = [
   {
     field: 'pagingTransmissionWindow',
     component: 'InputNumber',
-    label: 'Paging',
+    label: 'Paging Transmission Window',
     required: true,
     defaultValue: '10',
     componentProps: {
@@ -159,7 +159,7 @@ export const CoapSchemas: FormSchema[] = [
   },
   {
     field: 'deviceTelemetryProtoSchema',
-    label: '遥测数据',
+    label: '遥测数据 proto schema',
     colProps: { span: 22 },
     component: 'InputTextArea',
     componentProps: {
@@ -189,7 +189,7 @@ export const CoapSchemas: FormSchema[] = [
   },
   {
     field: 'deviceAttributesProtoSchema',
-    label: 'Attributes',
+    label: 'Attributes proto schema',
     colProps: { span: 22 },
     component: 'InputTextArea',
     componentProps: {
@@ -211,7 +211,7 @@ export const CoapSchemas: FormSchema[] = [
   },
   {
     field: 'deviceRpcRequestProtoSchema',
-    label: 'RPC 请求 ',
+    label: 'RPC 请求 proto schema',
     colProps: { span: 22 },
     component: 'InputTextArea',
     componentProps: {
@@ -234,7 +234,7 @@ export const CoapSchemas: FormSchema[] = [
   },
   {
     field: 'deviceRpcResponseProtoSchema',
-    label: 'RPC 响应',
+    label: 'RPC 响应 proto schema',
     colProps: { span: 22 },
     component: 'InputTextArea',
     componentProps: {

@@ -58,7 +58,7 @@
       });
 
       const [register, { validate, resetFields, setFieldsValue }] = useForm({
-        labelWidth: 100,
+        labelWidth: 200,
         schemas: CoapSchemas,
         actionColOptions: {
           span: 14,

@@ -20,7 +20,7 @@ export const MqttSchemas: FormSchema[] = [
   {
     field: 'deviceTelemetryTopic',
     component: 'Input',
-    label: '筛选器',
+    label: '遥测数据 topic 筛选器',
     required: true,
     defaultValue: 'v1/devices/me/telemetry',
     componentProps: {
@@ -32,7 +32,7 @@ export const MqttSchemas: FormSchema[] = [
     field: 'deviceAttributesTopic',
     component: 'Input',
     required: true,
-    label: 'topic filter',
+    label: 'Attributes topic filter',
     defaultValue: 'v1/devices/me/attributes',
     componentProps: {
       placeholder: '请输入Attributes topic 筛选器',
@@ -42,22 +42,13 @@ export const MqttSchemas: FormSchema[] = [
   {
     field: 'desc',
     component: 'InputTextArea',
-    label: '描述',
-    defaultValue: `支持单[+]和多级[#]通配符。[+] is suitable for any topic filter level。例如：
-    v1/devices/+/telemetry or
-     +/devices/+/attributes。[#]可以替换 topic filter 本身，并且必须是 topic 的最后一个符号。例如：# or v1/devices/me/#。
-    `,
-    componentProps: {
-      autoSize: {
-        maxRows: 10,
-      },
-    },
-    colProps: { span: 23 },
+    label: '',
+    slot: 'descSlot',
   },
   {
     field: 'transportPayloadType',
     component: 'Select',
-    label: '设备信息',
+    label: 'MQTT 设备 Payload',
     defaultValue: 'JSON',
     componentProps: {
       options: [
@@ -89,7 +80,7 @@ export const MqttSchemas: FormSchema[] = [
   },
   {
     field: 'deviceTelemetryProtoSchema',
-    label: '遥测数据',
+    label: '遥测数据 proto schema',
     colProps: { span: 23 },
     component: 'InputTextArea',
     componentProps: {
@@ -118,7 +109,7 @@ export const MqttSchemas: FormSchema[] = [
   },
   {
     field: 'deviceAttributesProtoSchema',
-    label: 'Attributes',
+    label: 'Attributes proto schema',
     colProps: { span: 23 },
     component: 'InputTextArea',
     componentProps: {
@@ -139,7 +130,7 @@ export const MqttSchemas: FormSchema[] = [
   },
   {
     field: 'deviceRpcRequestProtoSchema',
-    label: 'RPC 请求 ',
+    label: 'RPC 请求 proto schema',
     colProps: { span: 23 },
     component: 'InputTextArea',
     componentProps: {
@@ -161,7 +152,7 @@ export const MqttSchemas: FormSchema[] = [
   },
   {
     field: 'deviceRpcResponseProtoSchema',
-    label: 'RPC 响应',
+    label: 'RPC 响应 proto schema',
     colProps: { span: 23 },
     component: 'InputTextArea',
     componentProps: {

@@ -9,7 +9,17 @@
     "
   >
     <div style="margin-top: 1.2vh">
-      <BasicForm :showResetButton="false" :showSubmitButton="false" @register="register" />
+      <BasicForm :showResetButton="false" :showSubmitButton="false" @register="register">
+        <template #descSlot>
+          <div style="width: 47rem; margin-left: 2rem">
+            <p>
+              支持单[+]和多级[#]通配符。 [+] is suitable for any topic filter
+              level。例如：v1/devices/+/telemetry or +/devices/+/attributes。 [#]可以替换 topic
+              filter 本身，并且必须是 topic 的最后一个符号。例如：# or v1/devices/me/#。
+            </p>
+          </div>
+        </template>
+      </BasicForm>
     </div>
   </div>
 </template>
@@ -51,7 +61,7 @@
       });
 
       const [register, { validate, resetFields, setFieldsValue }] = useForm({
-        labelWidth: 80,
+        labelWidth: 180,
         schemas: MqttSchemas,
         actionColOptions: {
           span: 14,
@@ -131,7 +141,7 @@
   });
 </script>
 <style lang="less" scoped>
-  :deep(.ant-row) {
-    column-gap: 33px !important;
-  }
+  // :deep(.ant-row) {
+  //   column-gap: 33px !important;
+  // }
 </style>

@@ -236,6 +236,9 @@
             closeModal();
           } else {
             await addOrEditFunc();
+            if (allPostForm.configuration == undefined || allPostForm.configuration == null) {
+              return createMessage.error('数据流转下一步配置项必填');
+            }
             await postAddConvertApi(allPostForm);
             createMessage.success('数据流转编辑成功');
             emit('success');

@@ -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',
@@ -784,7 +757,7 @@ export const modeApiForm: FormSchema[] = [
     label: 'Password',
     colProps: { span: 12 },
     required: true,
-    component: 'Input',
+    component: 'InputPassword',
     componentProps: {
       maxLength: 255,
       placeholder: '请输入Proxy password',
@@ -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,
       };
     },
   });

@@ -12,16 +12,22 @@
           <a-button type="primary" @click="handleAdd"> 添加流转 </a-button>
         </Authority>
         <Authority value="api:yt:convert:config:delete">
-          <a-button
-            type="primary"
-            color="error"
-            @click="handleDeleteOrBatchDelete(null)"
-            :disabled="singleStopDeleteStatus || hasBatchDelete"
+          <Popconfirm
+            title="您确定要批量删除数据"
+            ok-text="确定"
+            cancel-text="取消"
+            @confirm="handleDeleteOrBatchDelete(null)"
           >
-            <span :style="{ color: singleStopDeleteStatus || hasBatchDelete ? 'grey' : 'white' }"
-              >批量删除</span
+            <a-button
+              type="primary"
+              color="error"
+              :disabled="singleStopDeleteStatus || hasBatchDelete"
             >
-          </a-button>
+              <span :style="{ color: singleStopDeleteStatus || hasBatchDelete ? 'grey' : 'white' }"
+                >批量删除</span
+              >
+            </a-button>
+          </Popconfirm>
         </Authority>
         <a-button
           :disabled="disabledStatus2"
@@ -104,11 +110,11 @@
   import { useMessage } from '/@/hooks/web/useMessage';
   import { Authority } from '/@/components/Authority';
   import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
-  import { Switch } from 'ant-design-vue';
+  import { Switch, Popconfirm } from 'ant-design-vue';
 
   export default defineComponent({
     name: 'Index',
-    components: { BasicTable, TableAction, DataTransferDrawer, Authority, Switch },
+    components: { BasicTable, TableAction, DataTransferDrawer, Authority, Switch, Popconfirm },
     setup() {
       const disabledSwitch = ref(false);
       const enableObj = reactive({