bawangcan-shop/components/w-picker/linkage-picker.vue

<template>
	<view class="w-picker-view">
		<picker-view class="d-picker-view" :indicator-style="itemHeight" :value="pickVal" @change="handlerChange">
			<picker-view-column v-for="(group,gIndex) in range" :key="gIndex">
				<view class="w-picker-item" v-for="(item,index) in group" :key="index">{{item[nodeKey]}}</view>
			</picker-view-column>
		</picker-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pickVal:[],
				range:[],
				checkObj:{}
			};
		},
		props:{
			itemHeight:{
				type:String,
				default:"44px"
			},
			value:{
				type:[Array,String],
				default:""
			},
			defaultType:{
				type:String,
				default:"label"
			},
			options:{
				type:Array,
				default(){
					return []
				}
			},
			defaultProps:{
				type:Object,
				default(){
					return{
						lable:"label",
						value:"value",
						children:"children"
					}
				}
			},
			level:{
				//多级联动层级，表示几级联动
				type:[Number,String],
				default:2
			}
		},
		computed:{
			nodeKey(){
				return this.defaultProps.label;
			},
			nodeVal(){
				return this.defaultProps.value;
			},
			nodeChild(){
				return this.defaultProps.children;
			}
		},
		watch:{
			value(val){
				if(this.options.length!=0){
					this.initData();
				}
			},
			options(val){
				this.initData();
			}
		},
		created() {
			if(this.options.length!=0){
				this.initData();
			}
		},
		methods:{
			getData(){
				//用来处理初始化数据
				let options=this.options;
				let col1={},col2={},col3={},col4={};
				let arr1=options,arr2=[],arr3=[],arr4=[];
				let col1Index=0,col2Index=0,col3Index=0,col4Index=0;
				let a1="",a2="",a3="",a4="";
				let dVal=[],obj={};
				let value=this.value;
				let data=[];
				a1=value[0];
				a2=value[1];
				if(this.level>2){
					a3=value[2];
				}
				if(this.level>3){
					a4=value[3];
				};
				/*第1列*/
				col1Index=arr1.findIndex((v)=>{
					return v[this.defaultType]==a1
				});
				col1Index=value?(col1Index!=-1?col1Index:0):0;
				col1=arr1[col1Index];
				
				/*第2列*/
				arr2=arr1[col1Index][this.nodeChild];
				col2Index=arr2.findIndex((v)=>{
					return v[this.defaultType]==a2
				});
				col2Index=value?(col2Index!=-1?col2Index:0):0;
				col2=arr2[col2Index];
				
				/*第3列*/
				if(this.level>2){
					arr3=arr2[col2Index][this.nodeChild];
					col3Index=arr3.findIndex((v)=>{
						return v[this.defaultType]==a3;
					});
					col3Index=value?(col3Index!=-1?col3Index:0):0;
					col3=arr3[col3Index];
				};
				
				
				/*第4列*/
				if(this.level>3){
					arr4=arr3[col4Index][this.nodeChild];
					col4Index=arr4.findIndex((v)=>{
						return v[this.defaultType]==a4;
					});
					col4Index=value?(col4Index!=-1?col4Index:0):0;
					col4=arr4[col4Index];
				};
				switch(this.level*1){
					case 2:
						dVal=[col1Index,col2Index];
						obj={
							col1,
							col2
						}
						data=[arr1,arr2];
						break;
					case 3:
						dVal=[col1Index,col2Index,col3Index];
						obj={
							col1,
							col2,
							col3
						}
						data=[arr1,arr2,arr3];
						break;
					case 4:
						dVal=[col1Index,col2Index,col3Index,col4Index];
						obj={
							col1,
							col2,
							col3,
							col4
						}
						data=[arr1,arr2,arr3,arr4];
						break
				}
				return {
					data,
					dVal,
					obj
				}
			},
			initData(){
				let dataData=this.getData();
				let data=dataData.data;
				let arr1=data[0];
				let arr2=data[1];
				let arr3=data[2]||[];
				let arr4=data[3]||[];
				let obj=dataData.obj;
				let col1=obj.col1,col2=obj.col2,col3=obj.col3||{},col4=obj.col4||{};
				let result="",value=[];
				let range=[];
				switch(this.level){
					case 2:
						value=[col1[this.nodeVal],col2[this.nodeVal]];
						result=`${col1[this.nodeKey]+col2[this.nodeKey]}`;
						range=[arr1,arr2];
						break;
					case 3:
						value=[col1[this.nodeVal],col2[this.nodeVal],col3[this.nodeVal]];
						result=`${col1[this.nodeKey]+col2[this.nodeKey]+col3[this.nodeKey]}`;
						range=[arr1,arr2,arr3];
						break;
					case 4:
						value=[col1[this.nodeVal],col2[this.nodeVal],col3[this.nodeVal],col4[this.nodeVal]];
						result=`${col1[this.nodeKey]+col2[this.nodeKey]+col3[this.nodeKey]+col4[this.nodeKey]}`;
						range=[arr1,arr2,arr3,arr4];
						break;
				}
				this.range=range;
				this.checkObj=obj;
				this.$nextTick(()=>{
					this.pickVal=dataData.dVal;
				});
				this.$emit("change",{
					result:result,
					value:value,
					obj:obj
				})
			},
			handlerChange(e){
				let arr=[...e.detail.value];
				let col1Index=arr[0],col2Index=arr[1],col3Index=arr[2]||0,col4Index=arr[3]||0;
				let arr1=[],arr2=[],arr3=[],arr4=[];
				let col1,col2,col3,col4,obj={};
				let result="",value=[];
				arr1=this.options;
				arr2=(arr1[col1Index]&&arr1[col1Index][this.nodeChild])||arr1[arr1.length-1][this.nodeChild]||[];
				col1=arr1[col1Index]||arr1[arr1.length-1]||{};
				col2=arr2[col2Index]||arr2[arr2.length-1]||{};
				if(this.level>2){
					arr3=(arr2[col2Index]&&arr2[col2Index][this.nodeChild])||arr2[arr2.length-1][this.nodeChild];
					col3=arr3[col3Index]||arr3[arr3.length-1]||{};
				}
				if(this.level>3){
					arr4=(arr3[col3Index]&&arr3[col3Index][this.nodeChild])||arr3[arr3.length-1][this.nodeChild]||[];
					col4=arr4[col4Index]||arr4[arr4.length-1]||{};
				}
				switch(this.level){
					case 2:
						obj={
							col1,
							col2
						}
						this.range=[arr1,arr2];
						result=`${(col1[this.nodeKey]||'')+(col2[this.nodeKey]||'')}`;
						value=[col1[this.nodeVal]||'',col2[this.nodeVal]||''];
						break;
					case 3:
						obj={
							col1,
							col2,
							col3
						}
						this.range=[arr1,arr2,arr3];
						result=`${(col1[this.nodeKey]||'')+(col2[this.nodeKey]||'')+(col3[this.nodeKey]||'')}`;
						value=[col1[this.nodeVal]||'',col2[this.nodeVal]||'',col3[this.nodeVal]||''];
						break;
					case 4:
						obj={
							col1,
							col2,
							col3,
							col4
						}
						this.range=[arr1,arr2,arr3,arr4];
						result=`${(col1[this.nodeKey]||'')+(col2[this.nodeKey]||'')+(col3[this.nodeKey]||'')+(col4[this.nodeKey]||'')}`;
						value=[col1[this.nodeVal]||'',col2[this.nodeVal]||'',col3[this.nodeVal]||'',col4[this.nodeVal]||''];
						break;
				}
				this.checkObj=obj;
				this.pickVal=arr;
				this.$emit("change",{
					result:result,
					value:value,
					obj:obj
				})
			}
		}
	}
</script>

<style lang="scss">
	@import "./w-picker.css";	
</style>