|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<template>
<a-tree-select
allowClear
labelInValue
style="width: 100%"
:disabled="disabled"
:dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
:placeholder="placeholder"
:loadData="asyncLoadTreeData"
:value="treeValue"
:treeData="treeData"
@change="onChange"
@search="onSearch">
</a-tree-select>
</template>
<script>
|
|
18
|
import {getAction} from '@/api/manage'
|
谭毅彬
authored
|
19
|
import { translateResultMessage } from '@/api/api'
|
|
20
|
|
|
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
export default {
name: 'JTreeDict',
data() {
return {
treeData: [],
treeValue: null,
url_root: "/sys/category/loadTreeRoot",
url_children: "/sys/category/loadTreeChildren",
url_view: '/sys/category/loadOne',
}
},
props: {
value: {
type: String,
required: false
|
|
36
|
},
|
|
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
|
placeholder: {
type: String,
default: '请选择',
required: false
},
parentCode: {
type: String,
default: '',
required: false
},
field: {
type: String,
default: 'id',
required: false
},
root: {
type: Object,
required: false,
default: () => {
return {
pid: '0'
|
|
58
59
60
|
}
}
},
|
|
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
|
async: {
type: Boolean,
default: false,
required: false
},
disabled: {
type: Boolean,
default: false,
required: false
}
},
watch: {
root: {
handler(val) {
console.log("root-change", val)
|
|
76
|
},
|
|
77
78
79
80
81
|
deep: true
},
parentCode: {
handler() {
this.loadRoot()
|
|
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
110
111
112
113
114
115
|
value: {
handler() {
this.loadViewInfo()
}
}
},
created() {
this.loadRoot()
this.loadViewInfo()
},
model: {
prop: 'value',
event: 'change'
},
methods: {
loadViewInfo() {
if (!this.value || this.value == "0") {
this.treeValue = null
} else {
let param = {
field: this.field,
val: this.value
}
getAction(this.url_view, param).then(res => {
if (res.success) {
this.treeValue = {
value: this.value,
label: res.result.name
}
}
})
}
|
|
116
|
},
|
|
117
118
119
120
121
122
123
124
125
126
|
loadRoot() {
let param = {
async: this.async,
pcode: this.parentCode
}
getAction(this.url_root, param).then(res => {
if (res.success) {
this.handleTreeNodeValue(res.result)
this.treeData = [...res.result]
} else {
|
谭毅彬
authored
|
127
|
this.$message.error(translateResultMessage(res, res.message))
|
|
128
129
|
}
})
|
|
130
|
},
|
|
131
132
133
134
135
|
asyncLoadTreeData(treeNode) {
return new Promise((resolve) => {
if (!this.async) {
resolve()
return
|
|
136
|
}
|
|
137
138
139
140
141
|
if (treeNode.$vnode.children) {
resolve()
return
}
let pid = treeNode.$vnode.key
|
|
142
|
let param = {
|
|
143
|
pid: pid
|
|
144
|
}
|
|
145
146
|
getAction(this.url_children, param).then(res => {
if (res.success) {
|
|
147
|
this.handleTreeNodeValue(res.result)
|
|
148
149
|
this.addChildren(pid, res.result, this.treeData)
this.treeData = [...this.treeData]
|
|
150
|
}
|
|
151
|
resolve()
|
|
152
|
})
|
|
153
154
155
156
157
158
159
160
161
162
|
})
},
addChildren(pid, children, treeArray) {
if (treeArray && treeArray.length > 0) {
for (let item of treeArray) {
if (item.key == pid) {
if (!children || children.length == 0) {
item.leaf = true
} else {
item.children = children
|
|
163
|
}
|
|
164
165
166
|
break
} else {
this.addChildren(pid, children, item.children)
|
|
167
168
|
}
}
|
|
169
170
171
172
173
174
175
176
177
|
}
},
handleTreeNodeValue(result) {
let storeField = this.field == 'code' ? 'code' : 'key'
for (let i of result) {
i.value = i[storeField]
i.isLeaf = (!i.leaf) ? false : true
if (i.children && i.children.length > 0) {
this.handleTreeNodeValue(i.children)
|
|
178
179
|
}
}
|
|
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
|
},
onChange(value) {
console.log(value)
if (!value) {
this.$emit('change', '');
} else {
this.$emit('change', value.value);
}
this.treeValue = value
},
onSearch(value) {
console.log(value)
},
getCurrTreeData() {
return this.treeData
|
|
195
196
|
}
}
|
|
197
198
|
}
|
|
199
|
</script>
|