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

一、部门树

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

html 复制代码

<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"后面会提到

html 复制代码

 <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;

javascript 复制代码

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

javascript 复制代码

/**
     * 新增用户时，胸牌号回车事件
     */
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;
    })
  }

},