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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
| <template>
| <div class="product-tree-container">
| <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
| node-key="id"
| :current-node-key="defaultId"
| :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: {
| showXdy: {
| type: Boolean,
| default: true
| },
| basic: {
| type: Number,
| default: 1
| },
| },
|
| data() {
| return {
| filterText: '',
| productList: [],
| defaultId: '',
| defaultProps: {
| children: 'children',
| label: 'name'
| }
| }
| }
| ,
| watch: {
| filterText(val) {
| this.$refs.tree.filter(val)
| }
| }
| ,
| components: {
| AddOrUpdate
| }
| ,
| mounted() {
| this.getProductList()
| },
| methods: {
| // 获取系统列表
| async getProductList() {
| let params = {
| showXdy: this.showXdy,
| ztShow: this.basic
| }
| let res = await this.$http.get('/basicInfo/XhProductModel/tree', {params: params})
| this.productList = res.data
| if (this.basic) {
| if (this.productList && this.productList[0].children) {
| this.defaultId = this.productList[0].children[0].id
| console.log(this.defaultId, 'this.defaultID')
| this.$nextTick(() => {
| this.$refs.tree.setCurrentKey(this.defaultId); //一定要加这个选中了否则样式没有出来
| });
| this.$emit('on-default', this.defaultId)
| }
| }
| console.log(res.data, 'async getProductList()')
| },
| add() {
| this.$refs.AddOrUpdate.$refs.dialog.init(null, {id: null, type: 'xh'})
| },
| filterNode(value, data) {
| if (!value) return true
| return data.name.indexOf(value) !== -1
| },
| handleNodeClick(data) {
| this.$emit('on-selected', data)
| },
| }
| }
| </script>
| <style>
| .product-tree-container {
| height: 100%;
| }
| </style>
|
|
