暫無描述

index.vue 3.8KB

    <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>