<template>
<div class="tree-container">
<div v-if="canSearch" class="search-tree can-search">
<Input
v-model="searchValue"
placeholder="请输入关键字搜索"
/>
<img class="search-icon" src="@/assets/images/search2.png" alt="" />
</div>
<el-tree
v-if="show"
ref="tree"
:props="props"
:data="insideTreeData"
node-key="id"
class="filter-tree"
:show-checkbox="checkbox"
:check-strictly="checkStrictly"
highlight-current
:expand-on-click-node="expandOnClickNode"
:filter-node-method="filterNode"
@node-contextmenu="rightClick"
@node-expand="handeleNodeExpand"
@node-click="handleNodeClick"
:default-checked-keys="JSON.parse(defaultCheckedKeys)"
@check-change="handleCheckChange"
>
</el-tree>
</div>
</template>
<script>
export default {
name: 'Tree',
props: {
value: {
type: Array,
default() {
return []
},
},
checkStrictly: {
type: Boolean,
default: false,
},
checkbox: {
type: Boolean,
default: false,
},
defaultCheckedKeys: {
type: String,
default: '[]',
},
expandOnClickNode: {
type: Boolean,
default: false,
},
/**
* @description 是否可搜索
*/
canSearch: {
type: Boolean,
default: false,
},
props: {
type: Object,
default: () => {
return { label: 'label', isLeaf: 'leaf' }
},
},
url: {
type: String,
default: '/api/Dept',
},
// 默认是机构数据，可选菜单数据 menu
type: {
type: String,
default: 'unit',
},
},
data() {
return {
treeNode:[],
treeData:[],
insideTreeData: [],
searchValue: '',
show: true,
}
},
methods: {
// 过滤
filterNode(value, data) {
if (!value) return true
if(data.fullname){
return data.fullname.indexOf(value) !== -1
}else{
return data.fullName.indexOf(value) !== -1
}
},
handleClear(e) {
// if (e.target.value === '') this.insideTreeData = this.value
},
// 搜索
handleSearch() {
this.$emit('on-search', this.searchValue)
},
// 获取树的数据
handleTreeData() {
this.insideTreeData = this.value
},
// 右键
rightClick(event, data, node, obj) {
this.treeNode = node // 节点组件本身
this.treeData = data // 属性的数组中该节点所对应的对象、节点对应的
this.$emit('rightClick', event, data, node, obj)
},
// 选中机构
handleNodeClick(data, node) {
this.$emit('handleNodeClick', data, node)
},
// 删除树节点
delTreeNode(node){
node.parent.removeChild(node)
},
//新增树节点
addunit(data){
this.treeNode.doCreateChildren([data])
// console.log(this.treeNode,'--node---')
},
// 修改树节点
editunit(node,key,data){
// console.log(key,data.id)
this.$set(node, 'data', data)
// this.treeNode.parent.childNodes.map(res=> {
// if(res.key === key){
// res.id = data.sort
// }
// })
// // 排序得优化
// this.treeNode.parent.childNodes.sort((a,b)=>b.id-a.id)
// console.log('排序',this.treeNode.parent.childNodes)
},
// 设置值
setCheckedKeys(data) {
return this.$refs.tree.setCheckedKeys(data)
},
// 改变check
handleCheckChange(data, checked, indeterminate) {
// // 勾选的key
// var checkedKeys = this.$refs.tree.getCheckedKeys()
// // 暂选状态的母tab的key
// var halfKeys = this.$refs.tree.getHalfCheckedKeys()
// // 合并两个数组
// const save = checkedKeys.concat(halfKeys)
this.$emit('handleCheckChange', this.$refs.tree.getCheckedKeys())
},
// 展开事件
handeleNodeExpand(data, node, ele){
this.$emit('handeleNodeExpand',data, node, ele)
},
// 重新加载
reload() {
this.show = false
this.$nextTick(() => {
this.show = true
})
},
},
watch: {
searchValue(val) {
this.$refs.tree.filter(val)
},
value(val) {
this.searchValue = ''
this.handleTreeData()
},
},
mounted() {
this.handleTreeData()
this.$eventBus.$on('clearSearchValue', () => {
this.searchValue = ''
})
},
}
</script>
<style>
.el-tree>.el-tree-node{
min-width:100%;
display: inline-block;
}
.tree-container {
height: calc(100vh - 75px);
overflow: auto;
}
</style>
<style lang="less">
.search-tree{
border-radius: 4px;
position: relative;
margin: 10px 0;
// border: 1px solid #D8D8D8 !important;
input {
// height: 35px;
padding: 0 35px 0 10px;
// 修改光标颜色
// caret-color: #51D8DE;
&::placeholder {
color: rgba(0,0,0,0.25);
opacity: 1; /* Firefox */
}
&::-ms-input-placeholder {
color: rgba(0,0,0,0.25);
}
}
img.search-icon {
width: 16px;
height: 16px;
cursor: pointer;
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
}
}
</style>
