feat:表格改为嵌套显示

src/views/ne/neInfo/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { reactive, onMounted, toRaw, defineAsyncComponent, ref, computed } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { message, Modal } from 'ant-design-vue/es';
+import { message, Modal, Table } from 'ant-design-vue/es';
 import { SizeType } from 'ant-design-vue/es/config-provider';
 import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
 import { ColumnsType } from 'ant-design-vue/es/table';
@@ -93,14 +93,31 @@ let tableState: TabeStateType = reactive({
   selectedRowKeys: [],
 });
 
-/**表格字段列 */
+/**父表格列配置（网元类型分组） */
-let tableColumns: ColumnsType = [
+let parentTableColumns: ColumnsType = [
+  Table.EXPAND_COLUMN,
   {
     title: t('views.ne.common.neType'),
     dataIndex: 'neType',
     align: 'left',
-    width: 100,
+    width: 700,
   },
+  // {
+  //   title: t('views.ne.neInfo.neCount'),
+  //   dataIndex: 'neName',
+  //   align: 'left',
+  //   width: 150,
+  // },
+  // {
+  //   title: t('views.ne.neInfo.summary'),
+  //   key: 'summary',
+  //   align: 'left',
+  // },
+];
+
+/**子表格列配置（具体网元） */
+let childTableColumns: ColumnsType = [
+  Table.EXPAND_COLUMN,
   {
     title: t('views.ne.common.neId'),
     dataIndex: 'neId',
@@ -180,7 +197,9 @@ function fnTableSize({ key }: MenuInfo) {
 
 /**表格多选 */
 function fnTableSelectedRowKeys(keys: (string | number)[]) {
-  tableState.selectedRowKeys = keys;
+  // 过滤掉父节点的key，只保留子节点的key
+  const childKeys = keys.filter(key => !String(key).startsWith('parent_'));
+  tableState.selectedRowKeys = childKeys;
 }
 
 /**对话框对象信息状态类型 */
@@ -237,26 +256,50 @@ function fnModalEditOk(from: Record<string, any>) {
   // 编辑时局部更新信息
   stateNeInfo(from.neType, from.neId)
     .then(res => {
-      // 找到编辑更新的网元
+      // 在树状结构中找到编辑更新的网元
-      const item = tableState.data.find(s => s.id === from.id);
+      let foundItem = null;
-      if (item && res.code === RESULT_CODE_SUCCESS) {
+      let parentItem = null;
-        item.neType = from.neType;
+
-        item.neId = from.neId;
+      for (const parent of tableState.data) {
-        item.rmUid = from.rmUid;
+        if (parent.childrenData && Array.isArray(parent.childrenData)) {
-        item.neName = from.neName;
+          const child = parent.childrenData.find(c => c.id === from.id);
-        item.ip = from.ip;
+          if (child) {
-        item.port = from.port;
+            foundItem = child;
+            parentItem = parent;
+            break;
+          }
+        }
+      }
+
+      if (foundItem && res.code === RESULT_CODE_SUCCESS) {
+        // 检查网元类型是否发生变化
+        const oldNeType = foundItem.neType;
+        const newNeType = from.neType;
+
+        // 更新网元信息
+        foundItem.neType = from.neType;
+        foundItem.neId = from.neId;
+        foundItem.rmUid = from.rmUid;
+        foundItem.neName = from.neName;
+        foundItem.ip = from.ip;
+        foundItem.port = from.port;
+
         if (res.data.online) {
-          item.status = '1';
+          foundItem.status = '1';
           if (res.data.standby) {
-            item.status = '3';
+            foundItem.status = '3';
           }
         } else {
-          item.status = '0';
+          foundItem.status = '0';
+        }
+        Object.assign(foundItem.serverState, res.data);
+        const resouresUsage = parseResouresUsage(foundItem.serverState);
+        Reflect.set(foundItem, 'resoures', resouresUsage);
+
+        // 如果网元类型发生变化，需要重新组织数据结构
+        if (oldNeType !== newNeType) {
+          fnGetList(); // 重新获取数据以重新组织树状结构
         }
-        Object.assign(item.serverState, res.data);
-        const resouresUsage = parseResouresUsage(item.serverState);
-        Reflect.set(item, 'resoures', resouresUsage);
       }
     })
     .finally(() => {
@@ -297,14 +340,37 @@ function fnRecordDelete(id: string) {
         .then(res => {
           if (res.code === RESULT_CODE_SUCCESS) {
             message.success(t('common.operateOk'), 3);
-            // 过滤掉删除的id
+            // 树状结构中过滤掉删除的id
-            tableState.data = tableState.data.filter(item => {
+            const deletedIds = id.indexOf(',') > -1 ? id.split(',') : [id];
-              if (id.indexOf(',') > -1) {
+
-                return !tableState.selectedRowKeys.includes(item.id);
+            tableState.data = tableState.data.map(parentItem => {
-              } else {
+              if (parentItem.childrenData && Array.isArray(parentItem.childrenData)) {
-                return item.id !== id;
+                // 过滤子节点
+                const filteredChildren = parentItem.childrenData.filter(child =>
+                  !deletedIds.includes(child.id)
+                );
+
+                // 如果该分组下没有子节点了，移除整个父节点
+                if (filteredChildren.length === 0) {
+                  return null;
                 }
-            });
+
+                // 更新子节点数量显示和汇总信息
+                const onlineCount = filteredChildren.filter(item => item.status === '1' || item.status === '3').length;
+                const offlineCount = filteredChildren.length - onlineCount;
+
+                return {
+                  ...parentItem,
+                  neName: `${filteredChildren.length} 个网元`,
+                  summary: `在线 ${onlineCount} | 离线 ${offlineCount}`,
+                  childrenData: filteredChildren
+                };
+              }
+              return parentItem;
+            }).filter(item => item !== null);
+
+            // 清空选择
+            tableState.selectedRowKeys = [];
             // 刷新缓存
             useNeInfoStore().fnRefreshNelist();
           } else {
@@ -364,6 +430,50 @@ function fnRecordMore(type: string | number, row: Record<string, any>) {
   }
 }
 
+/**将扁平数据转换为分组结构 */
+function transformToNestedTableData(flatData: Record<string, any>[]) {
+  // 按 neType 分组
+  const groupedData = flatData.reduce((groups, item) => {
+    const neType = item.neType;
+    if (!groups[neType]) {
+      groups[neType] = [];
+    }
+    groups[neType].push(item);
+    return groups;
+  }, {} as Record<string, any[]>);
+
+  // 转换为父表格数据结构（只包含父节点）
+  const parentTableData = Object.entries(groupedData).map(([neType, items]) => {
+    // 按 neId 排序子节点
+    const sortedItems = items.sort((a: Record<string, any>, b: Record<string, any>) => a.neId.localeCompare(b.neId));
+
+    // 统计在线/离线数量
+    const onlineCount = sortedItems.filter((item: Record<string, any>) => item.status === '1' || item.status === '3').length;
+    const offlineCount = sortedItems.length - onlineCount;
+
+    // 清理子节点数据，移除可能干扰父表格显示的属性
+    const cleanedChildren = sortedItems.map((item: Record<string, any>) => ({
+      ...item,
+      isParent: false
+    }));
+
+    // 创建父节点（分组节点）- 确保这是唯一的父节点数据
+    const parentNode = {
+      id: `parent_${neType}`,
+      neType: neType,
+      neName: `${items.length} 个网元`,
+      summary: `在线 ${onlineCount} | 离线 ${offlineCount}`,
+      childrenData: cleanedChildren, // 重命名避免与ant-design的children属性冲突
+      isParent: true, // 明确标识为父节点
+    };
+
+    return parentNode;
+  });
+
+  // 确保只返回父节点，不包含子节点
+  return parentTableData;
+}
+
 /**查询列表, pageNum初始页数 */
 function fnGetList(pageNum?: number) {
   if (tableState.loading) return;
@@ -380,7 +490,7 @@ function fnGetList(pageNum?: number) {
         }
         tablePagination.total = res.total;
         // 遍历处理资源情况数值
-        tableState.data = res.rows.map(item => {
+        const processedData = res.rows.map(item => {
           let resouresUsage = {
             sysDiskUsage: 0,
             sysMemUsage: 0,
@@ -396,6 +506,9 @@ function fnGetList(pageNum?: number) {
           Reflect.set(item, 'resoures', resouresUsage);
           return item;
         });
+
+        // 转换为嵌套表格结构
+        tableState.data = transformToNestedTableData(processedData);
       }
       tableState.loading = false;
     })
@@ -570,16 +683,40 @@ onMounted(() => {
         </a-space>
       </template>
 
-      <!-- 表格列表 -->
+      <!-- 外层表格：网元类型分组 -->
       <a-table
-        class="table"
+        class="parent-table"
         row-key="id"
-        :columns="tableColumns"
+        :columns="parentTableColumns"
         :loading="tableState.loading"
         :data-source="tableState.data"
         :size="tableState.size"
         :pagination="tablePagination"
-        :scroll="{ x: tableColumns.length * 120 }"
+        :scroll="{ x: parentTableColumns.length * 120 }"
+        :default-expand-all-rows="false"
+        :expandRowByClick="false"
+        :show-header="true"
+        :childrenColumnName="undefined"
+      >
+        <template #bodyCell="{ column, record }">
+          <!-- 父表格只处理汇总列 -->
+          <template v-if="column.key === 'summary'">
+            <span class="text-gray-600">{{ record.summary }}</span>
+          </template>
+        </template>
+
+        <!-- 父表格展开行：嵌套子表格 -->
+        <template #expandedRowRender="{ record }">
+          <!-- 子表格：显示具体网元 -->
+          <a-table
+            row-key="id"
+            :columns="childTableColumns"
+            :data-source="record.childrenData"
+            :size="tableState.size"
+            :pagination="false"
+            :bordered="false"
+            :show-header="true"
+            :scroll="{ x: childTableColumns.length * 120 }"
             :row-selection="{
               type: 'checkbox',
               columnWidth: '48px',
@@ -587,17 +724,20 @@ onMounted(() => {
               onChange: fnTableSelectedRowKeys,
             }"
           >
-        <template #bodyCell="{ column, record }">
+            <template #bodyCell="{ column, record: childRecord }">
+              <!-- 子表格状态列 -->
               <template v-if="column.key === 'status'">
-            <DictTag :options="dict.neInfoStatus" :value="record.status" />
+                <DictTag :options="dict.neInfoStatus" :value="childRecord.status" />
               </template>
+
+              <!-- 子表格操作列 -->
               <template v-if="column.key === 'id'">
                 <a-space :size="8" align="center">
                   <a-tooltip>
                     <template #title>{{ t('common.editText') }}</template>
                     <a-button
                       type="link"
-                  @click.prevent="fnModalVisibleByEdit(record)"
+                      @click.prevent="fnModalVisibleByEdit(childRecord)"
                       v-perms:has="['ne:neInfo:edit']"
                     >
                       <template #icon><FormOutlined /></template>
@@ -609,7 +749,7 @@ onMounted(() => {
                     </template>
                     <a-button
                       type="link"
-                  @click.prevent="fnRecordMore('restart', record)"
+                      @click.prevent="fnRecordMore('restart', childRecord)"
                       v-perms:has="['ne:neInfo:restart']"
                     >
                       <template #icon><UndoOutlined /></template>
@@ -622,7 +762,7 @@ onMounted(() => {
                         <template #icon><EllipsisOutlined /> </template>
                       </a-button>
                       <template #overlay>
-                    <a-menu @click="({ key }:any) => fnRecordMore(key, record)">
+                        <a-menu @click="({ key }:any) => fnRecordMore(key, childRecord)">
                           <a-menu-item key="log" v-if="hasPermissions(['ne:neInfo:logs'])">
                             <FileTextOutlined />
                             {{ t('views.ne.common.log') }}
@@ -638,7 +778,7 @@ onMounted(() => {
                           <a-menu-item
                             key="reload"
                             v-if="
-                          !['OMC', 'PCF', 'IMS', 'MME'].includes(record.neType)
+                                !['OMC', 'PCF', 'IMS', 'MME'].includes(childRecord.neType)
                               "
                           >
                             <SyncOutlined />
@@ -650,7 +790,7 @@ onMounted(() => {
                           </a-menu-item>
                           <a-menu-item
                             key="oam"
-                        v-if="!['OMC'].includes(record.neType)"
+                            v-if="!['OMC'].includes(childRecord.neType)"
                           >
                             <FileTextOutlined />
                             {{ t('views.ne.common.oam') }}
@@ -671,7 +811,9 @@ onMounted(() => {
                 </a-space>
               </template>
             </template>
-        <template #expandedRowRender="{ record }">
+
+            <!-- 子表格展开行：显示详细监控信息 -->
+            <template #expandedRowRender="{ record: childRecord }">
               <a-row>
                 <a-col :offset="2" :lg="8" :md="8" :xs="8">
                   <a-divider orientation="left">
@@ -679,19 +821,19 @@ onMounted(() => {
                   </a-divider>
                   <div>
                     <span>{{ t('views.ne.neInfo.serviceState') }}：</span>
-                <DictTag :options="dict.neInfoStatus" :value="record.status" />
+                    <DictTag :options="dict.neInfoStatus" :value="childRecord.status" />
                   </div>
                   <div>
                     <span>{{ t('views.ne.neVersion.version') }}：</span>
-                <span>{{ record.serverState.version }}</span>
+                    <span>{{ childRecord.serverState?.version || '—' }}</span>
                   </div>
                   <div>
                     <span>{{ t('views.ne.common.serialNum') }}：</span>
-                <span>{{ record.serverState.sn }}</span>
+                    <span>{{ childRecord.serverState?.sn || '—' }}</span>
                   </div>
                   <div>
                     <span>{{ t('views.ne.common.expiryDate') }}：</span>
-                <span>{{ record.serverState.expire }}</span>
+                    <span>{{ childRecord.serverState?.expire || '—' }}</span>
                   </div>
                 </a-col>
                 <a-col :offset="2" :lg="8" :md="8" :xs="8">
@@ -703,13 +845,13 @@ onMounted(() => {
                     <a-progress
                       status="normal"
                       :stroke-color="
-                    record.resoures.nfCpuUsage < 30
+                          childRecord.resoures?.nfCpuUsage < 30
                             ? '#52c41a'
-                      : record.resoures.nfCpuUsage > 70
+                            : childRecord.resoures?.nfCpuUsage > 70
                             ? '#ff4d4f'
                             : '#1890ff'
                         "
-                  :percent="record.resoures.nfCpuUsage"
+                      :percent="childRecord.resoures?.nfCpuUsage || 0"
                     />
                   </div>
                   <div>
@@ -717,13 +859,13 @@ onMounted(() => {
                     <a-progress
                       status="normal"
                       :stroke-color="
-                    record.resoures.sysCpuUsage < 30
+                          childRecord.resoures?.sysCpuUsage < 30
                             ? '#52c41a'
-                      : record.resoures.sysCpuUsage > 70
+                            : childRecord.resoures?.sysCpuUsage > 70
                             ? '#ff4d4f'
                             : '#1890ff'
                         "
-                  :percent="record.resoures.sysCpuUsage"
+                      :percent="childRecord.resoures?.sysCpuUsage || 0"
                     />
                   </div>
                   <div>
@@ -731,13 +873,13 @@ onMounted(() => {
                     <a-progress
                       status="normal"
                       :stroke-color="
-                    record.resoures.sysMemUsage < 30
+                          childRecord.resoures?.sysMemUsage < 30
                             ? '#52c41a'
-                      : record.resoures.sysMemUsage > 70
+                            : childRecord.resoures?.sysMemUsage > 70
                             ? '#ff4d4f'
                             : '#1890ff'
                         "
-                  :percent="record.resoures.sysMemUsage"
+                      :percent="childRecord.resoures?.sysMemUsage || 0"
                     />
                   </div>
                   <div>
@@ -745,19 +887,21 @@ onMounted(() => {
                     <a-progress
                       status="normal"
                       :stroke-color="
-                    record.resoures.sysDiskUsage < 30
+                          childRecord.resoures?.sysDiskUsage < 30
                             ? '#52c41a'
-                      : record.resoures.sysDiskUsage > 70
+                            : childRecord.resoures?.sysDiskUsage > 70
                             ? '#ff4d4f'
                             : '#1890ff'
                         "
-                  :percent="record.resoures.sysDiskUsage"
+                      :percent="childRecord.resoures?.sysDiskUsage || 0"
                     />
                   </div>
                 </a-col>
               </a-row>
             </template>
           </a-table>
+        </template>
+      </a-table>
     </a-card>
 
     <!-- 新增框或修改框 -->
@@ -788,7 +932,14 @@ onMounted(() => {
 </template>
 
 <style lang="less" scoped>
-.table :deep(.ant-pagination) {
+.parent-table :deep(.ant-pagination) {
   padding: 0 24px;
 }
+
+/* 简洁的父表格样式 */
+.parent-table :deep(.ant-table-tbody) {
+  tr[data-row-key*="parent_"] {
+    font-weight: 600;
+  }
+}
 </style>