feat:网元信息更新响应修复

src/views/ne/neInfo/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { reactive, onMounted, onBeforeUnmount,toRaw, defineAsyncComponent, ref, computed } from 'vue';
+import { reactive, onMounted, onBeforeUnmount,toRaw, defineAsyncComponent, ref, computed, nextTick } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
 import { message, Modal, Table } from 'ant-design-vue/es';
 import { SizeType } from 'ant-design-vue/es/config-provider';
@@ -8,7 +8,7 @@ import { ColumnsType } from 'ant-design-vue/es/table';
 import useI18n from '@/hooks/useI18n';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import useNeInfoStore from '@/store/modules/neinfo';
-import { listNeInfo, delNeInfo } from '@/api/ne/neInfo';
+import { listNeInfo, delNeInfo,stateNeInfo } from '@/api/ne/neInfo';
 import { NE_TYPE_LIST } from '@/constants/ne-constants';
 import useDictStore from '@/store/modules/dict';
 import useNeOptions from './hooks/useNeOptions';
@@ -253,17 +253,21 @@ function fnModalEditOk(from: Record<string, any>) {
     fnGetList();
     return;
   }
-  // 编辑时局部更新信息
-  // stateNeInfo(from.neType, from.neId)
-  //   .then(res => {
+
+  // 编辑时的局部更新流程：
+  // 1. 直接将表单数据更新到表格中
+  // 2. 单独获取状态信息并更新
+
   // 在树状表格结构中找到编辑更新的网元
   let foundItem = null;
+  let foundItemParent = null;
 
   for (const item of tableState.data) {
     if (item.children && item.children.length > 0) {
       const child = item.children.find((c: any) => c.id === from.id);
       if (child) {
         foundItem = child;
+        foundItemParent = item;
         break;
       }
     } else if (item.id === from.id) {
@@ -272,23 +276,312 @@ function fnModalEditOk(from: Record<string, any>) {
     }
   }
 
-  // if (foundItem && res.code === RESULT_CODE_SUCCESS) {
-  //   // 检查网元类型是否发生变化
-  //   const oldNeType = foundItem.neType;
-  //   const newNeType = from.neType;
+  if (foundItem) {
     // 检查网元类型是否发生变化
-  const oldNeType = foundItem?.neType;
+    const oldNeType = foundItem.neType;
     const newNeType = from.neType;
 
-  // 如果网元类型发生变化，需要重新组织数据结构
     if (oldNeType !== newNeType) {
-    fnGetList(); // 重新获取数据以重新组织表格结构
+      // 网元类型发生变化，需要重新组织数据结构，使用全量刷新
+      fnGetList();
     } else {
-    // 网元类型没有变化，也需要重新获取数据以确保数据同步
-    // 使用静默模式重新获取数据，避免loading效果
+      // 网元类型没有变化，先更新表单数据，再获取状态信息
+      updateFormDataToTable(foundItem, foundItemParent, from);
+
+      // 单独获取状态信息并更新
+      updateStatusFromApi(foundItem, foundItemParent, from.neType, from.neId);
+    }
+  } else {
+    // 如果找不到对应项目，使用全量刷新作为兜底
     fnGetList(undefined, true);
   }
+}
 
+/**
+ * 将表单数据更新到表格中
+ * @param foundItem 找到的网元项目
+ * @param foundItemParent 父级项目（如果是子项）
+ * @param formData 表单数据
+ */
+function updateFormDataToTable(foundItem: any, foundItemParent: any, formData: any) {
+  console.log('更新表单数据到表格:', { foundItem, foundItemParent, formData });
+
+  if (!foundItem) {
+    console.error('未找到要更新的项目');
+    return;
+  }
+
+  // 直接更新表单字段到表格数据
+  const updateFields = [
+    'neType', 'neId', 'rmUid', 'neName', 'ip', 'port',
+    'neAddress', 'dn', 'vendorName', 'province', 'remark'
+  ];
+
+  updateFields.forEach(field => {
+    if (formData[field] !== undefined) {
+      if (foundItemParent) {
+        // 如果是子项，需要更新父级引用
+        const childIndex = foundItemParent.children.findIndex((child: any) => child.id === foundItem.id);
+        if (childIndex !== -1) {
+          foundItemParent.children[childIndex] = {
+            ...foundItemParent.children[childIndex],
+            [field]: formData[field]
+          };
+        }
+      } else {
+        // 如果是单行，直接更新
+        foundItem[field] = formData[field];
+      }
+    }
+  });
+
+  console.log('表单数据更新完成');
+}
+
+/**
+ * 从API获取状态信息并更新
+ * @param foundItem 找到的网元项目
+ * @param foundItemParent 父级项目（如果是子项）
+ * @param neType 网元类型
+ * @param neId 网元ID
+ */
+function updateStatusFromApi(foundItem: any, foundItemParent: any, neType: string, neId: string) {
+  console.log('从API获取状态信息:', { neType, neId });
+
+  stateNeInfo(neType, neId)
+    .then(res => {
+      if (res.code === RESULT_CODE_SUCCESS) {
+        console.log('状态API返回:', res.data);
+
+        // 智能状态映射：根据字典数据动态确定状态值
+        const getStatusValue = (onlineValue: boolean): string => {
+          if (!dict.neInfoStatus || dict.neInfoStatus.length === 0) {
+            // 如果字典数据未加载，使用默认值
+            return onlineValue ? '1' : '0';
+          }
+
+          // 查找字典中的在线和离线状态
+          const onlineStatus = dict.neInfoStatus.find(item =>
+            item.label?.toLowerCase().includes('online') ||
+            item.label?.toLowerCase().includes('在线') ||
+            item.label?.toLowerCase().includes('正常')
+          );
+
+          const offlineStatus = dict.neInfoStatus.find(item =>
+            item.label?.toLowerCase().includes('offline') ||
+            item.label?.toLowerCase().includes('离线') ||
+            item.label?.toLowerCase().includes('异常')
+          );
+
+          if (onlineValue) {
+            return onlineStatus?.value || '1';
+          } else {
+            return offlineStatus?.value || '0';
+          }
+        };
+
+        // 更新状态字段
+        const newStatusValue = getStatusValue(res.data.online);
+
+        if (foundItemParent) {
+          // 如果是子项，需要更新父级引用
+          const childIndex = foundItemParent.children.findIndex((child: any) => child.id === foundItem.id);
+          if (childIndex !== -1) {
+            foundItemParent.children[childIndex] = {
+              ...foundItemParent.children[childIndex],
+              status: newStatusValue
+            };
+          }
+        } else {
+          // 如果是单行，直接更新
+          foundItem.status = newStatusValue;
+        }
+
+        console.log('状态更新完成:', {
+          original: res.data.online,
+          mapped: newStatusValue,
+          dictData: dict.neInfoStatus
+        });
+
+        // 强制触发Vue响应式更新
+        nextTick(() => {
+          const newData = [...tableState.data];
+          tableState.data = newData;
+        });
+
+        // 刷新缓存的网元信息
+        useNeInfoStore().fnRefreshNelist();
+
+      } else {
+        console.error('获取状态信息失败:', res.msg);
+      }
+    })
+    .catch(error => {
+      console.error('获取状态信息失败:', error);
+    });
+}
+
+/**
+ * 更新单个网元信息
+ * @param foundItem 找到的网元项目
+ * @param foundItemParent 父级项目（如果是子项）
+ * @param newData 新的网元数据
+ */
+function updateSingleNeInfo(foundItem: any, foundItemParent: any, newData: any) {
+  console.log('更新单个网元信息:', { foundItem, foundItemParent, newData });
+
+  if (!foundItem) {
+    console.error('未找到要更新的项目');
+    return;
+  }
+
+  // 调试：查看原本的状态值
+  console.log('原本的状态值:', foundItem.status);
+  console.log('字典数据:', dict.neInfoStatus);
+
+  // 字段映射：将接口返回的字段映射到表格使用的字段
+  const fieldMapping: Record<string, string> = {
+    'neIP': 'ip',           // neIP -> ip
+    'online': 'status',     // online -> status
+    'neId': 'neId',
+    'neName': 'neName',
+    'neType': 'neType'
+  };
+
+  // 智能状态映射：根据字典数据动态确定状态值
+  const getStatusValue = (onlineValue: boolean): string => {
+    if (!dict.neInfoStatus || dict.neInfoStatus.length === 0) {
+      // 如果字典数据未加载，使用默认值
+      return onlineValue ? '1' : '0';
+    }
+
+    // 查找字典中的在线和离线状态
+    const onlineStatus = dict.neInfoStatus.find(item =>
+      item.label?.toLowerCase().includes('online') ||
+      item.label?.toLowerCase().includes('在线') ||
+      item.label?.toLowerCase().includes('正常')
+    );
+
+    const offlineStatus = dict.neInfoStatus.find(item =>
+      item.label?.toLowerCase().includes('offline') ||
+      item.label?.toLowerCase().includes('离线') ||
+      item.label?.toLowerCase().includes('异常')
+    );
+
+    if (onlineValue) {
+      return onlineStatus?.value || '1';
+    } else {
+      return offlineStatus?.value || '0';
+    }
+  };
+
+  // 更新字段 - 使用Vue.set确保响应式更新
+  Object.keys(fieldMapping).forEach(apiField => {
+    const tableField = fieldMapping[apiField];
+    if (newData[apiField] !== undefined) {
+      if (apiField === 'online') {
+        // 特殊处理状态字段，使用智能映射
+        const newStatusValue = getStatusValue(newData[apiField]);
+
+        // 使用Vue的响应式更新方式
+        if (foundItemParent) {
+          // 如果是子项，需要更新父级引用
+          const childIndex = foundItemParent.children.findIndex((child: any) => child.id === foundItem.id);
+          if (childIndex !== -1) {
+            foundItemParent.children[childIndex] = {
+              ...foundItemParent.children[childIndex],
+              [tableField]: newStatusValue
+            };
+          }
+        } else {
+          // 如果是单行，直接更新
+          foundItem[tableField] = newStatusValue;
+        }
+
+        console.log('状态映射:', {
+          original: newData[apiField],
+          mapped: newStatusValue,
+          dictData: dict.neInfoStatus
+        });
+      } else {
+        // 其他字段的更新
+        if (foundItemParent) {
+          const childIndex = foundItemParent.children.findIndex((child: any) => child.id === foundItem.id);
+          if (childIndex !== -1) {
+            foundItemParent.children[childIndex] = {
+              ...foundItemParent.children[childIndex],
+              [tableField]: newData[apiField]
+            };
+          }
+        } else {
+          foundItem[tableField] = newData[apiField];
+        }
+      }
+    }
+  });
+
+  // 更新其他可能存在的字段（保持原有值）
+  const preserveFields = ['rmUid', 'port', 'serverState'];
+  preserveFields.forEach(field => {
+    if (foundItem[field] !== undefined && newData[field] === undefined) {
+      // 保持原有值
+    } else if (newData[field] !== undefined) {
+      foundItem[field] = newData[field];
+    }
+  });
+
+  console.log('字段映射完成:', {
+    original: newData,
+    mapped: {
+      ip: foundItem.ip,
+      status: foundItem.status,
+      neId: foundItem.neId,
+      neName: foundItem.neName,
+      neType: foundItem.neType
+    }
+  });
+
+  // 如果是子项，处理分组逻辑
+  if (foundItemParent) {
+    console.log('处理分组更新:', foundItemParent);
+
+    const children = foundItemParent.children;
+    if (children && children.length > 1) {
+      // 按 neId 重新排序
+      children.sort((a: any, b: any) => a.neId.localeCompare(b.neId));
+
+      // 更新分组行的ID
+      const sortedIds = children.map((child: any) => child.id).join('_');
+      foundItemParent.id = `group_${foundItemParent.neType}_${sortedIds}`;
+
+      console.log('分组排序完成:', { sortedIds, newGroupId: foundItemParent.id });
+    }
+  }
+
+  // 强制触发Vue响应式更新，确保显示效果一致
+  // 使用Vue的响应式系统确保DictTag组件正确更新
+
+  // 方法1: 使用Vue的响应式更新机制
+  nextTick(() => {
+    // 创建一个新的对象引用来触发响应式更新
+    const updatedItem = { ...foundItem };
+    Object.assign(foundItem, updatedItem);
+
+    // 方法2: 如果foundItem在children中，也需要更新父级引用
+    if (foundItemParent) {
+      const updatedParent = { ...foundItemParent };
+      Object.assign(foundItemParent, updatedParent);
+    }
+
+    // 方法3: 强制更新整个表格数据数组
+    const newData = [...tableState.data];
+    tableState.data = newData;
+  });
+
+  // 刷新缓存的网元信息
+  useNeInfoStore().fnRefreshNelist();
+
+  console.log('网元信息更新完成');
 }
 
 /**
@@ -989,3 +1282,4 @@ onBeforeUnmount(() => {
   }
 }
 </style>
+··········