cykj/hzdyjs

0 Fork 0

Files

T

zlwu a1901ac611 提交学生信息管理界面的代码

2025-07-25 22:13:38 +08:00

16 KiB

Raw Blame History

代码调整记录 - 2025-07-24 - zlwu

时间: 2025-07-24 23:52:00

变更概述

调整系统用户管理界面布局，从 el-col 布局改为 flex 布局，左侧部门树固定300px宽度，右侧占剩余空间。

具体变更内容

1. 修改文件

web/src/views/system/user/index.vue: 系统用户管理主界面

2. 问题描述

原先使用 el-col 布局，在不同屏幕尺寸下左右两侧宽度比例固定，用户希望左侧固定300px宽度，右侧占据剩余全部空间。

3. 解决方案

布局调整

将外层 <el-row :gutter="20"> 改为 <div style="display: flex; gap: 16px">
左侧 <el-col :lg="6" :xs="24"> 改为 <div style="width: 300px">
右侧 <el-col :lg="18" :xs="24"> 改为 <div style="flex: 1">
使用 flex 布局实现左侧固定宽度，右侧自适应

4. 优化效果

左侧部门树固定300px宽度，在任何屏幕尺寸下都保持一致
右侧用户列表和操作区域占据剩余全部空间，充分利用屏幕宽度
16px间距保持左右两侧的合理分隔

时间: 2025-07-24 23:45:00

变更概述

修复学生信息管理界面左侧部门树长文本显示问题，添加横向滚动条支持。

具体变更内容

1. 修改文件

web/src/views/studentMsg/studentMsg/index.vue: 学生信息管理主界面

2. 问题描述

左侧部门树在部门名称很长时，未出现横向滚动条，导致部门名称看不全。

3. 解决方案

CSS样式调整

为树组件添加专门的CSS类 .dept-tree
设置树容器固定宽度280px，超出时显示横向滚动条
强制树节点内容不换行，使用 white-space: nowrap !important
设置节点宽度根据内容自动调整 width: max-content
移除最大宽度限制，允许长文本完整显示

具体CSS修改

树容器样式 (.dept-tree):
- 固定宽度: width: 280px
- 启用滚动条: overflow-x: auto, overflow-y: auto
- 固定高度: height: 600px
树节点内容样式 (.dept-tree .el-tree-node__content):
- 强制不换行: white-space: nowrap !important
- 内容宽度自适应: width: max-content
树节点标签样式 (.dept-tree .el-tree-node__label):
- 移除最大宽度限制: max-width: none !important
- 允许内容溢出: overflow: visible !important
左侧面板样式调整:
- 设置为 overflow: visible 允许内容溢出显示滚动条

4. 影响范围

学生信息管理界面左侧部门树组件
改善长部门名称的显示体验

5. 测试验证

部门名称较长时能够完整显示
横向滚动条正常工作
不影响其他功能的正常使用

📋 同时修复用户管理界面

1. 修改文件

web/src/views/system/user/index.vue: 用户管理主界面

2. 问题描述

用户管理界面左侧部门树也存在相同问题，部门名称很长时没有横向滚动条。

3. 解决方案

采用与学生信息管理界面相同的修复方案：

为树组件添加 .dept-tree CSS类
移除内联样式，改用CSS类管理
使用:deep()深度选择器强制覆盖Element Plus默认样式
设置固定宽度270px，超出时显示横向滚动条

4. 修改内容

HTML结构调整

<!-- 修改前 -->
<el-tree
  class="mt-2"
  style="height: 600px; overflow-y: auto"
  ...
/>

<!-- 修改后 -->
<el-tree
  class="mt-2 dept-tree"
  ...
/>

CSS样式新增

.dept-tree {
  height: 600px;
  overflow-y: auto;
  overflow-x: auto;
  width: 270px;
  min-width: 270px;
}

.dept-tree :deep(.el-tree-node__label) {
  white-space: nowrap !important;
  max-width: none !important;
  text-overflow: unset !important;
  width: max-content !important;
}

5. 影响范围

用户管理界面左侧部门树组件
改善长部门名称的显示体验
保持与学生信息管理界面一致的用户体验

时间: 2025-07-24 22:30:00

变更概述

调整学生信息管理界面中新增按钮的弹窗内容，将原来的简单表单改为多tab页形式，支持完整的学生信息录入。

具体变更内容

1. 修改文件

web/src/views/studentMsg/studentMsg/index.vue: 学生信息管理主界面

2. 界面结构调整

弹窗布局改进

弹窗宽度从600px调整为1000px
将原来的单一表单改为6个tab页的结构
使用el-tabs组件管理多个tab页

Tab页组织

基础信息tab: 学号、身份证号、姓名、英文姓名、曾用名、性别、出生日期、民族、籍贯、政治面貌、户籍所在地、家庭地址、现住址、邮政编码、照片上传、手机号码、是否住校
扩展信息tab: 文化程度、户口类型、宗教信仰、生源地区、毕业院校、邮箱、QQ、微信、婚姻状况、紧急联系人信息、各种特殊情况标记
家庭信息tab: 父母信息、监护人信息、家庭经济状况
健康信息tab: 身高、体重、血型、健康状况、疾病史、过敏史等
学籍信息tab: 录取类别、学籍状态、入学信息、专业班级、宿舍信息
银行卡信息tab: 银行卡号、开户银行等

3. 功能增强

照片上传功能

使用el-upload组件实现照片上传
支持JPG/PNG格式，最大2MB
添加上传前的文件类型和大小校验
模拟照片上传API（实际项目中需要替换为真实接口）

数据结构扩展

扩展form数据结构，包含60+个字段
添加新字段的验证规则
新增activeTab状态管理当前激活的tab页

技术实现细节

添加Plus图标用于上传提示
添加照片上传相关的CSS样式
在reset和cancel方法中重置tab状态

4. 影响范围

学生信息管理的新增功能界面
数据结构扩展（需要后端API配合）

5. 后续工作

需要后端API支持新增的字段
需要实现真实的照片上传接口
可能需要更新数据库表结构以支持新字段

时间: 2025-07-24 21:15:00

变更概述

为学生管理员权限部门树接口增加全校学生管理员判断逻辑，实现全校管理员查看所有部门数据的功能。

具体变更内容

1. 修改文件

1.1 XgStudentManagerSourceServiceImpl.java

文件路径: backend/ruoyi-modules/ruoyi-xg/src/main/java/org/dromara/xg/service/impl/XgStudentManagerSourceServiceImpl.java
变更类型: 修改
变更方法: getCurrentUserAuthDeptTree()
变更说明: 增加全校学生管理员判断逻辑，根据用户类型返回不同权限的部门树数据
新增逻辑:
1. 判断当前用户是否为全校学生管理员（manager_type = '1'）
2. 如果是全校学生管理员，返回sys_dept.id=101下的所有部门数据，且所有节点都可点击
3. 如果不是全校学生管理员，继续使用原有的权限控制逻辑

全校学生管理员判断条件:

SELECT COUNT(1) FROM xg_student_manager 
WHERE user_id = ? AND deleted = '0' AND status = '0' AND manager_type = '1'

全校管理员部门查询SQL:

SELECT dept_id, dept_name, parent_id, dept_category, order_num FROM sys_dept 
WHERE (dept_id = 101 OR ancestors LIKE '%,101,%') AND status = '0' AND del_flag = '0' ORDER BY order_num

影响范围

权限控制: 全校学生管理员将获得全校所有部门的查看和操作权限
数据范围: 全校管理员可以看见sys_dept.id=101下面所有的数据
用户体验: 全校管理员的部门树中所有节点都可以点击（disabled=false）
兼容性: 非全校管理员的权限逻辑保持不变

时间: 2025-07-24 20:30:00

变更概述

调整学生管理员权限部门树接口的节点点击逻辑，让所有用户有权限的部门节点都可以点击。

具体变更内容

1. 修改文件

1.1 XgStudentManagerSourceServiceImpl.java

文件路径: backend/ruoyi-modules/ruoyi-xg/src/main/java/org/dromara/xg/service/impl/XgStudentManagerSourceServiceImpl.java
变更类型: 修改
变更方法: getCurrentUserAuthDeptTree()
变更说明: 调整部门节点的disabled属性判断逻辑
原逻辑: 只有班级节点（dept_category以"bj-"开头或部门名称包含"班"关键字）才可以点击
新逻辑: 所有在allDeptIds中的节点（用户有权限的节点）都可以点击

代码变更:

// 原代码
boolean isClass = (deptCategory != null && deptCategory.startsWith("bj-")) ||
        (deptName != null && deptName.contains("班"));
deptNode.setDisabled(!isClass);

// 新代码  
boolean isAuthorized = allDeptIds.contains(deptId);
deptNode.setDisabled(!isAuthorized);

影响范围

接口功能: 前端部门树组件中，用户有权限的所有部门节点都将变为可点击状态
用户体验: 提升了权限范围内部门选择的灵活性
兼容性: 不影响现有的权限判断逻辑，仅影响节点的可点击状态

时间: 2025-07-24 11:30:00

变更概述

开发学生管理员权限部门树接口，实现获取当前用户学生管理权限信息的功能。

具体变更内容

1. 新增文件

1.1 XgStudentManagerDeptTreeVo.java

文件路径: backend/ruoyi-modules/ruoyi-xg/src/main/java/org/dromara/xg/domain/vo/XgStudentManagerDeptTreeVo.java
变更类型: 新增
功能说明: 学生管理权限部门树视图对象，用于返回树形结构数据
主要字段:
- id: 部门ID (前端期望字段名)
- label: 部门名称 (前端期望字段名)
- parentId: 父部门ID
- deptCategory: 部门类别编码
- weight: 显示顺序 (前端期望字段名)
- disabled: 是否禁用（与clickable相反，前端期望字段名）
- children: 子部门列表

1.2 学生管理员授权关系API.md

文件路径: docs/开发文档/API/学生管理员授权关系API.md
变更类型: 新增
功能说明: 学生管理员授权关系API文档，包含所有相关接口的详细说明
内容包含: 8个接口的完整文档，包括新开发的获取当前用户权限部门树接口

2. 修改文件

2.1 IXgStudentManagerSourceService.java

文件路径: backend/ruoyi-modules/ruoyi-xg/src/main/java/org/dromara/xg/service/IXgStudentManagerSourceService.java
变更类型: 修改
变更内容:
- 新增import: XgStudentManagerDeptTreeVo
- 新增方法: getCurrentUserAuthDeptTree() - 获取当前用户的学生管理权限部门树

2.2 XgStudentManagerSourceServiceImpl.java

文件路径: backend/ruoyi-modules/ruoyi-xg/src/main/java/org/dromara/xg/service/impl/XgStudentManagerSourceServiceImpl.java
变更类型: 修改
变更内容:
- 新增import: XgStudentManagerDeptTreeVo, LoginHelper, Collections, Collectors
- 新增方法实现: getCurrentUserAuthDeptTree()
实现逻辑:
1. 获取当前登录用户ID
2. 关联查询 xg_student_manager 和 xg_student_manager_source 表获取授权资源
3. 关联查询 sys_dept 表获取部门信息和子节点
4. 向上查找父节点直到根节点(id=101)
5. 构建树形结构并标识班级节点为可点击
字段映射调整:
- deptId → id (前端期望字段名)
- deptName → label (前端期望字段名)
- orderNum → weight (前端期望字段名)
- clickable → disabled (逻辑相反，前端期望字段名)

2.3 XgStudentManagerSourceController.java

文件路径: backend/ruoyi-modules/ruoyi-xg/src/main/java/org/dromara/xg/controller/XgStudentManagerSourceController.java
变更类型: 修改
变更内容:
- 新增import: XgStudentManagerDeptTreeVo
- 新增接口: getCurrentUserAuthTree() - GET /currentUserAuthTree
接口特性:
- 无需入参，自动获取当前用户权限
- 权限标识: xgStudentManagerSource:studentManagerSource:query
- 返回树形结构，只有班级节点可点击

2.4 前端页面修改 - web/src/views/studentMsg/studentMsg/index.vue

文件路径: web/src/views/studentMsg/studentMsg/index.vue
变更类型: 修改
变更内容:
- 修改handleNodeClick函数：增加disabled节点检查，只允许班级节点点击
- 修改el-tree组件props：添加disabled: 'disabled'属性映射
功能改进:
- 用户点击非班级节点时显示提示："请选择班级节点"
- 树形组件自动处理disabled节点的视觉样式
- 前端已配置调用新的API接口: /xgStudentManagerSource/studentManagerSource/currentUserAuthTree

2.5 API文档总览.md

文件路径: docs/开发文档/API/API文档总览.md
变更类型: 修改
变更内容: 在学工管理模块API部分新增 学生管理员授权关系API 链接

技术要点

1. 复杂SQL查询实现

使用JdbcTemplate执行原生SQL，支持复杂的多表关联查询
通过ancestors字段实现部门层级关系的向上追溯
动态构建IN查询条件，支持可变数量的授权资源

2. 树形结构构建算法

使用HashMap快速索引部门节点
通过parentId关系构建父子节点关联
自动识别根节点和叶子节点

3. 权限控制逻辑

基于当前登录用户自动获取权限范围
支持多层级权限继承（子部门权限包含在父部门权限中）
只有班级节点设置为可点击状态（disabled=false）

4. 前后端字段适配

后端返回前端期望的字段名：id、label、disabled、weight
disabled字段逻辑：班级节点disabled=false（可点击），其他节点disabled=true（禁用）
班级识别逻辑：dept_category以"bj-"开头或部门名称包含"班"字

5. 数据类型处理

使用Number类型统一处理不同数据库的数值类型差异
安全的类型转换，避免ClassCastException

接口规范

请求路径

GET /xgStudentManagerSource/studentManagerSource/currentUserAuthTree

响应格式（更新后的字段名）

{
  "code": 200,
  "msg": "查询成功", 
  "data": [
    {
      "id": 101,
      "label": "杭州职业技术学院",
      "parentId": null,
      "deptCategory": "university",
      "weight": 1,
      "disabled": true,
      "children": [
        {
          "id": "1947947519575281665",
          "label": "园林设计231",
          "parentId": "1947850579286085634",
          "deptCategory": "bj-园林设计231",
          "weight": 10,
          "disabled": false,
          "children": []
        }
      ]
    }
  ]
}

测试验证

1. 功能测试

✅ 无权限用户返回空列表
✅ 有权限用户返回正确的部门树结构
✅ 班级节点disabled=false（可点击），其他节点disabled=true（禁用）
✅ 树形结构层级关系正确
✅ 按weight字段正确排序

2. 权限测试

✅ 需要正确的Token认证
✅ 需要xgStudentManagerSource:studentManagerSource:query权限
✅ 自动过滤当前用户无权限的部门

3. 前端界面测试

✅ 部门树正确显示，disabled节点有视觉区分
✅ 点击非班级节点显示提示信息
✅ 点击班级节点正常触发查询
✅ 字段映射正确：id、label、disabled、children

4. 数据权限测试

✅ 只返回当前用户有权限管理的部门
✅ 包含完整的父节点层级关系
✅ 支持多租户数据隔离

影响范围

新增了获取当前用户权限的API接口
修改了前端部门树的交互逻辑
不影响现有功能和接口
为前端权限控制提供了数据支持

后续计划

前端集成该接口实现权限控制
根据用户反馈优化树形结构展示
考虑添加缓存提升查询性能

变更执行人: zlwu
变更时间: 2025-07-24 11:30:00
代码提交: 待提交
测试状态: 开发测试通过
部署状态: 待部署

16 KiB Raw Blame History Unescape Escape

代码调整记录 - 2025-07-24 - zlwu

时间: 2025-07-24 23:52:00

变更概述

具体变更内容

1. 修改文件

2. 问题描述

3. 解决方案

布局调整

4. 优化效果

时间: 2025-07-24 23:45:00

变更概述

具体变更内容

1. 修改文件

2. 问题描述

3. 解决方案

CSS样式调整

具体CSS修改

4. 影响范围

5. 测试验证

📋 同时修复用户管理界面

1. 修改文件

2. 问题描述

3. 解决方案

4. 修改内容

HTML结构调整

CSS样式新增

5. 影响范围

时间: 2025-07-24 22:30:00

变更概述

具体变更内容

1. 修改文件

2. 界面结构调整

弹窗布局改进

Tab页组织

3. 功能增强

照片上传功能

数据结构扩展

技术实现细节

4. 影响范围

5. 后续工作

时间: 2025-07-24 21:15:00

变更概述

具体变更内容

1. 修改文件

1.1 XgStudentManagerSourceServiceImpl.java

影响范围

时间: 2025-07-24 20:30:00

变更概述

具体变更内容

1. 修改文件

1.1 XgStudentManagerSourceServiceImpl.java

影响范围

时间: 2025-07-24 11:30:00

变更概述

具体变更内容

1. 新增文件

1.1 XgStudentManagerDeptTreeVo.java

1.2 学生管理员授权关系API.md

2. 修改文件

2.1 IXgStudentManagerSourceService.java

2.2 XgStudentManagerSourceServiceImpl.java

2.3 XgStudentManagerSourceController.java

2.4 前端页面修改 - web/src/views/studentMsg/studentMsg/index.vue

2.5 API文档总览.md

技术要点

1. 复杂SQL查询实现

2. 树形结构构建算法

3. 权限控制逻辑

4. 前后端字段适配

5. 数据类型处理

接口规范

请求路径

响应格式（更新后的字段名）

测试验证

1. 功能测试

2. 权限测试

3. 前端界面测试

4. 数据权限测试

影响范围

16 KiB

Raw Blame History