junzitang/pagesT/components/region/RegionSel.vue

<template>
	<picker mode="multiSelector" @change="pickerRegionChange" @columnchange="columnRegionChange" :value="Rindex" :range="region" range-key="label"><slot></slot></picker>
</template>

<script>
import RegionJson from './area.json';
export default {
	props: {
		provinceCode: {
			type: [String, Number],
			default: () => {
				return 0;
			}
		},
		cityCode: {
			type: [String, Number],
			default: () => {
				return 0;
			}
		},
		districtCode: {
			type: [String, Number],
			default: () => {
				return 0;
			}
		}
	},
	watch: {
		districtCode() {
			this.getRegionName();
		}
	},
	data() {
		return {
			Rindex: [0, 0, 0],
			region: [],
			province_code: '',
			city_code: ''
		};
	},
	async created() {
		// await this.getProvince()
		// await this.getCity()
		// await this.getDistrict()
		let region = JSON.parse(JSON.stringify(this.region));
		// data.unshift({code:0,id:0,name:'全国'})
		region[0] = RegionJson;
		region[1] = RegionJson[0].children;
		region[2] = RegionJson[0].children[0].children;
		// this.province_code = RegionJson[0].value
		this.region = region;
		await this.getRegionName();
	},
	methods: {
		// 获取名字
		async getRegionName() {
			if (!this.provinceCode) return;
			const provinceIndex = RegionJson.findIndex(item => item.value === parseInt(this.provinceCode));
			const province = RegionJson.find(item => item.value === parseInt(this.provinceCode));

			const cityIndex = province.children.findIndex(item => item.value === parseInt(this.cityCode));
			const city = province.children.find(item => item.value === parseInt(this.cityCode));

			const districtIndex = city.children.findIndex(item => item.value === parseInt(this.districtCode));
			const district = city.children.find(item => item.value === parseInt(this.districtCode));

			const regionName = province.label + '-' + city.label + '-' + district.label;
			this.region = [RegionJson, province.children, city.children];
			this.Rindex = [provinceIndex, cityIndex, districtIndex];

			this.$emit('getRegionName', regionName);
		},
		// 省
		getProvince() {
			this.$u.api.getAllProvince().then(({data})=>{
				let region = JSON.parse(JSON.stringify(this.region));
				// data.unshift({code:0,id:0,name:'全国'})
				region[0] = data;
				this.province_code = data[0].code;
				this.region = region;
			});

		},
		// 市
		async getCity() {
			if (!this.province_code) {
				let region = JSON.parse(JSON.stringify(this.region));
				region[1] = [];
				this.region = region;
				return;
			}
			this.$u.api.getAllCityByProvinceCode(this.province_code).then(({data})=>{
				let region = JSON.parse(JSON.stringify(this.region));
				region[1] = data;
				this.city_code = data[0].code;
				this.region = region;
			});

		},
		// 区
		async getDistrict() {
			this.$u.api.getAllAreaByCityCode(this.city_code).then(({data})=>{
				let region = JSON.parse(JSON.stringify(this.region));
				region[2] = data;
				this.region = region;
			});
		},

		// select选择器 确定
		pickerRegionChange(e) {
			const i = e.detail.value;
			this.Rindex = i;
			const params = [
				this.region[0][i[0]],
				this.region[1] && this.region[1].length > 0 ? this.region[1][i[1]] : '',
				this.region[2] && this.region[2].length > 0 ? this.region[2][i[2]] : ''
			];
			this.$emit('pickerRegionChange', params);
		},
		//某一列的值改变时
		async columnRegionChange(e) {
			const column = e.detail.column;
			const i = e.detail.value;
			if (column === 0) {
				let region = JSON.parse(JSON.stringify(this.region));
				region[1] = RegionJson[i].children;
				if(region[1].length){
					region[2] = RegionJson[i].children[0].children;
				}else{
					region[2] = []
				}
				this.region = region;
			}
			if (column === 1) {
				let region = JSON.parse(JSON.stringify(this.region));
				region[2] = region[1][i].children;
				this.region = region;
			}
		}
	}
};
</script>

<style></style>