1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
| <template>
| <div class="product-tree-container " :style="'height:' + tree_Hei +'px'">
| <el-input
| placeholder="输入名称进行过滤"
| style="width: 80%"
| v-model="filterText"
| size="small"
| clearable
| ></el-input>
| <el-button type="primary" @click="add()" style="margin-top: 10px">新增</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
| },
| 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>
|
|
