294 lines
8.0 KiB
Vue
294 lines
8.0 KiB
Vue
<template>
|
|
<view class="component">
|
|
<view class="title">地区信息</view>
|
|
<u--form labelPosition="left" :model="formData" :rules="rules" ref="districtForm">
|
|
<u-form-item v-if="!readonly" label="省" :required="!readonly" 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 v-if="!readonly" label="市" :required="!readonly" 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="!readonly" 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="!readonly" 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="!readonly" prop="village" @click="changeCity('village')" borderBottom>
|
|
<u--input :value="formDataText.village" type="text" disabled disabledColor="#fff"
|
|
placeholder="请选择村"></u--input>
|
|
<u-icon slot="right" name="arrow-right"></u-icon>
|
|
</u-form-item>
|
|
<u-form-item label="小队" :required="!readonly" 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",
|
|
props: {
|
|
readonly: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
datas: {
|
|
type: Object,
|
|
default: null
|
|
}
|
|
},
|
|
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: {
|
|
validator: (rule, value, callback) => {
|
|
value ? callback() : callback('不能为空')
|
|
},
|
|
trigger: ['change', 'blur']
|
|
},
|
|
},
|
|
provinceList: [],
|
|
cityList: [],
|
|
areaList: [],
|
|
streetList: [],
|
|
villageList: [],
|
|
brigadeList: [],
|
|
changeType: '', //当前选择的城市类型
|
|
};
|
|
},
|
|
watch: {
|
|
datas(newValue, oldValue) {
|
|
if (this.$props.readonly && newValue) {
|
|
this.formDataText.area = this.$props.datas.area_name;
|
|
this.formDataText.street = this.$props.datas.street_name;
|
|
this.formDataText.village = this.$props.datas.village_name;
|
|
this.formDataText.brigade = this.$props.datas.brigade_name;
|
|
|
|
this.formData.area = this.$props.datas.area_id;
|
|
this.formData.street = this.$props.datas.street_id;
|
|
this.formData.village = this.$props.datas.village_id;
|
|
this.formData.brigade = this.$props.datas.brigade_id;
|
|
}
|
|
}
|
|
},
|
|
created() {
|
|
if (!this.$props.readonly) {
|
|
this.initProvinceAndCity();
|
|
} else {
|
|
this.rules = {};
|
|
}
|
|
},
|
|
methods: {
|
|
async validate() {
|
|
return await this.$refs.districtForm.validate();
|
|
},
|
|
// 初始化
|
|
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.$props.readonly) return;
|
|
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 lang="scss">
|
|
.component {
|
|
.title {
|
|
font-weight: 500;
|
|
font-size: 34rpx;
|
|
|
|
&::before {
|
|
width: 8rpx;
|
|
height: 26rpx;
|
|
border-radius: 4rpx;
|
|
background-color: #0122c7;
|
|
content: "";
|
|
display: inline-block;
|
|
margin-right: 8rpx;
|
|
}
|
|
}
|
|
}
|
|
</style> |