<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
|
accordion
|
:style="'height:'+fullHeight+'px;'"
|
style="overflow: auto"
|
v-if="productTree.length > 0"
|
class="filter-tree"
|
node-key="id"
|
:props="defaultProps"
|
:default-expanded-keys="expandedIds"
|
: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: 'ProductTreeTest',
|
props: {
|
expandLevel: {// 展示层级
|
type: String,
|
default: 'L1'// 默认只展开一层
|
},
|
afferentLevel: {}
|
},
|
data() {
|
return {
|
fullHeight: '',
|
menuId: this.$store.state.sidebarMenuActiveName,
|
filterText: '',
|
productTree: [],
|
expandedIds: [],
|
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
|
})()
|
}
|
},
|
methods: {
|
async getInfo() {
|
console.log(this.menuId, 'product-tree this.menuId')
|
console.log(this.$store.state.sidebarMenuActiveName, 'product-tree this.$store.state.sidebarMenuActiveName')
|
// let arr = []
|
// if (this.$store.state.product) {
|
// arr = this.$store.state.product.menuConfigs.filter(config => config.menuId === this.menuId)
|
// console.log(this.$store.state.product.menuConfigs,'1233333')
|
// } else {
|
// let res = await this.$http.get(`/sys/menuConfig/${this.menuId}`)
|
// if (res.success && res.data.hasSystemTree) {
|
// arr.push(res.data)
|
// }
|
// }
|
// console.log(arr,'arr')
|
// if (arr.length > 0) {
|
// this.showFlag = true
|
// let menuConfig = arr[0]
|
// let busiLevels = []
|
// if (menuConfig.hasOne) {
|
// busiLevels.push('L1')
|
// }
|
// if (menuConfig.hasTwo) {
|
// busiLevels.push('L2')
|
// }
|
// if (menuConfig.hasThree) {
|
// busiLevels.push('L3')
|
// }
|
// if (menuConfig.hasFour) {
|
// busiLevels.push('L4')
|
// }
|
// this.busiLevels = busiLevels
|
// this.showLevel = menuConfig.showLevel
|
//
|
// }
|
this.showFlag = true
|
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/treeSelectTest', {params: {showLevel: that.showLevel}})
|
if (res.success) {
|
console.log(res.data,'res.data')
|
productTree = res.data
|
}
|
}
|
|
// 过滤
|
that.productTree = []
|
|
productTree.forEach(product => {
|
// if (product.level <= that.showLevel) { // 需要展示的
|
// 处理备份数据
|
let p = {
|
id: product.id,
|
name: product.name,
|
level: product.level
|
}
|
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)
|
}
|
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)
|
}*/
|
that.expandedIds.push(p2.id)
|
let newProduct = {
|
id: p2.id,
|
name: p2.name,
|
level: p2.level
|
}
|
let children = this.getChildren(p2)
|
if ((children || []).length > 0) {
|
newProduct.children = children
|
} else {
|
newProduct.leaf = true // 叶子节点
|
}
|
result.push(newProduct)
|
/* if (p2.level <= that.showLevel) {
|
let newProduct = {
|
id: p2.id,
|
name: p2.name,
|
level: p2.level
|
}
|
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>
|
