<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){ //&®ion.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) const isCode = !Array.isArray(region) this.isInitMultiArray = false; let children = this.CHINA_REGIONS 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]); } if(condition){ // 匹配成功进行赋值 // 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; } } } } } }, } </script>