<template>
|
<div class="product-tree-container " :style="'height:' + tree_Hei +'px'">
|
<el-input
|
placeholder="输入名称进行过滤"
|
style="width: 60%"
|
v-model="filterText"
|
size="small"
|
clearable
|
></el-input>
|
<el-button type="primary" @click="add()" style="margin: 10px 0 0 10px;padding: 9px 18px !important;">新增</el-button>
|
<el-divider></el-divider>
|
<el-tree
|
style="height: 90%;overflow: auto"
|
class="filter-tree"
|
:data="productList"
|
:props="defaultProps"
|
default-expand-all
|
:expand-on-click-node="false"
|
:highlight-current="true"
|
@node-click="handleNodeClick"
|
:filter-node-method="filterNode"
|
ref="tree"
|
></el-tree>
|
<!-- 弹窗, 新增 / 修改 -->
|
<add-or-update @refreshDataList="getProductList()" ref="AddOrUpdate"/>
|
</div>
|
</template>
|
<script>
|
import AddOrUpdate from './XhProductModel-AddOrUpdate'
|
|
export default {
|
name: 'ProductModelTree',
|
props: {},
|
|
data() {
|
return {
|
filterText: '',
|
productList: [],
|
tree_Hei: document.documentElement.clientHeight - 200,
|
defaultProps: {
|
children: 'children',
|
label: 'name'
|
}
|
}
|
},
|
watch: {
|
filterText(val) {
|
this.$refs.tree.filter(val)
|
}
|
},
|
components: {
|
AddOrUpdate
|
},
|
mounted() {
|
this.getProductList()
|
},
|
methods: {
|
// 获取系统列表
|
async getProductList() {
|
let res = await this.$http.get('/basicInfo/XhProductModel/tree')
|
this.productList = res.data
|
console.log(res.data,'async getProductList()')
|
},
|
add() {
|
this.$refs.AddOrUpdate.$refs.dialog.init(null,{id: null, type: 'tree'})
|
},
|
filterNode(value, data) {
|
if (!value) return true
|
return data.name.indexOf(value) !== -1
|
},
|
handleNodeClick(data) {
|
this.$emit('on-selected', data)
|
}
|
}
|
}
|
</script>
|
