cykj/hzdyjs

0 Fork 0

Files

T

zlwu 61f681c339 提交班干部管理

2025-07-29 16:37:42 +08:00

4.4 KiB

Raw Blame History

班级干部信息管理页面学生选择功能优化

变更时间: 2025-01-27 15:30:00
变更人员: AI Assistant
变更类型: 功能优化
影响范围: 前端页面

变更概述

优化班级干部信息管理页面的学生选择功能，将原来的手动输入学生ID改为下拉选择模式，支持按姓名模糊搜索，提升用户体验。

具体变更内容

1. 前端页面修改 (`web/src/views/xgClassPosMsg/xgClassPosMsg/index.vue`)

1.1 表单字段调整

学生ID字段: 从输入框改为下拉选择框
- 支持远程搜索（按姓名模糊查询）
- 显示格式：姓名（学号）
- 支持清空选择
- 加载状态显示

1.2 学号和姓名字段

改为只读模式，自动填充
提示文字：请先选择学生

1.3 新增功能方法

handleStudentSearch: 学生搜索方法
- 调用API: /studentMsg/studentMsg/listByClassId
- 参数：classId（班级ID）、name（姓名模糊查询）
- 使用request方法进行API调用
- 支持错误处理和加载状态
handleStudentChange: 学生选择变化处理
- 自动填充学号和姓名
- 清空选择时重置相关字段

1.4 数据变量

studentOptions: 学生选项列表
studentSearchLoading: 搜索加载状态

1.5 表单验证调整

学生ID验证：改为change触发，提示信息优化

1.6 编辑功能优化

编辑时自动加载当前学生信息到选项列表
重置时清空学生选择相关数据

2. API接口使用

2.1 接口信息

接口路径: /studentMsg/studentMsg/listByClassId
请求方法: GET
参数:
- classId: 班级ID（必填）
- name: 学生姓名（可选，模糊查询）

2.2 响应格式

{
  "code": 200,
  "msg": "操作成功",
  "data": [
    {
      "id": 1,
      "name": "张三",
      "studentNo": "2021001"
    }
  ]
}

技术实现细节

1. 下拉选择组件配置

<el-select
  v-model="form.studentId"
  placeholder="请选择学生"
  filterable
  remote
  :remote-method="handleStudentSearch"
  :loading="studentSearchLoading"
  clearable
  style="width: 100%"
  @change="handleStudentChange"
>

2. 选项显示格式

<el-option
  v-for="item in studentOptions"
  :key="item.id"
  :label="`${item.name}（${item.studentNo}）`"
  :value="item.id"
>
  <span>{{ item.name }}</span>
  <span style="float: right; color: #8492a6; font-size: 13px">{{ item.studentNo }}</span>
</el-option>

3. 搜索方法实现

const response = await request({
  url: '/studentMsg/studentMsg/listByClassId',
  method: 'get',
  params: {
    classId: currentSelectedNode.value.id,
    name: query
  }
});

使用request方法调用API
支持错误处理和用户提示
自动管理加载状态

用户体验改进

1. 操作流程优化

原来：手动输入学生ID → 容易出错
现在：下拉搜索选择 → 直观便捷

2. 数据展示优化

显示格式：姓名（学号）
支持模糊搜索
实时加载状态提示

3. 错误处理

API调用失败时显示友好提示
网络异常时给出明确错误信息

测试要点

1. 功能测试

新增班级干部时学生选择功能正常
编辑班级干部时学生信息正确显示
学生搜索功能正常（按姓名模糊查询）
选择学生后学号和姓名自动填充
清空选择后相关字段正确重置

2. 边界测试

无班级节点选择时的处理
搜索无结果时的显示
网络异常时的错误处理
大量数据时的性能表现

3. 兼容性测试

不同浏览器的兼容性
移动端显示效果
不同屏幕尺寸的适配

注意事项

权限控制: 确保只有班级节点下才能进行学生选择
数据一致性: 选择学生后自动填充的字段需要与后端数据保持一致
性能优化: 搜索时添加适当的防抖处理，避免频繁API调用
错误处理: 完善的错误提示和异常处理机制

后续优化建议

缓存机制: 可以考虑添加学生数据的本地缓存
分页加载: 如果学生数据量很大，可以考虑分页加载
键盘导航: 支持键盘上下键选择学生
历史记录: 记录最近选择的学生，方便快速选择

变更状态: ✅ 已完成
测试状态: ⏳ 待测试
部署状态: ⏳ 待部署

4.4 KiB Raw Blame History Unescape Escape