<template>
|
<div>
|
<el-col :span="8" v-if="province.visible">
|
<el-form-item :label="province.filedDescription + ':'">
|
<!-- <el-input v-model="valueDesc.province" readonly="readonly"></el-input> -->
|
<p>{{valueDesc.province === '' ? '--' : valueDesc.province}}</p>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8" v-if="city.visible">
|
<el-form-item :label="city.filedDescription + ':'">
|
<!-- <el-input v-model="valueDesc.city" readonly="readonly"></el-input> -->
|
<p>{{valueDesc.city === '' ? '--' : valueDesc.city}}</p>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8" v-if="JSON.stringify(county) !== '{}' && county.visible">
|
<el-form-item :label="county.filedDescription + ':'">
|
<p>{{valueDesc.county === '' ? '--' : valueDesc.county}}</p>
|
</el-form-item>
|
</el-col>
|
</div>
|
</template>
|
|
<script>
|
import { getProvinceCodeList, getCityCodeList, getAreaCodeList } from '@/api/area'
|
export default {
|
props: ['province', 'city', 'county'],
|
data: function() {
|
return {
|
valueDesc: {
|
province: '',
|
city: '',
|
county: ''
|
}
|
}
|
},
|
watch: {
|
// 省市区联动
|
'province.value': function(newVal) {
|
getProvinceCodeList({}).then(res => {
|
let province = res.result
|
let item = this._.find(province, { itemno: newVal })
|
this.valueDesc.province = item.itemname
|
})
|
},
|
'city.value': function(newVal) {
|
let params = {
|
codeNo: 'AreaCode',
|
itmeNo: this.province.value
|
}
|
if (!this._.isEmpty(newVal)) {
|
getCityCodeList(params).then(res => {
|
let city = res.result
|
let item = this._.find(city, { itemno: newVal })
|
this.valueDesc.city = item.itemname
|
})
|
}
|
},
|
'county.value': function(newVal) {
|
let params = {
|
codeNo: 'AreaCode',
|
itmeNo: this.city.value
|
}
|
if (!this._.isEmpty(newVal)) {
|
getAreaCodeList(params).then(res => {
|
let county = res.result
|
let item = this._.find(county, { itemno: newVal })
|
this.valueDesc.county = item.itemname
|
})
|
}
|
}
|
},
|
mounted(){
|
console.log(this.valueDesc)
|
}
|
}
|
</script>
|
|
<style scoped>
|
|
</style>
|