若依分离版下拉框动态加载

最近在学习使用若依分离版框架，想要实现下拉框动态加载另一张表的数据，于是参考【字典数据-字典名称】的实现方式，成功试下下拉框动态加载，做下记录

涉及表格：his_user（用户表）-- 用户管理，his_depts（科室表）-- 科室管理

目的：用户管理页面实现下拉框调用科室表的科室名称字段depts_name

实现效果：
新增用户
在这里插入图片描述
修改用户

数据库方面

## his_dept
DROP TABLE IF EXISTS `his_dept`;
CREATE TABLE `his_dept`  (
  `depts_id` int(0) NOT NULL AUTO_INCREMENT COMMENT '科室编号',
  `depts_name` varchar(255) CHARACTER SET utf8mb3 COLLATE utf8mb3_general_ci NOT NULL COMMENT '科室名称',
  `depts_code` varchar(255) CHARACTER SET utf8mb3 COLLATE utf8mb3_general_ci NOT NULL COMMENT '科室编码',
  `create_by` varchar(255) CHARACTER SET utf8mb3 COLLATE utf8mb3_general_ci NULL DEFAULT NULL COMMENT '创建者',
  `create_time` datetime(0) NULL DEFAULT NULL COMMENT '创建时间',
  `update_by` varchar(255) CHARACTER SET utf8mb3 COLLATE utf8mb3_general_ci NULL DEFAULT NULL COMMENT '更新者',
  `update_time` datetime(0) NULL DEFAULT NULL COMMENT '更新时间',
  PRIMARY KEY (`depts_id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 110 CHARACTER SET = utf8mb3 COLLATE = utf8mb3_general_ci ROW_FORMAT = Dynamic;
SET FOREIGN_KEY_CHECKS = 1;

### his_user
DROP TABLE IF EXISTS `his_user`;
CREATE TABLE `his_user`  (
  `id` int(0) NOT NULL AUTO_INCREMENT COMMENT 'ID',
  `name` varchar(60) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '姓名',
  `age` bigint(0) NULL DEFAULT NULL COMMENT '年龄',
  `dept_name` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '科室名称',
  `remark` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '备注',
  `create_time` datetime(0) NULL DEFAULT NULL COMMENT '创建时间',
  `create_by` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '创建人',
  `update_time` datetime(0) NULL DEFAULT NULL COMMENT '修改时间',
  `update_by` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '修改人',
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 4 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci ROW_FORMAT = Dynamic;

SET FOREIGN_KEY_CHECKS = 1;

首先，需要保证his_user表格里存在下拉框的保存字段，如dept_name用来存储科室名称
在这里插入图片描述

domain层（HisUser）

此处是借助若依【代码生成】工具直接生成相关代码，涉及到的功能（get、set、toString（））

	/** 科室名称 */
    @Excel(name = "科室名称")
    private String deptName;
	public void setDeptName(String deptName) 
    {
        this.deptName = deptName;
    }

    public String getDeptName() 
    {
        return deptName;
    }

mapper层（HisDeptMapper）

在科室管理中添加查询所有科室功能（HisDeptMapper.java）

	/**
     * 查询所有科室信息
     * @return 科室管理信息集合
     */
    public List<HisDept> selectHisDeptAll();

在Mybatis中添加相关数据库查询信息（HisDeptMapper.xml）

	<select id="selectHisDeptAll" resultMap="HisDeptResult">
        <include refid="selectHisDeptVo"></include>
    </select>

Service层

在科室管理中添加查询所有科室功能（IHisDeptService.java）

	/**
     * 查询所有科室列表
     */
    public List<HisDept> selectHisDeptAll();

在impl中补充实现查询科室功能（IHisDeptServiceImpl.java）

	@Override
    public List<HisDept> selectHisDeptAll() {
        return hisDeptMapper.selectHisDeptAll();
    }

api界面

在科室管理的api中添加查询科室功能（dept.js）

	//获取科室选择框列表
	export function optionselect(){
	  return request({
	    url: '/test/dept/optionselect',
	    method: 'get'
	  })
	}

view前端界面

在用户管理引用前面在科室管理中实现的功能（user/index.vue）

1. 引入api
	import { optionselect as getDeptOptionSelect } from "@/api/test/dept";

2. data中创建查询数组
	// 科室数据
	deptOptions: [],

3. 创建查询方法
	/**
     * 查询科室列表
     */
    getDeptList(){
      getDeptOptionSelect().then(response =>{
        this.deptOptions = response.data;
      })
    }

4. 在新增和修改方法中引用
	/** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加用户管理";
      this.getDeptList();
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      this.getDeptList();
      getPeople(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改用户管理";
      });
    },

5. 在对话框中修改科室名称列，调整为如下
	    <el-form-item label="科室名称" prop="deptName">
          <el-select v-model="form.deptName" placeholder="请选择岗位">
            <el-option
              v-for="item in deptOptions"
              :key="item.deptsId"
              :label="item.deptsName"
              :value="item.deptsName"
            ></el-option>
          </el-select>
        </el-form-item>