简柏林 / thingskit-front · Commits

Commit 097c7eb17555dc4f9e1dc85efc1033a406457833

Authored by fengtao
1 parent 6cbb22db

pref：优化设备配置

Inline Side-by-side
Showing 6 changed files with 209 additions and 57 deletions
@@ -81,10 +81,12 @@ @@ -81,10 +81,12 @@
81 let profileDataObj: any = reactive({ 81 let profileDataObj: any = reactive({
82 profileData: null, 82 profileData: null,
83 }); 83 });
84 - 84 + let isEdit = ref(true);
  85 + let noEditObj: any = reactive({});
85 const getTitle = computed(() => 86 const getTitle = computed(() =>
86 isUpdate.value == 1 ? '新增设备配置' : isUpdate.value == 2 ? '编辑设备配置' : '设备配置详情' 87 isUpdate.value == 1 ? '新增设备配置' : isUpdate.value == 2 ? '编辑设备配置' : '设备配置详情'
87 ); 88 );
  89 + const editTransportType = ref('');
88 const getViewTitle = computed(() => (!unref(isShowOkBtnFalse) ? '设备配置详情' : '')); 90 const getViewTitle = computed(() => (!unref(isShowOkBtnFalse) ? '设备配置详情' : ''));
89 const [register, { closeModal }] = useModalInner(async (data) => { 91 const [register, { closeModal }] = useModalInner(async (data) => {
90 isUpdate.value = data.isUpdate; 92 isUpdate.value = data.isUpdate;
@@ -92,12 +94,15 @@ @@ -92,12 +94,15 @@
92 handleCancel(); 94 handleCancel();
93 isShowOkBtnFalse.value = true; 95 isShowOkBtnFalse.value = true;
94 current.value = 0; 96 current.value = 0;
  97 + isEdit.value = false;
95 } else if (isUpdate.value == 2) { 98 } else if (isUpdate.value == 2) {
  99 + isEdit.value = true;
96 handleCancel(); 100 handleCancel();
97 isShowOkBtnFalse.value = true; 101 isShowOkBtnFalse.value = true;
98 current.value = 0; 102 current.value = 0;
99 postEditId.value = data.record.id; 103 postEditId.value = data.record.id;
100 createTime.value = data.record.createTime; 104 createTime.value = data.record.createTime;
  105 + editTransportType.value = data.record.transportType;
101 editData.value = await deviceConfigGetDetail(postEditId.value); 106 editData.value = await deviceConfigGetDetail(postEditId.value);
102 proxy.$refs.DeviceProfileStep1Ref.setStepOneFieldsValueFunc({ 107 proxy.$refs.DeviceProfileStep1Ref.setStepOneFieldsValueFunc({
103 name: editData.value.name, 108 name: editData.value.name,
@@ -106,6 +111,19 @@ @@ -106,6 +111,19 @@
106 description: editData.value.description, 111 description: editData.value.description,
107 image: editData.value.image, 112 image: editData.value.image,
108 }); 113 });
  114 + noEditObj = {
  115 + id: editData.value.id,
  116 + name: editData.value?.name,
  117 + createTime: createTime.value,
  118 + transportType: editTransportType.value,
  119 + type: editData.value?.type,
  120 + profileData: editData.value?.profileData,
  121 + defaultQueueName: editData.value.defaultQueueName,
  122 + image: editData.value.image,
  123 + defaultRuleChainId: editData.value.defaultRuleChainId,
  124 + description: editData.value.description,
  125 + tenantId: editData.value.tenantId,
  126 + };
109 } else if (isUpdate.value == 3) { 127 } else if (isUpdate.value == 3) {
110 handleCancel(); 128 handleCancel();
111 isShowOkBtnFalse.value = false; 129 isShowOkBtnFalse.value = false;
@@ -124,6 +142,28 @@ @@ -124,6 +142,28 @@
124 }); 142 });
125 function handleStepPrev() { 143 function handleStepPrev() {
126 current.value--; 144 current.value--;
  145 + if (isUpdate.value == 2) {
  146 + isEdit.value = true;
  147 + noEditObj = {
  148 + id: editData.value.id,
  149 + name: editData.value?.name,
  150 + createTime: createTime.value,
  151 + transportType: editTransportType.value,
  152 + type: editData.value?.type,
  153 + profileData: editData.value?.profileData,
  154 + defaultQueueName: editData.value.defaultQueueName,
  155 + image: editData.value.image,
  156 + defaultRuleChainId: editData.value.defaultRuleChainId,
  157 + description: editData.value.description,
  158 + tenantId: editData.value.tenantId,
  159 + };
  160 + nextTick(async () => {
  161 + let getPic = null;
  162 + const getStep1Obj = await proxy.$refs.DeviceProfileStep1Ref?.getStep1Func();
  163 + getPic = getStep1Obj.icon;
  164 + Object.assign(noEditObj, { image: getPic }, getStep1Obj.key);
  165 + });
  166 + }
127 } 167 }
128 //第一步 168 //第一步
129 function handleStepNext1(v, v1) { 169 function handleStepNext1(v, v1) {
@@ -136,6 +176,7 @@ @@ -136,6 +176,7 @@
136 } 176 }
137 current.value++; 177 current.value++;
138 if (isUpdate.value == 2) { 178 if (isUpdate.value == 2) {
  179 + isEdit.value = false;
139 proxy.$refs.DeviceProfileStep2Ref?.setStepTwoFieldsValueFunc(editData.value); 180 proxy.$refs.DeviceProfileStep2Ref?.setStepTwoFieldsValueFunc(editData.value);
140 } else if (isUpdate.value == 3) { 181 } else if (isUpdate.value == 3) {
141 proxy.$refs.DeviceProfileStep2Ref?.setStepTwoFieldsValueFunc(editData.value); 182 proxy.$refs.DeviceProfileStep2Ref?.setStepTwoFieldsValueFunc(editData.value);
@@ -155,6 +196,7 @@ @@ -155,6 +196,7 @@
155 ...getStep1Obj.key, 196 ...getStep1Obj.key,
156 ...{ image: getPic }, 197 ...{ image: getPic },
157 }; 198 };
  199 + Object.assign(noEditObj, { image: getPic }, getStep1Obj.key);
158 } 200 }
159 const id = isUpdate.value == 1 ? '' : postEditId.value; 201 const id = isUpdate.value == 1 ? '' : postEditId.value;
160 const createTimePost = isUpdate.value == 1 ? {} : { createTime: createTime.value }; 202 const createTimePost = isUpdate.value == 1 ? {} : { createTime: createTime.value };
@@ -172,7 +214,45 @@ @@ -172,7 +214,45 @@
172 if (isUpdate.value == 1) { 214 if (isUpdate.value == 1) {
173 delete postDeviceConfogData.id; 215 delete postDeviceConfogData.id;
174 } 216 }
175 - deviceConfigAddOrEdit(postDeviceConfogData) 217 + let isMappings = false;
  218 + // let isQuerying = false;
  219 + postDeviceConfogData?.profileData?.transportConfiguration?.communicationConfigs?.forEach(
  220 + (f) => {
  221 + // if (f.spec == 'TELEMETRY_QUERYING' && f.queryingFrequencyMs == null) {
  222 + // isQuerying = true;
  223 + // } else {
  224 + // isQuerying = false;
  225 + // }
  226 + // if (f.spec == 'CLIENT_ATTRIBUTES_QUERYING' && f.queryingFrequencyMs == null) {
  227 + // isQuerying = true;
  228 + // } else {
  229 + // isQuerying = false;
  230 + // }
  231 + if (f.mappings.length == 0) {
  232 + isMappings = true;
  233 + } else {
  234 + f.mappings.forEach((f1) => {
  235 + const findNoneKey = Object.keys(f1).includes('');
  236 + if (findNoneKey) {
  237 + isMappings = findNoneKey;
  238 + } else {
  239 + isMappings = false;
  240 + }
  241 + });
  242 + f.mappings.forEach((f2) => {
  243 + const findNoneVal = Object.values(f2).includes('');
  244 + if (findNoneVal) {
  245 + isMappings = findNoneVal;
  246 + } else {
  247 + isMappings = false;
  248 + }
  249 + });
  250 + }
  251 + }
  252 + );
  253 + // if (isQuerying) return createMessage.error('请填写Querying frequency,ms');
  254 + if (isMappings) return createMessage.error('请填写Date key和OID');
  255 + deviceConfigAddOrEdit(isEdit.value ? noEditObj : postDeviceConfogData)
176 .then((res) => { 256 .then((res) => {
177 if (!res) return; 257 if (!res) return;
178 createMessage.success(isUpdate.value == 1 ? '新增' + '成功' : '编辑' + '成功'); 258 createMessage.success(isUpdate.value == 1 ? '新增' + '成功' : '编辑' + '成功');
1 <template> 1 <template>
2 <div class="step2-style"> 2 <div class="step2-style">
3 - <div style="margin-top: 0.1vh; overflow: scroll"> 3 + <div
  4 + style="margin-top: 0.1vh; height: 15vh"
  5 + :style="[
  6 + isMqttType == 'MQTT'
  7 + ? { minHeight: 45 + 'vh' }
  8 + : isMqttType == 'COAP'
  9 + ? { minHeight: 35 + 'vh' }
  10 + : isMqttType == 'LWM2M'
  11 + ? { minHeight: 55 + 'vh' }
  12 + : isMqttType == 'SNMP'
  13 + ? { minHeight: 60 + 'vh' }
  14 + : { minHeight: 25 + 'vh' },
  15 + ]"
  16 + >
4 <BasicForm :showResetButton="false" :showSubmitButton="false" @register="register" /> 17 <BasicForm :showResetButton="false" :showSubmitButton="false" @register="register" />
5 - <div v-if="isMqttType == 'MQTT'"> 18 + <div style="margin-top: 5vh" v-if="isMqttType == 'MQTT'">
6 <MqttCpns ref="mqttRef" /> 19 <MqttCpns ref="mqttRef" />
7 </div> 20 </div>
8 - <div v-else-if="isMqttType == 'COAP'"> 21 + <div style="margin-top: 5vh" v-else-if="isMqttType == 'COAP'">
9 <CoapCpns ref="coapRef" /> 22 <CoapCpns ref="coapRef" />
10 </div> 23 </div>
11 - <div v-else-if="isMqttType == 'LWM2M'"> 24 + <div style="margin-top: 1vh" v-else-if="isMqttType == 'LWM2M'">
12 <Lwm2mCpns ref="lwm2mRef" /> 25 <Lwm2mCpns ref="lwm2mRef" />
13 </div> 26 </div>
14 - <div v-else-if="isMqttType == 'SNMP1'"> 27 + <div style="margin-top: 5vh" v-else-if="isMqttType == 'SNMP1'">
15 <SnmpCpns ref="snmpRef" /> 28 <SnmpCpns ref="snmpRef" />
16 </div> 29 </div>
17 <div 30 <div
@@ -85,7 +98,7 @@ @@ -85,7 +98,7 @@
85 proxy.$refs.mqttRef?.setStepFieldsValueFunc(v?.profileData?.transportConfiguration); 98 proxy.$refs.mqttRef?.setStepFieldsValueFunc(v?.profileData?.transportConfiguration);
86 proxy.$refs.coapRef?.setStepFieldsValueFunc(v?.profileData?.transportConfiguration); 99 proxy.$refs.coapRef?.setStepFieldsValueFunc(v?.profileData?.transportConfiguration);
87 proxy.$refs.lwm2mRef?.setStepFieldsValueFunc(v?.profileData?.transportConfiguration); 100 proxy.$refs.lwm2mRef?.setStepFieldsValueFunc(v?.profileData?.transportConfiguration);
88 - // proxy.$refs.snmpRef?.setStepFieldsValueFunc(v?.profileData?.transportConfiguration); 101 + proxy.$refs.snmpRef?.setStepFieldsValueFunc(v?.profileData?.transportConfiguration);
89 }, 100); 102 }, 100);
90 }; 103 };
91 104
@@ -129,12 +142,12 @@ @@ -129,12 +142,12 @@
129 const getMqttVal = await proxy.$refs.mqttRef?.getDataFunc(); 142 const getMqttVal = await proxy.$refs.mqttRef?.getDataFunc();
130 const getCoapVal = await proxy.$refs.coapRef?.getDataFunc(); 143 const getCoapVal = await proxy.$refs.coapRef?.getDataFunc();
131 const getLwm2mVal = await proxy.$refs.lwm2mRef?.getDataFunc(); 144 const getLwm2mVal = await proxy.$refs.lwm2mRef?.getDataFunc();
132 - // const getSnmpVal = await proxy.$refs.snmpRef?.getSnmpForm(); 145 + const getSnmpVal = await proxy.$refs.snmpRef?.getSnmpForm();
133 step2Data.transportConfiguration = { 146 step2Data.transportConfiguration = {
134 ...getMqttVal, 147 ...getMqttVal,
135 ...getCoapVal, 148 ...getCoapVal,
136 ...getLwm2mVal, 149 ...getLwm2mVal,
137 - // ...getSnmpVal, 150 + ...getSnmpVal,
138 ...val, 151 ...val,
139 }; 152 };
140 return step2Data; 153 return step2Data;
1 <template> 1 <template>
2 - <div v-for="(param, index) in dynamicInput.params" :key="index" style="display: flex"> 2 + <div
  3 + v-for="(param, index) in dynamicInput.params"
  4 + :key="index"
  5 + style="display: flex; margin-top: 0.2vh"
  6 + >
3 <Select 7 <Select
4 v-model:value="param.dataType" 8 v-model:value="param.dataType"
5 style="width: 140px" 9 style="width: 140px"
@@ -10,13 +14,13 @@ @@ -10,13 +14,13 @@
10 <a-input 14 <a-input
11 placeholder="请输入Data key" 15 placeholder="请输入Data key"
12 v-model:value="param.key" 16 v-model:value="param.key"
13 - style="width: 38%; margin-bottom: 5px" 17 + style="width: 38%; margin-bottom: 5px; margin-left: 1vh"
14 @change="emitChange" 18 @change="emitChange"
15 /> 19 />
16 <a-input 20 <a-input
17 placeholder="请输入OID" 21 placeholder="请输入OID"
18 v-model:value="param.oid" 22 v-model:value="param.oid"
19 - style="width: 38%; margin: 0 0 5px 60px" 23 + style="width: 38%; margin: 0 0 5px 8px"
20 @change="emitChange" 24 @change="emitChange"
21 /> 25 />
22 <MinusCircleOutlined 26 <MinusCircleOutlined
@@ -60,7 +64,7 @@ @@ -60,7 +64,7 @@
60 //自定义删除按钮多少才会显示 64 //自定义删除按钮多少才会显示
61 min: propTypes.integer.def(0), 65 min: propTypes.integer.def(0),
62 }, 66 },
63 - emits: ['change', 'update:value'], 67 + emits: ['change', 'update:value', 'dynamicReduceHeight', 'dynamicAddHeight'],
64 setup(props, { emit }) { 68 setup(props, { emit }) {
65 const selectOptions = ref<SelectTypes['options']>([ 69 const selectOptions = ref<SelectTypes['options']>([
66 { 70 {
@@ -101,16 +105,18 @@ @@ -101,16 +105,18 @@
101 dynamicInput.params.splice(index, 1); 105 dynamicInput.params.splice(index, 1);
102 } 106 }
103 emitChange(); 107 emitChange();
  108 + emit('dynamicReduceHeight', false);
104 }; 109 };
105 110
106 //新增Input 111 //新增Input
107 const add = () => { 112 const add = () => {
108 dynamicInput.params.push({ 113 dynamicInput.params.push({
109 - dataType: '', 114 + dataType: 'STRING',
110 key: '', 115 key: '',
111 oid: '', 116 oid: '',
112 }); 117 });
113 emitChange(); 118 emitChange();
  119 + emit('dynamicAddHeight', true);
114 }; 120 };
115 121
116 //监听传入数据value 122 //监听传入数据value
1 <template> 1 <template>
2 - <div class="snmp-form">  
3 - <div class="form-item1"> 2 + <div class="snmp-form" :style="{ height: dynamicHeight + 'vh' }">
  3 + <div class="form-item1" :style="{ height: dynamicHeight + 'vh' }">
4 <div style="margin-left: 1vw"> 4 <div style="margin-left: 1vw">
5 - <h3 style="color: gray">Scope</h3> 5 + <h3 style="color: gray">Scope*</h3>
6 <Select 6 <Select
7 v-model:value="selectValue" 7 v-model:value="selectValue"
8 style="width: 140px" 8 style="width: 140px"
9 :options="selectOptions" 9 :options="selectOptions"
10 - @focus="focus"  
11 @change="handleChange" 10 @change="handleChange"
  11 + allowClear
12 /> 12 />
13 </div> 13 </div>
14 </div> 14 </div>
15 - <div class="form-item2"> 15 + <div class="form-item2" :style="{ height: dynamicHeight + 'vh' }">
16 <div style="margin-left: 1vw"> 16 <div style="margin-left: 1vw">
17 <h3 style="color: gray">Querying frequency,ms*</h3> 17 <h3 style="color: gray">Querying frequency,ms*</h3>
18 - <InputNumber v-model:value="inputNmberValue" :min="1" :max="50000" />  
19 - <MappingsForm :value="mappings" @change="handleMappingsChange" /> 18 + <InputNumber
  19 + v-if="selectValue == 'TELEMETRY_QUERYING' || selectValue == 'CLIENT_ATTRIBUTES_QUERYING'"
  20 + v-model:value="inputNmberValue"
  21 + :min="1"
  22 + :max="50000"
  23 + />
  24 + <MappingsForm
  25 + :value="mappings"
  26 + @change="handleMappingsChange"
  27 + @dynamicAddHeight="handleDynamicAddHeight"
  28 + @dynamicReduceHeight="handleDynamicReduceHeight"
  29 + />
20 </div> 30 </div>
21 </div> 31 </div>
22 - <div class="form-item3">  
23 - <div style="text-align: center; line-height: 20vh">  
24 - <Button size="small" type="default" @click="handleRemove(item)"> 32 + <div class="form-item3" :style="{ height: dynamicHeight + 'vh' }">
  33 + <div
  34 + style="text-align: center; line-height: 20vh"
  35 + :style="{ lineHeight: dynamicHeight + 'vh' }"
  36 + >
  37 + <Button size="small" type="default" @click="handleRemove(item, index)">
25 <template #icon> 38 <template #icon>
26 <MinusCircleOutlined /> 39 <MinusCircleOutlined />
27 </template> 40 </template>
@@ -32,15 +45,10 @@ @@ -32,15 +45,10 @@
32 </template> 45 </template>
33 <script setup lang="ts"> 46 <script setup lang="ts">
34 import { ref } from 'vue'; 47 import { ref } from 'vue';
35 - import { SelectTypes } from 'ant-design-vue/es/select';  
36 import { Select, Button, InputNumber } from 'ant-design-vue'; 48 import { Select, Button, InputNumber } from 'ant-design-vue';
37 import { MinusCircleOutlined } from '@ant-design/icons-vue'; 49 import { MinusCircleOutlined } from '@ant-design/icons-vue';
38 import MappingsForm from './MappingsForm.vue'; 50 import MappingsForm from './MappingsForm.vue';
39 - // interface Params {  
40 - // dataType: string;  
41 - // key: string;  
42 - // oid: string;  
43 - // } 51 +
44 defineProps({ 52 defineProps({
45 item: { 53 item: {
46 type: Object, 54 type: Object,
@@ -50,48 +58,68 @@ @@ -50,48 +58,68 @@
50 type: Array, 58 type: Array,
51 default: () => [], 59 default: () => [],
52 }, 60 },
  61 + index: {
  62 + type: Number,
  63 + },
  64 + spec: {
  65 + type: String,
  66 + default: '',
  67 + },
53 }); 68 });
54 - const emit = defineEmits(['removeItem']); 69 + const emit = defineEmits(['removeItem', 'selectItem']);
55 const selectValue = ref('CLIENT_ATTRIBUTES_QUERYING'); 70 const selectValue = ref('CLIENT_ATTRIBUTES_QUERYING');
56 const inputNmberValue = ref(5000); 71 const inputNmberValue = ref(5000);
57 - // const isHasItem = [  
58 - // 'TELEMETRY_QUERYING',  
59 - // 'CLIENT_ATTRIBUTES_QUERYING',  
60 - // 'SHARED_ATTRIBUTES_SETTING',  
61 - // 'TO_DEVICE_RPC_REQUEST',  
62 - // ];  
63 - const selectOptions = ref<SelectTypes['options']>([ 72 + const dynamicHeight = ref(20);
  73 + const selectOptions: any = ref([
64 { 74 {
65 label: 'Telemetry', 75 label: 'Telemetry',
66 value: 'TELEMETRY_QUERYING', 76 value: 'TELEMETRY_QUERYING',
  77 + disabled: false,
67 }, 78 },
68 { 79 {
69 label: 'Client attributes', 80 label: 'Client attributes',
70 value: 'CLIENT_ATTRIBUTES_QUERYING', 81 value: 'CLIENT_ATTRIBUTES_QUERYING',
  82 + disabled: false,
71 }, 83 },
72 { 84 {
73 label: 'Shared attributes', 85 label: 'Shared attributes',
74 value: 'SHARED_ATTRIBUTES_SETTING', 86 value: 'SHARED_ATTRIBUTES_SETTING',
  87 + disabled: false,
75 }, 88 },
76 { 89 {
77 label: 'RPC request', 90 label: 'RPC request',
78 value: 'TO_DEVICE_RPC_REQUEST', 91 value: 'TO_DEVICE_RPC_REQUEST',
  92 + disabled: false,
79 }, 93 },
80 ]); 94 ]);
81 - const focus = () => {  
82 - console.log('focus');  
83 - };  
84 -  
85 const handleChange = (value: string) => { 95 const handleChange = (value: string) => {
86 selectValue.value = value; 96 selectValue.value = value;
  97 + // selectOptions.value.forEach((f) => {
  98 + // if (f.value == selectValue.value) {
  99 + // f.disabled = false;
  100 + // } else {
  101 + // f.disabled = true;
  102 + // }
  103 + // });
  104 + emit('selectItem', selectValue.value);
87 }; 105 };
88 const mapping: any = ref([]); 106 const mapping: any = ref([]);
89 const handleMappingsChange = (e) => { 107 const handleMappingsChange = (e) => {
90 mapping.value = e; 108 mapping.value = e;
91 }; 109 };
  110 + const handleDynamicAddHeight = (e) => {
  111 + if (e) {
  112 + dynamicHeight.value += 4;
  113 + }
  114 + };
  115 + const handleDynamicReduceHeight = (e) => {
  116 + if (!e) {
  117 + dynamicHeight.value -= 4;
  118 + }
  119 + };
92 120
93 - const handleRemove = (item) => {  
94 - emit('removeItem', item); 121 + const handleRemove = (item, index) => {
  122 + emit('removeItem', item, index);
95 }; 123 };
96 //设置回显表单值 124 //设置回显表单值
97 const setFieldsValueFunc = (item, inputValue) => { 125 const setFieldsValueFunc = (item, inputValue) => {
@@ -111,6 +139,9 @@ @@ -111,6 +139,9 @@
111 defineExpose({ 139 defineExpose({
112 getSnmpFormFunc, 140 getSnmpFormFunc,
113 setFieldsValueFunc, 141 setFieldsValueFunc,
  142 + handleMappingsChange,
  143 + selectValue,
  144 + handleChange,
114 }); 145 });
115 </script> 146 </script>
116 <style lang="less" scoped> 147 <style lang="less" scoped>
@@ -12,18 +12,24 @@ @@ -12,18 +12,24 @@
12 <BasicForm :showResetButton="false" :showSubmitButton="false" @register="register"> 12 <BasicForm :showResetButton="false" :showSubmitButton="false" @register="register">
13 <template #add> 13 <template #add>
14 <div> 14 <div>
15 - <template v-for="(item, index) in dynamicSNMP.communicationConfigs" :key="index"> 15 + <template v-for="(item, index) in dynamicSNMP.communicationConfigs" :key="item">
16 <span style="display: none">{{ item }}</span> 16 <span style="display: none">{{ item }}</span>
17 <span style="display: none">{{ index }}</span> 17 <span style="display: none">{{ index }}</span>
18 <!-- snmp表单项 --> 18 <!-- snmp表单项 -->
19 <SnmpForm 19 <SnmpForm
  20 + :spec="item.spec"
  21 + :index="index"
20 :item="item" 22 :item="item"
21 :ref="dynamicBindRef.SnmpFormItemRef" 23 :ref="dynamicBindRef.SnmpFormItemRef"
22 :mappings="item.mappings" 24 :mappings="item.mappings"
23 @removeItem="handleRemoveItem" 25 @removeItem="handleRemoveItem"
  26 + @selectItem="handleSelectItem"
24 /> 27 />
25 </template> 28 </template>
26 - <div style="margin-left: 0vw; margin-top: 2vh"> 29 + <div
  30 + v-if="dynamicSNMP.communicationConfigs.length < 4"
  31 + style="margin-left: 0vw; margin-top: 2vh"
  32 + >
27 <Button size="small" type="default" @click="handleAdd"> 33 <Button size="small" type="default" @click="handleAdd">
28 <template #icon> 34 <template #icon>
29 <PlusCircleOutlined /> 35 <PlusCircleOutlined />
@@ -55,7 +61,7 @@ @@ -55,7 +61,7 @@
55 queryingFrequencyMs: number; 61 queryingFrequencyMs: number;
56 mappings: mappingsI[]; 62 mappings: mappingsI[];
57 } 63 }
58 - const dynamicBindRef = { 64 + const dynamicBindRef: any = {
59 SnmpFormItemRef: ref([]), 65 SnmpFormItemRef: ref([]),
60 }; 66 };
61 const dynamicSNMP: UnwrapRef<{ communicationConfigs: Params[] }> = reactive({ 67 const dynamicSNMP: UnwrapRef<{ communicationConfigs: Params[] }> = reactive({
@@ -80,24 +86,40 @@ @@ -80,24 +86,40 @@
80 span: 14, 86 span: 14,
81 }, 87 },
82 }); 88 });
  89 + // const selectArray = [
  90 + // 'TELEMETRY_QUERYING',
  91 + // 'CLIENT_ATTRIBUTES_QUERYING',
  92 + // 'SHARED_ATTRIBUTES_SETTING',
  93 + // 'TO_DEVICE_RPC_REQUEST',
  94 + // ];
  95 + // const selectIndex: any = ref('');
  96 + const handleSelectItem = (e) => {
  97 + console.log('e', e);
  98 + // selectIndex.value = e || 'CLIENT_ATTRIBUTES_QUERYING';
  99 + // selectIndex.value = selectArray.filter((f) => f !== e);
  100 + // console.log('e1', selectIndex.value);
  101 + };
83 const handleAdd = () => { 102 const handleAdd = () => {
84 dynamicSNMP.communicationConfigs.push({ 103 dynamicSNMP.communicationConfigs.push({
85 spec: '', 104 spec: '',
86 mappings: [ 105 mappings: [
87 { 106 {
88 - dataType: '', 107 + dataType: 'STRING',
89 key: '', 108 key: '',
90 oid: '', 109 oid: '',
91 }, 110 },
92 ], 111 ],
93 queryingFrequencyMs: 0, 112 queryingFrequencyMs: 0,
94 }); 113 });
  114 + // console.log('总数组', dynamicSNMP.communicationConfigs);
  115 + // dynamicSNMP.communicationConfigs.forEach((snmp, index) => {
  116 + // nextTick(() => {
  117 + // unref(dynamicBindRef.SnmpFormItemRef)[index]?.handleChange(snmp?.spec);
  118 + // });
  119 + // });
95 }; 120 };
96 - const handleRemoveItem = (item) => {  
97 - let index = dynamicSNMP.communicationConfigs.indexOf(item);  
98 - if (index !== -1) {  
99 - dynamicSNMP.communicationConfigs.splice(index, 1);  
100 - } 121 + const handleRemoveItem = (_, index) => {
  122 + dynamicSNMP.communicationConfigs.splice(index, 1);
101 }; 123 };
102 //回显表单值 124 //回显表单值
103 const setStepFieldsValueFunc = (v) => { 125 const setStepFieldsValueFunc = (v) => {
@@ -112,6 +134,7 @@ @@ -112,6 +134,7 @@
112 snmp?.spec, 134 snmp?.spec,
113 snmp?.queryingFrequencyMs 135 snmp?.queryingFrequencyMs
114 ); 136 );
  137 + unref(dynamicBindRef.SnmpFormItemRef)[index]?.handleMappingsChange(snmp?.mappings);
115 }); 138 });
116 }); 139 });
117 }; 140 };
@@ -78,11 +78,10 @@ export const step2Schemas: FormSchema[] = [ @@ -78,11 +78,10 @@ export const step2Schemas: FormSchema[] = [
78 { label: 'MQTT', value: 'MQTT' }, 78 { label: 'MQTT', value: 'MQTT' },
79 { label: 'CoAP', value: 'COAP' }, 79 { label: 'CoAP', value: 'COAP' },
80 { label: 'LWM2M', value: 'LWM2M' }, 80 { label: 'LWM2M', value: 'LWM2M' },
81 - // { label: 'SNMP', value: 'SNMP' }, 81 + { label: 'SNMP', value: 'SNMP' },
82 ], 82 ],
83 - onChange(e) {},  
84 }; 83 };
85 }, 84 },
86 - colProps: { span: 11 }, 85 + colProps: { span: 10 },
87 }, 86 },
88 ]; 87 ];