<template>
<el-dialog title="设置科室" :visible.sync="dialogVisible" width="30%">
<el-tree
accordion
ref="tree"
:data="depList"
:props="depProps"
node-key="id"
:expand-on-click-node="true"
show-checkbox
@check="checkChangeDep"
icon-class="el-icon-folder"
></el-tree>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogVisible=false" size="small">取 消</el-button>
<el-button type="primary" @click="sure()" size="small">确 定</el-button>
</div>
</el-dialog>
</template>
<script>
export default {
data() {
return {
checkedKeyArr: [],
checkedNameArr: [],
dialogVisible: false,
depList: [],
depProps: {
label: 'name',
children: 'childs',
isLeaf: 'leaf'
},
selectTree: {}
}
},
methods: {
show(formItem) {
this.selectTree = formItem;
this.dialogVisible = true;
if (formItem.depIdList !=undefined && formItem.depIdList.length!=0) {
let self = this;
//包括根部节点就会全部选中,这是一个Bug
setTimeout(() => {
self.$refs.tree.setCheckedKeys(formItem.depIdList.split(','));
}, 0);
}
this.getDepList()
},
getDepList () {
this.$http.get('/visualize/reg_department/depTree').then(res => {
if (res.data.success) {
this.depList = res.data.data;
} else {
this.confirm(res);
}
})
.catch(function (error) {
console.log(error)
})
},
// 科室选中方法
checkChangeDep (data, checkObj) {
this.checkedKeyArr = []
this.checkedNameArr = []
// 半选状态
if (data.childs === null) {
this.checkedKeyArr = [...checkObj.checkedKeys,...checkObj.halfCheckedKeys]
let arr = []
let halfCheckedName = ''
for(let item of checkObj.checkedNodes) {
arr.push(item.name)
}
if (checkObj.halfCheckedKeys.length!==0) {
halfCheckedName = checkObj.halfCheckedNodes[0].name
this.checkedNameArr = [...arr,halfCheckedName]
} else {
this.checkedNameArr = arr
}
} else if (data.childs !== null) {
this.checkedKeyArr = checkObj.checkedKeys
for(let item of checkObj.checkedNodes) {
this.checkedNameArr.push(item.name)
}
}
},
sure() {
//把选中的科室的name和id传到orgReg.vue
let obj = {
depIdList: "",
depListName: ""
}
obj.depIdList = this.checkedKeyArr.length!=0 ? this.checkedKeyArr.join(',') : this.selectTree.depIdList;
obj.depListName = this.checkedNameArr!=0 ? this.checkedNameArr.join(',') : this.selectTree.depListName;
this.dialogVisible = false;
this.$emit('depVal', obj);
}
}
}
</script>
<style lang="scss">
</style>