OfficeApp/components/districtSelector/districtSelector.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>