Merge branch 'f-dev' into 'main'

pref：翻译数据流转字段

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

@@ -93,6 +93,7 @@ export const formSchema: FormSchema[] = [
     component: 'Input',
     componentProps: {
       placeholder: '请输入手机号码',
+      maxLength: 11,
     },
     rules: phoneRule,
   },

@@ -4,6 +4,12 @@ import { deviceProfile, getGATEWAYdevice } from '/@/api/device/deviceManager';
 import { getOrganizationList } from '/@/api/system/system';
 import { copyTransFun } from '/@/utils/fnUtils';
 
+export enum TypeEnum {
+  IS_GATEWAY = 'GATEWAY',
+}
+export const isGateWay = (type: string) => {
+  return type === TypeEnum.IS_GATEWAY;
+};
 // 第一步的表单
 export const step1Schemas: FormSchema[] = [
   {
@@ -45,6 +51,27 @@ export const step1Schemas: FormSchema[] = [
     },
   },
   {
+    field: 'field7',
+    component: 'RadioGroup',
+    label: '选择厂家',
+    colProps: {
+      span: 8,
+    },
+    componentProps: {
+      options: [
+        {
+          label: '自定义厂家',
+          value: '1',
+        },
+        {
+          label: 'TBox边缘网关',
+          value: '2',
+        },
+      ],
+    },
+    ifShow: ({ values }) => isGateWay(values.deviceType),
+  },
+  {
     field: 'profileId',
     label: '设备配置',
     required: true,

@@ -120,7 +120,7 @@
 
       const [register, { validate, resetFields, setFieldsValue, getFieldsValue, updateSchema }] =
         useForm({
-          labelWidth: 100,
+          labelWidth: 120,
           schemas: step1Schemas,
           actionColOptions: {
             span: 14,
@@ -387,4 +387,7 @@
     width: 450px;
     margin: 0 auto;
   }
+  :deep(.ant-radio-group) {
+    width: 15vw;
+  }
 </style>

@@ -52,7 +52,13 @@
     <div class="mt-4">
       <a-button type="primary" class="mr-4" @click="copyTbDeviceId">复制设备ID</a-button>
       <a-button type="primary" class="mr-4" @click="copyDeviceToken">复制访问令牌</a-button>
-      <a-button type="primary" @click="manageDeviceToken">管理设备凭证</a-button>
+      <a-button type="primary" class="mr-4" @click="manageDeviceToken">管理设备凭证</a-button>
+      <a-button
+        type="primary"
+        v-if="deviceDetail.deviceType == 'GATEWAY'"
+        @click="remoteConnectiondGateway"
+        >远程连接边缘网关</a-button
+      >
       <ManageDeviceTokenModal @register="registerModal" />
     </div>
     <div v-if="deviceDetail?.deviceInfo?.address" class="mt-4">
@@ -160,6 +166,7 @@
       };
 
       const [registerTopicModal, { openModal: openTopicModal }] = useModal();
+      const remoteConnectiondGateway = () => {};
 
       return {
         wrapRef,
@@ -173,6 +180,7 @@
         registerTopicModal,
         DeviceTypeEnum,
         copyTopic,
+        remoteConnectiondGateway,
       };
     },
   });

@@ -81,10 +81,12 @@
       let profileDataObj: any = reactive({
         profileData: null,
       });
-
+      let isEdit = ref(true);
+      let noEditObj: any = reactive({});
       const getTitle = computed(() =>
         isUpdate.value == 1 ? '新增设备配置' : isUpdate.value == 2 ? '编辑设备配置' : '设备配置详情'
       );
+      const editTransportType = ref('');
       const getViewTitle = computed(() => (!unref(isShowOkBtnFalse) ? '设备配置详情' : ''));
       const [register, { closeModal }] = useModalInner(async (data) => {
         isUpdate.value = data.isUpdate;
@@ -92,12 +94,15 @@
           handleCancel();
           isShowOkBtnFalse.value = true;
           current.value = 0;
+          isEdit.value = false;
         } else if (isUpdate.value == 2) {
+          isEdit.value = true;
           handleCancel();
           isShowOkBtnFalse.value = true;
           current.value = 0;
           postEditId.value = data.record.id;
           createTime.value = data.record.createTime;
+          editTransportType.value = data.record.transportType;
           editData.value = await deviceConfigGetDetail(postEditId.value);
           proxy.$refs.DeviceProfileStep1Ref.setStepOneFieldsValueFunc({
             name: editData.value.name,
@@ -106,6 +111,19 @@
             description: editData.value.description,
             image: editData.value.image,
           });
+          noEditObj = {
+            id: editData.value.id,
+            name: editData.value?.name,
+            createTime: createTime.value,
+            transportType: editTransportType.value,
+            type: editData.value?.type,
+            profileData: editData.value?.profileData,
+            defaultQueueName: editData.value.defaultQueueName,
+            image: editData.value.image,
+            defaultRuleChainId: editData.value.defaultRuleChainId,
+            description: editData.value.description,
+            tenantId: editData.value.tenantId,
+          };
         } else if (isUpdate.value == 3) {
           handleCancel();
           isShowOkBtnFalse.value = false;
@@ -124,6 +142,28 @@
       });
       function handleStepPrev() {
         current.value--;
+        if (isUpdate.value == 2) {
+          isEdit.value = true;
+          noEditObj = {
+            id: editData.value.id,
+            name: editData.value?.name,
+            createTime: createTime.value,
+            transportType: editTransportType.value,
+            type: editData.value?.type,
+            profileData: editData.value?.profileData,
+            defaultQueueName: editData.value.defaultQueueName,
+            image: editData.value.image,
+            defaultRuleChainId: editData.value.defaultRuleChainId,
+            description: editData.value.description,
+            tenantId: editData.value.tenantId,
+          };
+          nextTick(async () => {
+            let getPic = null;
+            const getStep1Obj = await proxy.$refs.DeviceProfileStep1Ref?.getStep1Func();
+            getPic = getStep1Obj.icon;
+            Object.assign(noEditObj, { image: getPic }, getStep1Obj.key);
+          });
+        }
       }
       //第一步
       function handleStepNext1(v, v1) {
@@ -136,6 +176,7 @@
         }
         current.value++;
         if (isUpdate.value == 2) {
+          isEdit.value = false;
           proxy.$refs.DeviceProfileStep2Ref?.setStepTwoFieldsValueFunc(editData.value);
         } else if (isUpdate.value == 3) {
           proxy.$refs.DeviceProfileStep2Ref?.setStepTwoFieldsValueFunc(editData.value);
@@ -155,6 +196,7 @@
             ...getStep1Obj.key,
             ...{ image: getPic },
           };
+          Object.assign(noEditObj, { image: getPic }, getStep1Obj.key);
         }
         const id = isUpdate.value == 1 ? '' : postEditId.value;
         const createTimePost = isUpdate.value == 1 ? {} : { createTime: createTime.value };
@@ -172,7 +214,46 @@
         if (isUpdate.value == 1) {
           delete postDeviceConfogData.id;
         }
-        deviceConfigAddOrEdit(postDeviceConfogData)
+        //1 TODO 待解决OID对象唯一标识不能重复问题验证
+        let isMappings = false;
+        // let isQuerying = false;
+        postDeviceConfogData?.profileData?.transportConfiguration?.communicationConfigs?.forEach(
+          (f) => {
+            // if (f.spec == 'TELEMETRY_QUERYING' && f.queryingFrequencyMs == null) {
+            //   isQuerying = true;
+            // } else {
+            //   isQuerying = false;
+            // }
+            // if (f.spec == 'CLIENT_ATTRIBUTES_QUERYING' && f.queryingFrequencyMs == null) {
+            //   isQuerying = true;
+            // } else {
+            //   isQuerying = false;
+            // }
+            if (f.mappings.length == 0) {
+              isMappings = true;
+            } else {
+              f.mappings.forEach((f1) => {
+                const findNoneKey = Object.keys(f1).includes('');
+                if (findNoneKey) {
+                  isMappings = findNoneKey;
+                } else {
+                  isMappings = false;
+                }
+              });
+              f.mappings.forEach((f2) => {
+                const findNoneVal = Object.values(f2).includes('');
+                if (findNoneVal) {
+                  isMappings = findNoneVal;
+                } else {
+                  isMappings = false;
+                }
+              });
+            }
+          }
+        );
+        // if (isQuerying) return createMessage.error('请填写Querying frequency,ms');
+        if (isMappings) return createMessage.error('请填写Date key和OID');
+        deviceConfigAddOrEdit(isEdit.value ? noEditObj : postDeviceConfogData)
           .then((res) => {
             if (!res) return;
             createMessage.success(isUpdate.value == 1 ? '新增' + '成功' : '编辑' + '成功');

 <template>
   <div class="step2-style">
-    <div style="margin-top: 0.1vh; overflow: scroll">
+    <div
+      style="margin-top: 0.1vh; height: 15vh"
+      :style="[
+        isMqttType == 'MQTT'
+          ? { minHeight: 45 + 'vh' }
+          : isMqttType == 'COAP'
+          ? { minHeight: 35 + 'vh' }
+          : isMqttType == 'LWM2M'
+          ? { minHeight: 55 + 'vh' }
+          : isMqttType == 'SNMP'
+          ? { minHeight: 60 + 'vh' }
+          : { minHeight: 25 + 'vh' },
+      ]"
+    >
       <BasicForm :showResetButton="false" :showSubmitButton="false" @register="register" />
-      <div v-if="isMqttType == 'MQTT'">
+      <div style="margin-top: 5vh" v-if="isMqttType == 'MQTT'">
         <MqttCpns ref="mqttRef" />
       </div>
-      <div v-else-if="isMqttType == 'COAP'">
+      <div style="margin-top: 5vh" v-else-if="isMqttType == 'COAP'">
         <CoapCpns ref="coapRef" />
       </div>
-      <div v-else-if="isMqttType == 'LWM2M'">
+      <div style="margin-top: 1vh" v-else-if="isMqttType == 'LWM2M'">
         <Lwm2mCpns ref="lwm2mRef" />
       </div>
-      <div v-else-if="isMqttType == 'SNMP1'">
+      <div style="margin-top: 5vh" v-else-if="isMqttType == 'SNMP'">
         <SnmpCpns ref="snmpRef" />
       </div>
       <div
@@ -85,7 +98,7 @@
           proxy.$refs.mqttRef?.setStepFieldsValueFunc(v?.profileData?.transportConfiguration);
           proxy.$refs.coapRef?.setStepFieldsValueFunc(v?.profileData?.transportConfiguration);
           proxy.$refs.lwm2mRef?.setStepFieldsValueFunc(v?.profileData?.transportConfiguration);
-          // proxy.$refs.snmpRef?.setStepFieldsValueFunc(v?.profileData?.transportConfiguration);
+          proxy.$refs.snmpRef?.setStepFieldsValueFunc(v?.profileData?.transportConfiguration);
         }, 100);
       };
 
@@ -111,7 +124,7 @@
                 { label: 'MQTT', value: 'MQTT' },
                 { label: 'CoAP', value: 'COAP' },
                 { label: 'LWM2M', value: 'LWM2M' },
-                // { label: 'SNMP', value: 'SNMP' },
+                { label: 'SNMP', value: 'SNMP' },
               ],
               onChange(e) {
                 isMqttType.value = e;
@@ -129,12 +142,12 @@
         const getMqttVal = await proxy.$refs.mqttRef?.getDataFunc();
         const getCoapVal = await proxy.$refs.coapRef?.getDataFunc();
         const getLwm2mVal = await proxy.$refs.lwm2mRef?.getDataFunc();
-        // const getSnmpVal = await proxy.$refs.snmpRef?.getSnmpForm();
+        const getSnmpVal = await proxy.$refs.snmpRef?.getSnmpForm();
         step2Data.transportConfiguration = {
           ...getMqttVal,
           ...getCoapVal,
           ...getLwm2mVal,
-          // ...getSnmpVal,
+          ...getSnmpVal,
           ...val,
         };
         return step2Data;
@@ -163,4 +176,8 @@
   ::-webkit-scrollbar {
     display: none;
   }
+  :deep(.ant-btn) {
+    color: white;
+    background: #377dff;
+  }
 </style>

+<template>
+  <div style="margin-left: -5vw">
+    <BasicForm :showResetButton="false" :showSubmitButton="false" @register="registerServer" />
+  </div>
+</template>
+<script setup lang="ts">
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { serverSchemas } from '../index';
+
+  const [registerServer, { getFieldsValue, setFieldsValue }] = useForm({
+    labelWidth: 180,
+    schemas: serverSchemas,
+    actionColOptions: {
+      span: 14,
+    },
+  });
+  //回显表单值
+  const editBootStrapFormFunc = (v) => {
+    setFieldsValue(v);
+  };
+
+  const getBootStrapFormFunc = () => {
+    const value = getFieldsValue();
+    if (!value) return;
+    return value;
+  };
+  defineExpose({
+    getBootStrapFormFunc,
+    editBootStrapFormFunc,
+  });
+</script>
+<style lang="less" scoped></style>

@@ -45,268 +45,6 @@ export const modelSchemas: FormSchema[] = [
   },
 ];
 
-export const serverSchemas: FormSchema[] = [
-  //servers
-  {
-    field: 'shortId',
-    component: 'InputNumber',
-    label: 'Short ID',
-    required: true,
-    defaultValue: 123,
-    colProps: { span: 8 },
-  },
-  {
-    field: 'lifetime',
-    component: 'InputNumber',
-    label: '客户端注册生存期',
-    required: true,
-    defaultValue: 300,
-    colProps: { span: 8 },
-  },
-  {
-    field: 'defaultMinPeriod',
-    component: 'InputNumber',
-    label: '两次通知之间的最短期限',
-    required: true,
-    defaultValue: 1,
-    colProps: { span: 8 },
-  },
-  {
-    field: 'binding',
-    component: 'Select',
-    label: 'Binding',
-    defaultValue: 'UQ',
-    componentProps: {
-      options: [
-        {
-          label: 'U: UDP connection in standard mode',
-          value: 'U',
-        },
-        {
-          label: 'UQ: UDP connection in queue mode',
-          value: 'UQ',
-        },
-        {
-          label: 'T: TCP connection in standard mode',
-          value: 'T',
-        },
-        {
-          label: 'TQ: TCP connection in queue mode',
-          value: 'TQ',
-        },
-        {
-          label: 'S: SMS connection in standard mode',
-          value: 'S',
-        },
-        {
-          label: 'SQ: SMS connection in queue mode',
-          value: 'SQ',
-        },
-        {
-          label: 'US: both UDP and SMS connections active, both in standard mode',
-          value: 'US',
-        },
-        {
-          label: 'TS: both TCP and SMS connections active, both in standard mode',
-          value: 'TS',
-        },
-        {
-          label:
-            'UQS: both UDP and SMS connections active; UDP in queue mode, SMS in standard mode',
-          value: 'UQS',
-        },
-        {
-          label:
-            'TQS: both TCP and SMS connections active; TCP in queue mode, SMS in standard mode',
-          value: 'TQS',
-        },
-      ],
-    },
-    colProps: { span: 11 },
-  },
-  {
-    field: 'notifIfDisabled',
-    label: '启用',
-    colProps: { span: 22 },
-    component: 'Checkbox',
-    defaultValue: true,
-    renderComponentContent: '禁用或脱机时的通知存储',
-  },
-  //servers
-  //Bootstrap Server
-  {
-    field: 'securityMode',
-    component: 'Select',
-    label: '配置模式',
-    defaultValue: 'NO_SEC',
-    componentProps: {
-      options: [
-        {
-          label: 'No Security',
-          value: 'NO_SEC',
-        },
-        {
-          label: 'Pre-Shared Key',
-          value: 'PSK',
-        },
-        {
-          label: 'Raw Public Key',
-          value: 'RPK',
-        },
-        {
-          label: 'X.509 Certificate',
-          value: 'X509',
-        },
-      ],
-    },
-    colProps: { span: 8 },
-  },
-  {
-    field: 'host',
-    component: 'Input',
-    label: 'Host',
-    required: true,
-    defaultValue: 'localhost',
-    colProps: { span: 8 },
-  },
-  {
-    field: 'port',
-    component: 'InputNumber',
-    label: 'Port',
-    required: true,
-    defaultValue: 5687,
-    colProps: { span: 8 },
-  },
-  {
-    field: 'serverId',
-    component: 'InputNumber',
-    label: 'Short ID',
-    required: true,
-    defaultValue: 111,
-    colProps: { span: 8 },
-  },
-  {
-    field: 'clientHoldOffTime',
-    component: 'InputNumber',
-    label: '拖延时间',
-    required: true,
-    defaultValue: 1,
-    colProps: { span: 8 },
-  },
-  {
-    field: 'bootstrapServerAccountTimeout2',
-    component: 'InputNumber',
-    label: '超时后的帐户',
-    required: true,
-    defaultValue: 0,
-    colProps: { span: 8 },
-  },
-  {
-    field: 'serverPublicKey',
-    component: 'InputTextArea',
-    label: '服务器公钥',
-    required: true,
-    defaultValue: `3059301306072a8648ce3d020106082a8648ce3d03010703420004e353af009b814ee2f9ab393a975e0c
-    39e2fff60e3603fd6ee54a43b89a4f56258a7aa9c7e4a577760edb289dc955d91968473ee8a1bfc2b9c423563796113009`,
-    colProps: { span: 22 },
-    componentProps: {
-      autoSize: {
-        maxRows: 10,
-      },
-    },
-    ifShow: ({ values }) =>
-      isCertificate(Reflect.get(values, 'securityMode')) ||
-      isPawPublicKey(Reflect.get(values, 'securityMode')),
-  },
-  //Bootstrap Server
-  //LwM2M Server
-  {
-    field: 'securityMode1',
-    component: 'Select',
-    label: '配置模式',
-    defaultValue: 'NO_SEC',
-    componentProps: {
-      options: [
-        {
-          label: 'No Security',
-          value: 'NO_SEC',
-        },
-        {
-          label: 'Pre-Shared Key',
-          value: 'PSK',
-        },
-        {
-          label: 'Raw Public Key',
-          value: 'RPK',
-        },
-        {
-          label: 'X.509 Certificate',
-          value: 'X509',
-        },
-      ],
-    },
-    colProps: { span: 8 },
-  },
-  {
-    field: 'host1',
-    component: 'Input',
-    label: 'Host',
-    required: true,
-    defaultValue: 'localhost',
-    colProps: { span: 8 },
-  },
-  {
-    field: 'port1',
-    component: 'InputNumber',
-    label: 'Port',
-    required: true,
-    defaultValue: 5685,
-    colProps: { span: 8 },
-  },
-  {
-    field: 'serverId1',
-    component: 'InputNumber',
-    label: 'Short ID',
-    required: true,
-    defaultValue: 123,
-    colProps: { span: 8 },
-  },
-  {
-    field: 'clientHoldOffTime1',
-    component: 'InputNumber',
-    label: '拖延时间',
-    required: true,
-    defaultValue: 1,
-    colProps: { span: 8 },
-  },
-  {
-    field: 'bootstrapServerAccountTimeout1',
-    component: 'InputNumber',
-    label: '超时后的帐户',
-    required: true,
-    defaultValue: 0,
-    colProps: { span: 8 },
-  },
-  {
-    field: 'serverPublicKey1',
-    component: 'InputTextArea',
-    label: '服务器公钥',
-    required: true,
-    defaultValue: `3059301306072a8648ce3d020106082a8648ce3d03010703420004e353af009b814ee2f9ab393a975e0
-    c39e2fff60e3603fd6ee54a43b89a4f56258a7aa9c7e4a577760edb289dc955d91968473ee8a1bfc2b9c423563796113009`,
-    colProps: { span: 22 },
-    componentProps: {
-      autoSize: {
-        maxRows: 10,
-      },
-    },
-    ifShow: ({ values }) =>
-      isCertificate(Reflect.get(values, 'securityMode1')) ||
-      isPawPublicKey(Reflect.get(values, 'securityMode1')),
-  },
-  //LwM2M Server
-];
-
 export const settingsSchemas: FormSchema[] = [
   {
     field: 'fwUpdateStrategy',
@@ -556,3 +294,169 @@ export const deviceSchemas: FormSchema[] = [
     `,
   },
 ];
+
+export const serverSchemas: FormSchema[] = [
+  {
+    field: 'securityMode',
+    component: 'Select',
+    label: '安全配置模式',
+    defaultValue: 'NO_SEC',
+    componentProps: {
+      options: [
+        {
+          label: 'No Security',
+          value: 'NO_SEC',
+        },
+        {
+          label: 'Pre-Shared Key',
+          value: 'PSK',
+        },
+        {
+          label: 'Raw Public Key',
+          value: 'RPK',
+        },
+        {
+          label: 'X.509 Certificate',
+          value: 'X509',
+        },
+      ],
+    },
+    colProps: { span: 8 },
+  },
+  {
+    field: 'shortServerId',
+    component: 'InputNumber',
+    label: '短服务器ID',
+    required: true,
+    defaultValue: 123,
+    colProps: { span: 8 },
+  },
+  {
+    field: 'host',
+    component: 'Input',
+    label: '主机',
+    required: true,
+    defaultValue: '0.0.0.0',
+    colProps: { span: 8 },
+  },
+  {
+    field: 'port',
+    component: 'Input',
+    label: '端口',
+    required: true,
+    defaultValue: 5685,
+    colProps: { span: 8 },
+  },
+  {
+    field: 'clientHoldOffTime',
+    component: 'InputNumber',
+    label: '延迟时间',
+    required: true,
+    defaultValue: 1,
+    colProps: { span: 8 },
+  },
+  {
+    field: 'bootstrapServerAccountTimeout',
+    component: 'InputNumber',
+    label: '超时后的帐户',
+    required: true,
+    defaultValue: 0,
+    colProps: { span: 8 },
+  },
+  {
+    field: 'lifetime',
+    component: 'InputNumber',
+    label: '注册生存期',
+    required: true,
+    defaultValue: 300,
+    colProps: { span: 8 },
+  },
+  {
+    field: 'defaultMinPeriod',
+    component: 'InputNumber',
+    label: '两次通知之间的最小周期',
+    required: true,
+    defaultValue: 1,
+    colProps: { span: 8 },
+  },
+  {
+    field: 'binding',
+    component: 'Select',
+    label: 'Binding',
+    defaultValue: 'UQ',
+    componentProps: {
+      options: [
+        {
+          label: 'U: Client is reachable via the UDP binding at any time.',
+          value: 'U',
+        },
+        {
+          label: 'M: Client is reachable via the MQTT binding at any time.',
+          value: 'M',
+        },
+        {
+          label: 'H: Client is reachable via the HTTP binding at any time.',
+          value: 'H',
+        },
+        {
+          label: 'T: Client is reachable via the TCP binding at any time.',
+          value: 'T',
+        },
+        {
+          label: 'S: Client is reachable via the SMS binding at any time.',
+          value: 'S',
+        },
+        {
+          label:
+            'N: Client MUST send the response to such a request over the Non-IP binding (is supported since LWM',
+          value: 'N',
+        },
+        {
+          label: 'UQ: UDP connection in queue mode (is not supported since LWM2M 1.1)',
+          value: 'UQ',
+        },
+        {
+          label:
+            'UQS: both UDP and SMS connections active; UDP in queue mode, SMS in standard mode (is not supported since LWM2M 1.1)',
+          value: 'UQS',
+        },
+        {
+          label: 'TQ: TCP connection in queue mode (is not supported since LWM2M 1.1)',
+          value: 'TQ:',
+        },
+        {
+          label:
+            'TQS: both TCP and SMS connections active; TCP in queue mode, SMS in standard mode (is not supported since LWM2M 1.1)	',
+          value: 'TQS',
+        },
+        {
+          label: 'SQ: SMS connection in queue mode (is not supported since LWM2M 1.1)',
+          value: 'SQ',
+        },
+      ],
+    },
+    colProps: { span: 11 },
+  },
+  {
+    field: 'notifIfDisabled',
+    label: '是否启用',
+    colProps: { span: 22 },
+    component: 'Checkbox',
+    defaultValue: true,
+    renderComponentContent: '禁用或脱机时的通知存储',
+  },
+  {
+    field: 'serverPublicKey',
+    component: 'InputTextArea',
+    label: '服务器公钥',
+    required: true,
+    colProps: { span: 22 },
+    componentProps: {
+      maxLength: 255,
+      placeholder: '请输入服务器公钥',
+    },
+    ifShow: ({ values }) =>
+      isCertificate(Reflect.get(values, 'securityMode')) ||
+      isPawPublicKey(Reflect.get(values, 'securityMode')),
+  },
+];

@@ -6,21 +6,39 @@
       :animated="true"
       @change="handleChange"
     >
-      <TabPane key="1" tab="LWM2M Model">
+      <TabPane forceRender key="1" tab="LWM2M Model">
         <BasicForm :showResetButton="false" :showSubmitButton="false" @register="registerModel" />
       </TabPane>
-      <TabPane key="2" tab="Servers">
-        <div style="display: flex; width: 43vw; border: 1px solid gray; border-radius: 5px">
-          <div style="margin-left: -4.6vw; margin-top: 1.5vh">
-            <BasicForm
-              :showResetButton="false"
-              :showSubmitButton="false"
-              @register="registerServer"
-            />
+      <TabPane forceRender key="2" tab="Bootstrap">
+        <div>
+          <Checkbox v-model:checked="bootstrapServerUpdateEnable">包括引导服务器更新</Checkbox>
+          <Card
+            v-for="(item, index) in dynamicBOOTSTRAP.bootstrap"
+            :key="item"
+            title="LwM2M Server"
+            style="width: 99%; margin-top: 2vh"
+          >
+            <template #extra>
+              <Button size="small" type="dashed" @click="handleRemove(index)">
+                <template #icon>
+                  <MinusCircleOutlined />
+                </template>
+              </Button>
+            </template>
+            <!-- BootStrapForm表单项 -->
+            <BootStrapForm :ref="dynamicBindRef.BootStrapFormItemRef" :index="index" :item="item" />
+          </Card>
+          <div style="margin-top: 2vh">
+            <Button size="middle" type="dashed" @click="handleAdd">
+              <template #icon>
+                <PlusCircleOutlined />
+              </template>
+              Add LwM2M Server
+            </Button>
           </div>
         </div>
       </TabPane>
-      <TabPane key="3" tab="Other settings">
+      <TabPane forceRender key="3" tab="Other settings">
         <div
           style="
             display: flex;
@@ -39,7 +57,7 @@
           </div>
         </div>
       </TabPane>
-      <TabPane key="4" tab="Json Config Profile Device">
+      <TabPane forceRender key="4" tab="Json Config Profile Device">
         <BasicForm :showResetButton="false" :showSubmitButton="false" @register="registerDevice" />
       </TabPane>
     </Tabs>
@@ -47,10 +65,13 @@
 </template>
 
 <script lang="ts">
-  import { defineComponent, ref, reactive, nextTick } from 'vue';
-  import { Tabs } from 'ant-design-vue';
+  import { defineComponent, ref, reactive, nextTick, unref } from 'vue';
+  import { Tabs, Card } from 'ant-design-vue';
   import { BasicForm, useForm } from '/@/components/Form';
-  import { modelSchemas, serverSchemas, settingsSchemas, deviceSchemas } from './index';
+  import { modelSchemas, settingsSchemas, deviceSchemas } from './index';
+  import BootStrapForm from './cpns/BootStrapForm.vue';
+  import { MinusCircleOutlined, PlusCircleOutlined } from '@ant-design/icons-vue';
+  import { Button, Checkbox } from 'ant-design-vue';
 
   export default defineComponent({
     name: 'index',
@@ -58,18 +79,26 @@
       Tabs,
       TabPane: Tabs.TabPane,
       BasicForm,
+      BootStrapForm,
+      MinusCircleOutlined,
+      Card,
+      PlusCircleOutlined,
+      Button,
+      Checkbox,
     },
     setup() {
+      const bootstrapServerUpdateEnable = ref(false);
+      const dynamicBOOTSTRAP: any = reactive({
+        bootstrap: [{}],
+      });
+      const dynamicBindRef: any = {
+        BootStrapFormItemRef: ref([]),
+      };
       const currentKey = ref('1');
       const currentSize = ref('large');
       let allObj: any = reactive({});
       let allEchoObj: any = reactive({});
       let allEchoStatus = ref(false);
-      let bootstrapObj = reactive({
-        servers: {},
-        bootstrapServer: {},
-        lwm2mServer: {},
-      });
       let clientLwM2mSettingsObj = reactive({});
       let observeAttrObj = reactive({
         attribute: [],
@@ -90,20 +119,6 @@
         },
       });
       const [
-        registerServer,
-        {
-          resetFields: resetServerValue,
-          validate: serverValidate,
-          setFieldsValue: serverSetFieldsValueFunc,
-        },
-      ] = useForm({
-        labelWidth: 180,
-        schemas: serverSchemas,
-        actionColOptions: {
-          span: 14,
-        },
-      });
-      const [
         registerSettings,
         {
           resetFields: resetSettingsValue,
@@ -126,6 +141,12 @@
           },
         });
 
+      const handleAdd = () => {
+        dynamicBOOTSTRAP.bootstrap.push({});
+      };
+      const handleRemove = (index) => {
+        dynamicBOOTSTRAP.bootstrap.splice(index, 1);
+      };
       const handleChange = (e) => {
         if (allEchoStatus.value) {
           switch (e) {
@@ -133,36 +154,14 @@
               break;
             case '2':
               nextTick(() => {
-                serverSetFieldsValueFunc({
-                  //servers
-                  binding: allEchoObj?.bootstrap?.servers?.binding,
-                  shortId: allEchoObj?.bootstrap?.servers?.shortId,
-                  lifetime: allEchoObj?.bootstrap?.servers?.lifetime,
-                  notifIfDisabled: allEchoObj?.bootstrap?.servers?.notifIfDisabled,
-                  defaultMinPeriod: allEchoObj?.bootstrap?.servers?.defaultMinPeriod,
-                  bootstrapServerAccountTimeout:
-                    allEchoObj?.bootstrap?.servers?.bootstrapServerAccountTimeout,
-                  //servers
-                  //lwm2mServer
-                  host1: allEchoObj?.bootstrap?.lwm2mServer?.host,
-                  port1: allEchoObj?.bootstrap?.lwm2mServer?.port,
-                  serverId1: allEchoObj?.bootstrap?.lwm2mServer?.serverId,
-                  securityMode1: allEchoObj?.bootstrap?.lwm2mServer?.securityMode,
-                  serverPublicKey1: allEchoObj?.bootstrap?.lwm2mServer?.serverPublicKey,
-                  clientHoldOffTime1: allEchoObj?.bootstrap?.lwm2mServer?.clientHoldOffTime,
-                  bootstrapServerAccountTimeout1:
-                    allEchoObj?.bootstrap?.lwm2mServer?.bootstrapServerAccountTimeout,
-                  //lwm2mServer
-                  //bootstrapServer
-                  host: allEchoObj?.bootstrap?.bootstrapServer?.host,
-                  port: allEchoObj?.bootstrap?.bootstrapServer?.port,
-                  serverId: allEchoObj?.bootstrap?.bootstrapServer?.serverId,
-                  securityMode: allEchoObj?.bootstrap?.bootstrapServer?.securityMode,
-                  serverPublicKey: allEchoObj?.bootstrap?.bootstrapServer?.serverPublicKey,
-                  clientHoldOffTime: allEchoObj?.bootstrap?.bootstrapServer?.clientHoldOffTime,
-                  bootstrapServerAccountTimeout2:
-                    allEchoObj?.bootstrap?.servers?.bootstrapServerAccountTimeout,
-                  //bootstrapServer
+                bootstrapServerUpdateEnable.value = allEchoObj.bootstrapServerUpdateEnable;
+                dynamicBOOTSTRAP.bootstrap = allEchoObj.bootstrap;
+                dynamicBOOTSTRAP.bootstrap.forEach((bootstrap, index: number) => {
+                  nextTick(() => {
+                    unref(dynamicBindRef.BootStrapFormItemRef)[index]?.editBootStrapFormFunc(
+                      bootstrap
+                    );
+                  });
                 });
               });
               break;
@@ -196,43 +195,22 @@
           allEchoStatus.value = true;
         }
       };
+      const tempBootStrap: any = [];
+      const getBootStrapFormValue = () => {
+        //获取BootStrap的值
+        unref(dynamicBindRef.BootStrapFormItemRef)?.map((item: any) =>
+          tempBootStrap.push(item.getBootStrapFormFunc())
+        );
+      };
 
       const getDataFunc = async () => {
         const objectListVal = getObjectListValue();
         const deviceVal = getDeviceValue();
         console.log('第一个tab', objectListVal);
         console.log('第四个tab', deviceVal);
-        const serverVal = await serverValidate();
+        getBootStrapFormValue();
         const settingsVal = await settingsValidate();
-        if (!serverVal) return;
         if (!settingsVal) return;
-        Reflect.set(bootstrapObj.servers, 'binding', serverVal.binding);
-        Reflect.set(bootstrapObj.servers, 'shortId', serverVal.shortId);
-        Reflect.set(bootstrapObj.servers, 'lifetime', serverVal.lifetime);
-        Reflect.set(bootstrapObj.servers, 'notifIfDisabled', serverVal.notifIfDisabled);
-        Reflect.set(bootstrapObj.servers, 'defaultMinPeriod', serverVal.defaultMinPeriod);
-        Reflect.set(bootstrapObj.bootstrapServer, 'serverId', serverVal.serverId);
-        Reflect.set(bootstrapObj.bootstrapServer, 'host', serverVal.host);
-        Reflect.set(bootstrapObj.bootstrapServer, 'port', serverVal.port);
-        Reflect.set(bootstrapObj.bootstrapServer, 'securityMode', serverVal.securityMode);
-        Reflect.set(bootstrapObj.bootstrapServer, 'serverPublicKey', serverVal.serverPublicKey);
-        Reflect.set(bootstrapObj.bootstrapServer, 'clientHoldOffTime', serverVal.clientHoldOffTime);
-        Reflect.set(
-          bootstrapObj.servers,
-          'bootstrapServerAccountTimeout',
-          serverVal.bootstrapServerAccountTimeout2
-        );
-        Reflect.set(bootstrapObj.lwm2mServer, 'serverId', serverVal.serverId1);
-        Reflect.set(bootstrapObj.lwm2mServer, 'host', serverVal.host1);
-        Reflect.set(bootstrapObj.lwm2mServer, 'port', serverVal.port1);
-        Reflect.set(bootstrapObj.lwm2mServer, 'securityMode', serverVal.securityMode1);
-        Reflect.set(bootstrapObj.lwm2mServer, 'serverPublicKey', serverVal.serverPublicKey1);
-        Reflect.set(bootstrapObj.lwm2mServer, 'clientHoldOffTime', serverVal.clientHoldOffTime1);
-        Reflect.set(
-          bootstrapObj.lwm2mServer,
-          'bootstrapServerAccountTimeout',
-          serverVal.bootstrapServerAccountTimeout1
-        );
         delete settingsVal.unit;
         delete settingsVal.unit2;
         clientLwM2mSettingsObj = {
@@ -243,8 +221,9 @@
             clientLwM2mSettings: clientLwM2mSettingsObj,
           },
           ...{
-            bootstrap: bootstrapObj,
+            bootstrap: tempBootStrap,
           },
+          ...{ bootstrapServerUpdateEnable: bootstrapServerUpdateEnable.value },
           ...{
             observeAttr: observeAttrObj,
           },
@@ -257,7 +236,6 @@
         allEchoStatus.value = false;
         nextTick(() => {
           resetObjectListValue();
-          resetServerValue();
           resetSettingsValue();
           resetDeviceValue();
         });
@@ -267,13 +245,17 @@
         currentKey,
         currentSize,
         registerModel,
-        registerServer,
         registerSettings,
         registerDevice,
         getDataFunc,
         setStepFieldsValueFunc,
         handleChange,
         resetStepFieldsValueFunc,
+        dynamicBOOTSTRAP,
+        dynamicBindRef,
+        handleAdd,
+        handleRemove,
+        bootstrapServerUpdateEnable,
       };
     },
   });

@@ -4,7 +4,7 @@ export const snmpSchemas: FormSchema[] = [
   {
     field: 'timeoutMs',
     component: 'InputNumber',
-    label: 'Timeout,ns',
+    label: '超时毫秒',
     required: true,
     defaultValue: 500,
     colProps: { span: 11 },
@@ -12,13 +12,13 @@ export const snmpSchemas: FormSchema[] = [
   {
     field: 'retries',
     component: 'InputNumber',
-    label: 'Retries',
+    label: '重试次数',
     required: true,
     defaultValue: 0,
     colProps: { span: 11 },
   },
   {
-    field: 'noknown',
+    field: '1',
     component: 'Input',
     label: '',
     slot: 'add',

 <template>
-  <div v-for="(param, index) in dynamicInput.params" :key="index" style="display: flex">
+  <div
+    v-for="(param, index) in dynamicInput.params"
+    :key="index"
+    style="display: flex; margin-top: 0.2vh"
+  >
     <Select
       v-model:value="param.dataType"
       style="width: 140px"
       :options="selectOptions"
-      @focus="focus"
-      @change="handleChange"
+      @change="emitChange"
     />
     <a-input
       placeholder="请输入Data key"
       v-model:value="param.key"
-      style="width: 38%; margin-bottom: 5px"
+      style="width: 38%; margin-bottom: 5px; margin-left: 1vh"
       @change="emitChange"
     />
     <a-input
       placeholder="请输入OID"
       v-model:value="param.oid"
-      style="width: 38%; margin: 0 0 5px 60px"
+      style="width: 38%; margin: 0 0 5px 8px"
       @change="emitChange"
     />
     <MinusCircleOutlined
@@ -60,7 +63,7 @@
       //自定义删除按钮多少才会显示
       min: propTypes.integer.def(0),
     },
-    emits: ['change', 'update:value'],
+    emits: ['change', 'update:value', 'dynamicReduceHeight', 'dynamicAddHeight'],
     setup(props, { emit }) {
       const selectOptions = ref<SelectTypes['options']>([
         {
@@ -84,13 +87,6 @@
           value: 'JSON',
         },
       ]);
-      const focus = () => {
-        console.log('focus');
-      };
-
-      const handleChange = (value: string) => {
-        console.log(`selected ${value}`);
-      };
 
       //input动态数据
       const dynamicInput: UnwrapRef<{ params: Params[] }> = reactive({ params: [] });
@@ -101,16 +97,18 @@
           dynamicInput.params.splice(index, 1);
         }
         emitChange();
+        emit('dynamicReduceHeight');
       };
 
       //新增Input
       const add = () => {
         dynamicInput.params.push({
-          dataType: '',
+          dataType: 'STRING',
           key: '',
           oid: '',
         });
         emitChange();
+        emit('dynamicAddHeight');
       };
 
       //监听传入数据value
@@ -158,8 +156,6 @@
         remove,
         add,
         selectOptions,
-        focus,
-        handleChange,
       };
     },
   });

+<!-- eslint-disable vue/no-mutating-props -->
 <template>
-  <div class="snmp-form">
-    <div class="form-item1">
+  <div class="snmp-form" :style="{ height: dynamicHeight + 'vh' }">
+    <div class="form-item1" :style="{ height: dynamicHeight + 'vh' }">
       <div style="margin-left: 1vw">
-        <h3 style="color: gray">Scope</h3>
-        <Select
-          v-model:value="selectValue"
-          style="width: 140px"
-          :options="selectOptions"
-          @focus="focus"
-          @change="handleChange"
-        />
+        <h3 style="color: gray">范围*</h3>
+        <slot></slot>
       </div>
     </div>
-    <div class="form-item2">
+    <div class="form-item2" :style="{ height: dynamicHeight + 'vh' }">
       <div style="margin-left: 1vw">
-        <h3 style="color: gray">Querying frequency,ms*</h3>
-        <InputNumber v-model:value="inputNmberValue" :min="1" :max="50000" />
-        <MappingsForm :value="mappings" @change="handleMappingsChange" />
+        <h3
+          v-if="item.spec == 'TELEMETRY_QUERYING' || item.spec == 'CLIENT_ATTRIBUTES_QUERYING'"
+          style="color: gray"
+          >查询频率（毫秒*）</h3
+        >
+        <InputNumber
+          v-if="item.spec == 'TELEMETRY_QUERYING' || item.spec == 'CLIENT_ATTRIBUTES_QUERYING'"
+          v-model:value="item.queryingFrequencyMs"
+          :min="5000"
+          :max="1000000000"
+        />
+        <MappingsForm
+          :value="item.mappings"
+          @change="handleMappingsChange"
+          @dynamicAddHeight="dynamicHeight += 4"
+          @dynamicReduceHeight="dynamicHeight -= 4"
+        />
       </div>
     </div>
-    <div class="form-item3">
-      <div style="text-align: center; line-height: 20vh">
-        <Button size="small" type="default" @click="handleRemove(item)">
+    <div class="form-item3" :style="{ height: dynamicHeight + 'vh' }">
+      <div
+        style="text-align: center; line-height: 20vh"
+        :style="{ lineHeight: dynamicHeight + 'vh' }"
+      >
+        <Button size="small" type="dashed" @click="handleRemove(item, index)">
           <template #icon>
             <MinusCircleOutlined />
           </template>
@@ -32,113 +44,90 @@
 </template>
 <script setup lang="ts">
   import { ref } from 'vue';
-  import { SelectTypes } from 'ant-design-vue/es/select';
-  import { Select, Button, InputNumber } from 'ant-design-vue';
+  import { Button, InputNumber } from 'ant-design-vue';
   import { MinusCircleOutlined } from '@ant-design/icons-vue';
   import MappingsForm from './MappingsForm.vue';
-  //   interface Params {
-  //     dataType: string;
-  //     key: string;
-  //     oid: string;
-  //   }
-  defineProps({
+
+  const props = defineProps({
     item: {
       type: Object,
       default: () => {},
     },
-    mappings: {
-      type: Array,
-      default: () => [],
+    index: {
+      type: Number,
     },
   });
   const emit = defineEmits(['removeItem']);
-  const selectValue = ref('CLIENT_ATTRIBUTES_QUERYING');
-  const inputNmberValue = ref(5000);
-  // const isHasItem = [
-  //   'TELEMETRY_QUERYING',
-  //   'CLIENT_ATTRIBUTES_QUERYING',
-  //   'SHARED_ATTRIBUTES_SETTING',
-  //   'TO_DEVICE_RPC_REQUEST',
-  // ];
-  const selectOptions = ref<SelectTypes['options']>([
-    {
-      label: 'Telemetry',
-      value: 'TELEMETRY_QUERYING',
-    },
-    {
-      label: 'Client attributes',
-      value: 'CLIENT_ATTRIBUTES_QUERYING',
-    },
-    {
-      label: 'Shared attributes',
-      value: 'SHARED_ATTRIBUTES_SETTING',
-    },
-    {
-      label: 'RPC request',
-      value: 'TO_DEVICE_RPC_REQUEST',
-    },
-  ]);
-  const focus = () => {
-    console.log('focus');
-  };
+  const dynamicHeight = ref(25);
 
-  const handleChange = (value: string) => {
-    selectValue.value = value;
-  };
-  const mapping: any = ref([]);
   const handleMappingsChange = (e) => {
-    mapping.value = e;
+    // eslint-disable-next-line vue/no-mutating-props
+    props.item.mappings = e;
   };
-
-  const handleRemove = (item) => {
-    emit('removeItem', item);
+  const handleRemove = (item, index) => {
+    emit('removeItem', item, index);
   };
-  //设置回显表单值
-  const setFieldsValueFunc = (item, inputValue) => {
-    selectValue.value = item;
-    inputNmberValue.value = inputValue;
+  //设置回显的高度
+  const setFieldsValueFunc = () => {
+    dynamicHeight.value = props.item.mappings.length * 3 + props.item.mappings.length + 15;
   };
   //获取表单的值
   const getSnmpFormFunc = () => {
     let obj: any = {};
     obj = {
-      ...{ spec: selectValue.value },
-      ...{ mappings: mapping.value },
-      ...{ queryingFrequencyMs: inputNmberValue.value },
+      ...{ spec: props.item.spec },
+      ...{ mappings: props.item.mappings },
+      ...{
+        queryingFrequencyMs:
+          props.item.spec == 'TELEMETRY_QUERYING' || props.item.spec == 'CLIENT_ATTRIBUTES_QUERYING'
+            ? props.item.queryingFrequencyMs
+            : null,
+      },
     };
     return obj;
   };
   defineExpose({
     getSnmpFormFunc,
     setFieldsValueFunc,
+    handleMappingsChange,
   });
 </script>
 <style lang="less" scoped>
+  ::-webkit-scrollbar {
+    display: none;
+    width: 0 !important;
+    height: 0 !important;
+    -webkit-appearance: none;
+    background: transparent;
+  }
+
   .snmp-form {
     display: flex;
     align-items: center;
     justify-content: space-between;
     width: 40vw;
     height: 20vh;
-    border: 1px solid gray;
+    border: 0.1px solid #bfbfbf;
     margin-top: 2vh;
 
     .form-item1 {
       width: 9vw;
       height: 20vh;
-      border: 1px solid gray;
+      border: 0.1px solid #bfbfbf;
     }
 
     .form-item2 {
       width: 28vw;
       height: 20vh;
-      border: 1px solid gray;
+      border: 0.1px solid #bfbfbf;
+      overflow: hidden;
+      overflow-y: scroll;
     }
 
     .form-item3 {
       width: 2vw;
       height: 20vh;
-      border: 1px solid gray;
+      border: 0.1px solid #bfbfbf;
     }
   }
 </style>

@@ -12,19 +12,37 @@
       <BasicForm :showResetButton="false" :showSubmitButton="false" @register="register">
         <template #add>
           <div>
-            <template v-for="(item, index) in dynamicSNMP.communicationConfigs" :key="index">
-              <span style="display: none">{{ item }}</span>
-              <span style="display: none">{{ index }}</span>
+            <template v-for="(item, index) in dynamicSNMP.communicationConfigs" :key="item">
               <!-- snmp表单项 -->
               <SnmpForm
+                :index="index"
                 :item="item"
                 :ref="dynamicBindRef.SnmpFormItemRef"
                 :mappings="item.mappings"
                 @removeItem="handleRemoveItem"
-              />
+              >
+                <Select
+                  v-model:value="item.spec"
+                  style="width: 140px"
+                  :options="selectOptions"
+                  @change="handleChange(item.spec)"
+                  allowClear
+                >
+                  <SelectOption
+                    v-for="it in selectOptions"
+                    :value="it.value"
+                    :key="it.value"
+                    :label="it.label"
+                    :disabled="it.disabled"
+                  />
+                </Select>
+              </SnmpForm>
             </template>
-            <div style="margin-left: 0vw; margin-top: 2vh">
-              <Button size="small" type="default" @click="handleAdd">
+            <div
+              v-if="dynamicSNMP.communicationConfigs.length < 4"
+              style="margin-left: 0vw; margin-top: 2vh"
+            >
+              <Button size="middle" type="dashed" @click="handleAdd">
                 <template #icon>
                   <PlusCircleOutlined />
                 </template>
@@ -42,7 +60,7 @@
   import { BasicForm, useForm } from '/@/components/Form';
   import { snmpSchemas } from './config';
   import { PlusCircleOutlined } from '@ant-design/icons-vue';
-  import { Button } from 'ant-design-vue';
+  import { Button, Select, SelectOption } from 'ant-design-vue';
   import SnmpForm from './cpns/SnmpForm.vue';
 
   interface mappingsI {
@@ -55,7 +73,49 @@
     queryingFrequencyMs: number;
     mappings: mappingsI[];
   }
-  const dynamicBindRef = {
+  const selectOptions: any = ref([
+    {
+      label: 'Telemetry',
+      value: 'TELEMETRY_QUERYING',
+      disabled: false,
+    },
+    {
+      label: 'Client attributes',
+      value: 'CLIENT_ATTRIBUTES_QUERYING',
+      disabled: false,
+    },
+    {
+      label: 'Shared attributes',
+      value: 'SHARED_ATTRIBUTES_SETTING',
+      disabled: false,
+    },
+    {
+      label: 'RPC request',
+      value: 'TO_DEVICE_RPC_REQUEST',
+      disabled: false,
+    },
+  ]);
+  const selectValue = ref('');
+  //解决新增选择框互斥问题和编辑回显互斥问题
+  const handleChange = (value: string) => {
+    selectValue.value = value;
+    selectOptions.value.forEach((ele: any) => {
+      ele.disabled = false;
+      dynamicSNMP.communicationConfigs.forEach((element: any) => {
+        if (element.spec === ele.value) {
+          ele.disabled = true;
+          selectOptions.value.forEach((it: any) => {
+            if ((ele.disabled = true)) {
+              if (ele.value == it.value) {
+                it.disabled = true;
+              }
+            }
+          });
+        }
+      });
+    });
+  };
+  const dynamicBindRef: any = {
     SnmpFormItemRef: ref([]),
   };
   const dynamicSNMP: UnwrapRef<{ communicationConfigs: Params[] }> = reactive({
@@ -69,7 +129,7 @@
             oid: '',
           },
         ],
-        queryingFrequencyMs: 0,
+        queryingFrequencyMs: 5000,
       },
     ],
   });
@@ -85,33 +145,32 @@
       spec: '',
       mappings: [
         {
-          dataType: '',
+          dataType: 'STRING',
           key: '',
           oid: '',
         },
       ],
-      queryingFrequencyMs: 0,
+      queryingFrequencyMs: 5000,
     });
   };
-  const handleRemoveItem = (item) => {
-    let index = dynamicSNMP.communicationConfigs.indexOf(item);
-    if (index !== -1) {
-      dynamicSNMP.communicationConfigs.splice(index, 1);
-    }
+  const handleRemoveItem = (item, index) => {
+    console.log(item.spec);
+    //2 TODO待解决删除时清空互斥问题
+    dynamicSNMP.communicationConfigs.splice(index, 1);
   };
   //回显表单值
+  //TODO 采用这种方式动态绑定ref 都会造成回显数据顺序是随机的但不影响回显数据的正确性
   const setStepFieldsValueFunc = (v) => {
     setFieldsValue({
       timeoutMs: v.timeoutMs,
       retries: v.retries,
     });
     dynamicSNMP.communicationConfigs = v.communicationConfigs;
-    dynamicSNMP.communicationConfigs.forEach((snmp: any, index: number) => {
+    dynamicSNMP.communicationConfigs.forEach((snmp, index: number) => {
       nextTick(() => {
-        unref(dynamicBindRef.SnmpFormItemRef)[index]?.setFieldsValueFunc(
-          snmp?.spec,
-          snmp?.queryingFrequencyMs
-        );
+        //编辑回显互斥赋值
+        handleChange(snmp.spec);
+        unref(dynamicBindRef.SnmpFormItemRef)[index]?.setFieldsValueFunc();
       });
     });
   };

@@ -78,11 +78,10 @@ export const step2Schemas: FormSchema[] = [
           { label: 'MQTT', value: 'MQTT' },
           { label: 'CoAP', value: 'COAP' },
           { label: 'LWM2M', value: 'LWM2M' },
-          // { label: 'SNMP', value: 'SNMP' },
+          { label: 'SNMP', value: 'SNMP' },
         ],
-        onChange(e) {},
       };
     },
-    colProps: { span: 11 },
+    colProps: { span: 10 },
   },
 ];

 import { FormSchema } from '/@/components/Form';
 import { findDictItemByCode } from '/@/api/system/dict';
 import { ref } from 'vue';
-// import { useMessage } from '/@/hooks/web/useMessage';
 import { isExistDataManagerNameApi } from '/@/api/datamanager/dataManagerApi';
-// const { createMessage } = useMessage();
 
 const typeValue = ref('');
-
 export enum CredentialsEnum {
   IS_ANONYMOUS = 'anonymous',
   IS_BASIC = 'basic',
   IS_PEM = 'pem',
 }
-
 export const isBasic = (type: string) => {
   return type === CredentialsEnum.IS_BASIC;
 };
@@ -55,31 +51,6 @@ export const modeForm: FormSchema[] = [
   },
 ];
 
-export const modeApiInseretKeyAndValueForm: FormSchema[] = [
-  {
-    field: 'key',
-    label: 'Header',
-    colProps: { span: 12 },
-    required: true,
-    component: 'Input',
-    componentProps: {
-      maxLength: 255,
-      placeholder: '请输入Header',
-    },
-  },
-  {
-    field: 'value',
-    label: 'Value',
-    colProps: { span: 12 },
-    required: true,
-    component: 'Input',
-    componentProps: {
-      maxLength: 255,
-      placeholder: '请输入Value',
-    },
-  },
-];
-
 export const modeKafkaForm: FormSchema[] = [
   {
     field: 'name',
@@ -117,7 +88,7 @@ export const modeKafkaForm: FormSchema[] = [
     defaultValue: 'my-topic',
     componentProps: {
       maxLength: 255,
-      placeholder: '请输入Topic pattern',
+      placeholder: '请输入消息次数',
     },
   },
   {
@@ -140,7 +111,6 @@ export const modeKafkaForm: FormSchema[] = [
     defaultValue: 0,
     componentProps: {
       maxLength: 255,
-      placeholder: '请输入Automatically retry times if fails',
     },
   },
   {
@@ -151,7 +121,6 @@ export const modeKafkaForm: FormSchema[] = [
     defaultValue: 16384,
     componentProps: {
       maxLength: 255,
-      placeholder: '请输入Produces batch size in bytes',
     },
   },
   {
@@ -162,7 +131,6 @@ export const modeKafkaForm: FormSchema[] = [
     defaultValue: 0,
     componentProps: {
       maxLength: 255,
-      placeholder: '请输入Time to buffer locally(ms)',
     },
   },
   {
@@ -173,7 +141,6 @@ export const modeKafkaForm: FormSchema[] = [
     defaultValue: 33554432,
     componentProps: {
       maxLength: 255,
-      placeholder: '请输入Client buffer max size in bytes',
     },
   },
   {
@@ -183,7 +150,7 @@ export const modeKafkaForm: FormSchema[] = [
     colProps: { span: 12 },
     defaultValue: '-1',
     componentProps: {
-      placeholder: '请选择Number of acknowledgments',
+      placeholder: '请选择响应码',
       options: [
         { label: 'all', value: 'all' },
         { label: '-1', value: '-1' },
@@ -224,7 +191,7 @@ export const modeKafkaForm: FormSchema[] = [
   },
   {
     field: 'addMetadataKeyValuesAsKafkaHeaders',
-    label: '',
+    label: '是否启用',
     colProps: { span: 12 },
     component: 'Checkbox',
     renderComponentContent: '将消息的元数据以键值对的方式添加到Kafka消息头中',
@@ -232,12 +199,12 @@ export const modeKafkaForm: FormSchema[] = [
   {
     field: 'kafkaHeadersCharset',
     component: 'Select',
-    label: 'Charset',
+    label: '字符集',
     required: true,
     colProps: { span: 12 },
     defaultValue: 'UTF-8',
     componentProps: {
-      placeholder: '请选择Charset encoding',
+      placeholder: '请选择字符集编码',
       options: [
         { label: 'US-ASCII', value: 'US' },
         { label: 'ISO-8859-1', value: 'ISO-8859-1' },
@@ -277,7 +244,7 @@ export const modeMqttForm: FormSchema[] = [
   },
   {
     field: 'topicPattern',
-    label: 'Topic',
+    label: '主题模式',
     colProps: { span: 12 },
     required: true,
     component: 'Input',
@@ -289,7 +256,7 @@ export const modeMqttForm: FormSchema[] = [
   },
   {
     field: 'host',
-    label: 'Host',
+    label: '主机',
     colProps: { span: 12 },
     component: 'Input',
     componentProps: {
@@ -299,7 +266,7 @@ export const modeMqttForm: FormSchema[] = [
   },
   {
     field: 'port',
-    label: 'Port',
+    label: '端口',
     colProps: { span: 12 },
     component: 'InputNumber',
     defaultValue: 1883,
@@ -311,7 +278,7 @@ export const modeMqttForm: FormSchema[] = [
   },
   {
     field: 'connectTimeoutSec',
-    label: 'Connection',
+    label: '连接超时（秒）',
     colProps: { span: 12 },
     component: 'InputNumber',
     defaultValue: 10,
@@ -323,7 +290,7 @@ export const modeMqttForm: FormSchema[] = [
   },
   {
     field: 'clientId',
-    label: 'Client ID',
+    label: '客户端ID',
     colProps: { span: 12 },
     component: 'Input',
     componentProps: ({ formActionType }) => {
@@ -353,29 +320,29 @@ export const modeMqttForm: FormSchema[] = [
     colProps: { span: 12 },
     defaultValue: false,
     component: 'Checkbox',
-    renderComponentContent: 'Add Service ID as suffix to Client ID',
+    renderComponentContent: '将服务ID作为后缀添加到客户端ID',
     show: false,
   },
   {
     field: 'cleanSession',
-    label: 'Clean',
+    label: '是否启用',
     colProps: { span: 12 },
     defaultValue: true,
     component: 'Checkbox',
-    renderComponentContent: 'Clean session',
+    renderComponentContent: '清除会话',
   },
   {
     field: 'ssl',
-    label: 'Enable',
+    label: '是否启用',
     colProps: { span: 12 },
     defaultValue: false,
     component: 'Checkbox',
-    renderComponentContent: 'Enable SSL',
+    renderComponentContent: '启用SSL',
   },
   {
     field: 'type',
     component: 'Select',
-    label: 'type',
+    label: '凭据类型',
     colProps: { span: 12 },
     defaultValue: 'anonymous',
     componentProps: {
@@ -460,12 +427,12 @@ export const modeMqttForm: FormSchema[] = [
   },
   {
     field: 'password',
-    label: 'Password',
+    label: '密码',
     colProps: { span: 12 },
     component: 'InputPassword',
     componentProps: {
       maxLength: 255,
-      placeholder: '请输入Password',
+      placeholder: '请输入密码',
     },
     ifShow: ({ values }) => isPem(Reflect.get(values, 'type')),
   },
@@ -511,31 +478,31 @@ export const modeRabbitMqForm: FormSchema[] = [
   },
   {
     field: 'exchangeNamePattern',
-    label: 'Exchange',
+    label: '交换名称模式',
     colProps: { span: 12 },
     component: 'Input',
     componentProps: {
       maxLength: 255,
-      placeholder: '请输入pattern',
+      placeholder: '请输入模式',
     },
   },
   {
     field: 'routingKeyPattern',
-    label: 'Routing',
+    label: '路由密钥模式',
     colProps: { span: 12 },
     component: 'Input',
     componentProps: {
       maxLength: 255,
-      placeholder: '请输入pattern',
+      placeholder: '请输入模式',
     },
   },
   {
     field: 'messageProperties',
     component: 'Select',
-    label: 'Message',
+    label: '消息属性',
     colProps: { span: 12 },
     componentProps: {
-      placeholder: '请选择Message properties',
+      placeholder: '请选择消息属性',
       options: [
         { label: 'BASIC', value: 'BASIC' },
         { label: 'TEXT_PLAIN', value: 'TEXT_PLAIN' },
@@ -548,7 +515,7 @@ export const modeRabbitMqForm: FormSchema[] = [
   },
   {
     field: 'host',
-    label: 'Host',
+    label: '主机',
     colProps: { span: 12 },
     component: 'Input',
     required: true,
@@ -560,7 +527,7 @@ export const modeRabbitMqForm: FormSchema[] = [
   },
   {
     field: 'port',
-    label: 'Port',
+    label: '端口',
     colProps: { span: 12 },
     component: 'InputNumber',
     defaultValue: 5672,
@@ -572,7 +539,7 @@ export const modeRabbitMqForm: FormSchema[] = [
   },
   {
     field: 'virtualHost',
-    label: 'Virtual',
+    label: '虚拟端口',
     colProps: { span: 12 },
     component: 'Input',
     defaultValue: '/',
@@ -583,36 +550,36 @@ export const modeRabbitMqForm: FormSchema[] = [
   },
   {
     field: 'username',
-    label: 'Username',
+    label: '用户名',
     colProps: { span: 12 },
     component: 'Input',
     defaultValue: 'guest',
     componentProps: {
       maxLength: 255,
-      placeholder: '请输入Username',
+      placeholder: '请输入用户名',
     },
   },
   {
     field: 'password',
-    label: 'Password',
+    label: '密码',
     colProps: { span: 12 },
     component: 'InputPassword',
     defaultValue: 'guest',
     componentProps: {
       maxLength: 255,
-      placeholder: '请输入Password',
+      placeholder: '请输入密码',
     },
   },
   {
     field: 'automaticRecoveryEnabled',
-    label: ' Automatic',
+    label: '是否启用',
     colProps: { span: 12 },
     component: 'Checkbox',
-    renderComponentContent: 'Automatic recovery',
+    renderComponentContent: '自动恢复',
   },
   {
     field: 'connectionTimeout',
-    label: 'Connect',
+    label: '连接超时（毫秒）',
     colProps: { span: 12 },
     component: 'InputNumber',
     defaultValue: 60000,
@@ -623,7 +590,7 @@ export const modeRabbitMqForm: FormSchema[] = [
   },
   {
     field: 'handshakeTimeout',
-    label: 'Handshake',
+    label: '握手超时（毫秒）',
     colProps: { span: 12 },
     component: 'InputNumber',
     defaultValue: 10000,
@@ -697,7 +664,7 @@ export const modeApiForm: FormSchema[] = [
   },
   {
     field: 'restEndpointUrlPattern',
-    label: 'Endpoint',
+    label: '端点URL模式',
     colProps: { span: 12 },
     required: true,
     defaultValue: 'http://localhost/api',
@@ -710,7 +677,7 @@ export const modeApiForm: FormSchema[] = [
   {
     field: 'requestMethod',
     component: 'Select',
-    label: 'Request',
+    label: '请求方式',
     colProps: { span: 12 },
     defaultValue: 'POST',
     componentProps: {
@@ -725,15 +692,15 @@ export const modeApiForm: FormSchema[] = [
   },
   {
     field: 'enableProxy',
-    label: '选择',
+    label: '是否启用',
     colProps: { span: 12 },
     component: 'Checkbox',
-    renderComponentContent: 'Enable proxy',
+    renderComponentContent: '启用代理',
   },
 
   {
     field: 'proxyHost',
-    label: 'Host',
+    label: '代理主机',
     colProps: { span: 12 },
     required: true,
     component: 'Input',
@@ -747,7 +714,7 @@ export const modeApiForm: FormSchema[] = [
   },
   {
     field: 'proxyPort',
-    label: 'Port',
+    label: '代理端口',
     colProps: { span: 12 },
     required: true,
     component: 'InputNumber',
@@ -762,13 +729,13 @@ export const modeApiForm: FormSchema[] = [
   },
   {
     field: 'proxyUser',
-    label: 'User',
+    label: '代理用户',
     colProps: { span: 12 },
     required: true,
     component: 'Input',
     componentProps: {
       maxLength: 255,
-      placeholder: '请输入Proxy user',
+      placeholder: '请输入代理用户',
     },
     ifShow: ({ values }) => {
       return !!values.enableProxy;
@@ -776,13 +743,13 @@ export const modeApiForm: FormSchema[] = [
   },
   {
     field: 'proxyPassword',
-    label: 'Password',
+    label: '代理密码',
     colProps: { span: 12 },
     required: true,
     component: 'InputPassword',
     componentProps: {
       maxLength: 255,
-      placeholder: '请输入Proxy password',
+      placeholder: '请输入代理密码',
     },
     ifShow: ({ values }) => {
       return !!values.enableProxy;
@@ -791,21 +758,20 @@ export const modeApiForm: FormSchema[] = [
 
   {
     field: 'useSystemProxyProperties',
-    label: '选择',
+    label: '是否启用',
     colProps: { span: 12 },
     component: 'Checkbox',
-    renderComponentContent: 'Use system proxy properties',
+    renderComponentContent: '使用系统代理属性',
   },
   {
     field: 'maxParallelRequestsCount',
-    label: 'Max',
+    label: '最大并行请求数',
     colProps: { span: 12 },
     required: true,
     component: 'InputNumber',
     defaultValue: 0,
     componentProps: {
       maxLength: 255,
-      placeholder: '请输入Max number of paraller requests',
     },
     ifShow: ({ values }) => {
       return !!values.useSystemProxyProperties;
@@ -813,21 +779,20 @@ export const modeApiForm: FormSchema[] = [
   },
   {
     field: 'ignoreRequestBody',
-    label: '选择',
+    label: '是否启用',
     colProps: { span: 12 },
     component: 'Checkbox',
-    renderComponentContent: 'Without request body',
+    renderComponentContent: '无请求正文',
   },
   {
     field: 'readTimeoutMs',
-    label: 'Read',
+    label: '读取超时（毫秒）',
     colProps: { span: 12 },
     required: true,
     component: 'InputNumber',
     defaultValue: 0,
     componentProps: {
       maxLength: 255,
-      placeholder: '请输入Read timeout in times',
     },
     ifShow: ({ values }) => {
       return !values.useSystemProxyProperties;
@@ -835,14 +800,13 @@ export const modeApiForm: FormSchema[] = [
   },
   {
     field: 'maxParallelRequestsCount',
-    label: 'Max',
+    label: '最大并行请求数',
     colProps: { span: 12 },
     required: true,
     component: 'InputNumber',
     defaultValue: 0,
     componentProps: {
       maxLength: 255,
-      placeholder: '请输入Max number of paraller requests',
     },
     ifShow: ({ values }) => {
       return !values.useSystemProxyProperties;
@@ -858,31 +822,30 @@ export const modeApiForm: FormSchema[] = [
 
   {
     field: 'useRedisQueueForMsgPersistence',
-    label: '选择',
+    label: '是否启用',
     colProps: { span: 12 },
     component: 'Checkbox',
-    renderComponentContent: 'Use redis queue for message persistence',
+    renderComponentContent: '使用redis队列进行消息持久性',
   },
   {
     field: 'trimQueue',
-    label: '选择',
+    label: '是否启用',
     colProps: { span: 12 },
     component: 'Checkbox',
-    renderComponentContent: 'Trim redis queue',
+    renderComponentContent: '修剪redis队列',
     ifShow: ({ values }) => {
       return !!values.useRedisQueueForMsgPersistence;
     },
   },
   {
     field: 'maxQueueSize',
-    label: 'Redis',
+    label: 'Redis队列最大数',
     colProps: { span: 12 },
     required: true,
     component: 'InputNumber',
     defaultValue: 0,
     componentProps: {
       maxLength: 255,
-      placeholder: '请输入Redis queue max size',
     },
     ifShow: ({ values }) => {
       return !!values.useRedisQueueForMsgPersistence;
@@ -892,11 +855,11 @@ export const modeApiForm: FormSchema[] = [
   {
     field: 'type',
     component: 'Select',
-    label: 'type',
+    label: '凭据类型',
     colProps: { span: 12 },
     defaultValue: 'anonymous',
     componentProps: {
-      placeholder: '请选择Number of acknowledgments',
+      placeholder: '请选择凭据类型',
       options: [
         { label: 'Anonymous', value: 'anonymous' },
         { label: 'Basic', value: 'basic' },
@@ -906,25 +869,25 @@ export const modeApiForm: FormSchema[] = [
   },
   {
     field: 'username',
-    label: 'Username',
+    label: '用户名',
     colProps: { span: 12 },
     component: 'Input',
     required: true,
     componentProps: {
       maxLength: 255,
-      placeholder: '请输入Username',
+      placeholder: '请输入用户名',
     },
     ifShow: ({ values }) => isBasic(Reflect.get(values, 'type')),
   },
   {
     field: 'password',
-    label: 'Password',
+    label: '密码',
     colProps: { span: 12 },
     component: 'InputPassword',
     required: true,
     componentProps: {
       maxLength: 255,
-      placeholder: '请输入Password',
+      placeholder: '请输入密码',
     },
     ifShow: ({ values }) => isBasic(Reflect.get(values, 'type')),
   },
@@ -978,12 +941,12 @@ export const modeApiForm: FormSchema[] = [
   },
   {
     field: 'password',
-    label: 'Password',
+    label: '密码',
     colProps: { span: 12 },
     component: 'InputPassword',
     componentProps: {
       maxLength: 255,
-      placeholder: '请输入Password',
+      placeholder: '请输入密码',
     },
     ifShow: ({ values }) => isPem(Reflect.get(values, 'type')),
   },