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,192 +683,223 @@ 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 }"
-        :row-selection="{
+        :default-expand-all-rows="false"
-          type: 'checkbox',
+        :expandRowByClick="false"
-          columnWidth: '48px',
+        :show-header="true"
-          selectedRowKeys: tableState.selectedRowKeys,
+        :childrenColumnName="undefined"
-          onChange: fnTableSelectedRowKeys,
-        }"
       >
         <template #bodyCell="{ column, record }">
-          <template v-if="column.key === 'status'">
+          <!-- 父表格只处理汇总列 -->
-            <DictTag :options="dict.neInfoStatus" :value="record.status" />
+          <template v-if="column.key === 'summary'">
-          </template>
+            <span class="text-gray-600">{{ record.summary }}</span>
-          <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)"
-                  v-perms:has="['ne:neInfo:edit']"
-                >
-                  <template #icon><FormOutlined /></template>
-                </a-button>
-              </a-tooltip>
-              <a-tooltip>
-                <template #title>
-                  {{ t('views.ne.common.restart') }}
-                </template>
-                <a-button
-                  type="link"
-                  @click.prevent="fnRecordMore('restart', record)"
-                  v-perms:has="['ne:neInfo:restart']"
-                >
-                  <template #icon><UndoOutlined /></template>
-                </a-button>
-              </a-tooltip>
-              <a-tooltip placement="left">
-                <template #title>{{ t('common.moreText') }}</template>
-                <a-dropdown placement="bottomRight" trigger="click" v-if="hasAnyBatchPermission">
-                  <a-button type="link">
-                    <template #icon><EllipsisOutlined /> </template>
-                  </a-button>
-                  <template #overlay>
-                    <a-menu @click="({ key }:any) => fnRecordMore(key, record)">
-                      <a-menu-item key="log" v-if="hasPermissions(['ne:neInfo:logs'])">
-                        <FileTextOutlined />
-                        {{ t('views.ne.common.log') }}
-                      </a-menu-item>
-                      <a-menu-item key="start" v-if="hasPermissions(['ne:neInfo:start'])">
-                        <ThunderboltOutlined />
-                        {{ t('views.ne.common.start') }}
-                      </a-menu-item>
-                      <a-menu-item key="stop" v-if="hasPermissions(['ne:neInfo:stop'])">
-                        <CloseSquareOutlined />
-                        {{ t('views.ne.common.stop') }}
-                      </a-menu-item>
-                      <a-menu-item
-                        key="reload"
-                        v-if="
-                          !['OMC', 'PCF', 'IMS', 'MME'].includes(record.neType)
-                        "
-                      >
-                        <SyncOutlined />
-                        {{ t('views.ne.common.reload') }}
-                      </a-menu-item>
-                      <a-menu-item key="delete" v-if="hasPermissions(['ne:neInfo:delete'])">
-                        <DeleteOutlined />
-                        {{ t('common.deleteText') }}
-                      </a-menu-item>
-                      <a-menu-item
-                        key="oam"
-                        v-if="!['OMC'].includes(record.neType)"
-                      >
-                        <FileTextOutlined />
-                        {{ t('views.ne.common.oam') }}
-                      </a-menu-item>
-                      <!-- 配置备份 -->
-                      <a-menu-item key="backConfExport" v-if="hasPermissions(['ne:neInfo:export'])">
-                        <ExportOutlined />
-                        {{ t('views.ne.neInfo.backConf.export') }}
-                      </a-menu-item>
-                      <a-menu-item key="backConfImport" v-if="hasPermissions(['ne:neInfo:import'])">
-                        <ImportOutlined />
-                        {{ t('views.ne.neInfo.backConf.import') }}
-                      </a-menu-item>
-                    </a-menu>
-                  </template>
-                </a-dropdown>
-              </a-tooltip>
-            </a-space>
           </template>
         </template>
+
+        <!-- 父表格展开行：嵌套子表格 -->
         <template #expandedRowRender="{ record }">
-          <a-row>
+          <!-- 子表格：显示具体网元 -->
-            <a-col :offset="2" :lg="8" :md="8" :xs="8">
+          <a-table
-              <a-divider orientation="left">
+            row-key="id"
-                {{ t('views.ne.neInfo.info') }}
+            :columns="childTableColumns"
-              </a-divider>
+            :data-source="record.childrenData"
-              <div>
+            :size="tableState.size"
-                <span>{{ t('views.ne.neInfo.serviceState') }}：</span>
+            :pagination="false"
-                <DictTag :options="dict.neInfoStatus" :value="record.status" />
+            :bordered="false"
-              </div>
+            :show-header="true"
-              <div>
+            :scroll="{ x: childTableColumns.length * 120 }"
-                <span>{{ t('views.ne.neVersion.version') }}：</span>
+            :row-selection="{
-                <span>{{ record.serverState.version }}</span>
+              type: 'checkbox',
-              </div>
+              columnWidth: '48px',
-              <div>
+              selectedRowKeys: tableState.selectedRowKeys,
-                <span>{{ t('views.ne.common.serialNum') }}：</span>
+              onChange: fnTableSelectedRowKeys,
-                <span>{{ record.serverState.sn }}</span>
+            }"
-              </div>
+          >
-              <div>
+            <template #bodyCell="{ column, record: childRecord }">
-                <span>{{ t('views.ne.common.expiryDate') }}：</span>
+              <!-- 子表格状态列 -->
-                <span>{{ record.serverState.expire }}</span>
+              <template v-if="column.key === 'status'">
-              </div>
+                <DictTag :options="dict.neInfoStatus" :value="childRecord.status" />
-            </a-col>
+              </template>
-            <a-col :offset="2" :lg="8" :md="8" :xs="8">
+
-              <a-divider orientation="left">
+              <!-- 子表格操作列 -->
-                {{ t('views.ne.neInfo.resourceInfo') }}
+              <template v-if="column.key === 'id'">
-              </a-divider>
+                <a-space :size="8" align="center">
-              <div>
+                  <a-tooltip>
-                <span>{{ t('views.ne.neInfo.neCpu') }}：</span>
+                    <template #title>{{ t('common.editText') }}</template>
-                <a-progress
+                    <a-button
-                  status="normal"
+                      type="link"
-                  :stroke-color="
+                      @click.prevent="fnModalVisibleByEdit(childRecord)"
-                    record.resoures.nfCpuUsage < 30
+                      v-perms:has="['ne:neInfo:edit']"
-                      ? '#52c41a'
+                    >
-                      : record.resoures.nfCpuUsage > 70
+                      <template #icon><FormOutlined /></template>
-                      ? '#ff4d4f'
+                    </a-button>
-                      : '#1890ff'
+                  </a-tooltip>
-                  "
+                  <a-tooltip>
-                  :percent="record.resoures.nfCpuUsage"
+                    <template #title>
-                />
+                      {{ t('views.ne.common.restart') }}
-              </div>
+                    </template>
-              <div>
+                    <a-button
-                <span>{{ t('views.ne.neInfo.sysCpu') }}：</span>
+                      type="link"
-                <a-progress
+                      @click.prevent="fnRecordMore('restart', childRecord)"
-                  status="normal"
+                      v-perms:has="['ne:neInfo:restart']"
-                  :stroke-color="
+                    >
-                    record.resoures.sysCpuUsage < 30
+                      <template #icon><UndoOutlined /></template>
-                      ? '#52c41a'
+                    </a-button>
-                      : record.resoures.sysCpuUsage > 70
+                  </a-tooltip>
-                      ? '#ff4d4f'
+                  <a-tooltip placement="left">
-                      : '#1890ff'
+                    <template #title>{{ t('common.moreText') }}</template>
-                  "
+                    <a-dropdown placement="bottomRight" trigger="click" v-if="hasAnyBatchPermission">
-                  :percent="record.resoures.sysCpuUsage"
+                      <a-button type="link">
-                />
+                        <template #icon><EllipsisOutlined /> </template>
-              </div>
+                      </a-button>
-              <div>
+                      <template #overlay>
-                <span>{{ t('views.ne.neInfo.sysMem') }}：</span>
+                        <a-menu @click="({ key }:any) => fnRecordMore(key, childRecord)">
-                <a-progress
+                          <a-menu-item key="log" v-if="hasPermissions(['ne:neInfo:logs'])">
-                  status="normal"
+                            <FileTextOutlined />
-                  :stroke-color="
+                            {{ t('views.ne.common.log') }}
-                    record.resoures.sysMemUsage < 30
+                          </a-menu-item>
-                      ? '#52c41a'
+                          <a-menu-item key="start" v-if="hasPermissions(['ne:neInfo:start'])">
-                      : record.resoures.sysMemUsage > 70
+                            <ThunderboltOutlined />
-                      ? '#ff4d4f'
+                            {{ t('views.ne.common.start') }}
-                      : '#1890ff'
+                          </a-menu-item>
-                  "
+                          <a-menu-item key="stop" v-if="hasPermissions(['ne:neInfo:stop'])">
-                  :percent="record.resoures.sysMemUsage"
+                            <CloseSquareOutlined />
-                />
+                            {{ t('views.ne.common.stop') }}
-              </div>
+                          </a-menu-item>
-              <div>
+                          <a-menu-item
-                <span>{{ t('views.ne.neInfo.sysDisk') }}：</span>
+                            key="reload"
-                <a-progress
+                            v-if="
-                  status="normal"
+                                !['OMC', 'PCF', 'IMS', 'MME'].includes(childRecord.neType)
-                  :stroke-color="
+                              "
-                    record.resoures.sysDiskUsage < 30
+                          >
-                      ? '#52c41a'
+                            <SyncOutlined />
-                      : record.resoures.sysDiskUsage > 70
+                            {{ t('views.ne.common.reload') }}
-                      ? '#ff4d4f'
+                          </a-menu-item>
-                      : '#1890ff'
+                          <a-menu-item key="delete" v-if="hasPermissions(['ne:neInfo:delete'])">
-                  "
+                            <DeleteOutlined />
-                  :percent="record.resoures.sysDiskUsage"
+                            {{ t('common.deleteText') }}
-                />
+                          </a-menu-item>
-              </div>
+                          <a-menu-item
-            </a-col>
+                            key="oam"
-          </a-row>
+                            v-if="!['OMC'].includes(childRecord.neType)"
+                          >
+                            <FileTextOutlined />
+                            {{ t('views.ne.common.oam') }}
+                          </a-menu-item>
+                          <!-- 配置备份 -->
+                          <a-menu-item key="backConfExport" v-if="hasPermissions(['ne:neInfo:export'])">
+                            <ExportOutlined />
+                            {{ t('views.ne.neInfo.backConf.export') }}
+                          </a-menu-item>
+                          <a-menu-item key="backConfImport" v-if="hasPermissions(['ne:neInfo:import'])">
+                            <ImportOutlined />
+                            {{ t('views.ne.neInfo.backConf.import') }}
+                          </a-menu-item>
+                        </a-menu>
+                      </template>
+                    </a-dropdown>
+                  </a-tooltip>
+                </a-space>
+              </template>
+            </template>
+
+            <!-- 子表格展开行：显示详细监控信息 -->
+            <template #expandedRowRender="{ record: childRecord }">
+              <a-row>
+                <a-col :offset="2" :lg="8" :md="8" :xs="8">
+                  <a-divider orientation="left">
+                    {{ t('views.ne.neInfo.info') }}
+                  </a-divider>
+                  <div>
+                    <span>{{ t('views.ne.neInfo.serviceState') }}：</span>
+                    <DictTag :options="dict.neInfoStatus" :value="childRecord.status" />
+                  </div>
+                  <div>
+                    <span>{{ t('views.ne.neVersion.version') }}：</span>
+                    <span>{{ childRecord.serverState?.version || '—' }}</span>
+                  </div>
+                  <div>
+                    <span>{{ t('views.ne.common.serialNum') }}：</span>
+                    <span>{{ childRecord.serverState?.sn || '—' }}</span>
+                  </div>
+                  <div>
+                    <span>{{ t('views.ne.common.expiryDate') }}：</span>
+                    <span>{{ childRecord.serverState?.expire || '—' }}</span>
+                  </div>
+                </a-col>
+                <a-col :offset="2" :lg="8" :md="8" :xs="8">
+                  <a-divider orientation="left">
+                    {{ t('views.ne.neInfo.resourceInfo') }}
+                  </a-divider>
+                  <div>
+                    <span>{{ t('views.ne.neInfo.neCpu') }}：</span>
+                    <a-progress
+                      status="normal"
+                      :stroke-color="
+                          childRecord.resoures?.nfCpuUsage < 30
+                            ? '#52c41a'
+                            : childRecord.resoures?.nfCpuUsage > 70
+                            ? '#ff4d4f'
+                            : '#1890ff'
+                        "
+                      :percent="childRecord.resoures?.nfCpuUsage || 0"
+                    />
+                  </div>
+                  <div>
+                    <span>{{ t('views.ne.neInfo.sysCpu') }}：</span>
+                    <a-progress
+                      status="normal"
+                      :stroke-color="
+                          childRecord.resoures?.sysCpuUsage < 30
+                            ? '#52c41a'
+                            : childRecord.resoures?.sysCpuUsage > 70
+                            ? '#ff4d4f'
+                            : '#1890ff'
+                        "
+                      :percent="childRecord.resoures?.sysCpuUsage || 0"
+                    />
+                  </div>
+                  <div>
+                    <span>{{ t('views.ne.neInfo.sysMem') }}：</span>
+                    <a-progress
+                      status="normal"
+                      :stroke-color="
+                          childRecord.resoures?.sysMemUsage < 30
+                            ? '#52c41a'
+                            : childRecord.resoures?.sysMemUsage > 70
+                            ? '#ff4d4f'
+                            : '#1890ff'
+                        "
+                      :percent="childRecord.resoures?.sysMemUsage || 0"
+                    />
+                  </div>
+                  <div>
+                    <span>{{ t('views.ne.neInfo.sysDisk') }}：</span>
+                    <a-progress
+                      status="normal"
+                      :stroke-color="
+                          childRecord.resoures?.sysDiskUsage < 30
+                            ? '#52c41a'
+                            : childRecord.resoures?.sysDiskUsage > 70
+                            ? '#ff4d4f'
+                            : '#1890ff'
+                        "
+                      :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>