前端学院专业级联下拉框使用说明

概述

本文档描述了如何在前端页面中使用学院专业级联下拉框组件，实现学院和专业的联动选择。当用户选择学院后，专业下拉框会自动更新为该学院下的专业列表。

API接口

组件使用以下API接口：

获取学院列表
- 请求路径：GET /xg/college/list
- 返回格式：R<List<SysDeptVo>>
获取学院专业树形结构
- 请求路径：GET /xg/college/tree
- 返回格式：R<List<SysDeptVo>>
- 说明：返回包含子部门的树形结构数据
根据学院ID获取专业列表
- 请求路径：GET /xg/college/majors/{collegeId}
- 参数：collegeId - 学院ID
- 返回格式：R<List<SysDeptVo>>

使用示例

1. 导入API和类型

import { listColleges, collegeTree, listMajorsByCollegeId } from '@/api/xg/xsjcxx/classmsg/college';
import { SysDeptVo } from '@/api/xg/xsjcxx/classmsg/types';

2. 定义数据变量

// 学院选项
const collegeOptions = ref<SysDeptVo[]>([]);
// 检索时的专业选项
const majorOptions = ref<SysDeptVo[]>([]);
// 表单中的专业选项
const formMajorOptions = ref<SysDeptVo[]>([]);
// 学院专业树形数据
const collegeTreeData = ref<SysDeptVo[]>([]);

3. 加载学院数据

/** 查询学院列表 */
const getCollegeList = async () => {
  const res = await listColleges();
  collegeOptions.value = res.data;
}

// 在页面加载时调用
onMounted(() => {
  getCollegeList();
});

4. 添加联动事件处理

/** 学院选择框变化事件 */
const handleCollegeChange = (value: number) => {
  queryParams.value.majorId = undefined;
  if (value) {
    getMajorList(value);
  } else {
    majorOptions.value = [];
  }
}

/** 查询专业列表 */
const getMajorList = async (collegeId: number) => {
  if (!collegeId) {
    majorOptions.value = [];
    return;
  }
  const res = await listMajorsByCollegeId(collegeId);
  majorOptions.value = res.data;
}

5. 在表单中添加下拉框

<!-- 学院下拉框 -->
<el-form-item label="学院代码" prop="collegeId">
  <el-select v-model="queryParams.collegeId" placeholder="请选择学院" clearable @change="handleCollegeChange">
    <el-option 
      v-for="item in collegeOptions" 
      :key="item.deptId" 
      :label="item.deptName" 
      :value="item.deptId" 
    />
  </el-select>
</el-form-item>

<!-- 专业下拉框 -->
<el-form-item label="专业代码" prop="majorId">
  <el-select v-model="queryParams.majorId" placeholder="请选择专业" clearable>
    <el-option 
      v-for="item in majorOptions" 
      :key="item.deptId" 
      :label="item.deptName" 
      :value="item.deptId" 
    />
  </el-select>
</el-form-item>

自动填充名称

在表单中，当选择学院或专业代码时，可以自动填充对应的名称字段并设置为只读：

/** 表单学院选择框变化事件 */
const handleFormCollegeChange = (value: number) => {
  form.value.majorId = undefined;
  form.value.majorName = undefined;
  if (value) {
    // 设置学院名称
    const college = collegeOptions.value.find(item => item.deptId === value);
    if (college) {
      form.value.collegeName = college.deptName;
    }
    getFormMajorList(value);
  } else {
    form.value.collegeName = undefined;
    formMajorOptions.value = [];
  }
}

/** 表单专业选择框变化事件 */
const handleFormMajorChange = (value: number) => {
  if (value) {
    // 设置专业名称
    const major = formMajorOptions.value.find(item => item.deptId === value);
    if (major) {
      form.value.majorName = major.deptName;
    }
  } else {
    form.value.majorName = undefined;
  }
}

完整实现示例

请参考 web/src/views/classmsg/classMsg/index.vue 文件中的完整实现，该文件演示了如何在检索表单和编辑表单中使用学院专业级联下拉框。

3.9 KiB Raw Permalink Blame History