241 lines
7.8 KiB
Vue
241 lines
7.8 KiB
Vue
|
<template>
|
||
|
|
<view>
|
||
|
|
<u--form labelPosition="left" :model="formData" :rules="rules" ref="uForm">
|
||
|
|
<u-form-item label="省" required prop="province" @click="changeCity('province')" borderBottom>
|
||
|
|
<u--input :value="formDataText.province" disabled disabledColor="#fff" placeholder="请选择省"></u--input>
|
||
|
|
<u-icon slot="right" name="arrow-right"></u-icon>
|
||
|
|
</u-form-item>
|
||
|
|
<u-form-item label="市" required prop="city" @click="changeCity('city')" borderBottom>
|
||
|
|
<u--input :value="formDataText.city" disabled disabledColor="#fff" placeholder="请选择市"></u--input>
|
||
|
|
<u-icon slot="right" name="arrow-right"></u-icon>
|
||
|
|
</u-form-item>
|
||
|
|
<u-form-item label="区县" required prop="area" @click="changeCity('area')" borderBottom>
|
||
|
|
<u--input :value="formDataText.area" disabled disabledColor="#fff" placeholder="请选择区县"></u--input>
|
||
|
|
<u-icon slot="right" name="arrow-right"></u-icon>
|
||
|
|
</u-form-item>
|
||
|
|
<u-form-item label="乡镇" required prop="street" @click="changeCity('street')" borderBottom>
|
||
|
|
<u--input :value="formDataText.street" disabled disabledColor="#fff" placeholder="请选择镇"></u--input>
|
||
|
|
<u-icon slot="right" name="arrow-right"></u-icon>
|
||
|
|
</u-form-item>
|
||
|
|
<u-form-item label="村社" required prop="village" @click="changeCity('village')" borderBottom>
|
||
|
|
<u--input :value="formDataText.village" disabled disabledColor="#fff" placeholder="请选择村"></u--input>
|
||
|
|
<u-icon slot="right" name="arrow-right"></u-icon>
|
||
|
|
</u-form-item>
|
||
|
|
<u-form-item label="小队" required prop="brigade" @click="changeCity('brigade')" borderBottom>
|
||
|
|
<u--input :value="formDataText.brigade" disabled disabledColor="#fff" placeholder="请选择小队"></u--input>
|
||
|
|
<u-icon slot="right" name="arrow-right"></u-icon>
|
||
|
|
</u-form-item>
|
||
|
|
</u--form>
|
||
|
|
<u-picker :show="showProvince" :columns="[changeList()]" :keyName="changeType+'_name'" @confirm="confirm"
|
||
|
|
@cancel="showProvince = false" @close="showProvince = false"></u-picker>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { commonProvince, commonCity, commonArea, commonStreet, commonVillage, commonBrigade } from "@/api/oaPbulic.js"
|
||
|
|
import { Toast } from "../../libs/uniApi"
|
||
|
|
export default {
|
||
|
|
name:"districtSelector",
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
showProvince: false,
|
||
|
|
formData: {
|
||
|
|
province: '',
|
||
|
|
city: '',
|
||
|
|
area: '',
|
||
|
|
street: '',
|
||
|
|
village: '',
|
||
|
|
brigade: '',
|
||
|
|
},
|
||
|
|
formDataText: {
|
||
|
|
province: '',
|
||
|
|
city: '',
|
||
|
|
area: '',
|
||
|
|
street: '',
|
||
|
|
village: '',
|
||
|
|
brigade: '',
|
||
|
|
},
|
||
|
|
rules:{
|
||
|
|
province: {
|
||
|
|
required: true,
|
||
|
|
message: '不能为空',
|
||
|
|
trigger: ['change', 'blur']
|
||
|
|
},
|
||
|
|
city: {
|
||
|
|
required: true,
|
||
|
|
message: '不能为空',
|
||
|
|
trigger: ['change', 'blur']
|
||
|
|
},
|
||
|
|
area: {
|
||
|
|
required: true,
|
||
|
|
message: '不能为空',
|
||
|
|
trigger: ['change', 'blur']
|
||
|
|
},
|
||
|
|
street: {
|
||
|
|
required: true,
|
||
|
|
message: '不能为空',
|
||
|
|
trigger: ['change', 'blur']
|
||
|
|
},
|
||
|
|
village: {
|
||
|
|
required: true,
|
||
|
|
message: '不能为空',
|
||
|
|
trigger: ['change', 'blur']
|
||
|
|
},
|
||
|
|
brigade: {
|
||
|
|
type: 'any',
|
||
|
|
required: true,
|
||
|
|
message: '不能为空',
|
||
|
|
trigger: ['change', 'blur']
|
||
|
|
},
|
||
|
|
},
|
||
|
|
provinceList: [],
|
||
|
|
cityList: [],
|
||
|
|
areaList: [],
|
||
|
|
streetList: [],
|
||
|
|
villageList: [],
|
||
|
|
brigadeList: [],
|
||
|
|
changeType: '', //当前选择的城市类型
|
||
|
|
};
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.initProvinceAndCity();
|
||
|
|
},
|
||
|
|
methods:{
|
||
|
|
validate(){
|
||
|
|
return new Promise((resolve, reject)=>{
|
||
|
|
this.$refs.uForm.validate().then(res=>{
|
||
|
|
if(res)resolve(true);
|
||
|
|
else reject(false);
|
||
|
|
})
|
||
|
|
})
|
||
|
|
},
|
||
|
|
// 初始化
|
||
|
|
async initProvinceAndCity() {
|
||
|
|
let res = await commonProvince();
|
||
|
|
this.provinceList = res.data;
|
||
|
|
this.provinceList.forEach(item => {
|
||
|
|
if (item.province_name.indexOf('四川') !== -1) {
|
||
|
|
this.formData.province = item.province_code;
|
||
|
|
this.formDataText.province = item.province_name;
|
||
|
|
commonCity({
|
||
|
|
city: item.province_code
|
||
|
|
}).then(cityRes => {
|
||
|
|
this.cityList = cityRes.data;
|
||
|
|
this.cityList.forEach(item => {
|
||
|
|
if (item.city_name.indexOf('泸州') !== -1) {
|
||
|
|
this.formData.city = item.city_code;
|
||
|
|
this.formDataText.city = item.city_name;
|
||
|
|
commonArea({
|
||
|
|
area: item.city_code
|
||
|
|
}).then(areaRes => {
|
||
|
|
this.areaList = areaRes.data;
|
||
|
|
})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
},
|
||
|
|
// 选择城市
|
||
|
|
changeCity(type) {
|
||
|
|
if (this[type + 'List'].length == 0) return Toast('请先选择上一级地区');
|
||
|
|
this.changeType = type;
|
||
|
|
this.showProvince = true;
|
||
|
|
},
|
||
|
|
// 选择列表
|
||
|
|
changeList() {
|
||
|
|
return this[this.changeType + 'List'];
|
||
|
|
},
|
||
|
|
// 选中城市
|
||
|
|
confirm(e) {
|
||
|
|
let flag = false;//清空所选标记
|
||
|
|
if(this.formData[this.changeType] != e.value[0][this.changeType + '_code'])flag = true;
|
||
|
|
if (this.changeType == 'brigade') {
|
||
|
|
this.formData.brigade = e.value[0].id;
|
||
|
|
this.formDataText.brigade = e.value[0].brigade_name;
|
||
|
|
this.showProvince = false;
|
||
|
|
return ;
|
||
|
|
}
|
||
|
|
this.formData[this.changeType] = e.value[0][this.changeType + '_code'];
|
||
|
|
this.formDataText[this.changeType] = e.value[0][this.changeType + '_name'];
|
||
|
|
// 加载下一级城市信息
|
||
|
|
switch (this.changeType) {
|
||
|
|
case 'province':
|
||
|
|
this.loadCity(this.formData['province']);
|
||
|
|
break;
|
||
|
|
case 'city':
|
||
|
|
this.loadArea(this.formData['city']);
|
||
|
|
break;
|
||
|
|
case 'area':
|
||
|
|
this.loadStreet(this.formData['area']);
|
||
|
|
break;
|
||
|
|
case 'street':
|
||
|
|
this.loadVillage(this.formData['street']);
|
||
|
|
break;
|
||
|
|
case 'village':
|
||
|
|
this.loadBrigade(this.formData['village']);
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
// 清空之前所选信息
|
||
|
|
if(flag) switch (this.changeType) {
|
||
|
|
case 'province':
|
||
|
|
this.formData.city = '';
|
||
|
|
this.formDataText.city = ''
|
||
|
|
case 'city':
|
||
|
|
this.formData.area = '';
|
||
|
|
this.formDataText.area = ''
|
||
|
|
case 'area':
|
||
|
|
this.formData.street = '';
|
||
|
|
this.formDataText.street = ''
|
||
|
|
case 'street':
|
||
|
|
this.formData.village = '';
|
||
|
|
this.formDataText.village = ''
|
||
|
|
case 'village':
|
||
|
|
this.formData.brigade = '';
|
||
|
|
this.formDataText.brigade = ''
|
||
|
|
}
|
||
|
|
this.showProvince = false;
|
||
|
|
},
|
||
|
|
loadCity(code) {
|
||
|
|
commonCity({
|
||
|
|
city: code
|
||
|
|
}).then(res => {
|
||
|
|
this.cityList = res.data;
|
||
|
|
})
|
||
|
|
},
|
||
|
|
loadArea(code) {
|
||
|
|
commonArea({
|
||
|
|
area: code
|
||
|
|
}).then(res => {
|
||
|
|
this.areaList = res.data;
|
||
|
|
})
|
||
|
|
},
|
||
|
|
loadStreet(code) {
|
||
|
|
commonStreet({
|
||
|
|
street: code
|
||
|
|
}).then(res => {
|
||
|
|
this.streetList = res.data;
|
||
|
|
})
|
||
|
|
},
|
||
|
|
loadVillage(code) {
|
||
|
|
commonVillage({
|
||
|
|
village: code
|
||
|
|
}).then(res => {
|
||
|
|
this.villageList = res.data;
|
||
|
|
})
|
||
|
|
},
|
||
|
|
loadBrigade(code) {
|
||
|
|
commonBrigade({
|
||
|
|
brigade: code
|
||
|
|
}).then(res => {
|
||
|
|
this.brigadeList = res.data;
|
||
|
|
})
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
|
||
|
|
</style>
|