<template>
|
<div>
|
<el-col :md="12" :lg="8" v-if="province.visible">
|
<el-form-item :label="province.filedDescription" :prop="province.name+'.value'" :rules="rules.province">
|
<el-select v-model="provinceVal" filterable clearable placeholder="请选择" :disabled="!province.writeAble">
|
<el-option v-for="(item, index) in options.province" :key="index" :label="item.itemname" :value="item.itemno">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :md="12" :lg="8" v-if="citys.visible">
|
<el-form-item :label="citys.filedDescription" :prop="citys.name+'.value'" :rules="rules.citys">
|
<el-select v-model="citysVal" filterable clearable placeholder="请选择" :disabled="!citys.writeAble">
|
<el-option v-for="(item, index) in options.citys" :key="index" :label="item.itemname" :value="item.itemno">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :md="12" :lg="8" v-if="county.visible">
|
<el-form-item :label="county.filedDescription" :prop="county.name+'.value'" :rules="rules.county">
|
<el-select v-model="countyVal" filterable clearable placeholder="请选择" :disabled="!county.writeAble">
|
<el-option v-for="(item, index) in options.county" :key="index" :label="item.itemname" :value="item.itemno">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</div>
|
</template>
|
|
<script>
|
import { getProvinceCodeList, getCityCodeList, getAreaCodeList } from '@/api/area'
|
export default {
|
props: ['province', 'citys', 'county'],
|
data: function() {
|
return {
|
options: {
|
citys: '',
|
province: '',
|
county: ''
|
}
|
}
|
},
|
created() {
|
this.initSelect()
|
},
|
watch: {
|
'province.value': {
|
immediate: true,
|
handler(newVal) {
|
if (!this._.isEmpty(newVal)) {
|
let params = {
|
codeNo: 'AreaCode',
|
itmeNo: newVal
|
}
|
getCityCodeList(params).then(res => {
|
this.options.citys = res.result
|
})
|
}
|
}
|
},
|
'citys.value': {
|
immediate: true,
|
handler(newVal) {
|
if (!this._.isEmpty(newVal)) {
|
let params = {
|
codeNo: 'AreaCode',
|
itmeNo: newVal
|
}
|
getAreaCodeList(params).then(res => {
|
this.options.county = res.result
|
})
|
}
|
}
|
}
|
},
|
computed: {
|
provinceVal: {
|
get() {
|
return this.province.value
|
},
|
set(newVal) {
|
this.citysVal = ''
|
this.province.value = newVal
|
this.$emit('update:province', this.province)
|
}
|
},
|
citysVal: {
|
get() {
|
return this.citys.value
|
},
|
set(newVal) {
|
this.countyVal = ''
|
this.citys.value = newVal
|
this.$emit('update:citys', this.citys)
|
}
|
},
|
countyVal: {
|
get() {
|
return this.county.value
|
},
|
set(newVal) {
|
this.county.value = newVal
|
this.$emit('update:county', this.county)
|
}
|
},
|
rules() {
|
return {
|
citys: {
|
required: this.citys.required,
|
message: '请输入' + this.citys.filedDescription,
|
trigger: 'blur'
|
},
|
province: {
|
required: this.province.required,
|
message: '请输入' + this.province.filedDescription,
|
trigger: 'blur'
|
},
|
county: {
|
required: this.county.required,
|
message: '请输入' + this.county.filedDescription,
|
trigger: 'blur'
|
}
|
}
|
},
|
},
|
methods: {
|
initSelect () {
|
// 查询省
|
getProvinceCodeList({}).then(res => {
|
this.options.province = res.result
|
})
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
|
</style>
|
