142 lines
5.0 KiB
Vue
142 lines
5.0 KiB
Vue
<template>
|
|
<picker mode="multiSelector"
|
|
:value="multiIndex"
|
|
:range="multiArray"
|
|
:disabled="defaultDisabled"
|
|
@change="handleValueChange"
|
|
@columnchange="handleColumnChange">
|
|
<slot></slot>
|
|
</picker>
|
|
</template>
|
|
|
|
<script>
|
|
const china_regions = require('./regions.json')
|
|
const provinceArr = china_regions.map(item=>item.area_name)
|
|
export default {
|
|
props:{
|
|
defaultRegions:{
|
|
type:Array,
|
|
default(){
|
|
return []
|
|
}
|
|
},
|
|
defaultDisabled:{
|
|
type:Boolean,
|
|
default(){
|
|
return false
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
cityArr:[],
|
|
districtArr:[],
|
|
multiIndex: [0, 0, 0],
|
|
isInitMultiArray:true,
|
|
}
|
|
},
|
|
watch:{
|
|
defaultRegions:{
|
|
handler(arr,oldArr=[]){
|
|
// 避免传的是字面量的时候重复触发
|
|
// console.log(arr,oldArr);
|
|
if(arr.length!==3 || arr.join('')===oldArr.join('')) return;
|
|
console.log('触发了');
|
|
this.handleDefaultRegions()
|
|
},
|
|
immediate:true,
|
|
},
|
|
},
|
|
computed:{
|
|
multiArray(){
|
|
return this.pickedArr.map(arr=>arr.map(item=>item.area_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){
|
|
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.multiIndex[1] = 0
|
|
that.multiIndex[2] = 0
|
|
that.cityArr = china_regions[that.multiIndex[0]].childs
|
|
that.districtArr = china_regions[that.multiIndex[0]].childs[that.multiIndex[1]].childs
|
|
this.$set(that.multiIndex)
|
|
break;
|
|
case 1:
|
|
that.multiIndex[2] = 0
|
|
that.districtArr = china_regions[that.multiIndex[0]].childs[that.multiIndex[1]].childs
|
|
this.$set(that.multiIndex)
|
|
break;
|
|
case 2:
|
|
break;
|
|
}
|
|
}catch(e){
|
|
// console.log(e);
|
|
that.districtArr = china_regions[that.multiIndex[0]].childs[0].childs
|
|
}
|
|
|
|
},
|
|
handleValueChange(e){
|
|
// 结构赋值
|
|
console.log(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('getRegions',address)
|
|
},
|
|
handleDefaultRegions(){
|
|
this.isInitMultiArray = false;
|
|
let children = china_regions;
|
|
for(let i = 0;i< this.defaultRegions.length;i++){
|
|
for(let j = 0;j<children.length;j++){
|
|
// 模糊匹配
|
|
if(children[j].area_name.includes(this.defaultRegions[i])){
|
|
// console.log(i,j,children.length-1);
|
|
children = children[j].childs;
|
|
if(i==0){
|
|
this.cityArr = children
|
|
}else if(i==1){
|
|
this.districtArr = children
|
|
}
|
|
console.log(this.multiIndex)
|
|
console.log(i)
|
|
console.log(j)
|
|
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>
|