You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
135 lines
3.5 KiB
135 lines
3.5 KiB
<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]
|
|
},
|
|
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>
|
|
|