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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<template>
<van-cascader class="address-select"
v-model="innerValue"
title="请选择所在地区"
:options="areaData"
@change="onChange"
@close="() => $emit('close')"
/>
</template>
<script>
import { getAreaChild } from '@/api/base.js'
import { fetchDataHandle } from '@/utils/common.js'
export default {
name: 'DocAddress',
props: {
value: [String, Number],
viewData: Array,
level: { default: 4 },
},
emits: ['update:value', 'change', 'close'],
data() {
return {
innerValue: '',
areaData: []
}
},
created() {
this.init()
},
methods: {
async init() {
if (!this.areaData.length) {
const res = await getAreaChild('0')
this.areaData = this.dataField(res || [])
}
if (this.value) {
const temp = fetchDataHandle({ value: this.value }, {
value: 'addToArr'
})
await this.viewHandle(temp.value)
}
// console.log(this.areaData)
},
loadData(options) {
const targetOption = options[options.length - 1]
targetOption.loading = true
getAreaChild(targetOption.value).then(res => {
targetOption.children = this.dataField(res || [], options.length === this.level)
this.areaData = [...this.areaData]
}).finally(() => {
targetOption.loading = false
})
},
dataField(data, last = false) {
return data.map(e => {
return {
text: e.areaName,
value: e.areaCode,
id: e.id,
isLeaf: last
}
})
},
// 回显处理
async viewHandle(val = []) {
try {
const length = val.length
let current = this.areaData.find(e => e.value === val[0])
let index = 1
while (index < length) {
const res = await getAreaChild(current.value)
const result = res || []
if (!result.length) break
current.children = this.dataField(result, index === this.level)
current = current.children.find(e => e.value === val[index])
this.areaData = [...this.areaData]
if (!current) break
index++
}
} catch(err) {
console.warn(err)
}
},
onChange(val) {
// console.log(val, this.areaData)
const tabIndex = val.tabIndex
const options = val.selectedOptions
const targetOption = options[options.length - 1]
if (tabIndex < 4 ) {
getAreaChild(val.value).then(res => {
targetOption.children = this.dataField(res || [], options.length === this.level)
this.areaData = [...this.areaData]
})
}
this.$emit('update:value', val.value)
this.$emit('change', val)
if (tabIndex === this.level) {
this.$emit('close')
}
}
},
watch: {
value: {
handler(val) {
this.innerValue = val
},
immediate: true
},
// 地址同步使用
viewData(val) {
if (val) {
this.viewHandle(val)
}
}
}
}
</script>
<style lang="less" scoped>
</style>