班级管理页面班主任选项实现变更记录

变更时间: 2025-07-22 11:30:00

变更人: Cursor AI

变更摘要

参考学生信息管理页面，将班级管理页面搜索区域的班主任选项从文本输入框改为下拉选择框。

变更内容

1. 修改班级管理页面搜索区域

将原来的文本输入框：

<el-form-item label="班主任" prop="classTeacherName">
  <el-input v-model="queryParams.classTeacherName" placeholder="请输入班主任姓名" clearable @keyup.enter="handleQuery" />
</el-form-item>

改为下拉选择框：

<el-form-item label="班主任" prop="classTeacherId">
  <el-select v-model="queryParams.classTeacherId" placeholder="请选择班主任" clearable style="width: 100%">
    <el-option
      v-for="teacher in classTeacherOptions"
      :key="teacher.value"
      :label="teacher.label"
      :value="teacher.value"
    />
  </el-select>
</el-form-item>

2. 修改查询参数定义

// 修改前
queryParams: {
  // ...其他参数
  classTeacherName: undefined,
  // ...其他参数
},

// 修改后
queryParams: {
  // ...其他参数
  classTeacherId: undefined,
  // ...其他参数
},

3. 添加获取班主任选项的方法

/** 获取班主任选项 */
const getClassTeacherList = async () => {
  console.log('开始获取班主任列表');
  try {
    const response = await getClassTeacherOptions();
    console.log('获取班主任列表成功，响应数据:', response);
    
    // 解析响应数据
    if (response.data) {
      // 检查标准的R<T>响应格式
      if (response.data.code === 200 && response.data.data) {
        classTeacherOptions.value = response.data.data;
      } else {
        classTeacherOptions.value = [];
      }
    } else {
      classTeacherOptions.value = [];
    }

    console.log('设置班主任选项完成:', classTeacherOptions.value);

    // 如果没有获取到数据，给出提示
    if (!classTeacherOptions.value.length) {
      proxy?.$modal.msgWarning('未找到班主任数据，请确认数据库中是否存在班主任角色的用户');
    }
  } catch (error) {
    console.error('获取班主任列表失败:', error);
    classTeacherOptions.value = [];
    proxy?.$modal.msgError('获取班主任列表失败');
  }
};

4. 修改页面初始化和重置逻辑

页面初始化时调用获取班主任选项的方法：

// 初始化
onMounted(() => {
  getList();
  getOptions();
  getClassTeacherList(); // 获取班主任列表
});

重置查询参数时重新获取班主任选项：

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value?.resetFields();
  majorOptions.value = [];
  handleQuery();
  getClassTeacherList(); // 重置后重新获取班主任选项
};

5. 从getOptions方法中移除班主任选项获取

修改getOptions方法，避免重复获取班主任选项：

const [collegeRes, counselorRes, statisticsRes] = await Promise.all([
  getCollegeOptions(),
  getCounselorOptions(),
  getClassStatistics() // 获取统计数据
]);

修改原因

参考学生信息管理页面的班主任选项实现，统一用户界面交互体验，提高用户使用效率。通过下拉选择班主任，避免用户手动输入可能带来的错误，并且可以直观地看到所有可选班主任。

技术说明

使用XgSysUserMapper.selectUsersByRoleKey("head_teacher")查询班主任角色的用户
接口地址: /xg/classInfo/teacherOptions，返回标准的下拉选项格式 { value: id, label: name }
参考学生信息管理页面的成功实现，确保一致的用户体验

注意事项

由于类型系统的限制，存在一些TypeScript类型错误需要进一步修复
API响应格式可能存在差异，需要检查数据结构并适配
修改后建议进行功能测试，确保班主任选项能正确获取和显示

后续优化建议

统一前端API响应处理方式
修复TypeScript类型错误
考虑添加班主任数据缓存机制，避免频繁请求
添加班主任选项的加载状态提示

4.3 KiB Raw Blame History