一、部门树
使用 <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;
})
}
},