<template>
|
<div class="tree">
|
<div v-for="(item, index) of list" :key="index" @click.stop="clickIten(item)">
|
<div class="tree_item">
|
<i class="el-icon-caret-bottom" :class="{ 'activeColor': item.actived === 1 }" v-show="item.fsStatus === 1 && item.childList.length > 0"></i>
|
<i class="el-icon-caret-right color" v-show="item.childList.length > 0 && (item.fsStatus === 0 || !item.fsStatus)"></i>
|
<div class="tree_item_label long-title-style" :title="item.name" :class="{ 'activeColor': item.actived === 1 }">{{ item.name }}</div>
|
</div>
|
<div class="tree_childern" v-show="item.fsStatus === 1">
|
<tree
|
:list="item.childList"
|
:alllist="alllist"
|
:defaultProps="defaultProps"
|
@callback="callback"
|
/>
|
<!-- @callback="callback" -->
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
// import Bus from '@/utils/eventBus'
|
export default {
|
name: 'tree',
|
props: {
|
list: {
|
type: Array,
|
required: false,
|
default: () => []
|
},
|
alllist: {
|
type: Array,
|
required: false,
|
default: () => []
|
},
|
defaultProps: {
|
type: Object,
|
require: false,
|
default: () => {
|
return {
|
name: 'name',
|
status: 'status',
|
children: 'children',
|
id: 'id',
|
erpId: 'erpId'
|
}
|
}
|
}
|
},
|
data() {
|
return {
|
tempItem: {
|
id: null,
|
name: null,
|
erpId: null
|
}
|
}
|
},
|
methods: {
|
listForList(){
|
// console.log('===============================',this.alllist)
|
},
|
// 点击当前项
|
clickIten (item) {
|
// this.listForList()
|
const fsDate = item.fsDate === 0 || !item.fsDate ? 1 : 0
|
this.alllist.forEach(i => {
|
i.fsDate = 0
|
i.actived = 0
|
this.recursion1(i.childList)
|
})
|
item.fsDate = fsDate
|
item.actived = 1
|
if (item.childList.length > 0) {
|
item.fsStatus === 0 || !item.fsStatus ? item.fsStatus = 1 : item.fsStatus = 0
|
}
|
this.$emit('callback', item, item)
|
},
|
recursion1 (children) {
|
if (!children || children.length === 0){
|
return
|
}
|
children.forEach(item => {
|
item.actived = 0
|
if (item.childList && item.childList.length > 0) {
|
this.recursion1(item.childList)
|
}
|
// item[this.defaultProps.status] = false
|
// if (item[this.defaultProps.children]) {
|
// this.recursion(item[this.defaultProps.children])
|
// }
|
})
|
},
|
callback (data, item) {
|
if (this.tempItem.id === data.id) {
|
this.tempItem = {}
|
} else {
|
this.tempItem.id = data.id
|
this.tempItem.name = data.name
|
}
|
this.$emit('callback', data, item)
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.tree {
|
/*width: 100%;*/
|
/*height: auto;*/
|
/*border-radius: 5px;*/
|
/*overflow: hidden;*/
|
/*border: 1px solid #eeeeee;*/
|
/*box-sizing: border-box;*/
|
.tree_childern {
|
margin-left: 20px;
|
}
|
.activeItem {
|
background: #F4F7FC;
|
}
|
.tree_item {
|
display: flex;
|
align-items: center;
|
height: 48px;
|
cursor: pointer;
|
padding-left: 10px;
|
.tree_item_label {
|
font-size: 14px;
|
font-weight: 400;
|
color: #333333;
|
white-space: nowrap;
|
}
|
i {
|
margin-right: 5px;
|
}
|
.color {
|
color: #999999 !important;
|
}
|
.activeColor {
|
color: #305ED5 !important;
|
}
|
}
|
}
|
</style>
|
