anji-countryCity.vue
3.37 KB
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
<template>
<el-cascader v-model="selectValue" style="width: 100%" :props="{ lazy: true, lazyLoad: lazyLoad, label: 'text', value: 'id' }" :options="countryCity" />
</template>
<script>
import { mapGetters } from 'vuex'
export default {
props: {
value: null,
},
computed: {
...mapGetters(['countryCity']),
selectValue: {
get: function() {
return [...this.value]
},
set: function(val) {
this.$emit('update:value', val)
},
},
},
mounted() {
if (this.value && this.value.length > 0) {
this.initCity()
} else {
this.$store.dispatch('dict/add_countryCity', { level: 0 })
}
},
methods: {
getCityName() {
const value = this.selectValue
const country = this.countryCity.find((item) => item.id === value[0])
const province = country.children.find((item) => item.id === value[1])
const city = province.children.find((item) => item.id === value[2])
const region = city.children.find((item) => item.id === value[3])
return [country.text, province.text, city.text, region.text]
},
// 初始化数据
initCity() {
const value = this.value
// console.log(value)
if (!value) {
return
}
const country = this.countryCity.find((item) => item.id === value[0])
console.log(country)
if (!country || !country.children) {
this.getData().then((list) => {
this.getData({ country: value[0], level: 1 }).then((list) => {
this.getData({ country: value[0], province: value[1], level: 2 }).then((list) => {
this.getData({ country: value[0], province: value[1], city: value[2], level: 3, update: true }).then((list) => {})
})
})
})
} else {
const province = country.children.find((item) => item.id === value[1])
if (!province || !province.children) {
this.getData({ country: value[0], level: 1 }).then((list) => {
this.getData({ country: value[0], province: value[1], level: 2 }).then((list) => {
this.getData({ country: value[0], province: value[1], city: value[2], level: 3, update: true }).then((list) => {})
})
})
} else {
const city = province.children.find((item) => item.id === value[2])
if (!city || !city.children) {
this.getData({ country: value[0], province: value[1], level: 2 }).then((list) => {
this.getData({ country: value[0], province: value[1], city: value[2], level: 3, update: true }).then((list) => {})
})
} else {
const region = city.children.find((item) => item.id === value[3])
if (!region) {
this.getData({ country: value[0], province: value[1], city: value[2], level: 3, update: true }).then((list) => {})
}
}
}
}
},
getData(params) {
return this.$store.dispatch('dict/add_countryCity', params)
},
lazyLoad(node, resolve) {
console.log(node)
const { level, path, data } = node
if (data && data.children) {
resolve(data.children)
} else {
if (level === 0) {
return
}
const params = { country: path[0], province: path[1], city: path[2], level }
this.$store.dispatch('dict/add_countryCity', params).then((list) => resolve(list))
}
},
},
}
</script>