From 609371ed828e06d592155cef28ac0ddf081a9863 Mon Sep 17 00:00:00 2001 From: zlwu <704541015@qq.com> Date: Wed, 23 Jul 2025 11:11:19 +0800 Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web/src/views/xgss/xsssfpejxy/index.vue | 177 +++++++++++++++++++++--- 1 file changed, 154 insertions(+), 23 deletions(-) diff --git a/web/src/views/xgss/xsssfpejxy/index.vue b/web/src/views/xgss/xsssfpejxy/index.vue index 9da45cef..d0ac2d29 100644 --- a/web/src/views/xgss/xsssfpejxy/index.vue +++ b/web/src/views/xgss/xsssfpejxy/index.vue @@ -39,8 +39,14 @@ {{ node.label }} - 男:{{ data.maleAssigned }}/{{ data.maleTotal }} - 女:{{ data.femaleAssigned }}/{{ data.femaleTotal }} + + @@ -75,8 +81,14 @@ {{ node.label }} - 男:{{ data.maleAssigned }}/{{ data.maleTotal }} - 女:{{ data.femaleAssigned }}/{{ data.femaleTotal }} + + @@ -284,6 +296,9 @@ const selectedBuilding = ref(); // 房间和床位数据（合并展示） const roomList = ref([]); +// 添加请求取消控制器 +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; + } }); @@ -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;