<template>
|
<select-king
|
ref="selectKing"
|
v-model="selectVal"
|
:disabled="isDataBase"
|
optionsWidth="300px"
|
placeholder="请选择组织"
|
@visible-change="visibleChange"
|
>
|
<div class="type-library">
|
<div class="overflow-auto px-3 pt-2 tree-box">
|
<Tree
|
id="tree"
|
ref="tree2"
|
node-key="id"
|
class="float-left"
|
style="width: 100%"
|
:data="data"
|
:props="option"
|
:expand-on-click-node="false"
|
:show-checkbox="showCheckbox"
|
:highlight-current="highlightCurrent"
|
:default-expand-all="isOpenAll"
|
@node-click="handleNodeClick"
|
@check-change="handleCheckChange"
|
/>
|
</div>
|
</div>
|
</select-king>
|
</template>
|
<script>
|
import selectKing from '@/components/selectKing'
|
import { FormItem, Form, CheckboxGroup, Checkbox, Tree } from 'element-ui'
|
import { findInArrJson } from '../../../components/common/util.js'
|
|
export default {
|
name: 'SelectOrgTree',
|
components: {
|
elFormItem: FormItem,
|
elCheckboxGroup: CheckboxGroup,
|
elCheckbox: Checkbox,
|
elForm: Form,
|
selectKing,
|
Tree
|
},
|
props: {
|
data: {
|
type: Array,
|
default: () => [],
|
required: true
|
},
|
option: {
|
type: Object,
|
default: () => ({
|
children: 'child',
|
label: 'name'
|
})
|
},
|
isOpenAll: {
|
default: true,
|
type: Boolean
|
},
|
isDataBase: {
|
default: false,
|
type: Boolean
|
},
|
highlightCurrent: { default: true, type: Boolean },
|
showCheckbox: { default: false, type: Boolean },
|
condition: null
|
},
|
data() {
|
return {
|
checkedList: [],
|
isCheckBox: false
|
}
|
},
|
computed: {
|
selectVal() {
|
return this.checkedList.map(item => item.name).join('/')
|
},
|
checkedIds() {
|
return this.checkedList.map(item => item.id)
|
}
|
},
|
methods: {
|
handleNodeClick(node) {
|
this.$emit('currentNode', node)
|
},
|
getCheckList() {
|
return this.checkedList
|
},
|
getOrgTree(data, name, val, list = []) {
|
/* eslint-disable */
|
if (!data) {
|
return false
|
}
|
for (let item of data) {
|
if (item[name] == val) {
|
list.push(item)
|
}
|
if (item.child) {
|
const valData = this.getOrgTree(item.child, name, val, list)
|
if (valData) {
|
return valData
|
}
|
}
|
}
|
return list
|
},
|
getTree(data, name, val) {
|
if (!data) {
|
return false
|
}
|
for (let item of data) {
|
if (item[name] == val) {
|
return item
|
} else if (item.child) {
|
const valData = this.getTree(item.child, name, val)
|
if (valData) {
|
return valData
|
}
|
}
|
}
|
},
|
/* 勾选选框 */
|
handleCheckChange(data, checked, indeterminate) {
|
// 获得在当前数组中的index
|
let dataIndex = null
|
console.log(this.checkedList)
|
for (let [index, item] of this.checkedList.entries()) {
|
console.log(item, '---dataIndex')
|
if (data && item && item.id === data.id) {
|
dataIndex = index
|
break
|
}
|
}
|
/* 选择父节点后 */
|
if (this.condition && !indeterminate) {
|
const arr = this.getOrgTree(
|
[data],
|
this.condition.key,
|
this.condition.value
|
)
|
for (let iteam of arr) {
|
let arrindex = findInArrJson(iteam.id, this.checkedList, 'id')
|
if (checked) {
|
if (arrindex === -1) {
|
this.checkedList.push(iteam)
|
}
|
} else {
|
this.checkedList.splice(arrindex, 1)
|
}
|
}
|
return false
|
}
|
if (checked) {
|
// 添加
|
this.checkedList.push(data)
|
} else if (!indeterminate && dataIndex !== null) {
|
// 删除
|
this.checkedList.splice(dataIndex, 1)
|
} else if (indeterminate && dataIndex !== null) {
|
// 删除
|
this.checkedList.splice(dataIndex, 1)
|
|
const arr = data[this.option.children] || []
|
for (let iteam of arr) {
|
let arrindex = findInArrJson(iteam.id, this.checkedList, 'id')
|
|
if (arrindex === -1) {
|
this.checkedList.push(iteam)
|
}
|
}
|
}
|
/* console.log(
|
this.checkedIds,
|
'this.checkedIds',
|
data,
|
checked,
|
indeterminate,
|
dataIndex
|
) */
|
this.$emit('check-change', {
|
list: this.checkedList,
|
ids: this.checkedIds
|
})
|
},
|
// * 设置选中状态
|
setCurrentKey(id) {
|
this.$nextTick(() => {
|
this.$refs.tree2.setCurrentKey(id)
|
})
|
},
|
// 清空选中状态
|
removeCurrentNode() {
|
this.$refs.tree2.setCurrentKey(null)
|
},
|
// * 获取被选中节点
|
getCurrentNode() {
|
return this.$refs.tree2.getCurrentNode()
|
},
|
visibleChange(value) {
|
if (!value) {
|
// 关闭
|
this.$emit('hide-change', {
|
list: this.checkedList,
|
ids: this.checkedIds
|
})
|
}
|
},
|
initVal(defaultIds, listData = this.data) {
|
let list = []
|
defaultIds.map(id => {
|
const item = this.getTree(listData, 'id', id)
|
item && list.push(item)
|
})
|
this.checkedList = list
|
this.$nextTick(() => {
|
this.checkedList.map(item => {
|
this.$refs.tree2.setChecked(item, true)
|
})
|
})
|
}
|
},
|
watch: {}
|
}
|
</script>
|
<style lang="scss" scoped>
|
.type-library {
|
.select-liby {
|
padding: 2px 20px 2px 0;
|
a {
|
cursor: pointer;
|
}
|
a.active {
|
font-weight: 600;
|
text-decoration: underline;
|
}
|
a:hover {
|
color: #ccc;
|
}
|
a.active:hover {
|
color: #333;
|
}
|
}
|
}
|
.library-list {
|
h6 {
|
height: 30px;
|
line-height: 30px;
|
cursor: pointer;
|
}
|
.alarm-item {
|
line-height: 30px;
|
|
.alarm-icon {
|
display: inline-block;
|
vertical-align: middle;
|
width: 15px;
|
height: 15px;
|
line-height: 15px;
|
background: #d9534f;
|
border-radius: 50%;
|
overflow: hidden;
|
text-align: center;
|
color: #fff;
|
}
|
.alarm-name {
|
display: inline-block;
|
vertical-align: middle;
|
line-height: 15px;
|
padding: 2px 4px;
|
max-width: 100px;
|
cursor: pointer;
|
}
|
.alarm-name.active {
|
background: #35bde7;
|
color: #fff;
|
}
|
}
|
}
|
.tree-box {
|
min-height: 100px;
|
}
|
</style>
|
