zhywpt-sp/login/pick-regions/pick-regions.vue

<template>
	<picker mode="multiSelector" :value="multiIndex" :range="multiArray" @change="handleValueChange"
		@columnchange="handleColumnChange">
		<slot></slot>
	</picker>
</template>

<script>
	import {
		CHINA_REGIONS
	} from './regions';

	export default {
		props: {
			defaultRegions: {
				type: Array,
				default () {
					return []
				}
			},
			defaultRegionCode: {
				type: String,
				default: '520115'
			},
			defaultRegion: [String, Array]
		},
		data() {
			return {
				cityArr: CHINA_REGIONS[0].childs,
				districtArr: CHINA_REGIONS[0].childs[0].childs,
				multiIndex: [0, 0, 0],
				isInitMultiArray: true,
			}
		},
		watch: {
			defaultRegion: {
				handler(region, oldRegion) {
					if (Array.isArray(region)) {
						// 避免传的是字面量的时候重复触发
						oldRegion = oldRegion || []
						if (region.join('') !== oldRegion.join('')) {
							this.handleDefaultRegion(region)
						}
					} else if (region && region.length == 6) {
						this.handleDefaultRegion(region)
					} else {
						console.warn('defaultRegion非有效格式')
					}
				},
				immediate: true,
			}
		},
		computed: {
			multiArray() {
				return this.pickedArr.map(arr => arr.map(item => item.name))
			},
			pickedArr() {
				// 进行初始化
				if (this.isInitMultiArray) {
					return [
						CHINA_REGIONS,
						CHINA_REGIONS[0].childs,
						CHINA_REGIONS[0].childs[0].childs
					]
				}
				return [CHINA_REGIONS, this.cityArr, this.districtArr];
			}
		},
		methods: {
			handleColumnChange(e) {
				console.log(e);
				this.isInitMultiArray = false;
				const that = this;
				let col = e.detail.column;
				let row = e.detail.value;
				that.multiIndex[col] = row;
				try {
					switch (col) {
						case 0:
							if (CHINA_REGIONS[that.multiIndex[0]].childs.length == 0) {
								that.cityArr = that.districtArr = [CHINA_REGIONS[that.multiIndex[0]]]
								break;
							}
							that.cityArr = CHINA_REGIONS[that.multiIndex[0]].childs
							that.districtArr = CHINA_REGIONS[that.multiIndex[0]].childs[that.multiIndex[1]].childs
							break;
						case 1:
							that.districtArr = CHINA_REGIONS[that.multiIndex[0]].childs[that.multiIndex[1]].childs
							break;
						case 2:
							break;
					}
				} catch (e) {
					console.log(e);
					that.districtArr = CHINA_REGIONS[that.multiIndex[0]].childs[0].childs
				}

			},
			handleValueChange(e) {
				// 结构赋值
				let [index0, index1, index2] = e.detail.value;
				let [arr0, arr1, arr2] = this.pickedArr;
				let address = [arr0[index0], arr1[index1], arr2[index2]];

				console.log(address);
				this.$emit('getRegion', address)
			},
			handleDefaultRegion(region) {
				const isCode = !Array.isArray(region)
				this.isInitMultiArray = false;
				let children = CHINA_REGIONS
				for (let i = 0; i < 3; i++) {
					for (let j = 0; j < children.length; j++) {
						let condition = isCode ? children[j].code == region.slice(0, (i + 1) * 2) : children[j].name
							.includes(region[i]);
						if (condition) {
							// 匹配成功进行赋值
							// console.log(i,j,children.length-1);
							children = children[j].childs;
							if (i == 0) {
								this.cityArr = children
							} else if (i == 1) {
								this.districtArr = children
							}
							this.$set(this.multiIndex, i, j)
							// console.log(this.multiIndex);
							break;
						} else {
							// 首次匹配失败就用默认的初始化
							// console.log(i,j,children.length-1);
							if (i == 0 && j == (children.length - 1)) {
								this.isInitMultiArray = true;
							}
						}
					}
				}
			}
		},
	}
</script>