perf(views): 优化“选择网关参数”步骤分组编辑异常问题

src/types/index.ts

@@ -857,6 +857,7 @@ export interface ParameterVerificationList {
 export interface GroupingList {
   groupName: string;
   serialNum?: number;
+  id: number;
 }
 
 export interface GroupingListData {
@@ -1525,6 +1526,7 @@ export interface DeviceGroupListQuery {
   userId?: number;
   orgId?: number;
   parentId: number;
+  haveChild?: boolean;
 }
 
 export interface MonitoringForm {

src/views/create-device/GatewayParameters.vue

@@ -423,8 +423,17 @@ const handleOk = () => {
   );
   const dataList = [...monitorAssociationGatewayList.value, ...controlAssociationGatewayList.value];
 
-  groupingList.value = Array.from(new Set(dataList.map((item) => item.groupName))).map((groupName) => ({ groupName }));
-
+  groupingList.value = Array.from(new Set(dataList.map((item) => item.groupName))).map((groupName, index) => ({
+    groupName,
+    id: index,
+  }));
+  dataList.forEach((item) => {
+    groupingList.value.forEach((i) => {
+      if (item.groupName === i.groupName) {
+        item.groupId = i.id;
+      }
+    });
+  });
   open.value = false;
 };
 
@@ -513,15 +522,18 @@ const addCustomizationData = () => {
 
 const customizationChange = (value: SelectValue, option: DefaultOptionType, index: number) => {
   customizationData.value[index].groupSerialNum = option.serialNum;
+  customizationData.value[index].paramGroupName = option.groupName;
   customizationData.value[index].paramGroupIdShow = false;
 };
 
 const selectGrouping = (value: SelectValue, option: DefaultOptionType, index: number) => {
   if (agreementListKey.value === 'monitoring') {
     monitorAssociationGatewayList.value[index].groupSerialNum = option.serialNum;
+    monitorAssociationGatewayList.value[index].groupName = option.groupName;
     monitorAssociationGatewayList.value[index].groupIdShow = false;
   } else {
     controlAssociationGatewayList.value[index].groupSerialNum = option.serialNum;
+    controlAssociationGatewayList.value[index].groupName = option.groupName;
     controlAssociationGatewayList.value[index].groupIdShow = false;
   }
 };
@@ -837,14 +849,14 @@ const groupSettings = () => {
 const addGroupingList = () => {
   groupingDisplayList.value.push({
     groupName: '',
-    serialNum: undefined,
+    id: groupingDisplayList.value.length,
   });
 };
 
-const deleteGroupingList = (index: number, name: string) => {
+const deleteGroupingList = (index: number, id: number) => {
   const dataList = [...monitorAssociationGatewayList.value, ...controlAssociationGatewayList.value];
 
-  if (dataList.some((item) => item.groupName == name)) {
+  if (dataList.some((item) => item.groupId == id)) {
     return message.warning(t('createDevice.cannotBeDeletedGroupNumber'));
   }
   groupingDisplayList.value.splice(index, 1);
@@ -858,6 +870,24 @@ const handleOk1 = () => {
     return message.warning(t('createDevice.groupNameRepeat'));
   }
   groupingList.value = groupingDisplayList.value;
+  const dataList = [...monitorAssociationGatewayList.value, ...controlAssociationGatewayList.value];
+
+  dataList.forEach((item) => {
+    groupingList.value.forEach((i) => {
+      if (item.groupId === i.id) {
+        item.groupName = i.groupName;
+      }
+    });
+  });
+
+  customizationData.value.forEach((item) => {
+    groupingList.value.forEach((i) => {
+      if (item.paramGroupId === i.id) {
+        item.paramGroupName = i.groupName;
+      }
+    });
+  });
+
   open1.value = false;
 };
 
@@ -963,6 +993,13 @@ onMounted(() => {
   handleRequest(async () => {
     serialNumberItem.value = await getAllGatewayList();
     const { gatewayInfoVos, protocolParamDeviceInfoVos, protocolParamCustomDevVos } = await equipmentDetails(deviceId);
+    const dataList = [...protocolParamDeviceInfoVos, ...protocolParamCustomDevVos];
+
+    groupingList.value = Array.from(new Set(dataList.map((item) => item.groupName))).map((groupName, index) => ({
+      groupName,
+      id: index,
+    }));
+
     if (gatewayInfoVos.length) {
       gatewayInfoVos.forEach((item) => {
         const { snCode, modelName, id, linkName, linkId, gatewayLinkProtocolId } = item;
@@ -989,9 +1026,6 @@ onMounted(() => {
     }
 
     if (protocolParamDeviceInfoVos.length) {
-      groupingList.value = Array.from(new Set(protocolParamDeviceInfoVos.map((item) => item.groupName))).map(
-        (groupName) => ({ groupName }),
-      );
       protocolParamDeviceInfoVos.forEach((item) => {
         const {
           deviceParamCode,
@@ -1045,6 +1079,16 @@ onMounted(() => {
           });
         }
       });
+
+      const dataList = [...monitorAssociationGatewayList.value, ...controlAssociationGatewayList.value];
+
+      dataList.forEach((item) => {
+        groupingList.value.forEach((i) => {
+          if (item.groupName === i.groupName) {
+            item.groupId = i.id;
+          }
+        });
+      });
     }
 
     if (protocolParamCustomDevVos.length) {
@@ -1070,6 +1114,14 @@ onMounted(() => {
           paramGroupName: groupName,
         });
       });
+
+      customizationData.value.forEach((item) => {
+        groupingList.value.forEach((i) => {
+          if (item.paramGroupName === i.groupName) {
+            item.paramGroupId = i.id;
+          }
+        });
+      });
     }
   });
 });
@@ -1168,12 +1220,12 @@ onMounted(() => {
               <template v-else-if="column.key === 'groupId'">
                 <ASelect
                   class="select-width"
-                  v-model:value="record.groupName"
+                  v-model:value="record.groupId"
                   @click="record.groupIdShow = true"
                   @blur="record.groupIdShow = false"
                   :show-arrow="record.groupIdShow ? true : false"
                   :options="groupingList"
-                  :field-names="{ label: 'groupName', value: 'groupName' }"
+                  :field-names="{ label: 'groupName', value: 'id' }"
                   @change="(value, option) => selectGrouping(value, option, index)"
                 />
               </template>
@@ -1219,12 +1271,12 @@ onMounted(() => {
               <template v-else-if="column.key === 'groupId'">
                 <ASelect
                   class="select-width"
-                  v-model:value="record.groupName"
+                  v-model:value="record.groupId"
                   @click="record.groupIdShow = true"
                   @blur="record.groupIdShow = false"
                   :show-arrow="record.groupIdShow ? true : false"
                   :options="groupingList"
-                  :field-names="{ label: 'groupName', value: 'groupName' }"
+                  :field-names="{ label: 'groupName', value: 'id' }"
                   @change="(value, option) => selectGrouping(value, option, index)"
                 />
               </template>
@@ -1314,9 +1366,9 @@ onMounted(() => {
           <template v-else-if="column.key === 'paramGroupId'">
             <ASelect
               class="select-width"
-              v-model:value="record.paramGroupName"
+              v-model:value="record.paramGroupId"
               :options="groupingList"
-              :field-names="{ label: 'groupName', value: 'groupName' }"
+              :field-names="{ label: 'groupName', value: 'id' }"
               @click="record.paramGroupIdShow = true"
               @blur="record.paramGroupIdShow = false"
               :show-arrow="record.paramGroupIdShow"
@@ -1529,7 +1581,7 @@ onMounted(() => {
             <AInput v-model:value="record.groupName" />
           </template>
           <template v-else-if="column.key === 'action'">
-            <SvgIcon @click="deleteGroupingList(index, record.groupName)" class="grouping-delete-svg" name="delete" />
+            <SvgIcon @click="deleteGroupingList(index, record.id)" class="grouping-delete-svg" name="delete" />
           </template>
         </template>
       </ATable>