<template>
|
<div id="tree-share">
|
<el-input :placeholder="searchTitle" class="searchName" v-model="searchValue">
|
<el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button>
|
</el-input>
|
<div class="py-2"></div>
|
<Tree
|
:data="data"
|
:props="option"
|
show-checkbox
|
:default-expand-all="isOpenAll"
|
@check="handleNodeClick"
|
highlight-current
|
:check-on-click-node="true"
|
:check-strictly="false"
|
:expand-on-click-node="false"
|
:render-content="renderContent"
|
id="tree"
|
ref="treeShare"
|
node-key="id"
|
:filter-node-method="filterNode"
|
/>
|
</div>
|
</template>
|
|
<script>
|
import { Tree, Button, Input } from 'element-ui'
|
export default {
|
name: 'ShareTree',
|
data: () => ({
|
searchValue: '',
|
nodeStatus: {}
|
}),
|
props: {
|
data: {
|
type: Array,
|
default: () => [],
|
required: true
|
},
|
option: {
|
type: Object,
|
default: () => ({
|
children: 'child',
|
label: 'userInfo'
|
})
|
},
|
isOpenAll: {
|
default: false,
|
type: Boolean
|
},
|
index: {
|
type: Number,
|
required: false,
|
default: 0
|
},
|
searchTitle: {
|
type: String,
|
required: false,
|
default: ''
|
}
|
},
|
computed: {
|
noneImg() {
|
return 'this.src="' + require('@/assets/img/noneImg.png') + '"'
|
}
|
},
|
watch: {
|
data: {
|
handler(newValue, oldValue) {
|
// console.log(newValue, '子组件监听实时变化数据')
|
}
|
}
|
},
|
methods: {
|
// * 获取组织树
|
getOrgDevice(data) {
|
return new Promise((resolve, reject) => {
|
if (!data) {
|
reject(new Error('递归函数传入参数存在问题！！！'))
|
}
|
const list = []
|
const _recursionFn = data => {
|
for (let item of data) {
|
if (item.type !== 'MENU') {
|
// resolve(item)
|
let listKey = list.map(iteam => iteam.id)
|
if (!listKey.includes(item.id)) {
|
list.push(item)
|
}
|
} else if (item.child) {
|
_recursionFn(item.child)
|
}
|
}
|
}
|
_recursionFn(data)
|
resolve(list)
|
})
|
},
|
async handleNodeClick(node) {
|
console.log(node, 'node handleNodeClick')
|
if (node.isCheck) {
|
this.haveChildFalse(node)
|
} else {
|
this.haveChildTrue(node)
|
}
|
let checkNodes = this.$refs.treeShare.getCheckedNodes()
|
checkNodes = await this.getOrgDevice(checkNodes)
|
this.$emit('currentNode', this.data, node, checkNodes)
|
},
|
haveChildTrue(node) {
|
this.$set(node, 'isCheck', true)
|
if (node && node.child && node.child.length !== 0) {
|
node.child.forEach((item, index) => {
|
this.haveChildTrue(item)
|
})
|
}
|
},
|
haveChildFalse(node) {
|
this.$set(node, 'isCheck', false)
|
if (node && node.child && node.child.length !== 0) {
|
node.child.forEach((item, index) => {
|
this.haveChildFalse(item)
|
})
|
}
|
},
|
// * 设置选中状态
|
setCurrentKey(ids) {
|
if (ids && ids.length !== 0) {
|
ids.forEach((i, index) => {
|
this.$refs.treeShare.setChecked(i, true)
|
})
|
}
|
},
|
/** 全部取消勾选 */
|
cancleCheck() {
|
this.$refs.treeShare.setCheckedKeys([])
|
},
|
// * 设置选中状态
|
setCurrentKeyOne(id) {
|
console.log(id, '设置选中的集群节点')
|
this.$refs.treeShare.setChecked(id, true)
|
},
|
// * 设置选中状态,希望同时改变节点颜色
|
setKeyOneAndClass(data) {
|
console.log(data, '设置树节点颜色')
|
let keys = {}
|
let errorkeys = []
|
let sukeys = []
|
this.nodeStatus = {}
|
/** 判断传过来的对象是数组还是Object */
|
if (data instanceof Array) {
|
if (data && data.length !== 0) {
|
data.forEach(item => {
|
/** 判断该节点是否分享成功 */
|
if (item.isSuccess === -1) {
|
errorkeys.push(item.uuid)
|
console.log(errorkeys, 'errorkeys')
|
this.$set(keys, 'errorkeys', errorkeys)
|
} else {
|
sukeys.push(item.uuid)
|
this.$set(keys, 'sukeys', sukeys)
|
}
|
})
|
}
|
} else {
|
if (data.notDataBase && data.notDataBase.length !== 0) {
|
data.notDataBase.forEach(item => {
|
this.setCurrentKeyOne(item.uuid)
|
sukeys.push(item.uuid)
|
})
|
this.$set(keys, 'sukeys', sukeys)
|
} else if (data.existDataBase && data.existDataBase.length !== 0) {
|
data.existDataBase.forEach(item => {
|
this.setCurrentKeyOne(item.uuid)
|
errorkeys.push(item.uuid)
|
})
|
this.$set(keys, 'errorkeys', errorkeys)
|
} else {
|
if (data.allDataBase && data.allDataBase.length !== 0) {
|
data.allDataBase.forEach(item => {
|
this.setCurrentKeyOne(item.uuid)
|
})
|
}
|
}
|
}
|
|
console.log(keys, 'keys')
|
this.nodeStatus = keys
|
},
|
// 清空选中状态
|
removeCurrentNode(data) {
|
console.log(data, '进入清空选中状态')
|
if (data && data.length !== 0) {
|
let keys = []
|
data.forEach(item => {
|
keys.push(item)
|
})
|
console.log(keys, '存储的选中的keys')
|
keys.forEach(item => {
|
this.$refs.treeShare.setChecked(item, false)
|
})
|
|
// this.$refs.treeShare.setCheckedNodes(null)
|
} else {
|
this.$refs.treeShare.setCheckedKeys([])
|
}
|
},
|
/** 根据指定的id数组取消勾选 */
|
removeCheck(data, node) {
|
if (data && data.length !== 0) {
|
data.forEach(i => {
|
this.$refs.treeShare.setChecked(i, false)
|
})
|
/** 清除第一颗树的选中效果后 */
|
this.handleNodeClick(node)
|
}
|
},
|
// * 过滤
|
handleSearch() {
|
this.$refs.treeShare.filter(this.searchValue)
|
},
|
// * 过滤
|
filterNode(value, data) {
|
if (!value) return true
|
return data.name.indexOf(value) !== -1
|
},
|
// * 获取被选中节点
|
getCurrentNode() {
|
return this.$refs.treeShare.getCurrentNode()
|
},
|
// 获取被选中的所有节点
|
getCurrentNodes() {
|
return this.$refs.treeShare.getCheckedNodes()
|
},
|
// 接触禁用状态
|
unDisabled(data) {
|
console.log(data, '解除禁用')
|
this.data = data
|
},
|
renderContent(h, { node, data, store }) {
|
/* eslint-disable */
|
if (data.type === 'MENU') {
|
return <span>{node.label}</span>
|
} else {
|
return (
|
<div class="person-tree-item">
|
<img
|
width="40px"
|
height="40px"
|
src={'/httpImage/' + data.icon}
|
onerror={this.noneImg}
|
class="mx-2"
|
/>
|
<span>{data.userInfo}</span>
|
</div>
|
)
|
}
|
}
|
},
|
components: {
|
Tree,
|
elInput: Input,
|
elButton: Button
|
}
|
}
|
</script>
|
|
<style lang="scss" socped>
|
#tree-share {
|
.el-tree-node .el-tree-node__content {
|
line-height: 40px;
|
height: 40px;
|
font-size: 16px;
|
border-radius: 2px;
|
position: relative;
|
.el-checkbox {
|
margin-bottom: 0;
|
}
|
.el-tree-node__expand-icon {
|
font-size: 20px;
|
position: absolute;
|
top: 4px;
|
right: 0px;
|
-webkit-transform: rotate(180deg);
|
transform: rotate(180deg);
|
}
|
.el-tree-node__expand-icon.expanded {
|
-webkit-transform: rotate(90deg);
|
transform: rotate(90deg);
|
}
|
}
|
#tree > .el-tree-node > :first-child.el-tree-node__content {
|
background: #35bde7;
|
color: #fff;
|
// color: brown;
|
.el-tree-node__expand-icon {
|
color: #fff;
|
}
|
.el-checkbox {
|
margin-left: 10px;
|
}
|
}
|
#tree
|
> .el-tree-node
|
> .el-tree-node__children
|
> .el-tree-node
|
> :first-child.el-tree-node__content {
|
background: #f8f8f8;
|
}
|
.el-checkbox__input.is-checked .el-checkbox__inner,
|
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
|
background-color: #fff;
|
border-color: #fff;
|
}
|
.el-checkbox__input.is-checked .el-checkbox__inner::after {
|
border-color: #333;
|
}
|
}
|
.person-tree-item {
|
height: 40px;
|
width: calc(100% - 30px);
|
color: #333;
|
-webkit-touch-callout: none;
|
-webkit-user-select: none;
|
-moz-user-select: none;
|
-ms-user-select: none;
|
user-select: none;
|
img {
|
display: inline-block;
|
vertical-align: top;
|
}
|
span {
|
display: inline-block;
|
width: calc(100% - 60px);
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
}
|
</style>
|
<style>
|
#tree-share .el-button--default {
|
height: 36px;
|
background-color: #fff;
|
border-left: 0;
|
font-size: 20px !important;
|
padding: 6px 10px;
|
margin-top: -6px;
|
color: #35bde7;
|
font-weight: 900 !important;
|
}
|
</style>
|
