<template>
|
<div class="product-tree-container" v-if="showFlag" :style="'height:'+fullHeight+'px;'">
|
<el-input
|
placeholder="输入名称进行过滤"
|
style="width: 80%"
|
v-model="filterText"
|
size="small"
|
clearable
|
></el-input>
|
<el-divider></el-divider>
|
<el-tree
|
style="overflow: auto"
|
v-if="productTree.length > 0"
|
node-key="id"
|
:props="defaultProps"
|
:default-expanded-keys="expandedIds"
|
:data="productTree"
|
:load="loadNode"
|
:render-content="renderContent"
|
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: 'ZtBoatTree',
|
props: {
|
expandLevel: {// 展示层级
|
type: String,
|
default: 'model'// 默认只展开一层
|
}
|
},
|
data() {
|
return {
|
isHasData:false,
|
fullHeight: '',
|
menuId: this.$store.state.sidebarMenuActiveName,
|
filterText: '',
|
productTree: [],
|
expandedIds: [],
|
showLevel: '', // 需要展示的level
|
busiLevels: [], // 关联业务的
|
showFlag: true,
|
defaultProps: {
|
children: 'children',
|
label: 'name',
|
isLeaf: 'leaf'
|
}
|
}
|
},
|
watch: {
|
filterText(val) {
|
this.$refs.tree.filter(val)
|
}
|
},
|
mounted() {
|
this.getInfo()
|
this.fullHeight = (document.documentElement.clientHeight - 180)
|
window.onresize = () => {
|
return (() => {
|
this.fullHeight = (document.documentElement.clientHeight - 180)
|
})()
|
}
|
},
|
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)
|
// } else {
|
// let res = await this.$http.get(`/sys/menuConfig/${this.menuId}`)
|
// if (res.success && res.data.hasSystemTree) {
|
// arr.push(res.data)
|
// }
|
// }
|
this.showLevel = 'equipment' //menuConfig.showLevel
|
this.getProductList()
|
},
|
async getProductList() {
|
let that = this
|
{
|
let res = await that.$http.get('/ztProduct/getTreeNodes')
|
if (res.success) {
|
console.log(res.data,'res.data')
|
that.productTree = res.data
|
}
|
}
|
console.log(that.productTree, 'that.productTre')
|
},
|
renderContent(h, { node, data, store }) {
|
// console.log(data,'data wenTe')
|
if (data.hasNotData == 1) {
|
return <span style="color:#d0c8c4">{node.label}</span>;
|
} else {
|
return <span>{node.label}</span>;
|
}
|
},
|
async loadNode(node, resolve) {
|
console.log(node.data,'node.data')
|
let that = this
|
if (node.level === 0) {
|
return resolve(that.productTree)
|
} else if (node.data) {
|
if(node.data.leaf === false){
|
let res = await that.$http.get(`/ztProduct/getTreeNodes?pid=${node.data.id}`)
|
if(res.success){
|
if(res.data.length>=0){
|
return resolve((res.data || []))
|
}
|
}
|
}
|
} 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)
|
}
|
}
|
}
|
}
|
</script>
|
<style>
|
/*.product-tree-container {*/
|
/*max-height: 650px;*/
|
/*}*/
|
.hasData .el-tree-node__label{
|
color:red;
|
}
|
</style>
|
