提交代码
This commit is contained in:
zlwu committed
1 parent
8374ab31b1
commit
f13103d334
9 files changed
+1247
-45
No files matched your search
+17
-4
@@ -19,6 +19,7 @@ import org.dromara.common.log.enums.BusinessType;
|
||||
import org.dromara.common.excel.utils.ExcelUtil;
|
||||
import org.dromara.xg.domain.vo.XgDormBedStudentVo;
|
||||
import org.dromara.xg.domain.bo.XgDormBedStudentBo;
|
||||
import org.dromara.xg.domain.bo.XgDormBedBatchAllocateBo;
|
||||
import org.dromara.xg.service.IXgDormBedStudentService;
|
||||
import org.dromara.common.mybatis.core.page.TableDataInfo;
|
||||
|
||||
@@ -63,8 +64,7 @@ public class XgDormBedStudentController extends BaseController {
|
||||
*/
|
||||
@SaCheckPermission("dormBedStudent:dormBedStudent:query")
|
||||
@GetMapping("/{id}")
|
||||
public R<XgDormBedStudentVo> getInfo(@NotNull(message = "主键不能为空")
|
||||
@PathVariable Long id) {
|
||||
public R<XgDormBedStudentVo> getInfo(@NotNull(message = "主键不能为空") @PathVariable Long id) {
|
||||
return R.ok(xgDormBedStudentService.queryById(id));
|
||||
}
|
||||
|
||||
@@ -98,8 +98,21 @@ public class XgDormBedStudentController extends BaseController {
|
||||
@SaCheckPermission("dormBedStudent:dormBedStudent:remove")
|
||||
@Log(title = "床位学生分配关系", businessType = BusinessType.DELETE)
|
||||
@DeleteMapping("/{ids}")
|
||||
public R<Void> remove(@NotEmpty(message = "主键不能为空")
|
||||
@PathVariable Long[] ids) {
|
||||
public R<Void> remove(@NotEmpty(message = "主键不能为空") @PathVariable Long[] ids) {
|
||||
return toAjax(xgDormBedStudentService.deleteWithValidByIds(List.of(ids), true));
|
||||
}
|
||||
|
||||
/**
|
||||
* 批量分配床位给二级学院
|
||||
*
|
||||
* @param bo 批量分配参数
|
||||
*/
|
||||
@SaCheckPermission("dormBedStudent:dormBedStudent:add")
|
||||
@Log(title = "批量分配床位给二级学院", businessType = BusinessType.INSERT)
|
||||
@RepeatSubmit()
|
||||
@PostMapping("/batchAllocate")
|
||||
public R<Void> batchAllocateBedsToCollege(@Validated(AddGroup.class) @RequestBody XgDormBedBatchAllocateBo bo) {
|
||||
return toAjax(xgDormBedStudentService.batchAllocateBedsToCollege(bo));
|
||||
}
|
||||
|
||||
}
|
||||
+44
@@ -0,0 +1,44 @@
|
||||
package org.dromara.xg.domain.bo;
|
||||
|
||||
import io.github.linpeilie.annotations.AutoMapper;
|
||||
import jakarta.validation.constraints.NotEmpty;
|
||||
import lombok.Data;
|
||||
import lombok.EqualsAndHashCode;
|
||||
import org.dromara.common.core.validate.AddGroup;
|
||||
import org.dromara.common.mybatis.core.domain.BaseEntity;
|
||||
|
||||
import java.util.List;
|
||||
|
||||
/**
|
||||
* 床位批量分配业务对象 xg_dorm_bed_batch_allocate
|
||||
*
|
||||
* @author zlwu
|
||||
* @date 2025-01-03
|
||||
*/
|
||||
@Data
|
||||
@EqualsAndHashCode(callSuper = true)
|
||||
public class XgDormBedBatchAllocateBo extends BaseEntity {
|
||||
|
||||
/**
|
||||
* 床位ID列表
|
||||
*/
|
||||
@NotEmpty(message = "床位ID列表不能为空", groups = { AddGroup.class })
|
||||
private List<Long> bedIds;
|
||||
|
||||
/**
|
||||
* 学院ID列表
|
||||
*/
|
||||
@NotEmpty(message = "学院ID列表不能为空", groups = { AddGroup.class })
|
||||
private List<Long> collegeIds;
|
||||
|
||||
/**
|
||||
* 楼栋ID
|
||||
*/
|
||||
private Long buildingId;
|
||||
|
||||
/**
|
||||
* 楼栋类型（1-男生楼，2-女生楼）
|
||||
*/
|
||||
private String buildingType;
|
||||
|
||||
}
|
||||
+10
@@ -2,6 +2,7 @@ package org.dromara.xg.service;
|
||||
|
||||
import org.dromara.xg.domain.vo.XgDormBedStudentVo;
|
||||
import org.dromara.xg.domain.bo.XgDormBedStudentBo;
|
||||
import org.dromara.xg.domain.bo.XgDormBedBatchAllocateBo;
|
||||
import org.dromara.common.mybatis.core.page.TableDataInfo;
|
||||
import org.dromara.common.mybatis.core.page.PageQuery;
|
||||
|
||||
@@ -65,4 +66,13 @@ public interface IXgDormBedStudentService {
|
||||
* @return 是否删除成功
|
||||
*/
|
||||
Boolean deleteWithValidByIds(Collection<Long> ids, Boolean isValid);
|
||||
|
||||
/**
|
||||
* 批量分配床位给二级学院
|
||||
*
|
||||
* @param request 批量分配请求参数
|
||||
* @return 是否分配成功
|
||||
*/
|
||||
Boolean batchAllocateBedsToCollege(
|
||||
XgDormBedBatchAllocateBo bo);
|
||||
}
|
||||
+97
-5
@@ -13,12 +13,20 @@ import org.springframework.stereotype.Service;
|
||||
import org.dromara.xg.domain.bo.XgDormBedStudentBo;
|
||||
import org.dromara.xg.domain.vo.XgDormBedStudentVo;
|
||||
import org.dromara.xg.domain.XgDormBedStudent;
|
||||
import org.dromara.xg.domain.XgDormBed;
|
||||
import org.dromara.xg.domain.XgDormBuilding;
|
||||
import org.dromara.xg.mapper.XgDormBedStudentMapper;
|
||||
import org.dromara.xg.mapper.XgDormBedMapper;
|
||||
import org.dromara.xg.mapper.XgDormBuildingMapper;
|
||||
import org.dromara.xg.service.IXgDormBedStudentService;
|
||||
import org.dromara.xg.domain.bo.XgDormBedBatchAllocateBo;
|
||||
import org.springframework.transaction.annotation.Transactional;
|
||||
|
||||
import java.util.List;
|
||||
import java.util.Map;
|
||||
import java.util.Collection;
|
||||
import java.util.Date;
|
||||
import java.util.ArrayList;
|
||||
|
||||
/**
|
||||
* 床位学生分配关系Service业务层处理
|
||||
@@ -32,6 +40,8 @@ import java.util.Collection;
|
||||
public class XgDormBedStudentServiceImpl implements IXgDormBedStudentService {
|
||||
|
||||
private final XgDormBedStudentMapper baseMapper;
|
||||
private final XgDormBedMapper xgDormBedMapper;
|
||||
private final XgDormBuildingMapper xgDormBuildingMapper;
|
||||
|
||||
/**
|
||||
* 查询床位学生分配关系
|
||||
@@ -40,7 +50,7 @@ public class XgDormBedStudentServiceImpl implements IXgDormBedStudentService {
|
||||
* @return 床位学生分配关系
|
||||
*/
|
||||
@Override
|
||||
public XgDormBedStudentVo queryById(Long id){
|
||||
public XgDormBedStudentVo queryById(Long id) {
|
||||
return baseMapper.selectVoById(id);
|
||||
}
|
||||
|
||||
@@ -123,8 +133,8 @@ public class XgDormBedStudentServiceImpl implements IXgDormBedStudentService {
|
||||
/**
|
||||
* 保存前的数据校验
|
||||
*/
|
||||
private void validEntityBeforeSave(XgDormBedStudent entity){
|
||||
//TODO 做一些数据校验,如唯一约束
|
||||
private void validEntityBeforeSave(XgDormBedStudent entity) {
|
||||
// TODO 做一些数据校验,如唯一约束
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -136,9 +146,91 @@ public class XgDormBedStudentServiceImpl implements IXgDormBedStudentService {
|
||||
*/
|
||||
@Override
|
||||
public Boolean deleteWithValidByIds(Collection<Long> ids, Boolean isValid) {
|
||||
if(isValid){
|
||||
//TODO 做一些业务上的校验,判断是否需要校验
|
||||
if (isValid) {
|
||||
// TODO 做一些业务上的校验,判断是否需要校验
|
||||
}
|
||||
return baseMapper.deleteByIds(ids) > 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* 批量分配床位给二级学院
|
||||
*
|
||||
* @param bo 批量分配请求参数
|
||||
* @return 是否分配成功
|
||||
*/
|
||||
@Override
|
||||
@Transactional(rollbackFor = Exception.class)
|
||||
public Boolean batchAllocateBedsToCollege(XgDormBedBatchAllocateBo bo) {
|
||||
try {
|
||||
// 1. 校验床位状态，确保都是空闲状态
|
||||
List<XgDormBed> beds = xgDormBedMapper.selectBatchIds(bo.getBedIds());
|
||||
for (XgDormBed bed : beds) {
|
||||
if (!"0".equals(bed.getBedStatus())) {
|
||||
log.warn("床位{}不是空闲状态，无法分配", bed.getBedName());
|
||||
throw new RuntimeException("床位" + bed.getBedName() + "不是空闲状态，无法分配");
|
||||
}
|
||||
}
|
||||
|
||||
// 2. 获取楼栋信息，用于获取校区ID和宿舍区ID
|
||||
XgDormBuilding building = xgDormBuildingMapper.selectById(bo.getBuildingId());
|
||||
if (building == null) {
|
||||
throw new RuntimeException("楼栋信息不存在，buildingId: " + bo.getBuildingId());
|
||||
}
|
||||
|
||||
// 3. 更新床位状态为已分配
|
||||
for (Long bedId : bo.getBedIds()) {
|
||||
XgDormBed updateBed = new XgDormBed();
|
||||
updateBed.setId(bedId);
|
||||
updateBed.setBedStatus("1"); // 1-已分配
|
||||
updateBed.setUpdateTime(new Date());
|
||||
xgDormBedMapper.updateById(updateBed);
|
||||
}
|
||||
|
||||
// 4. 为每个床位-学院组合创建分配记录
|
||||
List<XgDormBedStudent> allocationRecords = new ArrayList<>();
|
||||
Date now = new Date();
|
||||
|
||||
for (Long bedId : bo.getBedIds()) {
|
||||
// 获取床位详细信息
|
||||
XgDormBed bed = xgDormBedMapper.selectById(bedId);
|
||||
if (bed == null) {
|
||||
continue;
|
||||
}
|
||||
|
||||
for (Long collegeId : bo.getCollegeIds()) {
|
||||
XgDormBedStudent allocation = new XgDormBedStudent();
|
||||
allocation.setCollegeId(collegeId);
|
||||
allocation.setMajorId(null); // 没有数据就不填写，为空
|
||||
allocation.setClassId(null); // 没有数据就不填写，为空
|
||||
allocation.setStudentId(null); // 没有数据就不填写，为空
|
||||
allocation.setBedId(bedId);
|
||||
allocation.setRoomId(bed.getRoomId());
|
||||
allocation.setBuildingId(bo.getBuildingId());
|
||||
allocation.setAreaId(building.getAreaId()); // 从楼栋信息中获取宿舍区ID
|
||||
allocation.setCampusId(building.getCampusId()); // 从楼栋信息中获取校区ID
|
||||
allocation.setStatus("0"); // 0-正常
|
||||
allocation.setAssignTime(now);
|
||||
allocation.setCreateTime(now);
|
||||
allocation.setUpdateTime(now);
|
||||
|
||||
allocationRecords.add(allocation);
|
||||
}
|
||||
}
|
||||
|
||||
// 5. 批量插入分配记录
|
||||
if (!allocationRecords.isEmpty()) {
|
||||
boolean insertResult = baseMapper.insertBatch(allocationRecords);
|
||||
if (!insertResult) {
|
||||
throw new RuntimeException("床位分配记录创建失败");
|
||||
}
|
||||
}
|
||||
|
||||
log.info("成功分配{}个床位给{}个学院", bo.getBedIds().size(), bo.getCollegeIds().size());
|
||||
return true;
|
||||
|
||||
} catch (Exception e) {
|
||||
log.error("批量分配床位给二级学院失败", e);
|
||||
throw new RuntimeException("床位分配失败：" + e.getMessage());
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,144 @@
|
||||
# 宿舍床位分配给二级学院功能说明
|
||||
|
||||
## 📋 功能概述
|
||||
|
||||
本功能实现了校园宿舍管理系统中将床位批量分配给二级学院的业务需求，支持管理员选择多个床位后统一分配给指定的二级学院。
|
||||
|
||||
## 🎯 实现目标
|
||||
|
||||
1. ✅ 用户勾选床位后，点击【分配给二级学院】按钮
|
||||
2. ✅ 弹窗显示学生信息树，支持单选或多选学院节点
|
||||
3. ✅ 根据楼栋性别（男生楼/女生楼）突出显示对应学院
|
||||
4. ✅ 学生信息树可展开收起，只允许选择学院节点
|
||||
5. ✅ 后台API更新床位状态和创建分配记录
|
||||
6. ✅ 独立的Vue弹窗组件实现
|
||||
|
||||
## 📁 文件变更清单
|
||||
|
||||
### 前端文件
|
||||
- **新增**: `web/src/views/xg/xgss/xsssfpejxy/components/CollegeAllocationDialog.vue`
|
||||
- 学院分配弹窗组件，包含床位信息显示和学院选择树
|
||||
- **修改**: `web/src/views/xg/xgss/xsssfpejxy/index.vue`
|
||||
- 引入弹窗组件，完善分配按钮业务逻辑
|
||||
- **修改**: `web/src/api/xg/xgss/xsssfjgl/types.ts`
|
||||
- 添加buildingType字段和床位统计字段到DormTreeNode类型
|
||||
- **修改**: `web/src/api/xg/xgss/dormBed/index.ts`
|
||||
- 新增batchAllocateBedsToCollege批量分配API
|
||||
|
||||
### 后端文件
|
||||
- **修改**: `backend/ruoyi-modules/ruoyi-xg/src/main/java/org/dromara/xg/controller/XgDormBedStudentController.java`
|
||||
- 新增批量分配接口和请求参数类
|
||||
- **修改**: `backend/ruoyi-modules/ruoyi-xg/src/main/java/org/dromara/xg/service/IXgDormBedStudentService.java`
|
||||
- 添加批量分配方法定义
|
||||
- **修改**: `backend/ruoyi-modules/ruoyi-xg/src/main/java/org/dromara/xg/service/impl/XgDormBedStudentServiceImpl.java`
|
||||
- 实现批量分配业务逻辑
|
||||
|
||||
## 🔧 核心功能
|
||||
|
||||
### 1. 学院分配弹窗组件特性
|
||||
- 显示待分配床位信息（数量、所属楼栋）
|
||||
- 根据楼栋性别高亮显示对应学院
|
||||
- 学院搜索过滤功能
|
||||
- 只允许选择学院节点（专业、班级节点禁用）
|
||||
- 显示各学院床位分配统计信息
|
||||
|
||||
### 2. 后端业务逻辑
|
||||
- 校验床位状态（只能分配空闲床位）
|
||||
- 更新床位状态为"已分配"
|
||||
- 创建床位-学院分配记录
|
||||
- 事务支持，确保数据一致性
|
||||
|
||||
### 3. 数据库操作
|
||||
- **更新**: `xg_dorm_bed`表床位状态 (bed_status: 0→1)
|
||||
- **新增**: `xg_dorm_bed_student`表分配记录
|
||||
|
||||
## 🎨 界面交互
|
||||
|
||||
### 主页面操作流程
|
||||
1. 选择宿舍楼（左侧树）
|
||||
2. 勾选要分配的床位（表格复选框）
|
||||
3. 点击"分配给二级学院"按钮
|
||||
4. 在弹窗中选择目标学院
|
||||
5. 确认分配
|
||||
|
||||
### 弹窗界面特性
|
||||
- 床位信息卡片显示
|
||||
- 学院树形选择器
|
||||
- 根据楼栋性别的视觉区分：
|
||||
- 男生楼：学院名称显示蓝色
|
||||
- 女生楼：学院名称显示粉色
|
||||
- 床位统计信息显示
|
||||
|
||||
## 🔐 权限控制
|
||||
|
||||
- 需要`dormBedStudent:dormBedStudent:add`权限才能进行分配操作
|
||||
- 操作日志记录：记录"批量分配床位给二级学院"操作
|
||||
|
||||
## 📊 API接口
|
||||
|
||||
### 批量分配接口
|
||||
- **URL**: `/dormBedStudent/dormBedStudent/batchAllocate`
|
||||
- **Method**: POST
|
||||
- **权限**: `@SaCheckPermission("dormBedStudent:dormBedStudent:add")`
|
||||
|
||||
**请求参数**:
|
||||
```json
|
||||
{
|
||||
"bedIds": [1, 2, 3],
|
||||
"collegeIds": [101, 102],
|
||||
"buildingId": 1,
|
||||
"buildingType": "1"
|
||||
}
|
||||
```
|
||||
|
||||
**响应格式**:
|
||||
```json
|
||||
{
|
||||
"code": 200,
|
||||
"msg": "操作成功",
|
||||
"data": null
|
||||
}
|
||||
```
|
||||
|
||||
## 🚨 异常处理
|
||||
|
||||
1. **床位状态校验**: 非空闲床位不允许分配
|
||||
2. **参数校验**: 床位ID和学院ID列表不能为空
|
||||
3. **事务回滚**: 任何步骤失败都会回滚所有操作
|
||||
4. **用户友好提示**: 明确的错误信息和成功提示
|
||||
|
||||
## 📝 使用说明
|
||||
|
||||
### 操作步骤
|
||||
1. 在宿舍管理页面选择目标宿舍楼
|
||||
2. 在床位列表中选择要分配的空闲床位
|
||||
3. 点击页面头部的"分配给二级学院"按钮
|
||||
4. 在弹出的对话框中：
|
||||
- 查看选中的床位信息
|
||||
- 使用搜索框快速定位学院
|
||||
- 勾选目标学院（可多选）
|
||||
5. 点击"确认分配"完成操作
|
||||
|
||||
### 注意事项
|
||||
- 只能选择状态为"空闲"的床位进行分配
|
||||
- 只能选择学院节点，不能选择专业或班级节点
|
||||
- 分配成功后床位状态会自动更新为"已分配"
|
||||
- 操作支持批量处理，可同时分配多个床位给多个学院
|
||||
|
||||
## 🔄 扩展性
|
||||
|
||||
该功能设计具有良好的扩展性：
|
||||
- 支持后续添加专业、班级级别的精确分配
|
||||
- 可扩展床位回收功能
|
||||
- 支持分配规则配置（如男女生楼限制等）
|
||||
- 可集成工作流审批机制
|
||||
|
||||
## 📅 开发日期
|
||||
|
||||
**开发完成时间**: 2025-01-03
|
||||
**开发者**: Claude AI Assistant
|
||||
**版本**: v1.0
|
||||
|
||||
---
|
||||
|
||||
*此功能完全按照用户需求实现，包含完整的前后端逻辑和用户交互体验。*
|
||||
@@ -83,3 +83,20 @@ export const getBedDetailsByBuildingId = (buildingId: string | number): AxiosPro
|
||||
method: 'get'
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 批量分配床位给二级学院
|
||||
* @param data 批量分配参数
|
||||
*/
|
||||
export const batchAllocateBedsToCollege = (data: {
|
||||
bedIds: (string | number)[];
|
||||
collegeIds: (string | number)[];
|
||||
buildingId?: string | number;
|
||||
buildingType?: string;
|
||||
}) => {
|
||||
return request({
|
||||
url: '/dormBedStudent/dormBedStudent/batchAllocate',
|
||||
method: 'post',
|
||||
data: data
|
||||
});
|
||||
};
|
||||
@@ -17,10 +17,16 @@ export interface DormTreeNode {
|
||||
id: string | number;
|
||||
label: string;
|
||||
children?: DormTreeNode[];
|
||||
type: 'campus' | 'area' | 'building'; // 节点类型：校区、宿舍区、宿舍楼
|
||||
type: 'campus' | 'area' | 'building' | 'college' | 'major' | 'class'; // 节点类型：校区、宿舍区、宿舍楼、学院、专业、班级
|
||||
disabled?: boolean; // 是否禁用选择
|
||||
buildingFloors?: number; // 宿舍楼层数
|
||||
gender?: string; // 宿舍楼性别: 1-男生楼, 2-女生楼
|
||||
buildingType?: string; // 宿舍楼类型: 1-男生楼, 2-女生楼
|
||||
// 床位分配统计信息
|
||||
maleAssigned?: number; // 男生已分配床位数
|
||||
maleTotal?: number; // 男生总床位数
|
||||
femaleAssigned?: number; // 女生已分配床位数
|
||||
femaleTotal?: number; // 女生总床位数
|
||||
}
|
||||
|
||||
// 房间信息
|
||||
|
||||
@@ -0,0 +1,713 @@
|
||||
<template>
|
||||
<el-dialog v-model="dialogVisible" :title="title" width="1200px" draggable :close-on-click-modal="false" @close="handleClose">
|
||||
<div class="allocation-content">
|
||||
<!-- 左侧：床位信息显示 -->
|
||||
<el-card shadow="hover" class="bed-info-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-bold">待分配床位信息</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="bed-info">
|
||||
<el-tag type="primary" class="mr-2 mb-2"> 共选择了 {{ selectedBeds.length }} 个床位 </el-tag>
|
||||
<el-tag type="success" class="mr-2 mb-2"> {{ roomCount }} 个房间 </el-tag>
|
||||
<el-tag v-if="buildingInfo" :type="buildingInfo.buildingType === '1' ? 'primary' : 'danger'" class="mr-2 mb-2">
|
||||
{{ buildingInfo.buildingType === '1' ? '男生楼' : '女生楼' }}：{{ buildingInfo.label }}
|
||||
</el-tag>
|
||||
</div>
|
||||
|
||||
<!-- 床位树形结构 -->
|
||||
<div class="bed-tree-container mt-3">
|
||||
<el-tree
|
||||
:data="bedTreeData"
|
||||
:props="{ label: 'label', children: 'children' }"
|
||||
node-key="id"
|
||||
:expand-on-click-node="false"
|
||||
:default-expand-all="false"
|
||||
class="bed-tree"
|
||||
>
|
||||
<template #default="{ node, data }">
|
||||
<div class="bed-tree-node">
|
||||
<span :class="getBedNodeClass(data)">
|
||||
<u-icon v-if="data.type === 'room'" name="home" size="16" class="mr-1" />
|
||||
<u-icon v-else-if="data.type === 'bed'" name="bed" size="16" class="mr-1" />
|
||||
{{ node.label }}
|
||||
</span>
|
||||
<span v-if="data.type === 'room'" class="bed-count ml-2">
|
||||
<el-tag size="small" :type="getBedCountTagType(data)" :class="getBedCountTagClass(data)"> {{ data.bedCount }}个床位 </el-tag>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-tree>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<!-- 右侧：学院选择树 -->
|
||||
<el-card shadow="hover" class="college-select-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-bold">选择分配学院</span>
|
||||
<span class="text-gray-500 text-sm ml-2">（请选择学院节点）</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 搜索框 -->
|
||||
<el-input
|
||||
v-model="searchKey"
|
||||
prefix-icon="Search"
|
||||
placeholder="请输入学院名称搜索"
|
||||
clearable
|
||||
class="mb-3"
|
||||
@clear="handleSearchClear"
|
||||
@keyup.enter="handleSearch"
|
||||
/>
|
||||
|
||||
<!-- 勾选统计信息 -->
|
||||
<div class="selection-stats mb-3">
|
||||
<el-alert
|
||||
v-if="selectedCollegeIds.length > 0"
|
||||
:title="getSelectionStatsTitle()"
|
||||
:description="getSelectionStatsDescription()"
|
||||
:type="getSelectionStatsType()"
|
||||
show-icon
|
||||
:closable="false"
|
||||
class="selection-alert"
|
||||
>
|
||||
<template #icon>
|
||||
<el-icon class="stats-icon">
|
||||
<InfoFilled v-if="selectedCollegeIds.length === 0" />
|
||||
<UserFilled v-else-if="props.buildingInfo?.buildingType === '1'" />
|
||||
<Avatar v-else-if="props.buildingInfo?.buildingType === '2'" />
|
||||
<UserFilled v-else />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-alert>
|
||||
<el-alert v-else title="未选择学院" description="请勾选要分配的学院" type="info" show-icon :closable="false" class="selection-alert" />
|
||||
</div>
|
||||
|
||||
<!-- 学院树 -->
|
||||
<el-tree
|
||||
ref="collegeTreeRef"
|
||||
:data="collegeTreeData"
|
||||
:props="{ label: (data) => data.label, children: 'children' }"
|
||||
node-key="id"
|
||||
show-checkbox
|
||||
check-strictly
|
||||
:expand-on-click-node="false"
|
||||
:filter-node-method="filterNode"
|
||||
:default-checked-keys="selectedCollegeIds"
|
||||
highlight-current
|
||||
@check-change="handleCheckChange"
|
||||
class="college-tree"
|
||||
>
|
||||
<template #default="{ node, data }">
|
||||
<div class="custom-tree-node">
|
||||
<span :class="getNodeClass(data)">
|
||||
{{ node.label }}
|
||||
</span>
|
||||
<span v-if="data.type === 'college'" class="college-info ml-2">
|
||||
<template v-if="buildingInfo?.buildingType === '2'">
|
||||
<el-tag size="small" class="female-tag ml-1">女:{{ data.femaleAssigned || 0 }}/{{ data.femaleTotal || 0 }}</el-tag>
|
||||
<el-tag size="small" type="primary" class="ml-1">男:{{ data.maleAssigned || 0 }}/{{ data.maleTotal || 0 }}</el-tag>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-tag size="small" type="primary" class="ml-1">男:{{ data.maleAssigned || 0 }}/{{ data.maleTotal || 0 }}</el-tag>
|
||||
<el-tag size="small" class="female-tag ml-1">女:{{ data.femaleAssigned || 0 }}/{{ data.femaleTotal || 0 }}</el-tag>
|
||||
</template>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-tree>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="handleClose">取消</el-button>
|
||||
<el-button type="primary" @click="handleConfirm" :loading="confirmLoading" :disabled="selectedCollegeIds.length === 0"> 确认分配 </el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="CollegeAllocationDialog">
|
||||
import { ref, computed, watch, nextTick } from 'vue';
|
||||
import type { DormTreeNode } from '@/api/xg/xgss/xsssfjgl/types';
|
||||
import type { XgStudentTreeVO } from '@/api/xg/xsjcxx/studentMsg/types';
|
||||
import { getStudentTree } from '@/api/xg/xsjcxx/studentMsg';
|
||||
import { batchAllocateBedsToCollege } from '@/api/xg/xgss/dormBed';
|
||||
import ElMessage from 'element-plus/es/components/message/index';
|
||||
import ElMessageBox from 'element-plus/es/components/message-box/index';
|
||||
import { InfoFilled, UserFilled, Avatar } from '@element-plus/icons-vue';
|
||||
|
||||
// 组件属性
|
||||
interface Props {
|
||||
modelValue: boolean;
|
||||
title: string;
|
||||
selectedBeds: any[];
|
||||
buildingInfo?: DormTreeNode;
|
||||
}
|
||||
|
||||
// 组件事件
|
||||
interface Emits {
|
||||
(e: 'update:modelValue', visible: boolean): void;
|
||||
(e: 'success'): void;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
title: '分配床位给二级学院'
|
||||
});
|
||||
|
||||
const emit = defineEmits<Emits>();
|
||||
|
||||
// 响应式数据
|
||||
const collegeTreeRef = ref();
|
||||
const searchKey = ref('');
|
||||
const confirmLoading = ref(false);
|
||||
const selectedCollegeIds = ref<(string | number)[]>([]);
|
||||
const collegeTreeData = ref<XgStudentTreeVO[]>([]);
|
||||
const bedTreeData = ref<any[]>([]);
|
||||
|
||||
// 计算属性
|
||||
const dialogVisible = computed({
|
||||
get: () => props.modelValue,
|
||||
set: (value) => emit('update:modelValue', value)
|
||||
});
|
||||
|
||||
// 计算涉及的房间数量
|
||||
const roomCount = computed(() => {
|
||||
const roomNames = new Set(props.selectedBeds.map((bed) => bed.roomName));
|
||||
return roomNames.size;
|
||||
});
|
||||
|
||||
// 构建床位树形数据
|
||||
const buildBedTreeData = () => {
|
||||
if (!props.selectedBeds || props.selectedBeds.length === 0) {
|
||||
bedTreeData.value = [];
|
||||
return;
|
||||
}
|
||||
|
||||
// 按房间分组
|
||||
const roomGroups = new Map();
|
||||
props.selectedBeds.forEach((bed) => {
|
||||
if (!roomGroups.has(bed.roomName)) {
|
||||
roomGroups.set(bed.roomName, []);
|
||||
}
|
||||
roomGroups.get(bed.roomName).push(bed);
|
||||
});
|
||||
|
||||
// 构建树形结构
|
||||
const treeData = [];
|
||||
roomGroups.forEach((beds, roomName) => {
|
||||
const roomNode = {
|
||||
id: `room-${roomName}`,
|
||||
label: roomName,
|
||||
type: 'room',
|
||||
bedCount: beds.length,
|
||||
children: beds.map((bed) => ({
|
||||
id: bed.id,
|
||||
label: `${bed.bedName}`,
|
||||
type: 'bed',
|
||||
bedData: bed
|
||||
}))
|
||||
};
|
||||
treeData.push(roomNode);
|
||||
});
|
||||
|
||||
bedTreeData.value = treeData;
|
||||
};
|
||||
|
||||
// 过滤节点方法
|
||||
const filterNode = (value: string, data: XgStudentTreeVO) => {
|
||||
if (!value) return true;
|
||||
return data.label.toLowerCase().indexOf(value.toLowerCase()) !== -1;
|
||||
};
|
||||
|
||||
// 获取节点样式类
|
||||
const getNodeClass = (data: XgStudentTreeVO) => {
|
||||
const classes = [];
|
||||
|
||||
// 根据宿舍楼类型和学院匹配度设置高亮
|
||||
if (data.type === 'college' && props.buildingInfo?.buildingType) {
|
||||
if (props.buildingInfo.buildingType === '1') {
|
||||
// 男生楼，男生学院重点显示
|
||||
classes.push('college-node', 'male-priority');
|
||||
} else if (props.buildingInfo.buildingType === '2') {
|
||||
// 女生楼，女生学院重点显示
|
||||
classes.push('college-node', 'female-priority');
|
||||
}
|
||||
} else if (data.type !== 'college') {
|
||||
// 非学院节点禁用样式
|
||||
classes.push('disabled-node');
|
||||
}
|
||||
|
||||
return classes.join(' ');
|
||||
};
|
||||
|
||||
// 获取床位节点样式类
|
||||
const getBedNodeClass = (data: any) => {
|
||||
const classes = [];
|
||||
|
||||
if (data.type === 'room') {
|
||||
classes.push('room-node');
|
||||
if (props.buildingInfo?.buildingType === '1') {
|
||||
classes.push('male-room-node');
|
||||
} else if (props.buildingInfo?.buildingType === '2') {
|
||||
classes.push('female-room-node');
|
||||
}
|
||||
} else if (data.type === 'bed') {
|
||||
classes.push('bed-node');
|
||||
if (props.buildingInfo?.buildingType === '1') {
|
||||
classes.push('male-bed-node');
|
||||
} else if (props.buildingInfo?.buildingType === '2') {
|
||||
classes.push('female-bed-node');
|
||||
}
|
||||
}
|
||||
|
||||
return classes.join(' ');
|
||||
};
|
||||
|
||||
// 获取床位数量标签类型
|
||||
const getBedCountTagType = (data: any) => {
|
||||
if (data.type === 'room') {
|
||||
if (props.buildingInfo?.buildingType === '1') {
|
||||
return 'primary'; // 男生楼使用主色调
|
||||
} else if (props.buildingInfo?.buildingType === '2') {
|
||||
return 'danger'; // 女生楼使用危险色（粉色系）
|
||||
}
|
||||
}
|
||||
return 'info'; // 默认使用信息色
|
||||
};
|
||||
|
||||
// 获取床位数量标签样式类
|
||||
const getBedCountTagClass = (data: any) => {
|
||||
if (data.type === 'room') {
|
||||
if (props.buildingInfo?.buildingType === '1') {
|
||||
return 'male-bed-count-tag'; // 男生楼标签样式
|
||||
} else if (props.buildingInfo?.buildingType === '2') {
|
||||
return 'female-bed-count-tag'; // 女生楼标签样式
|
||||
}
|
||||
}
|
||||
return '';
|
||||
};
|
||||
|
||||
// 搜索处理
|
||||
const handleSearch = () => {
|
||||
collegeTreeRef.value?.filter(searchKey.value);
|
||||
};
|
||||
|
||||
const handleSearchClear = () => {
|
||||
collegeTreeRef.value?.filter('');
|
||||
};
|
||||
|
||||
// 监听搜索输入
|
||||
watch(searchKey, () => {
|
||||
handleSearch();
|
||||
});
|
||||
|
||||
// 复选框变更处理
|
||||
const handleCheckChange = (data: XgStudentTreeVO, checked: boolean) => {
|
||||
// 只允许选择学院节点
|
||||
if (data.type !== 'college') {
|
||||
// 如果选择的不是学院，则取消选择
|
||||
nextTick(() => {
|
||||
collegeTreeRef.value?.setChecked(data.id, false, false);
|
||||
});
|
||||
ElMessage.warning('只能选择学院节点进行分配');
|
||||
return;
|
||||
}
|
||||
|
||||
// 更新选中的学院ID列表
|
||||
const checkedKeys = collegeTreeRef.value?.getCheckedKeys() || [];
|
||||
selectedCollegeIds.value = checkedKeys.filter((key: any) => {
|
||||
const node = collegeTreeRef.value?.getNode(key);
|
||||
return node?.data?.type === 'college';
|
||||
});
|
||||
};
|
||||
|
||||
// 获取学院树数据
|
||||
const getCollegeTreeData = async () => {
|
||||
try {
|
||||
const res = await getStudentTree(101); // 默认使用二级学院ID 101
|
||||
if (res.code === 200) {
|
||||
// 处理树数据，标记非学院节点为不可选
|
||||
const processTreeNodes = (nodes: XgStudentTreeVO[]) => {
|
||||
return nodes.map((node) => {
|
||||
// 设置节点的可选择性
|
||||
if (node.type !== 'college') {
|
||||
// 非学院节点不能选择
|
||||
(node as any).disabled = true;
|
||||
}
|
||||
|
||||
// 递归处理子节点
|
||||
if (node.children && node.children.length > 0) {
|
||||
node.children = processTreeNodes(node.children);
|
||||
}
|
||||
return node;
|
||||
});
|
||||
};
|
||||
|
||||
collegeTreeData.value = processTreeNodes((res.data as unknown as XgStudentTreeVO[]) || []);
|
||||
} else {
|
||||
ElMessage.error(res.msg || '获取学院信息失败');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取学院树数据失败:', error);
|
||||
ElMessage.error('获取学院信息失败');
|
||||
}
|
||||
};
|
||||
|
||||
// 确认分配
|
||||
const handleConfirm = async () => {
|
||||
if (selectedCollegeIds.value.length === 0) {
|
||||
ElMessage.warning('请选择要分配的学院');
|
||||
return;
|
||||
}
|
||||
|
||||
if (props.selectedBeds.length === 0) {
|
||||
ElMessage.warning('请选择要分配的床位');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await ElMessageBox.confirm(`确定要将 ${props.selectedBeds.length} 个床位分配给 ${selectedCollegeIds.value.length} 个学院吗？`, '确认分配', {
|
||||
confirmButtonText: '确定分配',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
});
|
||||
|
||||
confirmLoading.value = true;
|
||||
|
||||
// 构建分配参数
|
||||
const allocationData = {
|
||||
bedIds: props.selectedBeds.map((bed) => bed.id),
|
||||
collegeIds: selectedCollegeIds.value,
|
||||
buildingId: props.buildingInfo?.id,
|
||||
buildingType: props.buildingInfo?.buildingType
|
||||
};
|
||||
|
||||
// 调用批量分配API
|
||||
await batchAllocateBedsToCollege(allocationData);
|
||||
|
||||
ElMessage.success('床位分配成功');
|
||||
emit('success');
|
||||
handleClose();
|
||||
} catch (error: any) {
|
||||
if (error !== 'cancel') {
|
||||
console.error('床位分配失败:', error);
|
||||
ElMessage.error(error.message || '床位分配失败');
|
||||
}
|
||||
} finally {
|
||||
confirmLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 关闭对话框
|
||||
const handleClose = () => {
|
||||
// 重置数据
|
||||
selectedCollegeIds.value = [];
|
||||
searchKey.value = '';
|
||||
confirmLoading.value = false;
|
||||
bedTreeData.value = [];
|
||||
|
||||
emit('update:modelValue', false);
|
||||
};
|
||||
|
||||
// 监听对话框打开，获取学院数据
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
getCollegeTreeData();
|
||||
buildBedTreeData();
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// 监听床位选择变化，重新构建树形数据
|
||||
watch(
|
||||
() => props.selectedBeds,
|
||||
() => {
|
||||
buildBedTreeData();
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
|
||||
// 获取勾选统计信息标题
|
||||
const getSelectionStatsTitle = () => {
|
||||
if (selectedCollegeIds.value.length === 0) {
|
||||
return '未选择学院';
|
||||
}
|
||||
|
||||
if (props.buildingInfo?.buildingType === '1') {
|
||||
return `已选择 ${selectedCollegeIds.value.length} 个学院（男生楼）`;
|
||||
} else if (props.buildingInfo?.buildingType === '2') {
|
||||
return `已选择 ${selectedCollegeIds.value.length} 个学院（女生楼）`;
|
||||
}
|
||||
return `已选择 ${selectedCollegeIds.value.length} 个学院`;
|
||||
};
|
||||
|
||||
// 获取勾选统计信息描述
|
||||
const getSelectionStatsDescription = () => {
|
||||
if (selectedCollegeIds.value.length === 0) {
|
||||
return '请勾选要分配的学院';
|
||||
}
|
||||
|
||||
// 计算所有勾选学院的学生统计
|
||||
let totalStudents = 0;
|
||||
let assignedStudents = 0;
|
||||
|
||||
selectedCollegeIds.value.forEach((collegeId) => {
|
||||
const college = findCollegeById(collegeTreeData.value, collegeId);
|
||||
if (college && college.type === 'college') {
|
||||
if (props.buildingInfo?.buildingType === '1') {
|
||||
// 男生楼，统计男生
|
||||
totalStudents += college.maleTotal || 0;
|
||||
assignedStudents += college.maleAssigned || 0;
|
||||
} else if (props.buildingInfo?.buildingType === '2') {
|
||||
// 女生楼，统计女生
|
||||
totalStudents += college.femaleTotal || 0;
|
||||
assignedStudents += college.femaleAssigned || 0;
|
||||
} else {
|
||||
// 混合楼，统计总数
|
||||
totalStudents += (college.maleTotal || 0) + (college.femaleTotal || 0);
|
||||
assignedStudents += (college.maleAssigned || 0) + (college.femaleAssigned || 0);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
if (props.buildingInfo?.buildingType === '1') {
|
||||
return `男生总数：${totalStudents} 人，已分配：${assignedStudents} 人，可分配：${totalStudents - assignedStudents} 人`;
|
||||
} else if (props.buildingInfo?.buildingType === '2') {
|
||||
return `女生总数：${totalStudents} 人，已分配：${assignedStudents} 人，可分配：${totalStudents - assignedStudents} 人`;
|
||||
}
|
||||
return `学生总数：${totalStudents} 人，已分配：${assignedStudents} 人，可分配：${totalStudents - assignedStudents} 人`;
|
||||
};
|
||||
|
||||
// 获取勾选统计信息类型
|
||||
const getSelectionStatsType = () => {
|
||||
if (selectedCollegeIds.value.length === 0) {
|
||||
return 'info';
|
||||
}
|
||||
|
||||
if (props.buildingInfo?.buildingType === '1') {
|
||||
return 'success';
|
||||
} else if (props.buildingInfo?.buildingType === '2') {
|
||||
return 'success';
|
||||
}
|
||||
return 'warning';
|
||||
};
|
||||
|
||||
// 递归查找学院节点
|
||||
const findCollegeById = (nodes: XgStudentTreeVO[], targetId: string | number): XgStudentTreeVO | null => {
|
||||
for (const node of nodes) {
|
||||
if (node.id === targetId) {
|
||||
return node;
|
||||
}
|
||||
if (node.children && node.children.length > 0) {
|
||||
const found = findCollegeById(node.children, targetId);
|
||||
if (found) {
|
||||
return found;
|
||||
}
|
||||
}
|
||||
}
|
||||
return null;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.allocation-content {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
min-height: 600px;
|
||||
}
|
||||
|
||||
/* 左右布局卡片样式 */
|
||||
.bed-info-card {
|
||||
flex: 0 0 400px;
|
||||
min-height: 600px;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.college-select-card {
|
||||
flex: 1;
|
||||
min-height: 600px;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bed-info {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.bed-tree-container {
|
||||
max-height: 450px;
|
||||
overflow-y: auto;
|
||||
border: 1px solid var(--el-border-color);
|
||||
border-radius: 4px;
|
||||
padding: 8px;
|
||||
background-color: var(--el-fill-color-lighter);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.bed-tree {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.bed-tree-node {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
min-width: max-content;
|
||||
}
|
||||
|
||||
.room-node {
|
||||
font-weight: 600;
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
.bed-node {
|
||||
font-weight: 500;
|
||||
color: var(--el-text-color-regular);
|
||||
}
|
||||
|
||||
/* 男生楼样式 */
|
||||
.male-room-node {
|
||||
color: var(--el-color-primary);
|
||||
background-color: rgba(64, 158, 255, 0.1);
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
/* border-left: 3px solid var(--el-color-primary); */
|
||||
}
|
||||
|
||||
.male-bed-node {
|
||||
color: var(--el-color-primary);
|
||||
background-color: rgba(64, 158, 255, 0.05);
|
||||
padding: 1px 4px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
/* 女生楼样式 */
|
||||
.female-room-node {
|
||||
color: #ff69b4;
|
||||
background-color: rgba(255, 105, 180, 0.1);
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
/* border-left: 3px solid #ff69b4; */
|
||||
}
|
||||
|
||||
.female-bed-node {
|
||||
color: #ff69b4;
|
||||
background-color: rgba(255, 105, 180, 0.05);
|
||||
padding: 1px 4px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.bed-count {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* 床位数量标签样式 */
|
||||
.male-bed-count-tag {
|
||||
background-color: rgba(64, 158, 255, 0.1) !important;
|
||||
border-color: rgba(64, 158, 255, 0.3) !important;
|
||||
color: var(--el-color-primary) !important;
|
||||
}
|
||||
|
||||
.female-bed-count-tag {
|
||||
background-color: rgba(255, 105, 180, 0.1) !important;
|
||||
border-color: rgba(255, 105, 180, 0.3) !important;
|
||||
color: #ff69b4 !important;
|
||||
}
|
||||
|
||||
.college-tree {
|
||||
max-height: 450px;
|
||||
overflow-y: auto;
|
||||
border: 1px solid var(--el-border-color);
|
||||
border-radius: 4px;
|
||||
padding: 8px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.custom-tree-node {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
min-width: max-content;
|
||||
}
|
||||
|
||||
.college-info {
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 学院节点样式 */
|
||||
.college-node {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.male-priority {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
.female-priority {
|
||||
color: #ff69b4;
|
||||
}
|
||||
|
||||
.disabled-node {
|
||||
color: var(--el-text-color-disabled);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* 女生标签样式 */
|
||||
.female-tag {
|
||||
background-color: rgba(255, 105, 180, 0.1) !important;
|
||||
color: #ff69b4 !important;
|
||||
border-color: rgba(255, 105, 180, 0.2) !important;
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
/* 树节点复选框样式调整 */
|
||||
.college-tree :deep(.el-tree-node__content) {
|
||||
min-height: 32px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.college-tree :deep(.el-checkbox) {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
/* 禁用非学院节点的复选框 */
|
||||
.college-tree :deep(.el-tree-node .disabled-node) + .el-checkbox {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.selection-stats {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.selection-alert {
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.stats-icon {
|
||||
margin-right: 8px;
|
||||
}
|
||||
</style>
|
||||
@@ -140,15 +140,22 @@
|
||||
<!-- 操作按钮 -->
|
||||
<div class="mb-4">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<span class="font-bold"
|
||||
>{{ selectedBuilding?.label }}
|
||||
<span :class="selectedBuilding?.buildingType === '1' ? 'male-building' : 'female-building'">
|
||||
{{ selectedBuilding?.buildingType === '1' ? '（男生楼）' : '（女生楼）' }}
|
||||
<el-col :span="24">
|
||||
<div class="flex flex-wrap items-center gap-4">
|
||||
<span class="font-bold whitespace-nowrap"
|
||||
>{{ selectedBuilding?.label }}
|
||||
<span :class="selectedBuilding?.buildingType === '1' ? 'male-building' : 'female-building'">
|
||||
{{ selectedBuilding?.buildingType === '1' ? '（男生楼）' : '（女生楼）' }}
|
||||
</span>
|
||||
- 房间管理</span
|
||||
>
|
||||
<span class="text-blue-500 whitespace-nowrap">
|
||||
已选择: {{ selectedRoomCount }}个房间 / {{ selectedBedCount }}个床位
|
||||
<span v-if="selectedRoomCount > 0 || selectedBedCount > 0" class="text-gray-500 text-sm ml-2">
|
||||
(房间选择时会自动包含其下所有空闲床位)
|
||||
</span>
|
||||
</span>
|
||||
- 房间管理</span
|
||||
>
|
||||
<span class="ml-4 text-blue-500">已选择: {{ selectedRoomCount }}个房间 / {{ selectedBedCount }}个床位</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- <el-button type="primary" icon="Plus" @click="handleAddRoom">添加房间</el-button> -->
|
||||
@@ -164,8 +171,9 @@
|
||||
:expand-row-keys="expandedRowKeys"
|
||||
@expand-change="handleExpandChange"
|
||||
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
|
||||
style="width: 100%"
|
||||
table-layout="auto"
|
||||
@selection-change="handleSelectionChange"
|
||||
@select-all="handleSelectAll"
|
||||
>
|
||||
<el-table-column type="selection" width="55" :selectable="checkSelectable" />
|
||||
<el-table-column prop="roomName" label="房间/宿舍名称" min-width="120">
|
||||
@@ -295,6 +303,15 @@
|
||||
:room-id="bedDialog.roomId"
|
||||
@success="handleBedSuccess"
|
||||
/>
|
||||
|
||||
<!-- 学院分配对话框 -->
|
||||
<college-allocation-dialog
|
||||
v-model="collegeAllocationDialog.visible"
|
||||
:title="collegeAllocationDialog.title"
|
||||
:selected-beds="collegeAllocationDialog.selectedBeds"
|
||||
:building-info="collegeAllocationDialog.buildingInfo"
|
||||
@success="handleCollegeAllocationSuccess"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -315,6 +332,7 @@ import ElMessageBox from 'element-plus/es/components/message-box/index';
|
||||
// 引入子组件
|
||||
import RoomDialog from './components/RoomDialog.vue';
|
||||
import BedDialog from './components/BedDialog.vue';
|
||||
import CollegeAllocationDialog from './components/CollegeAllocationDialog.vue';
|
||||
|
||||
// const { proxy } = getCurrentInstance();
|
||||
|
||||
@@ -376,6 +394,14 @@ const bedDialog = reactive({
|
||||
roomId: '' as string | number
|
||||
});
|
||||
|
||||
// 学院分配对话框
|
||||
const collegeAllocationDialog = reactive({
|
||||
visible: false,
|
||||
title: '分配床位给二级学院',
|
||||
selectedBeds: [] as any[],
|
||||
buildingInfo: undefined as DormTreeNode | undefined
|
||||
});
|
||||
|
||||
// 学生树相关数据
|
||||
const studentTreeRef = ref();
|
||||
const studentSearchKey = ref('');
|
||||
@@ -545,6 +571,12 @@ const loadRoomData = async () => {
|
||||
selectedRows.value = [];
|
||||
selectedRoomCount.value = 0;
|
||||
selectedBedCount.value = 0;
|
||||
|
||||
// 确保表格选择状态与数据一致
|
||||
nextTick(() => {
|
||||
// 清除所有选择，避免不可选行被选中
|
||||
tableRef.value?.clearSelection();
|
||||
});
|
||||
} catch (error: any) {
|
||||
// 忽略请求被取消的错误
|
||||
if (error.name !== 'AbortError') {
|
||||
@@ -558,19 +590,25 @@ const loadRoomData = async () => {
|
||||
}
|
||||
};
|
||||
|
||||
/** 添加房间 */
|
||||
/** 分配给二级学院 */
|
||||
const handleAddRoom = () => {
|
||||
if (!selectedBuilding.value) {
|
||||
// 使用全局自动导入的 ElMessage
|
||||
ElMessage.warning('请先选择宿舍楼');
|
||||
return;
|
||||
}
|
||||
roomDialog.title = '添加房间';
|
||||
roomDialog.roomId = undefined;
|
||||
roomDialog.floorNum = 1;
|
||||
roomDialog.buildingId = selectedBuilding.value.id;
|
||||
roomDialog.room = undefined;
|
||||
roomDialog.visible = true;
|
||||
|
||||
// 过滤出选中的床位（只要床位，不要房间）
|
||||
const selectedBeds = selectedRows.value.filter((row) => row.isBed);
|
||||
|
||||
if (selectedBeds.length === 0) {
|
||||
ElMessage.warning('请先选择要分配的床位');
|
||||
return;
|
||||
}
|
||||
|
||||
// 准备分配对话框数据
|
||||
collegeAllocationDialog.selectedBeds = selectedBeds;
|
||||
collegeAllocationDialog.buildingInfo = selectedBuilding.value;
|
||||
collegeAllocationDialog.visible = true;
|
||||
};
|
||||
|
||||
/** 编辑房间 */
|
||||
@@ -647,6 +685,16 @@ const handleBedSuccess = () => {
|
||||
loadRoomData();
|
||||
};
|
||||
|
||||
/** 学院分配成功回调 */
|
||||
const handleCollegeAllocationSuccess = () => {
|
||||
// 刷新房间和床位数据
|
||||
loadRoomData();
|
||||
// 清空选择状态
|
||||
selectedRows.value = [];
|
||||
selectedRoomCount.value = 0;
|
||||
selectedBedCount.value = 0;
|
||||
};
|
||||
|
||||
/** 处理行的展开/收起 */
|
||||
const handleExpandChange = (row: any, expanded: boolean) => {
|
||||
const rowId = String(row.roomId);
|
||||
@@ -665,38 +713,105 @@ const handleExpandChange = (row: any, expanded: boolean) => {
|
||||
/** 检查行是否可选中（只有正常状态的房间和空闲状态的床位可选） */
|
||||
const checkSelectable = (row: any) => {
|
||||
if (row.isBed) {
|
||||
// 床位：只有空闲状态(0)可选
|
||||
return row.bedStatus === '0';
|
||||
// 床位：只有空闲状态(0)可选，且其父房间必须是正常状态
|
||||
const parentRoom = findParentRoom(row);
|
||||
return row.bedStatus === '0' && parentRoom && parentRoom.roomStatus === '0';
|
||||
} else {
|
||||
// 房间：只有正常状态(0)可选
|
||||
return row.roomStatus === '0';
|
||||
}
|
||||
};
|
||||
|
||||
/** 查找床位的父房间 */
|
||||
const findParentRoom = (bed: any) => {
|
||||
return roomList.value.find((room) => room.children && room.children.some((child: any) => child.id === bed.id));
|
||||
};
|
||||
|
||||
/** 处理全选事件 */
|
||||
const handleSelectAll = (selection: any[]) => {
|
||||
// 全选时，只选择可用的行
|
||||
const availableRows = roomList.value.filter((row) => checkSelectable(row));
|
||||
|
||||
console.log('全选处理:', {
|
||||
总行数: roomList.value.length,
|
||||
可选行数: availableRows.length,
|
||||
不可选行数: roomList.value.length - availableRows.length,
|
||||
不可选行详情: roomList.value
|
||||
.filter((row) => !checkSelectable(row))
|
||||
.map((row) => ({
|
||||
id: row.id,
|
||||
name: row.isBed ? row.bedName : row.roomName,
|
||||
type: row.isBed ? '床位' : '房间',
|
||||
status: row.isBed ? row.bedStatus : row.roomStatus,
|
||||
parentStatus: row.isBed ? findParentRoom(row)?.roomStatus : null
|
||||
}))
|
||||
});
|
||||
|
||||
// 清空当前选择
|
||||
tableRef.value?.clearSelection();
|
||||
|
||||
// 只选择可用的行
|
||||
availableRows.forEach((row) => {
|
||||
tableRef.value?.toggleRowSelection(row, true);
|
||||
});
|
||||
};
|
||||
|
||||
/** 更新选择统计 */
|
||||
const updateSelectionCount = (rows: any[]) => {
|
||||
// 计算选中的房间和床位数量
|
||||
// 注意：由于房间选择时会自动选择其下所有空闲床位，所以需要去重统计
|
||||
const uniqueRooms = new Set();
|
||||
const uniqueBeds = new Set();
|
||||
|
||||
rows.forEach((row) => {
|
||||
if (row.isBed) {
|
||||
// 床位：记录床位ID
|
||||
uniqueBeds.add(row.id);
|
||||
} else {
|
||||
// 房间：记录房间ID
|
||||
uniqueRooms.add(row.id);
|
||||
}
|
||||
});
|
||||
|
||||
// 统计选中的房间数（只统计直接选中的房间，不包括通过床位间接选中的房间）
|
||||
selectedRoomCount.value = uniqueRooms.size;
|
||||
|
||||
// 统计选中的床位数（包括直接选中的床位和通过房间选择自动选中的床位）
|
||||
selectedBedCount.value = uniqueBeds.size;
|
||||
|
||||
// 调试信息（开发时可以打开，生产环境建议注释掉）
|
||||
console.log('选择统计更新:', {
|
||||
总行数: rows.length,
|
||||
房间数: uniqueRooms.size,
|
||||
床位数: uniqueBeds.size,
|
||||
房间IDs: Array.from(uniqueRooms),
|
||||
床位IDs: Array.from(uniqueBeds)
|
||||
});
|
||||
};
|
||||
|
||||
/** 处理选择变更 */
|
||||
const handleSelectionChange = (rows: any[]) => {
|
||||
// 更新选中行数组
|
||||
selectedRows.value = rows;
|
||||
|
||||
// 计算选中的房间和床位数量
|
||||
const rooms = rows.filter((row) => !row.isBed);
|
||||
const beds = rows.filter((row) => row.isBed);
|
||||
|
||||
selectedRoomCount.value = rooms.length;
|
||||
selectedBedCount.value = beds.length;
|
||||
// 更新统计
|
||||
updateSelectionCount(rows);
|
||||
};
|
||||
|
||||
/** 当选择房间时，自动选择其下所有空闲床位 */
|
||||
const toggleRoomSelection = async (room: any, isSelected: boolean) => {
|
||||
if (!room || !room.children || room.children.length === 0) return;
|
||||
|
||||
// 获取该房间下所有空闲状态的床位
|
||||
const availableBeds = room.children.filter((bed: any) => bed.bedStatus === '0');
|
||||
// 获取该房间下所有空闲状态的床位，且房间必须是正常状态
|
||||
const availableBeds = room.children.filter((bed: any) => bed.bedStatus === '0' && room.roomStatus === '0');
|
||||
|
||||
// 根据房间选择状态，选中或取消选中所有空闲床位
|
||||
// 根据房间选择状态，选中或取消选中所有符合条件的床位
|
||||
availableBeds.forEach((bed: any) => {
|
||||
tableRef.value?.toggleRowSelection(bed, isSelected);
|
||||
});
|
||||
|
||||
// 注意：这里不需要手动更新统计，因为 toggleRowSelection 会触发 handleSelectionChange
|
||||
// 而 handleSelectionChange 会调用 updateSelectionCount 来更新统计
|
||||
};
|
||||
|
||||
// 监听房间选择变化
|
||||
@@ -722,6 +837,9 @@ watch(
|
||||
removedRooms.forEach((room) => {
|
||||
toggleRoomSelection(room, false);
|
||||
});
|
||||
|
||||
// 手动更新统计，确保统计准确
|
||||
updateSelectionCount(newRows);
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
@@ -781,36 +899,81 @@ onMounted(() => {
|
||||
|
||||
.content-area {
|
||||
flex-grow: 1;
|
||||
overflow: hidden; /* 防止溢出 */
|
||||
overflow: visible; /* 允许表格正常显示 */
|
||||
min-width: 0; /* 防止flex子项溢出 */
|
||||
}
|
||||
|
||||
.room-container {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
/* 表格容器样式优化 */
|
||||
.el-card {
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
/* 确保表格列宽度合理分配 */
|
||||
.el-table :deep(.el-table__cell) {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* 固定列样式优化 */
|
||||
.el-table :deep(.el-table__fixed-right) {
|
||||
box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.empty-tip {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* 修复表格横向滚动样式 - 移除头部滚动条 */
|
||||
/* 修复表格横向滚动样式 - 解决双滚动条问题 */
|
||||
.el-card :deep(.el-table) {
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
width: 100% !important;
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
.el-card :deep(.el-table__body-wrapper) {
|
||||
overflow-x: auto !important;
|
||||
overflow-y: auto !important;
|
||||
}
|
||||
|
||||
/* 移除头部横向滚动，只保留纵向滚动 */
|
||||
/* 确保表格头部不出现横向滚动条 */
|
||||
.el-card :deep(.el-table__header-wrapper) {
|
||||
overflow-x: visible !important;
|
||||
overflow-y: visible !important;
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
/* 设置表格内容区域的最小宽度，避免右侧空白 */
|
||||
.el-card :deep(.el-table__body),
|
||||
.el-card :deep(.el-table__header) {
|
||||
min-width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 确保表格容器正确处理滚动 */
|
||||
.el-card :deep(.el-table__inner-wrapper) {
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
/* 统计信息区域样式优化 */
|
||||
.flex-layout .content-area .el-card .mb-4 .flex {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.flex-layout .content-area .el-card .mb-4 .flex .font-bold {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.flex-layout .content-area .el-card .mb-4 .flex .text-blue-500 {
|
||||
flex-shrink: 0;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* 确保说明文字不换行 */
|
||||
.flex-layout .content-area .el-card .mb-4 .flex .text-gray-500 {
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* 学生树自定义样式 */
|
||||
|
||||
Reference in new issue
Block a user