【若依前后端分离】通过输入用户编号自动带出部门名称(部门树)

一、部门树

使用 <treeselect v-model="form.deptId" :options="deptOptions" :show-count="true" placeholder="请选择归属部门"/>

<el-col :span="12">
  <el-form-item label="归属部门" prop="deptId">
    <treeselect v-model="form.deptId" :options="deptOptions" :show-count="true" placeholder="请选择归属部门"/>
  </el-form-item>
</el-col>

二、用户编号的input中添加失焦事件和回车事件

失焦事件:@blur="userNameChange"

回车事件:@keyup.enter.native="userNameChange"

注意此处的disabled="show"后面会提到

 <el-col :span="12">
        <el-form-item v-if="form.userId == undefined" label="胸牌号" prop="userName">
          <el-input v-model="form.userName"
            placeholder="请输入用户编号"
            :disabled="show"
            maxlength="30"
            @keyup.enter.native="userNameChange"
            @blur="userNameChange"
            />
        </el-form-item>
      </el-col>

:disabled="show" 的应用是为了控制 el-input 输入框的禁用状态。这里的 show 是一个布尔类型的变量,当它的值为 true 时,输入框将被禁用,用户无法在其中输入任何内容;反之,当 show 为 false 时,输入框可以正常使用。

在发起请求前:当用户按下回车键或失去焦点触发 userNameChange 方法时,首先设置 this.show = true;。这会导致输入框立刻被禁用,可能的目的是为了防止用户在此期间重复提交请求或修改输入,同时可能伴随着显示加载指示器。

请求完成后:无论API调用成功还是失败,最终都会执行 this.show = false;,重新启用输入框,允许用户继续输入或进行下一步操作。

这样的设计有助于提升用户体验,通过暂时禁用输入框来避免用户在数据加载过程中的误操作,并及时恢复功能,确保界面的交互流畅性。

三、在部门树中,根据已知部门名称查找部门id事件

调用:

const deptId = this.getDeptIdByName(this.deptName)

this.form.deptId = deptId;

getDeptIdByName(name) {
  /**
       * 递归函数,根据部门名称查找部门ID
       * @param {Array} options 部门选项数组
       * @param {String} targetName 要查找的部门名称
       * @returns {Number|undefined} 找到的部门ID,未找到则返回undefined
       */
  function findDeptId(options, targetName) {
    for (const dept of options) {
      if (dept.label === targetName) {
        return dept.id;
      }
      if (dept.children && dept.children.length > 0) {
        const result = findDeptId(dept.children, targetName);
        if (result !== undefined) {
          return result;
        }
      }
    }
    return undefined;
  }

  // 调用递归函数并返回结果
  return findDeptId(this.deptOptions, name);
},

四、失焦和回车事件问题

遇到问题:回车后,调用接口信息不显示,再随意输入数据才显示

原因:异步处理不当导致的

因为失焦事件和回车事件中需要调用接口,接口数据还未返回就将值赋给各个控件,所以导致问题发生。

问题解决:添加this.show

/**
     * 新增用户时,胸牌号回车事件
     */
userNameChange() {
  console.log("---------------失焦事件---------------------")

  if(this.form.userName){
    this.show = true;
    getUserByHR(this.form.userName).then(response => {
      this.show = false;
      if (response.code === 200) {

        if (response.data.code === 200) {
          //姓名、手机号
          this.form.nickName = response.data.data.xm;
          this.form.phonenumber = response.data.data.sjh;
          //性别
          if (response.data.data.xb === "男") {
            this.form.sex = 0;
          } else {
            this.form.sex = 1;
          }
          //默认普通员工
          this.form.postIds = [4];
          //默认普通角色
          this.form.roleIds = [2];
          this.form.status = 0;
          //归属部门
          // 通过部门编号获取部门id
          // this.form.deptId=[111];
          const deptId = this.getDeptIdByName(response.data.data.dept)
          this.form.deptId = deptId;
        } else {
          this.$message.error("获取信息失败");
        }
      } else {
        this.$message.error("连接错误");
      }
      console.log("接口信息", response);

    }).catch(err=>{
      this.show = false;
    })
  }

},

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

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

相关文章

QT5.14.2与Mysql8.0.16配置笔记

1、前言 我的QT版本为 qt-opensource-windows-x86-5.14.2。这是QT官方能提供的自带安装包的最近版本&#xff0c;更新的版本需要自己编译源代码&#xff0c;可点击此链接进行下载&#xff1a;Index of /archive/qt/5.14/5.14.2&#xff0c;选择下载 qt-opensource-windows-x86…

【机器学习】基于线性回归的医疗费用预测模型

文章目录 一、线性回归定义和工作原理假设表示 二、导入库和数据集矩阵表示可视化 三、成本函数向量的内积 四、正态方程五、探索性数据分析描述性统计检查缺失值数据分布图相关性热图保险费用分布保险费用与性别和吸烟情况的关系保险费用与子女数量的关系保险费用与地区和性别…

Halcon 铣刀刀口破损缺陷检测

一 OTSU OTSU&#xff0c;是一种自适应阈值确定的方法,又叫大津法&#xff0c;简称OTSU&#xff0c;是一种基于全局的二值化算法,它是根据图像的灰度特性,将图像分为前景和背景两个部分。当取最佳阈值时&#xff0c;两部分之间的差别应该是最大的&#xff0c;在OTSU算法中所采…

张量分解(2)——张量运算(内积、外积、直积、范数)

&#x1f345; 写在前面 &#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;这里是hyk写算法了吗&#xff0c;一枚致力于学习算法和人工智能领域的小菜鸟。 &#x1f50e;个人主页&#xff1a;主页链接&#xff08;欢迎各位大佬光临指导&#xff09; ⭐️近…

Stream流真的很好,但答应我别用toMap()

你可能会想&#xff0c;toList 和 toSet 都这么便捷顺手了&#xff0c;当又怎么能少得了 toMap() 呢。 答应我&#xff0c;一定打消你的这个想法&#xff0c;否则这将成为你噩梦的开端。 让我们先准备一个用户实体类。 Data AllArgsConstructor public class User { priv…

【C#】函数方法、属性分文件编写

1.思想 分文件编写是面向对象编程的重要思想&#xff0c;没有实际项目作为支撑很难理解该思想的精髓&#xff0c;换言之&#xff0c;一两个函数代码量因为太少无法体现分文件编写减少大量重复代码的优势。 2.项目结构介绍 整项目的名称叫AutoMetadata&#xff0c;是一个基于W…

【第三版 系统集成项目管理工程师】第4章 信息系统架构

持续更新。。。。。。。。。。。。。。。 【第三版】系统集成项目管理工程师 考情分析4.1架构基础4.1.1指导思想&#xff08;非重点&#xff09; P1364.1.2设计原则&#xff08;非重点&#xff09; P1364.1.3建设目标&#xff08;非重点&#xff09; P1374.1.4总体框架 P138练习…

【web前端HTML+CSS+JS】--- CSS学习笔记02

一、CSS&#xff08;层叠样式表&#xff09;介绍 1.优势 2.定义解释 如果有多个选择器共同作用的话&#xff0c;只有优先级最高那层样式决定最终的效果 二、无语义化标签 div和span&#xff1a;只起到描述的作用&#xff0c;不带任何样式 三、标签选择器 1.标签/元素选择器…

什么牌子的头戴式蓝牙耳机好性价比高?

说起性价比高的头戴式蓝牙耳机,就不得不提倍思H1s,作为倍思最新推出的新款,在各项功能上都实现了不错的升级,二字开头的价格,配置却毫不含糊, 倍思H1s的音质表现堪称一流。它采用了40mm天然生物纤维振膜,这种振膜柔韧而有弹性,能够显著提升低音的量感。无论是深沉的低音还是清…

Android 10年,35岁,该往哪个方向发力

网上看到个网友发的帖子&#xff0c;觉的这个可能是很多开发人员都会面临和需要思考的问题。 不管怎样&#xff0c; 要对生活保持乐观&#xff0c;生活还是有很多的选择和出路的。 &#xff08;内容来自网络&#xff0c;不代表个人观点&#xff09; 《Android Camera开发入门》…

机器人动力学模型及其线性化阻抗控制模型

机器人动力学模型 机器人动力学模型描述了机器人的运动与所受力和力矩之间的关系。这个模型考虑了机器人的质量、惯性、关节摩擦、重力等多种因素&#xff0c;用于预测和解释机器人在给定输入下的动态行为。动力学模型是设计机器人控制器的基础&#xff0c;它可以帮助我们理解…

element-plus的文件上传组件el-upload

el-upload组件 支持多种风格&#xff0c;如文件列表&#xff0c;图片&#xff0c;图片卡片&#xff0c;支持多种事件&#xff0c;预览&#xff0c;删除&#xff0c;上传成功&#xff0c;上传中等钩子。 file-list&#xff1a;上传的文件集合&#xff0c;一定要用v-model:file-…

基于B/S模式和Java技术的生鲜交易系统

你好呀&#xff0c;我是计算机学姐码农小野&#xff01;如果有相关需求&#xff0c;可以私信联系我。 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;B/S模式、Java技术 工具&#xff1a;Visual Studio、MySQL数据库开发工具 系统展示 首页 用户注册…

RAG综述汇总

第一篇&#xff1a;Retrieval-Augmented Generation for Large Language Models: A Survey(同济/复旦) 论文链接 1.简介 这篇全面的综述论文详细研究了 RAG 范式的发展&#xff0c;包括 Naive RAG、Advanced RAG 和 Modular RAG。介绍了 RAG 框架的三个基础技术&#xff0c;…

Python28-7.4 独立成分分析ICA分离混合音频

独立成分分析&#xff08;Independent Component Analysis&#xff0c;ICA&#xff09;是一种统计与计算技术&#xff0c;主要用于信号分离&#xff0c;即从多种混合信号中提取出独立的信号源。ICA在处理盲源分离&#xff08;Blind Source Separation&#xff0c;BSS&#xff0…

CANopen协议开发梳理总结笔记教程

0、提醒 CANOpen使用时&#xff0c;需要清楚什么是大端和小端&#xff0c;这对于CANOpen数据发送及解析时&#xff0c;有很大的帮助。且学习开发CANOpen时&#xff0c;需要具备一定的CAN基础。 1、CANOpen协议介绍 ①、什么是CANOpen协议 CANOpen协议是一种架构在控制局域网络…

yaml格式转换成json格式

yaml格式转换成json格式 ①postman生成的结果是yaml格式 ps&#xff1a;postman输出的格式是没有自动换行的&#xff0c;需要将内容换行 ②复制到Python的脚本跑一趟&#xff1a;自动换行并去掉/n&#xff1b; str " "//(postman输出的内容&#xff09; print(st…

【python技巧】parser传入参数

参考网址: https://lightning.ai/docs/pytorch/LTS/api/pytorch_lightning.utilities.argparse.html#pytorch_lightning.utilities.argparse.add_argparse_args 1. 简单传入参数. parse_known_args()方法的作用就是把不在预设属性里的参数也返回,比如下面这个例子, 执行pytho…

2024年信息系统项目管理师1批次上午客观题参考答案及解析(1)

1、新型基础设施建设是以新发展理念为引领&#xff0c;以()为驱动&#xff0c;以信息网络为基础&#xff0c;面向高质量发展需要&#xff0c;提供数字转型、智能升级、融合创新等服务的基础设施体系。 A&#xff0e;技术创新 B&#xff0e;人工智能 C&#xff0e;区块链 D&…

代码随想录算法训练营第二十七天|452. 用最少数量的箭引爆气球、435. 无重叠区间、763.划分字母区间

452. 用最少数量的箭引爆气球 如何使用最少的弓箭呢&#xff1f; 直觉上来看&#xff0c;貌似只射重叠最多的气球&#xff0c;用的弓箭一定最少&#xff0c;那么有没有当前重叠了三个气球&#xff0c;我射两个&#xff0c;留下一个和后面的一起射这样弓箭用的更少的情况呢&am…