feat：设备配置新增snmp 待解决TODO 1 2问题

@@ -214,6 +214,7 @@
         if (isUpdate.value == 1) {
           delete postDeviceConfogData.id;
         }
+        //1 TODO 待解决OID对象唯一标识不能重复问题验证
         let isMappings = false;
         // let isQuerying = false;
         postDeviceConfogData?.profileData?.transportConfiguration?.communicationConfigs?.forEach(

@@ -24,7 +24,7 @@
       <div style="margin-top: 1vh" v-else-if="isMqttType == 'LWM2M'">
         <Lwm2mCpns ref="lwm2mRef" />
       </div>
-      <div style="margin-top: 5vh" v-else-if="isMqttType == 'SNMP1'">
+      <div style="margin-top: 5vh" v-else-if="isMqttType == 'SNMP'">
         <SnmpCpns ref="snmpRef" />
       </div>
       <div
@@ -124,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;

@@ -8,8 +8,7 @@
       v-model:value="param.dataType"
       style="width: 140px"
       :options="selectOptions"
-      @focus="focus"
-      @change="handleChange"
+      @change="emitChange"
     />
     <a-input
       placeholder="请输入Data key"
@@ -88,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: [] });
@@ -105,7 +97,7 @@
           dynamicInput.params.splice(index, 1);
         }
         emitChange();
-        emit('dynamicReduceHeight', false);
+        emit('dynamicReduceHeight');
       };
 
       //新增Input
@@ -116,7 +108,7 @@
           oid: '',
         });
         emitChange();
-        emit('dynamicAddHeight', true);
+        emit('dynamicAddHeight');
       };
 
       //监听传入数据value
@@ -164,8 +156,6 @@
         remove,
         add,
         selectOptions,
-        focus,
-        handleChange,
       };
     },
   });

+<!-- eslint-disable vue/no-mutating-props -->
 <template>
   <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">范围*</h3>
-        <Select
-          v-model:value="selectValue"
-          style="width: 140px"
-          :options="selectOptions"
-          @change="handleChange"
-          allowClear
-        />
+        <slot></slot>
       </div>
     </div>
     <div class="form-item2" :style="{ height: dynamicHeight + 'vh' }">
       <div style="margin-left: 1vw">
-        <h3 style="color: gray">查询频率（毫秒*）</h3>
+        <h3
+          v-if="item.spec == 'TELEMETRY_QUERYING' || item.spec == 'CLIENT_ATTRIBUTES_QUERYING'"
+          style="color: gray"
+          >查询频率（毫秒*）</h3
+        >
         <InputNumber
-          v-if="selectValue == 'TELEMETRY_QUERYING' || selectValue == 'CLIENT_ATTRIBUTES_QUERYING'"
-          v-model:value="inputNmberValue"
-          :min="1"
-          :max="50000"
+          v-if="item.spec == 'TELEMETRY_QUERYING' || item.spec == 'CLIENT_ATTRIBUTES_QUERYING'"
+          v-model:value="item.queryingFrequencyMs"
+          :min="5000"
+          :max="1000000000"
         />
         <MappingsForm
-          :value="mappings"
+          :value="item.mappings"
           @change="handleMappingsChange"
-          @dynamicAddHeight="handleDynamicAddHeight"
-          @dynamicReduceHeight="handleDynamicReduceHeight"
+          @dynamicAddHeight="dynamicHeight += 4"
+          @dynamicReduceHeight="dynamicHeight -= 4"
         />
       </div>
     </div>
@@ -45,87 +44,45 @@
 </template>
 <script setup lang="ts">
   import { ref } from 'vue';
-  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';
 
-  defineProps({
+  const props = defineProps({
     item: {
       type: Object,
       default: () => {},
     },
-    mappings: {
-      type: Array,
-      default: () => [],
-    },
     index: {
       type: Number,
     },
-    spec: {
-      type: String,
-      default: '',
-    },
   });
-  const emit = defineEmits(['removeItem', 'selectItem']);
-  const selectValue = ref('CLIENT_ATTRIBUTES_QUERYING');
-  const inputNmberValue = ref(5000);
+  const emit = defineEmits(['removeItem']);
   const dynamicHeight = ref(25);
-  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 handleChange = (value: string) => {
-    selectValue.value = value;
-    emit('selectItem', selectValue.value);
-  };
-  const mapping: any = ref([]);
+
   const handleMappingsChange = (e) => {
-    mapping.value = e;
-  };
-  const handleDynamicAddHeight = (e) => {
-    if (e) {
-      dynamicHeight.value += 4;
-    }
+    // eslint-disable-next-line vue/no-mutating-props
+    props.item.mappings = e;
   };
-  const handleDynamicReduceHeight = (e) => {
-    if (!e) {
-      dynamicHeight.value -= 4;
-    }
-  };
-
   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;
   };
@@ -133,8 +90,6 @@
     getSnmpFormFunc,
     setFieldsValueFunc,
     handleMappingsChange,
-    selectValue,
-    handleChange,
   });
 </script>
 <style lang="less" scoped>
@@ -145,6 +100,7 @@
     -webkit-appearance: none;
     background: transparent;
   }
+
   .snmp-form {
     display: flex;
     align-items: center;
@@ -153,8 +109,6 @@
     height: 20vh;
     border: 0.1px solid #bfbfbf;
     margin-top: 2vh;
-    overflow: hidden;
-    overflow-y: scroll;
 
     .form-item1 {
       width: 9vw;

@@ -13,18 +13,30 @@
         <template #add>
           <div>
             <template v-for="(item, index) in dynamicSNMP.communicationConfigs" :key="item">
-              <span style="display: none">{{ item }}</span>
-              <span style="display: none">{{ index }}</span>
               <!-- snmp表单项 -->
               <SnmpForm
-                :spec="item.spec"
                 :index="index"
                 :item="item"
                 :ref="dynamicBindRef.SnmpFormItemRef"
                 :mappings="item.mappings"
                 @removeItem="handleRemoveItem"
-                @selectItem="handleSelectItem"
-              />
+              >
+                <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
               v-if="dynamicSNMP.communicationConfigs.length < 4"
@@ -48,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 {
@@ -61,6 +73,48 @@
     queryingFrequencyMs: number;
     mappings: mappingsI[];
   }
+  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([]),
   };
@@ -75,7 +129,7 @@
             oid: '',
           },
         ],
-        queryingFrequencyMs: 0,
+        queryingFrequencyMs: 5000,
       },
     ],
   });
@@ -86,15 +140,6 @@
       span: 14,
     },
   });
-  // const selectArray = [
-  //   'TELEMETRY_QUERYING',
-  //   'CLIENT_ATTRIBUTES_QUERYING',
-  //   'SHARED_ATTRIBUTES_SETTING',
-  //   'TO_DEVICE_RPC_REQUEST',
-  // ];
-  const handleSelectItem = (e) => {
-    console.log('e', e);
-  };
   const handleAdd = () => {
     dynamicSNMP.communicationConfigs.push({
       spec: '',
@@ -105,26 +150,27 @@
           oid: '',
         },
       ],
-      queryingFrequencyMs: 0,
+      queryingFrequencyMs: 5000,
     });
   };
-  const handleRemoveItem = (_, index) => {
+  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
-        );
-        unref(dynamicBindRef.SnmpFormItemRef)[index]?.handleMappingsChange(snmp?.mappings);
+        //编辑回显互斥赋值
+        handleChange(snmp.spec);
+        unref(dynamicBindRef.SnmpFormItemRef)[index]?.setFieldsValueFunc();
       });
     });
   };