提交代码

web/src/views/xgss/xsssfpejxy/index.vue

@@ -39,8 +39,14 @@
                   {{ node.label }}
                 </span>
                 <span v-if="data.type === 'college' || data.type === 'class'" class="bed-count">
-                  <el-tag size="small" type="success" class="ml-2">男:{{ data.maleAssigned }}/{{ data.maleTotal }}</el-tag>
-                  <el-tag size="small" type="danger" class="ml-2">女:{{ data.femaleAssigned }}/{{ data.femaleTotal }}</el-tag>
+                  <template v-if="selectedBuilding?.buildingType === '2'">
+                    <el-tag size="small" class="female-tag ml-2">女:{{ data.femaleAssigned }}/{{ data.femaleTotal }}</el-tag>
+                    <el-tag size="small" type="primary" class="ml-2">男:{{ data.maleAssigned }}/{{ data.maleTotal }}</el-tag>
+                  </template>
+                  <template v-else>
+                    <el-tag size="small" type="primary" class="ml-2">男:{{ data.maleAssigned }}/{{ data.maleTotal }}</el-tag>
+                    <el-tag size="small" class="female-tag ml-2">女:{{ data.femaleAssigned }}/{{ data.femaleTotal }}</el-tag>
+                  </template>
                 </span>
               </div>
             </template>
@@ -75,8 +81,14 @@
               <span class="custom-tree-node">
                 <span>{{ node.label }}</span>
                 <span v-if="data.type === 'college' || data.type === 'class'" class="bed-count">
-                  <el-tag size="small" type="success" class="ml-2">男:{{ data.maleAssigned }}/{{ data.maleTotal }}</el-tag>
-                  <el-tag size="small" type="danger" class="ml-2">女:{{ data.femaleAssigned }}/{{ data.femaleTotal }}</el-tag>
+                  <template v-if="selectedBuilding?.buildingType === '2'">
+                    <el-tag size="small" class="female-tag ml-2">女:{{ data.femaleAssigned }}/{{ data.femaleTotal }}</el-tag>
+                    <el-tag size="small" type="primary" class="ml-2">男:{{ data.maleAssigned }}/{{ data.maleTotal }}</el-tag>
+                  </template>
+                  <template v-else>
+                    <el-tag size="small" type="primary" class="ml-2">男:{{ data.maleAssigned }}/{{ data.maleTotal }}</el-tag>
+                    <el-tag size="small" class="female-tag ml-2">女:{{ data.femaleAssigned }}/{{ data.femaleTotal }}</el-tag>
+                  </template>
                 </span>
               </span>
             </template>
@@ -284,6 +296,9 @@ const selectedBuilding = ref<DormTreeNode>();
 // 房间和床位数据（合并展示）
 const roomList = ref<any[]>([]);
 
+// 添加请求取消控制器
+let currentController: AbortController | null = null;
+
 // 查询参数
 const queryParams = reactive({
   pageNum: 1,
@@ -551,12 +566,32 @@ const getDormTreeData = async () => {
 };
 
 /** 处理节点单击事件 */
+// const handleNodeClick = (data: DormTreeNode) => {
+//   if (data.type !== 'building') {
+//     // 如果不是宿舍楼，不进行操作
+//     return;
+//   }
+
+//   // 设置选中的宿舍楼
+//   selectedBuilding.value = data;
+//   // 更新查询参数
+//   queryParams.buildingId = data.id;
+//   // 加载房间数据
+//   handleQuery();
+// };
+/** 处理节点单击事件 - 增加请求取消机制 */
 const handleNodeClick = (data: DormTreeNode) => {
   if (data.type !== 'building') {
     // 如果不是宿舍楼，不进行操作
     return;
   }
 
+  // 取消之前未完成的请求
+  if (currentController) {
+    currentController.abort();
+    currentController = null;
+  }
+
   // 设置选中的宿舍楼
   selectedBuilding.value = data;
   // 更新查询参数
@@ -565,6 +600,13 @@ const handleNodeClick = (data: DormTreeNode) => {
   handleQuery();
 };
 
+/** 查询房间数据 */
+const handleQuery = () => {
+  // 创建新的AbortController
+  currentController = new AbortController();
+  loadRoomData();
+};
+
 /** 学生树节点点击处理 */
 const handleStudentNodeClick = (data: any) => {
   console.log('学生树节点点击:', data);
@@ -572,9 +614,9 @@ const handleStudentNodeClick = (data: any) => {
 };
 
 /** 查询房间数据 */
-const handleQuery = () => {
-  loadRoomData();
-};
+// const handleQuery = () => {
+//   loadRoomData();
+// };
 
 /** 重置查询条件 */
 const resetQuery = () => {
@@ -586,46 +628,118 @@ const resetQuery = () => {
 };
 
 /** 加载房间数据 */
+// const loadRoomData = async () => {
+//   if (!queryParams.buildingId) return;
+
+//   loading.value = true;
+//   try {
+//     // 获取房间列表
+//     const res = await listDormRoom(queryParams);
+//     const rooms = res.rows || [];
+
+//     // 存储临时结果
+//     const tempList: any[] = [];
+
+//     // 处理每个房间
+//     for (const room of rooms) {
+//       // 添加房间记录
+//       const roomRecord = {
+//         ...room,
+//         isBed: false,
+//         children: []
+//       };
+
+//       // 获取房间的床位信息
+//       try {
+//         const bedRes = await listDormBed({ roomId: room.id });
+//         const beds = bedRes.rows || [];
+
+//         // 将床位信息添加为房间的子项
+//         if (beds.length > 0) {
+//           roomRecord.children = beds.map((bed: any) => ({
+//             ...bed,
+//             isBed: true,
+//             roomName: room.roomName // 保留房间名称，方便展示
+//           }));
+//         }
+//       } catch (error) {
+//         console.error(`获取房间 ${room.id} 的床位信息失败`, error);
+//       }
+
+//       tempList.push(roomRecord);
+//     }
+
+//     roomList.value = tempList;
+
+//     // 重置选择状态
+//     selectedRows.value = [];
+//     selectedRoomCount.value = 0;
+//     selectedBedCount.value = 0;
+//   } catch (error) {
+//     console.error('加载房间数据失败', error);
+//   } finally {
+//     loading.value = false;
+//   }
+// };
+
+/** 加载房间数据 - 使用并行请求 */
 const loadRoomData = async () => {
   if (!queryParams.buildingId) return;
 
   loading.value = true;
+  const controller = currentController;
+
   try {
     // 获取房间列表
-    const res = await listDormRoom(queryParams);
+    const res = await listDormRoom({
+      ...queryParams,
+      signal: controller?.signal
+    });
     const rooms = res.rows || [];
 
-    // 存储临时结果
-    const tempList: any[] = [];
+    if (controller?.signal?.aborted) return;
 
-    // 处理每个房间
-    for (const room of rooms) {
-      // 添加房间记录
+    // 并行获取所有房间的床位信息
+    const roomPromises = rooms.map(async (room) => {
+      // 创建房间记录
       const roomRecord = {
         ...room,
         isBed: false,
         children: []
       };
 
-      // 获取房间的床位信息
       try {
-        const bedRes = await listDormBed({ roomId: room.id });
-        const beds = bedRes.rows || [];
+        const bedRes = await listDormBed({
+          roomId: room.id,
+          signal: controller?.signal
+        });
+
+        // 如果请求已被取消，不继续处理
+        if (controller?.signal?.aborted) return roomRecord;
 
         // 将床位信息添加为房间的子项
-        if (beds.length > 0) {
-          roomRecord.children = beds.map((bed: any) => ({
+        if (bedRes.rows?.length > 0) {
+          roomRecord.children = bedRes.rows.map((bed: any) => ({
             ...bed,
             isBed: true,
             roomName: room.roomName // 保留房间名称，方便展示
           }));
         }
       } catch (error) {
-        console.error(`获取房间 ${room.id} 的床位信息失败`, error);
+        // 忽略请求被取消的错误
+        if (error.name !== 'AbortError') {
+          console.error(`获取房间 ${room.id} 的床位信息失败`, error);
+        }
       }
 
-      tempList.push(roomRecord);
-    }
+      return roomRecord;
+    });
+
+    // 等待所有请求完成
+    const tempList = await Promise.all(roomPromises);
+
+    // 如果请求已被取消，不更新UI
+    if (controller?.signal?.aborted) return;
 
     roomList.value = tempList;
 
@@ -634,9 +748,15 @@ const loadRoomData = async () => {
     selectedRoomCount.value = 0;
     selectedBedCount.value = 0;
   } catch (error) {
-    console.error('加载房间数据失败', error);
+    // 忽略请求被取消的错误
+    if (error.name !== 'AbortError') {
+      console.error('加载房间数据失败', error);
+    }
   } finally {
-    loading.value = false;
+    // 如果是当前控制器的请求完成，则关闭加载状态
+    if (controller === currentController) {
+      loading.value = false;
+    }
   }
 };
 
@@ -813,6 +933,10 @@ watch(
 // 组件挂载时获取宿舍树数据
 onMounted(() => {
   getDormTreeData();
+  if (currentController) {
+    currentController.abort();
+    currentController = null;
+  }
 });
 </script>
 
@@ -950,6 +1074,13 @@ onMounted(() => {
   font-weight: bold;
 }
 
+/* 女生标签样式 */
+.female-tag {
+  background-color: rgba(255, 105, 180, 0.1) !important;
+  color: #ff69b4 !important;
+  border-color: rgba(255, 105, 180, 0.1) !important;
+}
+
 /* 宿舍树横向和纵向滚动样式 - 修复版 */
 .tree-card:first-child {
   position: relative;