<template>
|
<picker
|
mode="multiSelector"
|
:value="multiIndex"
|
:range="multiArray"
|
@change="handleValueChange"
|
@columnchange="handleColumnChange"
|
>
|
<slot></slot>
|
</picker>
|
</template>
|
|
<script>
|
const CHINA_REGIONS = require('./regions.json');
|
export default {
|
props: {
|
defaultRegions: {
|
type: Array,
|
default() {
|
return [];
|
}
|
},
|
defaultRegionCode: {
|
type: String
|
},
|
defaultRegion: [String, Array],
|
value: [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);
|
this.$emit(
|
'input',
|
`${address[0].name}${address[1].name}${address[2].name}`
|
);
|
},
|
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>
|
