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

一、部门树

使用 <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;})}},