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.
 
 
 
 

163 lines
3.7 KiB

<template name="regionPicker">
<view>
<picker mode="multiSelector" :range="range" :value="dataValue" :disabled="dataDisabled" @change="region_change" @columnchange="region_change_col" @cancel="region_cancel">
<slot></slot>
</picker>
</view>
</template>
<script>
import zones_data from './region-picker.js';
export default {
name: "regionPicker",
props: {
value:{ type: [Array,String,Number], default: [0,0,0] },
disabled:{ type: Boolean, default: false },
//like https://api.591tuangou.com/cache/region-picker.php
jsonPath:{ type:String, default: null },
jsonData:{ type:Array, default: null },
},
data(){
return {
dataValue:[],
dataDisabled:false,
range:[],
zones_tree:[],
}
},
mounted:function(e){
if(this.jsonData){
this.zones_tree=this.jsonData;
this.dataDisabled=this.disabled;
this.value_format();
this.range_set();
}else if(this.jsonPath){
uni.request({
url:this.jsonPath,
success:res=>{
this.zones_tree=res.data;
this.dataDisabled=this.disabled;
this.value_format();
this.range_set();
}
})
}else{
this.zones_tree=zones_data.zones_tree,
this.dataDisabled=this.disabled;
this.value_format();
this.range_set();
}
},
watch:{
jsonData:function (nv,ov){
this.zones_tree=nv;
this.dataDisabled=this.disabled;
this.value_format();
this.range_set();
},
value:function (nv,ov){
if(JSON.stringify(nv)!=JSON.stringify(ov)){
if(typeof(nv)!='object' && typeof(ov)=='object' && ov[2]+''!=nv+''){
this.value=nv;
this.value_format();
this.range_set();
this.region_change({detail:{value:this.dataValue}})
}
}
}
},
methods: {
value_format(){
var value=this.value;
if(typeof(value)=='number'){
value=value+'';
}
if(typeof(value)=='string' && value.indexOf(',')>0){
value=value.split(',');
}
var sk=0,ck=0,zk=0;
if(typeof(value)=='string'){
this.zones_tree.forEach((sv,si)=>{
sv.children.forEach((cv,ci)=>{
cv.children.forEach((zv,zi)=>{
if(zv.code==value){
sk=si;
ck=ci;
zk=zi;
}
})
})
})
this.dataValue=[sk,ck,zk];
}else if(typeof(value[0])=='string' || value[0]>999){
this.zones_tree.forEach((sv,si)=>{
if(sv.code==value[0]){
sk=si;
sv.children.forEach((cv,ci)=>{
if(cv.code==value[1]){
ck=ci;
cv.children.forEach((zv,zi)=>{
if(zv.code==value[2]){
zk=zi;
}
})
}
})
}
})
this.dataValue=[sk,ck,zk];
}else{
this.dataValue=value;
}
},
range_set() {
var zones_ary=[[],[],[]];
this.zones_tree.forEach((sv,si)=>{
zones_ary[0].push(sv.name);
if(si==this.dataValue[0]){
sv.children.forEach((cv,ci)=>{
zones_ary[1].push(cv.name);
if(ci==this.dataValue[1]){
cv.children.forEach((zv,zi)=>{
zones_ary[2].push(zv.name);
})
}
})
}
})
this.range=zones_ary;
},
region_change(e){
var v=e.detail.value;
var value=[],code=[]
var sv=this.zones_tree[v[0]]
value.push(sv.name)
code.push(sv.code)
var cv=sv.children[v[1]];
value.push(cv.name)
code.push(cv.code)
var zv=cv.children[v[2]];
value.push(zv.name)
code.push(zv.code)
e.detail={code:code,value:value,data:zv}
this.$emit('change',e)
},
region_change_col(e){
if (e.detail.column === 0) {
this.dataValue[1] = 0;
this.dataValue[2] = 0;
}
if (e.detail.column === 1) {
this.dataValue[2] = 0;
}
this.dataValue[e.detail.column]=e.detail.value
this.range_set();
this.$emit('columnchange',e)
},
region_cancel(e){
this.$emit('cancel',e)
},
}
}
</script>
<style>
</style>