hzdyjs/web/src/views/xg-xx/classInfo/README.md

班级信息管理模块

📋 模块说明

• 模块名称: 班级信息管理 (Class Information Management)
• 模块简称: classInfo
• 对应后端: backend/ruoyi-modules/ruoyi-xg-xx/
• 对应API: web/src/api/xg-xx/classInfo.ts

🎯 功能概述

班级信息管理模块提供完整的班级信息管理功能，包括：

📊 统计概览

• 总班级数统计
• 正常班级数统计
• 总学生数统计
• 平均学生数统计

🔍 查询功能

• 班级代码、班级名称模糊查询
• 年级、学院、专业级联查询
• 班级类型、班级状态筛选
• 班主任姓名查询

📝 基础管理

• 班级信息新增、修改、删除
• 班级信息详情查看
• 班级信息批量导出

👥 人员配置

• 班主任、辅导员配置
• 班干部信息管理（班长、学习委员、生活委员等）
• 联系方式管理

📈 统计功能

• 学生数量统计更新
• 批量统计刷新
• 实时数据同步

🎨 页面设计

页面布局

• 搜索区域: 8个搜索条件，支持组合查询
• 统计卡片: 4个统计指标，渐变色彩设计
• 表格区域: 完整的班级信息展示
• 操作按钮: 查看、编辑、删除、统计更新

对话框设计

• 新增/编辑: 分页签设计（基本信息、人员配置、联系方式）
• 详情查看: 描述列表展示完整信息
• 响应式布局: 适配不同屏幕尺寸

🔧 技术特性

前端技术

• Vue 3.5.13 + TypeScript 5.8.3
• Element Plus UI组件库
• Composition API 组合式API
• 响应式设计 适配多端

样式设计

• 参考后勤管理模块 保持风格一致
• 渐变色卡片 美观的统计展示
• 悬停效果 良好的交互体验
• 操作按钮 图标化设计

数据处理

• 级联选择 学院-专业联动
• 表单验证 完整的输入校验
• 状态管理 响应式数据更新
• 错误处理 友好的错误提示

📋 API接口

16个标准API接口

基础CRUD接口

1. GET /list - 查询班级信息列表
2. POST /export - 导出班级信息列表
3. GET /{id} - 获取班级信息详情
4. POST / - 新增班级信息
5. PUT / - 修改班级信息
6. DELETE /{ids} - 删除班级信息

业务查询接口

7. GET /getByClassCode/{classCode} - 根据班级代码查询
8. GET /getByGrade/{grade} - 根据年级查询
9. GET /getByCollegeCode/{collegeCode} - 根据学院代码查询
10. GET /getByMajorCode/{majorCode} - 根据专业代码查询
11. GET /getByCounselorId/{counselorId} - 根据辅导员ID查询
12. GET /getByClassTeacherId/{classTeacherId} - 根据班主任ID查询

辅助功能接口

13. GET /getClassOptions - 获取班级选项列表
14. POST /updateStudentCount/{id} - 更新班级学生统计
15. POST /batchUpdateStudentCount - 批量更新学生统计
16. POST /enable/{id} 和 POST /disable/{id} - 启用/禁用班级

🎯 权限控制

权限编码

• xg:classInfo:list - 班级信息查询
• xg:classInfo:query - 班级信息详情
• xg:classInfo:add - 班级信息新增
• xg:classInfo:edit - 班级信息修改
• xg:classInfo:remove - 班级信息删除
• xg:classInfo:export - 班级信息导出

按钮权限

• 所有操作按钮都配置了对应的权限控制
• 使用 v-hasPermi 指令进行权限验证
• 无权限时自动隐藏相关按钮

📊 数据字典

班级类型 (xg_class_type)

• regular - 普通班级
• honor - 荣誉班级
• experimental - 实验班级
• special - 特殊班级

班级状态 (xg_class_status)

• 1 - 正常
• 2 - 暂停
• 3 - 毕业
• 4 - 解散

年级选项 (xg_grade_options)

• 支持动态配置年级选项
• 适配不同学制需求

🔄 数据流程

查询流程

1. 用户输入查询条件
2. 前端组装查询参数
3. 调用列表查询API
4. 后端返回分页数据
5. 前端渲染表格和统计

新增/修改流程

1. 用户填写表单信息
2. 前端表单验证
3. 调用新增/修改API
4. 后端业务处理
5. 返回操作结果
6. 刷新列表和统计

统计更新流程

1. 用户点击统计更新
2. 调用统计更新API
3. 后端重新计算学生数
4. 更新班级统计信息
5. 返回最新统计数据

🎨 样式规范

色彩设计

• 主色调: 蓝色系 (#409eff)
• 统计卡片: 渐变色设计
• 状态标签: 语义化颜色
• 交互效果: 悬停和点击反馈

布局规范

• 页面间距: 8px 外边距
• 组件间距: 10px 组件间距
• 表格样式: 斑马纹和悬停效果
• 按钮样式: 图标化小按钮

响应式设计

• 搜索区域: 4列布局，支持响应式
• 统计卡片: 4列布局，移动端自适应
• 表格列: 固定宽度和自适应结合
• 对话框: 固定宽度，内容自适应

📝 使用说明

基本操作

1. 查询班级: 使用搜索条件筛选班级信息
2. 新增班级: 点击"新增班级"按钮，填写班级信息
3. 修改班级: 点击表格行的"编辑"按钮
4. 查看详情: 双击表格行或点击"查看"按钮
5. 删除班级: 选择班级后点击"删除"按钮

高级功能

1. 批量操作: 选择多个班级进行批量删除
2. 导出数据: 根据查询条件导出Excel文件
3. 统计更新: 手动更新班级学生统计数据
4. 级联查询: 学院-专业联动查询

注意事项

• 班级代码必须唯一，系统会自动校验
• 删除班级前请确认该班级下无学生信息
• 统计数据会定期自动更新，也可手动刷新
• 导出功能会根据当前查询条件生成文件

🚀 扩展功能

计划功能

• 班级学生管理集成
• 班级活动管理
• 班级成绩统计
• 班级考勤管理

技术优化

• 虚拟滚动优化大数据量
• 缓存机制提升查询性能
• 实时数据推送
• 移动端适配优化

---

📅 创建时间: 2025-01-01
👨‍💻 开发者: Cursor AI
📝 版本: v1.0.0
🔄 更新: 持续迭代中