<template>
|
<a-drawer
|
:width='400'
|
placement='left'
|
:closable='false'
|
:visible='visible'
|
:get-container='false'
|
:wrap-style="{ position: 'absolute' }"
|
@close='onClose'
|
>
|
<template slot='title'>
|
<div style='display: flex;justify-content: space-between;align-items: center'>
|
<span>选择根节点</span>
|
<a-button @click='onSelectSave' size='small' type="primary">
|
保存
|
</a-button>
|
</div>
|
</template>
|
|
|
|
<div style='background: #fff;height: 100%; padding: 10px 20px' >
|
<a-input-search @search='onSearch' style='width:100%;' placeholder='请输入部门名称' />
|
<!--组织机构-->
|
<a-tree
|
showLine
|
:defaultExpandAll='true'
|
:selectedKeys='selectedKeys'
|
:checkStrictly='true'
|
@select='onSelect'
|
:dropdownStyle="{maxHeight:'200px',overflow:'auto'}"
|
:treeData='departTree'
|
:autoExpandParent='autoExpandParent'
|
:expandedKeys='iExpandedKeys'
|
@expand='onExpand'
|
/>
|
|
</div>
|
|
|
</a-drawer>
|
</template>
|
|
<script>
|
import { queryMyDepartTreeList, searchByKeywords } from '@api/api'
|
import Vue from 'vue'
|
|
export default {
|
name: 'CompanyLeftDrawer',
|
data() {
|
return {
|
visible: false,
|
treeData: [],
|
departTree: [],
|
loading: false,
|
userIdentity: '',
|
iExpandedKeys: [],
|
selectedKeys: [],
|
checkedKeys: [],
|
autoExpandParent: true
|
}
|
}, methods: {
|
onOpen() {
|
this.visible = true
|
|
this.loadTree()
|
|
},
|
|
onClose() {
|
this.visible = false
|
},
|
onSearch(value) {
|
let that = this
|
if (value) {
|
searchByKeywords({ keyWord: value, myDeptSearch: '1' }).then((res) => {
|
if (res.success) {
|
that.departTree = []
|
for (let i = 0; i < res.result.length; i++) {
|
let temp = res.result[i]
|
that.departTree.push(temp)
|
}
|
} else {
|
that.$message.warning(res.message)
|
}
|
})
|
} else {
|
that.loadTree()
|
}
|
|
},
|
loadTree() {
|
var that = this
|
that.treeData = []
|
that.departTree = []
|
queryMyDepartTreeList().then((res) => {
|
if (res.success && res.result) {
|
for (let i = 0; i < res.result.length; i++) {
|
let temp = res.result[i]
|
that.treeData.push(temp)
|
that.departTree.push(temp)
|
that.setThisExpandedKeys(temp)
|
// console.log(temp.id)
|
}
|
this.loading = false
|
}
|
that.userIdentity = res.message
|
})
|
},
|
setThisExpandedKeys(node) {
|
//只展开一级目录
|
if (node.children && node.children.length > 0) {
|
this.iExpandedKeys.push(node.key)
|
//下方代码放开注释则默认展开所有节点
|
|
for (let a = 0; a < node.children.length; a++) {
|
this.setThisExpandedKeys(node.children[a])
|
}
|
|
}
|
},
|
onExpand(expandedKeys) {
|
// console.log('onExpand', expandedKeys)
|
// if not set autoExpandParent to false, if children expanded, parent can not collapse.
|
// or, you can remove all expanded children keys.
|
this.iExpandedKeys = expandedKeys
|
this.autoExpandParent = false
|
},
|
onSelect(selectedKeys, e) {
|
if (this.selectedKeys[0] !== selectedKeys[0]) {
|
this.selectedKeys = [selectedKeys[0]]
|
if(this.selectedKeys && this.selectedKeys.length > 0){
|
this.$emit("selectDepart",this.selectedKeys[0])
|
}
|
|
}
|
let record = e.node.dataRef
|
this.checkedKeys.push(record.id)
|
|
},
|
onSelectSave(){
|
this.$emit("ok",this.selectedKeys[0])
|
this.onClose()
|
}
|
}
|
}
|
</script>
|
|
<style lang='less' scoped>
|
@import '~@assets/less/common.less';
|
/deep/ .ant-drawer-body{
|
padding: 0;
|
}
|
|
|
|
</style>
|
