<template>
|
<div class="product-tree-container" v-if="showFlag">
|
<el-input
|
placeholder="输入名称进行过滤"
|
style="width: 80%"
|
v-model="filterText"
|
size="small"
|
clearable
|
></el-input>
|
<el-divider></el-divider>
|
<el-tree
|
:style="'height:'+fullHeight+'px;'"
|
style="overflow: auto"
|
v-if="productTree.length > 0"
|
class="filter-tree"
|
node-key="id"
|
:props="defaultProps"
|
:default-expand-all="true"
|
:default-expanded-keys="expandedIds"
|
:current-node-key="checkedId"
|
:data="productTree"
|
:load="loadNode"
|
lazy
|
:expand-on-click-node="false"
|
:highlight-current="true"
|
@node-click="handleNodeClick"
|
:filter-node-method="filterNode"
|
ref="tree"
|
></el-tree>
|
</div>
|
</template>
|
<script>
|
export default {
|
name: 'ProductTree',
|
props: {
|
expandLevel: {// 展示层级
|
type: String,
|
default: 'L1'// 默认只展开一层
|
},
|
afferentLevel: {},
|
pageCode: ''
|
},
|
data() {
|
return {
|
checkedId:'',
|
fullHeight: '',
|
menuId: this.$store.state.sidebarMenuActiveName,
|
filterText: '',
|
productTree: [],
|
expandedIds: [],
|
nodeKey:'',
|
showLevel: '', // 需要展示的level
|
busiLevels: [], // 关联业务的
|
showFlag: false,
|
defaultProps: {
|
children: 'children',
|
label: 'name',
|
isLeaf: 'leaf'
|
}
|
}
|
},
|
watch: {
|
filterText(val) {
|
this.$refs.tree.filter(val)
|
}
|
},
|
mounted() {
|
this.getInfo()
|
this.fullHeight = document.documentElement.clientHeight - 240
|
window.onresize = () => {
|
return (() => {
|
this.fullHeight = document.documentElement.clientHeight - 240
|
})()
|
}
|
// this.getProductList()
|
},
|
methods: {
|
defaultOpenTree(){
|
this.$nextTick(()=>{
|
console.log(this.checkedId,'this.checkedId')
|
this.$nextTick(()=>{
|
let selected = this.$refs.tree.getNode(this.checkedId)
|
console.log(selected,'defaultOpenTree:selected')
|
console.log(selected.data,'defaultOpenTree:selected.data')
|
if(selected.data){
|
|
this.handleNodeClick(selected.data)
|
}
|
})
|
// console.log(selected,'selected selected')
|
})
|
},
|
async getInfo() {
|
console.log(this.menuId, 'product-tree this.menuId')
|
console.log(this.$store.state.sidebarMenuActiveName, 'product-tree this.$store.state.sidebarMenuActiveName')
|
this.showFlag = true
|
await this.getProductList()
|
},
|
async getProductList() {
|
let that = this
|
let productTree = []
|
|
// let d = new Date().getTime()
|
if (that.$store.state.product && that.$store.state.product.products.length > 0) {
|
console.log(that.$store.state.product,'that.$store.state.product')
|
//alert('has')
|
productTree = JSON.parse(JSON.stringify(that.$store.state.product.products))
|
console.log(productTree,'productTree')
|
} else {
|
//alert('/product/treeSelect')
|
if (this.afferentLevel) {
|
that.showLevel = this.afferentLevel
|
}
|
let res = await that.$http.get('/product/treeSelect', {params: {showLevel: that.showLevel,
|
pageCode: that.pageCode}})
|
if (res.success && res.data.length>0) {
|
console.log(res.data,'res.data')
|
productTree = res.data
|
console.log(productTree,'productTree')
|
console.log(productTree[0].productIds,'productTree[0].productIds')
|
if (productTree[0].productIds!=null) {
|
let expandedIds = productTree[0].productIds.split(',')
|
this.expandedIds = expandedIds
|
this.checkedId = productTree[0].projectId
|
this.defaultOpenTree()
|
}
|
console.log(this.checkedId,'this.checkedId')
|
console.log(this.expandedIds,'this.expandedIds')
|
}
|
}
|
|
// 过滤
|
that.productTree = []
|
|
productTree.forEach(product => {
|
// if (product.level <= that.showLevel) { // 需要展示的
|
// 处理备份数据
|
let p = {
|
id: product.id,
|
name: product.name,
|
level: product.level,
|
area: product.area
|
}
|
let children = that.getChildren(product)
|
if ((children || []).length > 0) {
|
p.children = children
|
} else {
|
p.leaf = true // 叶子节点
|
}
|
|
if (product.level <= that.expandLevel) { // 需要展开的
|
that.expandedIds.push(product.id)
|
}
|
if (product.expandedIds) { // 需要展开的
|
that.expandedIds.push(product.expandedIds)
|
}
|
if (product.checkId) { // 需要展开的
|
this.checkId = product.checkId
|
}
|
|
that.productTree.push(p)
|
// }
|
})
|
// window.console.log(new Date().getTime() - d)
|
},
|
getChildren(product) {
|
let that = this
|
let result = []
|
product.children.forEach(p2 => {
|
if (p2.level <= that.expandLevel) { // 需要展开的
|
that.expandedIds.push(p2.id)
|
}
|
// if (p2.level <= that.showLevel) {
|
let newProduct = {
|
id: p2.id,
|
name: p2.name,
|
level: p2.level,
|
area: p2.area
|
}
|
let children = this.getChildren(p2)
|
if ((children || []).length > 0) {
|
newProduct.children = children
|
} else {
|
newProduct.leaf = true // 叶子节点
|
}
|
result.push(newProduct)
|
// }
|
})
|
return result
|
},
|
loadNode(node, resolve) {
|
let that = this
|
if (node.level === 0) {
|
return resolve(that.productTree)
|
} else if (node.data) {
|
return resolve((node.data.children || []))
|
} else {
|
return resolve([])
|
}
|
},
|
filterNode(value, data) {
|
if (!value) return true
|
return data.name.indexOf(value) !== -1
|
},
|
handleNodeClick(data) {
|
// if (this.busiLevels.includes(data.level)) {
|
// this.$emit('on-selected', data)
|
// }
|
this.$emit('on-selected', data)
|
}
|
}
|
}
|
</script>
|
<style>
|
/*.product-tree-container {*/
|
/*max-height: 650px;*/
|
/*}*/
|
</style>
|
