|
<template>
<div class="linkage">
<el-row :gutter="10">
<el-col :span="8">
<el-select
v-model="sheng"
@change="choseProvince"
placeholder="省">
<el-option
v-for="item in province"
:key="item.id"
:label="item.value"
:value="item.id">
</el-option>
</el-select>
</el-col>
<el-col :span="8">
<el-select
v-model="shi"
@change="choseCity"
placeholder="市">
<el-option
v-for="item in shi1"
:key="item.id"
:label="item.value"
:value="item.id">
</el-option>
</el-select>
</el-col>
<el-col :span="8">
<el-select
v-model="qu"
@change="choseBlock"
placeholder="区(县)">
<el-option
v-for="item in qu1"
:key="item.id"
:label="item.value"
:value="item.id">
</el-option>
</el-select>
</el-col>
</el-row>
</div>
</template>
<script>
import queryDict from '@/utils/queryDict'
export default {
props: ['addrCode'],
data() {
return {
firstFlag: false,
province: [],
sheng: '',
shi: '',
shi1: [],
qu: '',
qu1: [],
city: '',
block: ''
}
},
watch: {
addrCode: function() {
this.initpsq()
}
},
methods: {
getCityData: function() {
var that = this
queryDict.applyDict('XZQH', function(dictData) {
if (dictData) {
var data = dictData.sort((obj1, obj2) => {
return obj1.code - obj2.code
})
that.province = {}
data.map(item => {
if (item.code.match(/0000$/)) {
that.province[item.code] = { id: item.code, value: item.caption, children: {}}
} else if (item.code.match(/00$/)) {
var p = that.province[item.code.slice(0, 2) + '0000']
p.children[item.code] = { id: item.code, value: item.caption, children: {}}
if (!p.defaultChild) {
p.defaultChild = p.children[item.code]
}
} else {
var pp = that.province[item.code.slice(0, 2) + '0000'].children[item.code.slice(0, 4) + '00']
pp.children[item.code] = { id: item.code, value: item.caption }
if (!pp.defaultChild) {
pp.defaultChild = pp.children[item.code]
}
}
})
} else {
console.log(dictData.status)
}
})
},
choseProvince: function(e) {
var p = this.province[e]
this.shi1 = p.children
this.shi = p.defaultChild.value
this.qu1 = p.defaultChild.children
this.qu = p.defaultChild.defaultChild.value
this.E = p.defaultChild.defaultChild.id
this.sheng = p.value
this.$emit('paren', this.E)
},
choseCity: function(e) {
var p = this.province[e.slice(0, 2) + '0000'].children[e]
this.shi = p.value
this.qu1 = p.children
this.qu = p.defaultChild.value
this.E = p.defaultChild.id
this.$emit('paren', this.E)
},
choseBlock: function(e) {
this.qu = this.province[e.slice(0, 2) + '0000'].children[e.slice(0, 4) + '00'].children[e].value
this.E = e
this.$emit('paren', this.E)
},
initpsq: function() {
if (!this.addrCode) {
this.sheng = ''
this.shi = ''
this.qu = ''
return
}
const s = this.addrCode.substring(0, 2) + '0000'
const si = this.addrCode.substring(0, 4) + '00'
const x = this.addrCode
var p = this.province[s]
this.sheng = p.value
this.shi = p.children[si].value
this.qu = p.children[si].children[x].value
}
},
created: function() {
this.getCityData()
}
}
</script>
|