high-mini/components/pick-regions/pick-regions.vue

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

<script>
    // let CHINA_REGIONS = require('./regions.json')
	import { getRegional } from '@/Utils/physicalObject.js' 
	
	// let CHINA_REGIONS = [{childs:[{childs:[]}]}];
	// getRegional().then(res=>{
	// 	CHINA_REGIONS = res.return_data;
	// })
	
	export default {
        props:{
            defaultRegions:{
                type:Array,
                default(){
                    return []
                }
            },
            defaultRegionCode:{
                type:String
            },
            defaultRegion:[String,Array]
        },
		data() {
			return {
				CHINA_REGIONS:[{childs:[{childs:[]}]}],
                // cityArr:CHINA_REGIONS[0].childs,
                // districtArr:CHINA_REGIONS[0].childs[0].childs,
				cityArr:[{}],
				districtArr:[{}],
                multiIndex: [0, 0, 0],
                isInitMultiArray:true,
			}
		},
		created(){
			// getRegional().then(res=>{
			// 	this.CHINA_REGIONS = res.return_data;
				
			// 	this.CHINA_REGIONS.map(item=>{
			// 		if(!item.childs){
			// 			item.childs = [];
			// 		}
			// 	})
				
			// 	this.cityArr =this.CHINA_REGIONS[0].childs; 
			// 	this.districtArr = this.CHINA_REGIONS[0].childs[0].childs;
			// 	// console.log(res.return_data,11)
			// })
		},
        watch:{
            defaultRegion:{
               async handler(region,oldRegion){
					
				await	getRegional().then(res=>{
						this.CHINA_REGIONS = res.return_data;
						this.CHINA_REGIONS.map(item=>{
							if(!item.childs){
								item.childs = [];
							}
						})
						
						this.cityArr =this.CHINA_REGIONS[0].childs; 
						this.districtArr = this.CHINA_REGIONS[0].childs[0].childs;
						// console.log(res.return_data,11)
					})
					
					
                    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.log(region)
                        console.warn('defaultRegion非有效格式')
                    }
                },
                immediate:true,
            }
        },
        computed:{
            multiArray(){
                return this.pickedArr.map(arr=>arr.map(item=>item.name))
            },
            pickedArr(){
                // 进行初始化
                if(this.isInitMultiArray){
                    return [
                        this.CHINA_REGIONS,
                        this.CHINA_REGIONS[0].childs,
                        this.CHINA_REGIONS[0].childs[0].childs
                    ]
                }
                return [this.CHINA_REGIONS,this.cityArr,this.districtArr];
            }
        },
		methods: {
            handleColumnChange(e){
                // console.log(e,"change");
                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:
							that.multiIndex[1]=0;
							that.multiIndex[2]=0;
                            if(this.CHINA_REGIONS[that.multiIndex[0]].childs.length==0){
                                that.cityArr = that.districtArr = [this.CHINA_REGIONS[that.multiIndex[0]]]
                                break;
                            }
                            that.cityArr = this.CHINA_REGIONS[that.multiIndex[0]].childs
                            that.districtArr = this.CHINA_REGIONS[that.multiIndex[0]].childs[that.multiIndex[1]].childs
							
							break;
                        case 1:
							that.multiIndex[2]=0;
                            that.districtArr = this.CHINA_REGIONS[that.multiIndex[0]].childs[that.multiIndex[1]].childs
                            break;
                        case 2:
                            break;
                    }
                }catch(e){
                    // console.log(e);
                    that.districtArr = this.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){
				// console.log(region,"region")
                const isCode = !Array.isArray(region)
                this.isInitMultiArray = false;
                let children = this.CHINA_REGIONS;
				let num =0;
                for(let i=0;i<3;i++){
                    for(let j=0;j<children.length;j++){
						let condition;
						if(i==2){
							 condition = isCode?String(children[j].code).slice(0)==region.slice(0):children[j].name.includes(region[i]);
							// console.log(String(children[j].code).slice(0),region.slice(0))
						}else{
							 condition = isCode?String(children[j].code).slice(0,(i+1)*2)==region.slice(0,(i+1)*2):children[j].name.includes(region[i]);
							// console.log(String(children[j].code).slice(0,(i+1)*2)==region.slice(0,(i+1)*2))
							// console.log(String(children[j].code).slice(0,(i+1)*2),region.slice(0,(i+1)*2))
						}
						
					   if(condition){
							num++;
                           // 匹配成功进行赋值
                           // console.log(i,j,children.length-1);
                           // children = children[j].childs;
						   
						   
						   if(children[j].childs&&children[j].childs.length>0){
							   children = children[j].childs;
						   }else{ 
								let arr = [];
								arr.push(children[j]);
								children =arr;
						   }
						  
                           if(i==0){
                               this.cityArr = children 
							   
                           }else if(i==1){
                               this.districtArr = children 
                           }
						  
                           this.$set(this.multiIndex,i,j)
                          
                           break;
                       }else{
                           // 首次匹配失败就用默认的初始化
                           // console.log(i,j,children.length-1,"匹配失败");
                           if(i==0 && j==(children.length-1)){
                               this.isInitMultiArray = true;
                           }
						   this.$emit('failreagion')
                       }
                    }
                }
				
				if(num == 3){
					let address = [this.CHINA_REGIONS[this.multiIndex[0]],this.cityArr[this.multiIndex[1]],this.districtArr[this.multiIndex[2]]];
					this.$emit('getRegion',address)
				}else{
					this.$emit('failureRegion')
				}
				
				
				
				
            }
		},
	}
</script>