hzdyjs/docs/变更管理/code-adjust-record-2025-01-17-stuColBatch-view-detail-scope.md

学生信息收集批次查看详细功能权限范围展示开发记录

日期: 2025-01-17
开发者: Cursor AI
变更类型: 功能增强
影响范围: 前端页面、后端API接口

📋 变更概述

在学生信息收集批次管理页面的查看详细功能中，新增了权限范围展示功能，用户可以查看批次配置的学院名称、专业名称、班级名称等详细信息。

🔧 具体变更

1. 后端API接口新增

新增获取权限范围详细信息接口

文件: backend/ruoyi-modules/ruoyi-xg/src/main/java/org/dromara/xg/controller/XgStuColBatchClassController.java

• 添加了 getScopeDetail API接口
• 接口路径: GET /stuColBatchClass/stuColBatchClass/getScopeDetail/{batchId}
• 返回指定批次的权限范围详细信息列表
• 权限标识: stuColBatchClass:stuColBatchClass:query

Mapper层新增方法

文件: backend/ruoyi-modules/ruoyi-xg/src/main/java/org/dromara/xg/mapper/XgStuColBatchClassMapper.java

• 新增 selectScopeDetailByBatchId 方法
• 根据批次ID查询权限范围详细信息

XML映射文件新增SQL

文件: backend/ruoyi-modules/ruoyi-xg/src/main/resources/mapper/stuColBatchClass/XgStuColBatchClassMapper.xml

• 添加了 selectScopeDetailByBatchId 的SQL实现
• 查询条件: batch_id = #{batchId} AND deleted = 0
• 排序规则: 按学院名称、专业名称、班级名称排序
• 返回字段: 包含完整的权限范围信息（学院、专业、班级、配置时间等）

2. 前端API接口新增

新增API方法

文件: web/src/api/stuColBatchClass/stuColBatchClass/index.ts

• 添加了 getScopeDetail API方法（获取权限范围详细信息）
• 使用标准的request请求格式

3. 前端页面功能增强

查看详细对话框优化

文件: web/src/views/XgStuColBatch/stuColBatch/index.vue

• 将对话框宽度从600px增加到800px，适应更多内容
• 使用 el-tabs 组件实现标签页切换
• 新增"基本信息"和"权限范围"两个标签页

权限范围展示功能

• 基本信息标签页: 展示批次的基本信息（ID、名称、描述、时间、状态等）
• 权限范围标签页: 展示配置的权限范围详细信息
  • 使用 el-alert 组件显示权限范围说明
  • 使用 el-table 组件展示权限范围列表
  • 包含序号、学院名称、专业名称、班级名称、配置时间等字段
  • 支持空数据状态展示

响应式数据管理

• 新增 viewActiveTab 响应式引用控制当前激活的标签页
• 新增 scopeDetailList 响应式引用存储权限范围数据
• 新增 loadScopeDetail 方法加载权限范围详细信息

方法优化

• 优化 handleView 方法，同时加载基本信息和权限范围数据
• 优化 cancelView 方法，清空所有相关数据并重置标签页

样式优化

• 添加了 .scope-detail-content、.no-data、.mb-3 等样式类
• 优化了权限范围展示的视觉效果

🎯 技术特性

数据展示

• ✅ 使用标签页分离基本信息和权限范围
• ✅ 表格形式展示权限范围详细信息
• ✅ 支持空数据状态友好提示
• ✅ 时间字段格式化显示

用户体验

• ✅ 权限范围说明清晰明了
• ✅ 数据加载状态处理完善
• ✅ 界面布局美观合理
• ✅ 响应式设计适配不同屏幕

数据完整性

• ✅ 包含学院名称、专业名称、班级名称
• ✅ 包含配置时间信息
• ✅ 按逻辑顺序排序展示

📊 API接口详情

请求信息

• 方法: GET
• 路径: /stuColBatchClass/stuColBatchClass/getScopeDetail/{batchId}
• 参数: batchId (路径参数，批次ID)

响应格式

{
  "code": 200,
  "msg": "操作成功",
  "data": [
    {
      "id": 1,
      "batchId": 123,
      "classId": 456,
      "className": "计算机科学与技术2024级1班",
      "majorId": 789,
      "majorName": "计算机科学与技术",
      "collegeId": 101,
      "collegeName": "信息工程学院",
      "createTime": "2025-01-17 10:30:00",
      "updateTime": "2025-01-17 10:30:00"
    }
  ]
}

🔍 业务逻辑

数据查询逻辑

• 从 xg_stu_col_batch_class 表查询指定批次的权限范围
• 过滤条件: batch_id = #{batchId} AND deleted = 0
• 排序规则: ORDER BY college_name, major_name, class_name
• 返回完整的权限范围信息

前端展示逻辑

• 点击"查看详细"按钮时，同时加载基本信息和权限范围
• 默认显示"基本信息"标签页
• 用户可切换到"权限范围"标签页查看详细信息
• 权限范围为空时显示友好的空状态提示

✅ 质量保证

代码规范

• ✅ 遵循项目开发规范
• ✅ 使用统一的响应格式
• ✅ 完整的异常处理机制
• ✅ 详细的注释说明

用户体验

• ✅ 界面美观，布局合理
• ✅ 数据展示清晰，信息完整
• ✅ 交互友好，操作简单
• ✅ 空状态处理完善

性能优化

• ✅ 按需加载权限范围数据
• ✅ 合理的数据缓存策略
• ✅ 优化的SQL查询语句

🎨 界面效果

查看详细对话框

• 基本信息标签页: 展示批次的所有基本信息
• 权限范围标签页: 展示配置的权限范围列表
  • 权限范围说明提示
  • 权限范围统计信息
  • 详细的权限范围表格

数据展示

• 学院名称、专业名称、班级名称清晰展示
• 配置时间格式化显示
• 序号自动生成，便于查看

---

📝 总结: 成功实现了学生信息收集批次查看详细功能的权限范围展示，提供了完整的学院、专业、班级信息查看能力，大大提升了用户的使用体验和数据透明度。