mirror of
https://gitee.com/lab1024/smart-admin.git
synced 2025-10-02 02:06:38 +08:00
448 lines
11 KiB
Vue
448 lines
11 KiB
Vue
<template>
|
|
<div class="ts-area-picker-container">
|
|
<input class="ts-area-picker-value-displayer" @focus="initAddress" v-model="displayValue" placeholder="请选择所在地区"></input>
|
|
<input type="hidden" :value="returnValue">
|
|
|
|
<div class="ts-area-picker-desktop" v-if="show">
|
|
<div class="ts-area-picker-tmp-value">
|
|
<ul>
|
|
<li class="active" @click="switchTab(0)">{{ returnValueArr[0]?returnValueArr[0].name:'请选择' }}</li>
|
|
<li @click="switchTab(1)">{{ returnValueArr[1]?returnValueArr[1].name:'请选择' }}</li>
|
|
<li @click="switchTab(2)">{{ returnValueArr[2]?returnValueArr[2].name:'请选择' }}</li>
|
|
</ul>
|
|
<div class="close" @click="hideAddress"></div>
|
|
</div>
|
|
<div class="ts-area-picker-values">
|
|
<ul>
|
|
<li v-for="(item, index) in curDisplayingCol" :key="item.id" @click="pickValue(item.id,item.name)" v-bind:class="{ active:(returnValueArr[curDisplayingColIndex]?returnValueArr[curDisplayingColIndex].id==item.id:false) }">
|
|
{{ item.name }}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ts-area-picker-mobile ts-mask" v-if="show">
|
|
<div class="ts-mask-bg"></div>
|
|
<van-picker
|
|
show-toolbar
|
|
title="选择地区"
|
|
:columns="columns"
|
|
value-key="name"
|
|
@confirm="onConfirm"
|
|
@cancel="onCancel"
|
|
@change="onChange"
|
|
class="ts-area-picker-mobile-component"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
props:["defaultValues"],
|
|
data(){
|
|
return{
|
|
animationTimer:undefined,
|
|
displayValue:"",
|
|
returnValue:"",
|
|
returnValueArr:[],
|
|
show:false,
|
|
columns:[
|
|
{
|
|
values:[{id:"001",name:"省份1"},{id:"002",name:"省份2"}],
|
|
className:'col1'
|
|
},
|
|
{
|
|
values:[{id:"001-001",name:"省份1-城市1"},{id:"001-002",name:"省份1-城市2"},{id:"002-001",name:"省份2-城市1"},{id:"002-002",name:"省份2-城市2"}],
|
|
className:'col2'
|
|
},
|
|
{
|
|
values:[{id:"001-001-001",name:"省份1-城市1-区1"},{id:"001-002-002",name:"省份1-城市2-区2"},{id:"002-001-001",name:"省份2-城市1-区1"},{id:"002-002-002",name:"省份2-城市2-区2"}],
|
|
className:'col3'
|
|
}
|
|
],
|
|
curDisplayingColIndex:0,
|
|
curDisplayingCol:[]
|
|
}
|
|
},
|
|
methods:{
|
|
initAddress(){
|
|
this.show=true;
|
|
//Initilizing
|
|
|
|
//mobile
|
|
let self=this;
|
|
// defaultValues : array[{id:"_ID_IN_columns_of_province",name:"_NAME_IN_columns"},{id:"_ID_IN_columns_of_city",name:"_NAME_IN_columns"},{id:"_ID_IN_columns_of_area",name:"_NAME_IN_columns"}]
|
|
let defaultValues = [{id:this.columns[0].values[0].id, name:this.columns[0].values[0].name},{id:this.columns[1].values[0].id, name:this.columns[1].values[0].name},{id:this.columns[2].values[0].id, name:this.columns[2].values[0].name}];
|
|
if(this.defaultValues)
|
|
defaultValues=this.defaultValues;
|
|
this.$children.forEach(function(vueComponent){
|
|
if(vueComponent._name=="<VanPicker>")
|
|
{
|
|
self.onChange(vueComponent,defaultValues); //Important
|
|
}
|
|
});
|
|
//mobile end
|
|
|
|
//PC
|
|
this.switchTab(this.curDisplayingColIndex);
|
|
//PC end
|
|
//Initilizing end
|
|
},
|
|
pickValue(pickId,pickName){
|
|
let areaObj={id:pickId,name:pickName};
|
|
console.log(pickId,pickName);
|
|
this.returnValueArr[this.curDisplayingColIndex]=areaObj;
|
|
this.validatePickedValues();
|
|
|
|
//Submit to value displaying
|
|
let tmpDisplayValueEle = document.querySelectorAll(".ts-area-picker-tmp-value li");
|
|
tmpDisplayValueEle[this.curDisplayingColIndex].innerText=this.returnValueArr[this.curDisplayingColIndex].name;
|
|
//Submit to value displaying end
|
|
|
|
//Moving to next tab
|
|
this.curDisplayingColIndex++;
|
|
if(this.curDisplayingColIndex>2 || this.curDisplayingColIndex<0)
|
|
this.curDisplayingColIndex = 0;
|
|
if(this.returnValueArr.length>=3)
|
|
{
|
|
this.onConfirm(this.returnValueArr);
|
|
}
|
|
else
|
|
this.switchTab(this.curDisplayingColIndex);
|
|
//Moving to next tab end
|
|
},
|
|
// For van picker
|
|
onChange(picker,values) { //values = [{id:this.columns[0].id, name:this.columns[0].name},{id:this.columns[1].id, name:this.columns[1].name},{id:this.columns[3].id, name:this.columns[3].name}];
|
|
//Support single choice only , index = 0 province, index = 1 city, index = 2 area
|
|
let curSelection={'province':'','city':'','area':''};
|
|
// console.log(picker,values);
|
|
this.$emit('getmenu',values)
|
|
this.$emit("closeDialog");
|
|
if(!values)
|
|
return;
|
|
let _self=this;
|
|
values.forEach(function(ele,index){
|
|
switch(index){
|
|
case 0:
|
|
//Handling Province
|
|
curSelection.province=ele.id;
|
|
//Handling Province end
|
|
break;
|
|
case 1:
|
|
//Handling City
|
|
let matchedCity=_self.fitlerValuesInArray(curSelection.province,_self.columns[index].values);
|
|
picker.setColumnValues(index,matchedCity);
|
|
curSelection.city=matchedCity[0].id;
|
|
//Handling City end
|
|
break;
|
|
default:
|
|
//Handling Area
|
|
let matchedArea=_self.fitlerValuesInArray(curSelection.city,_self.columns[index].values);
|
|
picker.setColumnValues(index,matchedArea);
|
|
curSelection.area=matchedArea[0].id;
|
|
//Handling Area end
|
|
break;
|
|
}
|
|
|
|
});
|
|
},
|
|
validatePickedValues(){
|
|
let _self=this;
|
|
let provinceId='';
|
|
let areaId=undefined;
|
|
let validatedIndex=-1;
|
|
this.returnValueArr.forEach(function(obj,index){
|
|
switch(index){
|
|
case 0:
|
|
//Skipping province checking
|
|
provinceId = obj.id;
|
|
validatedIndex = 0;
|
|
break;
|
|
case 1:
|
|
//Checking City
|
|
if(obj.id.indexOf(provinceId)<0)
|
|
{
|
|
console.log('500 : error via checking validatePickedValues');
|
|
_self.returnValueArr.splice(index,1);
|
|
}
|
|
else
|
|
{
|
|
areaId = _self.returnValueArr[index].id;
|
|
validatedIndex=index;
|
|
}
|
|
//Checking City end
|
|
break;
|
|
case 2:
|
|
//Checking Area
|
|
if(areaId && obj.id.indexOf(areaId)<0)
|
|
{
|
|
console.log('501 : error via checking validatePickedValues');
|
|
_self.returnValueArr.splice(index,1);
|
|
}
|
|
else{
|
|
validatedIndex=index;
|
|
}
|
|
//Checking Area end
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
});
|
|
return validatedIndex;
|
|
},
|
|
onConfirm(values) {
|
|
//Get columns structure array here : values
|
|
let _self=this;
|
|
let returnVal=[];
|
|
let tmpArr = [];
|
|
this.displayValue='';
|
|
values.forEach(function(ele,index){
|
|
_self.displayValue = _self.displayValue + ele.name + " ";
|
|
tmpArr.push(ele.id);
|
|
returnVal.push(ele);
|
|
});
|
|
this.returnValueArr=returnVal;
|
|
this.returnValue=tmpArr.join("|");
|
|
this.hideAddress();
|
|
},
|
|
onCancel() {
|
|
|
|
},
|
|
fitlerValuesInArray(stringStartWith,dataColArea){
|
|
let result=[];
|
|
dataColArea.forEach(function(ele){
|
|
if(ele.id.indexOf(stringStartWith)===0)
|
|
{
|
|
result.push(ele);
|
|
}
|
|
});
|
|
return result;
|
|
},
|
|
popAddress() {
|
|
this.show=true;
|
|
},
|
|
hideAddress() {
|
|
this.show=false;
|
|
},
|
|
switchTab(tabIndex){
|
|
let areaTabLi=document.querySelectorAll(".ts-area-picker-tmp-value li");
|
|
if(tabIndex==0){
|
|
this.curDisplayingCol = this.columns[tabIndex].values;
|
|
}
|
|
let lastValidatedTabIndex=this.validatePickedValues();
|
|
if(lastValidatedTabIndex<(tabIndex-1))
|
|
{
|
|
//TODO show warning here
|
|
let errorEle=document.querySelector(".ts-area-picker-values");
|
|
errorEle.classList.add("error");
|
|
let _self = this;
|
|
if(!this.animationTimer)
|
|
{
|
|
this.animationTimer = setTimeout(function(){
|
|
errorEle.classList.remove("error");
|
|
clearTimeout(_self.animationTimer);
|
|
_self.animationTimer=undefined;
|
|
},2000);
|
|
}
|
|
tabIndex=lastValidatedTabIndex+1;
|
|
}
|
|
this.curDisplayingColIndex=tabIndex;
|
|
let filteredData=this.columns[tabIndex].values;
|
|
if(tabIndex>0 && this.returnValueArr[tabIndex-1]) //pass
|
|
{
|
|
let pickedId = this.returnValueArr[tabIndex-1].id;
|
|
filteredData=this.fitlerValuesInArray(pickedId,this.columns[tabIndex].values);
|
|
}
|
|
this.curDisplayingCol=filteredData;
|
|
|
|
areaTabLi.forEach(function(ele,index){
|
|
if(tabIndex==index){
|
|
ele.classList.add('active');
|
|
}
|
|
else
|
|
ele.classList.remove('active');
|
|
})
|
|
|
|
}
|
|
},
|
|
mounted(){
|
|
|
|
},
|
|
components:{
|
|
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.ts-area-picker-container{display:inline-block;}
|
|
.ts-area-picker-value-displayer{
|
|
width:42.5rem;
|
|
height: 2.81rem;
|
|
padding-left: 1rem;
|
|
}
|
|
.ts-area-picker-tmp-value{
|
|
border-bottom:1px solid #D7D7D7;
|
|
padding:0 2.5rem;
|
|
box-sizing: border-box;
|
|
position:relative;
|
|
ul{
|
|
padding:0;
|
|
margin:0;
|
|
display: flex;
|
|
li{
|
|
display:inline-block;
|
|
color:#333333;
|
|
width:3.125rem;
|
|
padding: 1.25rem 0;
|
|
margin-right:4rem;
|
|
cursor: pointer;
|
|
&.active{
|
|
color:#E2001A;
|
|
border-bottom:4px solid #E2001A;
|
|
}
|
|
}
|
|
}
|
|
.close{
|
|
position:absolute;
|
|
position: absolute;
|
|
right: 3rem;
|
|
top: 1.5rem;
|
|
cursor: pointer;
|
|
&:before,&:after{
|
|
background-color: #333;
|
|
}
|
|
}
|
|
}
|
|
.ts-area-picker-values{
|
|
width:100%;
|
|
height:100%;
|
|
&.error{
|
|
position:relative;
|
|
width:100%;
|
|
height:78%;
|
|
&:after{
|
|
content: " ";
|
|
position:absolute;
|
|
width:100%;
|
|
height:100%;
|
|
left:0;
|
|
top:0;
|
|
animation-name: flash-error;
|
|
animation-iteration-count: 2;
|
|
animation-duration: .5s;
|
|
animation-direction: forwards;
|
|
}
|
|
}
|
|
ul{
|
|
padding:1rem 2.5rem 2rem 2.5rem;
|
|
margin:0;
|
|
}
|
|
li{
|
|
display:inline-block;
|
|
margin-top:1rem;
|
|
margin-right:3.875rem;
|
|
color:#333;
|
|
cursor:pointer;
|
|
&.nth-child(6n){
|
|
margin-right:0;
|
|
}
|
|
&.active{
|
|
color:#E2001A;
|
|
border-bottom:4px solid #E2001A;
|
|
}
|
|
}
|
|
}
|
|
/deep/.van-picker__confirm,.close{
|
|
text-indent:-999rem;
|
|
position:relative;
|
|
&:after{
|
|
transform: rotate(45deg);
|
|
}
|
|
&:before{
|
|
transform: rotate(-45deg);
|
|
}
|
|
&:before,
|
|
&:after {
|
|
position: absolute;
|
|
content: ' ';
|
|
background-color: #E1001A;
|
|
left: 1.25rem;
|
|
bottom:-0.875rem;
|
|
width: 1px;
|
|
height: 1.375rem;
|
|
}
|
|
}
|
|
@media screen and (max-width:768px)
|
|
{
|
|
/deep/.van-picker__cancel
|
|
{
|
|
display:none;
|
|
}
|
|
/deep/.van-picker__title{
|
|
font-size:1.375rem;
|
|
color:#E1001A;
|
|
}
|
|
/deep/.van-picker__toolbar{
|
|
padding:1.5rem 1.25rem;
|
|
box-sizing: border-box;
|
|
border-bottom:1px solid #D8D8D8;
|
|
}
|
|
/deep/.van-picker__confirm{
|
|
display:block;
|
|
}
|
|
.ts-area-picker-mobile{
|
|
display:flex;
|
|
flex-direction: column;
|
|
justify-content: flex-end;
|
|
.ts-area-picker-mobile-component{
|
|
height:40vh;
|
|
width:100%;
|
|
}
|
|
}
|
|
.ts-area-picker-desktop{
|
|
display:none;
|
|
}
|
|
.ts-area-picker-value-displayer{
|
|
width: 258px;
|
|
height: 34px;
|
|
border: none;
|
|
border-bottom: 1px
|
|
solid #808285;
|
|
color: #999999;
|
|
font-size: 16px;
|
|
margin-left: 2px;
|
|
padding-left: 0;
|
|
}
|
|
}
|
|
@media screen and (min-width:769px)
|
|
{
|
|
/deep/.van-picker__confirm{
|
|
display:none;
|
|
}
|
|
.ts-area-picker-mobile{
|
|
display:none;
|
|
}
|
|
.ts-area-picker-desktop{
|
|
display:block;
|
|
width:100%;
|
|
height:19.25rem;
|
|
border:1px solid #808285;
|
|
overflow:hidden;
|
|
}
|
|
.ts-area-picker-values{
|
|
|
|
}
|
|
}
|
|
@keyframes flash-error
|
|
{
|
|
from {
|
|
opacity:0;
|
|
background-color:#fff;
|
|
}
|
|
to {
|
|
opacity:.3;
|
|
background-color:#E2001A;
|
|
}
|
|
}
|
|
</style> |