pref：优化设备配置

@@ -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,45 @@
         if (isUpdate.value == 1) {
           delete postDeviceConfogData.id;
         }
-        deviceConfigAddOrEdit(postDeviceConfogData)
+        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 == 'SNMP1'">
         <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);
       };
 
@@ -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;

 <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"
@@ -10,13 +14,13 @@
     <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 +64,7 @@
       //自定义删除按钮多少才会显示
       min: propTypes.integer.def(0),
     },
-    emits: ['change', 'update:value'],
+    emits: ['change', 'update:value', 'dynamicReduceHeight', 'dynamicAddHeight'],
     setup(props, { emit }) {
       const selectOptions = ref<SelectTypes['options']>([
         {
@@ -101,16 +105,18 @@
           dynamicInput.params.splice(index, 1);
         }
         emitChange();
+        emit('dynamicReduceHeight', false);
       };
 
       //新增Input
       const add = () => {
         dynamicInput.params.push({
-          dataType: '',
+          dataType: 'STRING',
           key: '',
           oid: '',
         });
         emitChange();
+        emit('dynamicAddHeight', true);
       };
 
       //监听传入数据value

 <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>
+        <h3 style="color: gray">Scope*</h3>
         <Select
           v-model:value="selectValue"
           style="width: 140px"
           :options="selectOptions"
-          @focus="focus"
           @change="handleChange"
+          allowClear
         />
       </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" />
+        <InputNumber
+          v-if="selectValue == 'TELEMETRY_QUERYING' || selectValue == 'CLIENT_ATTRIBUTES_QUERYING'"
+          v-model:value="inputNmberValue"
+          :min="1"
+          :max="50000"
+        />
+        <MappingsForm
+          :value="mappings"
+          @change="handleMappingsChange"
+          @dynamicAddHeight="handleDynamicAddHeight"
+          @dynamicReduceHeight="handleDynamicReduceHeight"
+        />
       </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="default" @click="handleRemove(item, index)">
           <template #icon>
             <MinusCircleOutlined />
           </template>
@@ -32,15 +45,10 @@
 </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 { MinusCircleOutlined } from '@ant-design/icons-vue';
   import MappingsForm from './MappingsForm.vue';
-  //   interface Params {
-  //     dataType: string;
-  //     key: string;
-  //     oid: string;
-  //   }
+
   defineProps({
     item: {
       type: Object,
@@ -50,48 +58,68 @@
       type: Array,
       default: () => [],
     },
+    index: {
+      type: Number,
+    },
+    spec: {
+      type: String,
+      default: '',
+    },
   });
-  const emit = defineEmits(['removeItem']);
+  const emit = defineEmits(['removeItem', 'selectItem']);
   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']>([
+  const dynamicHeight = ref(20);
+  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 focus = () => {
-    console.log('focus');
-  };
-
   const handleChange = (value: string) => {
     selectValue.value = value;
+    // selectOptions.value.forEach((f) => {
+    //   if (f.value == selectValue.value) {
+    //     f.disabled = false;
+    //   } else {
+    //     f.disabled = true;
+    //   }
+    // });
+    emit('selectItem', selectValue.value);
   };
   const mapping: any = ref([]);
   const handleMappingsChange = (e) => {
     mapping.value = e;
   };
+  const handleDynamicAddHeight = (e) => {
+    if (e) {
+      dynamicHeight.value += 4;
+    }
+  };
+  const handleDynamicReduceHeight = (e) => {
+    if (!e) {
+      dynamicHeight.value -= 4;
+    }
+  };
 
-  const handleRemove = (item) => {
-    emit('removeItem', item);
+  const handleRemove = (item, index) => {
+    emit('removeItem', item, index);
   };
   //设置回显表单值
   const setFieldsValueFunc = (item, inputValue) => {
@@ -111,6 +139,9 @@
   defineExpose({
     getSnmpFormFunc,
     setFieldsValueFunc,
+    handleMappingsChange,
+    selectValue,
+    handleChange,
   });
 </script>
 <style lang="less" scoped>

@@ -12,18 +12,24 @@
       <BasicForm :showResetButton="false" :showSubmitButton="false" @register="register">
         <template #add>
           <div>
-            <template v-for="(item, index) in dynamicSNMP.communicationConfigs" :key="index">
+            <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"
               />
             </template>
-            <div style="margin-left: 0vw; margin-top: 2vh">
+            <div
+              v-if="dynamicSNMP.communicationConfigs.length < 4"
+              style="margin-left: 0vw; margin-top: 2vh"
+            >
               <Button size="small" type="default" @click="handleAdd">
                 <template #icon>
                   <PlusCircleOutlined />
@@ -55,7 +61,7 @@
     queryingFrequencyMs: number;
     mappings: mappingsI[];
   }
-  const dynamicBindRef = {
+  const dynamicBindRef: any = {
     SnmpFormItemRef: ref([]),
   };
   const dynamicSNMP: UnwrapRef<{ communicationConfigs: Params[] }> = reactive({
@@ -80,24 +86,40 @@
       span: 14,
     },
   });
+  // const selectArray = [
+  //   'TELEMETRY_QUERYING',
+  //   'CLIENT_ATTRIBUTES_QUERYING',
+  //   'SHARED_ATTRIBUTES_SETTING',
+  //   'TO_DEVICE_RPC_REQUEST',
+  // ];
+  // const selectIndex: any = ref('');
+  const handleSelectItem = (e) => {
+    console.log('e', e);
+    // selectIndex.value = e || 'CLIENT_ATTRIBUTES_QUERYING';
+    // selectIndex.value = selectArray.filter((f) => f !== e);
+    // console.log('e1', selectIndex.value);
+  };
   const handleAdd = () => {
     dynamicSNMP.communicationConfigs.push({
       spec: '',
       mappings: [
         {
-          dataType: '',
+          dataType: 'STRING',
           key: '',
           oid: '',
         },
       ],
       queryingFrequencyMs: 0,
     });
+    // console.log('总数组', dynamicSNMP.communicationConfigs);
+    // dynamicSNMP.communicationConfigs.forEach((snmp, index) => {
+    //   nextTick(() => {
+    //     unref(dynamicBindRef.SnmpFormItemRef)[index]?.handleChange(snmp?.spec);
+    //   });
+    // });
   };
-  const handleRemoveItem = (item) => {
-    let index = dynamicSNMP.communicationConfigs.indexOf(item);
-    if (index !== -1) {
-      dynamicSNMP.communicationConfigs.splice(index, 1);
-    }
+  const handleRemoveItem = (_, index) => {
+    dynamicSNMP.communicationConfigs.splice(index, 1);
   };
   //回显表单值
   const setStepFieldsValueFunc = (v) => {
@@ -112,6 +134,7 @@
           snmp?.spec,
           snmp?.queryingFrequencyMs
         );
+        unref(dynamicBindRef.SnmpFormItemRef)[index]?.handleMappingsChange(snmp?.mappings);
       });
     });
   };

@@ -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 },
   },
 ];