效果:点击部门的输入框出现如下树状结构,并能够选择进入输出框中,客户不能做修改添加,只能选择的功能
一.步骤:
1.点击部门输入框,发axios请求,请求回来之后显示该数据
2.点击节点,输入框展示,树状数据消失
3.设置客户只能做选择,不能做修改
4.input输入框中展示数据
开始吧~~~
1.点击部门输入框,发axios请求,请求回来之后显示该数据(input 下弄一个div,包含tree组件)
<el-form-item label="部门">
<el-input
id="input"
v-model="ruleForm.departmentName"
placeholder="请选择部门名字"
:value="list.id"
@focus="focus"
/>
<div v-show="showTree">
<el-tree :props="defaultProps" :data="list" @node-click="handleNodeClick" />
</div>
</el-form-item>
2.点击节点,输入框展示,树状数据消失
3.设置客户只能做选择,不能做修改(input天生有focus与blur事件)
// 导入数据变为树状结构的工具
import { transArrToTree } from '@/utils/index.js'
methods: {
async getDepartment() {
const res = await getDepartment()
console.log(res)
res.data.depts.shift()
this.list = transArrToTree(res.data.depts)
// 等数据回来之后再显示tree组件
this.showTree = true
},
// input天生就有focus函数
focus() {
this.getDepartment() // input输入框获取焦点之后开始执行请求数据
document.querySelector('#input').blur() // 获取焦点就失去焦点为了设定客户不能做修改
},
4.input输入框中展示数据(点击el-tree组件的节点有node-click事件自动获取该行的数据)
<el-form-item label="部门">
<el-input
id="input"
v-model="ruleForm.departmentName"
placeholder="请选择部门名字"
:value="list.id"
@focus="focus"
/>
<div v-show="showTree">
<el-tree :props="defaultProps" :data="list" @node-click="handleNodeClick" />
</div>
</el-form-item>
// 点击节点获取节点信息data
handleNodeClick(data) {
// 如果没有子节点
if (data.children.length === 0) {
this.form.departmentName = data.name
}
// 选中
// 隐藏tree
this.showTrees = false
},
该组件全部代码:
<template>
<div>
<el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
<el-form-item label="姓名" prop="username">
<el-input v-model="ruleForm.username" placeholder="请输入姓名" />
</el-form-item>
<el-form-item label="手机" prop="mobile">
<el-input v-model="ruleForm.mobile" placeholder="请输入手机号" />
</el-form-item>
<el-form-item label="入职时间">
<el-col :span="11">
<el-form-item prop="timeOfEntry">
<el-date-picker
v-model="ruleForm.timeOfEntry"
type="date"
placeholder="请选择入职日期"
style="width: 100%;"
/>
</el-form-item>
</el-col>
</el-form-item>
<el-form-item label="聘用形式" prop="formOfEmployment">
<el-select v-model="ruleForm.formOfEmployment" placeholder="请选择">
<el-option v-for="item in hireType" :key="item.id" :label="item.value" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="工号" prop="workNumber">
<el-input v-model="ruleForm.workNumber" placeholder="请输入工号" />
</el-form-item>
<el-form-item label="部门">
<el-input
id="input"
v-model="ruleForm.departmentName"
placeholder="请选择部门名字"
:value="list.id"
@focus="focus"
/>
<div v-show="showTree">
<el-tree :props="defaultProps" :data="list" @node-click="handleNodeClick" />
</div>
</el-form-item>
<el-form-item label="转正时间">
<el-col :span="11">
<el-form-item prop="correctionTime">
<el-date-picker
v-model="ruleForm.correctionTime"
type="date"
placeholder="请选择转正日期"
style="width: 100%;"
/>
</el-form-item>
</el-col>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">确定</el-button>
<el-button @click="hchanel">取消</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import { addEmployee } from '@/api/employees.js'
import { getDepartment } from '@/api/department.js'
import { transArrToTree } from '@/utils/index.js'
import employee from '@/constant/employees.js'
export default {
data() {
return {
showTree: false,
hireType: employee.hireType,
ruleForm: {
username: '',
mobile: '',
formOfEmployment: '',
workNumber: '',
departmentName: '',
timeOfEntry: '',
correctionTime: ''
},
rules: {
username: [
{ required: true, message: '请输入用户名称', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
mobile: [
{ required: true, message: '请输入手机号', trigger: 'blur' },
{
pattern: /^1[3-9]\d{9}$/,
message: '请输入正确的手机号格式',
trigger: 'blur'
}
],
formOfEmployment: [{ required: true, message: '请输入聘用形式', trigger: 'change' }],
workNumber: [{ required: true, message: '请输入工号', trigger: 'blur' }],
departmentName: [{ required: true, message: '请输入部门', trigger: 'blur' }],
timeOfEntry: [{ required: true, message: '请选择入职时间', trigger: 'change' }],
correctionTime: [{ required: true, message: '请选择转正时间', trigger: 'change' }]
},
list: [],
defaultProps: {
children: 'children',
label: 'name'
}
}
},
created() {},
methods: {
async getDepartment() {
const res = await getDepartment()
console.log(res)
res.data.depts.shift()
this.list = transArrToTree(res.data.depts)
// 等数据回来之后再显示tree组件
this.showTree = true
},
async doAdd() {
try {
await addEmployee(this.ruleForm)
this.$message.success('新增员工成功')
this.$emit('success')
} catch (e) {
this.$message.warning('新增成员失败', e)
}
},
submitForm() {
this.$refs.ruleForm.validate(valid => {
if (valid) {
this.doAdd()
} else {
console.log('error submit!!')
return false
}
})
},
hchanel() {
this.$emit('close')
},
// input天生就有focus函数
focus() {
this.getDepartment()
document.querySelector('#input').blur()
},
handleNodeClick(data) {
if (data.children.length === 0) {
this.ruleForm.departmentName = data.name
}
this.showTree = false
}
}
}
</script>
<style></style>