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

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

涉及表格: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)

  1. 在科室管理中添加查询所有科室功能(HisDeptMapper.java)
	/**
     * 查询所有科室信息
     * @return 科室管理信息集合
     */
    public List<HisDept> selectHisDeptAll();
  1. 在Mybatis中添加相关数据库查询信息(HisDeptMapper.xml)
	<select id="selectHisDeptAll" resultMap="HisDeptResult">
        <include refid="selectHisDeptVo"></include>
    </select>

Service层

  1. 在科室管理中添加查询所有科室功能(IHisDeptService.java)
	/**
     * 查询所有科室列表
     */
    public List<HisDept> selectHisDeptAll();
  1. 在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>

自己刚开始学习,功能基本上属于比着葫芦画瓢,如有不对的地方,请批评指正🤝

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/532.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【linux】:进程概念

文章目录 冯诺依曼体系结构一&#xff1a;操作系统二: 进程总结冯诺依曼体系结构 我们常见的计算机&#xff0c;如笔记本。我们不常见的计算机&#xff0c;如服务器&#xff0c;大部分都遵守冯诺依曼体系。 冯诺依曼体系如下图&#xff1a; 那么输入设备有哪些呢&#xff1f…

常见的Web安全漏洞:SYN攻击/CSRF/XSS

一、SYN攻击&#xff08;属于DOS攻击&#xff09; 什么情况下被动方出现SYN_RCVD状态?(flood攻击服务) 客户伪造 ip 端口&#xff0c; 向服务端发送SYN请求。完成2次握手&#xff0c;第三次服务端 等待客户端ACK确认&#xff0c;但由于客户不存在服务端一直未收到确认&#…

内含18禁~~关于自学\跳槽\转行做网络安全行业的一些建议

作者&#xff1a;Eason_LYC 悲观者预言失败&#xff0c;十言九中。 乐观者创造奇迹&#xff0c;一次即可。 一个人的价值&#xff0c;在于他所拥有的。所以可以不学无术&#xff0c;但不能一无所有&#xff01; 技术领域&#xff1a;WEB安全、网络攻防 关注WEB安全、网络攻防。…

金三银四,我猜你需要这套网络安全工程师面试题合集

2023年已经开始了&#xff0c;先来灵魂三连问&#xff0c;年初定的目标是多少&#xff1f;薪资能涨吗&#xff1f;女朋友能找到吗&#xff1f; 好了&#xff0c;不扎大家的心了&#xff0c;接下来进入正文。 由于我之前写了不少网络安全技术相关的文章和回答&#xff0c;不少…

过来人告诉你:Java学到什么程度可以找工作?

大部分初次学习Java的同学都非常关注自己学到什么程度可以找工作就业&#xff0c;因为学习的目的一方面在于掌握知识、提高技能&#xff0c;另一方面就是就业谋生。今天笔者就来跟大家聊一聊一下Java学习到什么地步可以面试找工作。任何企业&#xff0c;不论大小&#xff0c;对…

exe反编译为.py文件

介绍公司以前的一个exe包&#xff0c;我们需要查看里面python源码&#xff0c;但是以前的py源码文件找不到&#xff0c;所以只能反编译&#xff0c;介绍一下反编译的过程。首先准备&#xff1a;pyinstxtractor.py这个文件&#xff0c;网上很多&#xff0c;自己下载准备查看二进…

十八、动画与canvas

1.RequestAnimationFrame 早期定时动画 setTimeout和setInterval不能保证时间精度&#xff0c;第二个参数只能保证何时将代码添加到浏览器的任务队列 requestAnimationFrame(cb)的cb在浏览器重绘屏幕前调用 function updateProgress(){const div document.getElementById(d…

昨天某读者拿到华为OD岗位offer,今天来分享一下经验,包含华为OD机试

来自读者投稿&#xff0c;已经拿到华为 OD 开发岗位 offer&#xff0c;询问了一些问题&#xff0c;下面是他的一些经验。 文章目录华为 OD 投递简历华为 OD 机试分数OD 机试通过之后&#xff0c;收到综合测评OD 技术面&#xff08;时长 1 小时左右&#xff09;主管/HR 面试&…

从参数数量视角理解深度学习神经网络算法 DNN, CNN, RNN, LSTM 以python为工具

从参数数量视角理解深度学习神经网络算法 DNN, CNN, RNN, LSTM 以python为工具 文章目录1. 神经网络数据预处理1.1 常规预测情景1.2 文本预测场景2.全连接神经网络 DNN3.卷积神经网络CNN4.循环神经网络 RNN5.长短期记忆神经网络 LSTMʚʕ̯•͡˔•̯᷅ʔɞʚʕ̯•͡˔•̯᷅ʔ…

PMP-项目管理知识体系概述

文章目录前言PMP-项目管理知识体系概述1. 项目管理知识体系三个维度1.1. 时间维度1.2. 管理维度1.3. 10大知识领域2. 十大知识领域之间的关系3. 项目管理的全链路3.1. 需求 -> 目标3.2. 目标 -> 计划3.3. 计划 -> 执行3.4. 执行 -> 收尾4. 项目管理类型分类说明4.1…

【Web APls简介】

Web APls简介1 本节目标2 Web APIs 和 JS 基础关联性2.1 JS组成2.2 JS 基础阶段以及 Web APIs 阶段3 API 和 Web API3.1 API3.2 Web API3.3 API 和 Web API 总结1 本节目标 说出 Web APIs 阶段与 JavaScript 语法阶段的关联性说出什么是 API说出什么是 Web API 2 Web APIs 和…

30岁了,说几句大实话

是的&#xff0c;我 30 岁了&#xff0c;还是周岁。 就在这上个月末&#xff0c;我度过了自己 30 岁的生日。 都说三十而立&#xff0c;要对自己有一个正确的认识&#xff0c;明确自己以后想做什么&#xff0c;能做什么。 想想时间&#xff0c;过得真快。 过五关斩六将&…

2021电赛国一智能送药小车(F题)设计报告

2021电赛国一智能送药小车&#xff08;F题&#xff09;设计报告 【写在前面的话】 电赛是一个很奇妙的过程&#xff0c;可能有些人觉得电赛的门槛太高&#xff0c;那便意味着&#xff0c;当你决定要参加电赛的那一刻起&#xff0c;这一段路、这些日子就注定不会太轻松&#xf…

顺序表——“数据结构与算法”

各位CSDN的uu们你们好呀&#xff0c;今天小雅兰的内容是数据结构与算法里面的顺序表啦&#xff0c;在我看来&#xff0c;数据结构总体上是一个抽象的东西&#xff0c;关键还是要多写代码&#xff0c;下面&#xff0c;就让我们进入顺序表的世界吧 线性表 顺序表 线性表 线性表&…

【LeetCode】剑指 Offer(25)

目录 题目&#xff1a;剑指 Offer 49. 丑数 - 力扣&#xff08;Leetcode&#xff09; 题目的接口&#xff1a; 解题思路&#xff1a; 代码&#xff1a; 过啦&#xff01;&#xff01;&#xff01; 写在最后&#xff1a; 题目&#xff1a;剑指 Offer 49. 丑数 - 力扣&…

【云原生】Linux进程控制(创建、终止、等待)

✨个人主页&#xff1a; Yohifo &#x1f389;所属专栏&#xff1a; Linux学习之旅 &#x1f38a;每篇一句&#xff1a; 图片来源 &#x1f383;操作环境&#xff1a; CentOS 7.6 阿里云远程服务器 Good judgment comes from experience, and a lot of that comes from bad jud…

MySQL对表操作

目录 CRUD 增加(Create) 查询&#xff08;Retrieve&#xff09; 全列查询 指定列查询 查询字段为表达式 别名 去重&#xff1a;DISTINCT 排序&#xff1a;ORDER BY 条件查询&#xff1a;WHERE 逻辑运算符&#xff1a; 修改&#xff08;Update&#xff09; 删除&…

「入门指南」轻松学习嵌入式 GPIO:从原理到应用一步到位

嵌入式系统是指在其他系统中嵌入的计算机系统&#xff0c;通常由微处理器或微控制器、内存和其他支持电路组成。嵌入式系统的应用领域非常广泛&#xff0c;涉及从智能家居设备到汽车控制系统&#xff0c;再到飞机、医疗设备等各种设备。对于嵌入式系统的应用&#xff0c;GPIO是…

我在字节当主管:百次面试结果,总结一个刷掉99%求职者的问题!

我一个在大厂当主管的朋友&#xff0c;跟我说&#xff1a;“现在招性能测试太难了&#xff0c;当然不是说没人干&#xff0c;一开招聘信息就能收到一大把简历&#xff0c;其中不乏学历亮眼、背景出色、简历里各种高并发、大流量的项目经验的人才。问题在于&#xff0c;当你提出…

【C++】模板初阶

文章目录泛型编程函数模板概念格式实例化匹配原则类模板定义格式实例化泛型编程 当我们的一个函数涉及到多个类型的处理时&#xff0c;我们就需要重载函数来实现&#xff0c;但是重载函数是存在一些局限性的。   重载函数仅仅是类型不同&#xff0c;代码的复用率较低&#xf…
最新文章