wardrobe/tm-vuetify/components/tm-pickersView/tm-pickersView.vue

<template>
	<view class="tm-pickersView flex-start px-24" :class="[black_tmeme?'grey-darken-5':bgColor]">
		<!-- @change="bindChange" -->
		
		<picker-view  @change="change" @pickstart='$emit("aniStart")' @pickend='$emit("aniEnd")'  v-if="listData.length>0" :value="value_default"  
		:mask-style='black_tmeme?"opacity:0;":""'
		indicator-style='height:50px;' 
		indicator-class="tm-pickersBView-item-h" 
		class="tm-pickersBView-wk">
			<picker-view-column v-for="(item,index) in listData" :key="index">
				<view class="tm-pickersBView-item fulled-height flex-center " style="margin: 0 5px;" :class="[value_default[index]==index_pub?'text-size-n text-weight-b active':'',black_tmeme?'bk':'']"  v-for="(item_data,index_pub) in listData[index]" :key="index_pub">
					<text v-if="dataType == 'string'" >{{item_data}}</text>
					<text v-if="dataType == 'object'">{{item_data[rangKey]}}</text>
				</view>
			</picker-view-column>
			
		</picker-view>


	</view>
</template>

<script>
	/**
	 * 普通级联拉选择器(嵌入式)
	 * @description 多级关联，单级关联选择
	 * @property {Array} default-value = [] 默认：[],默认赋值项。可选三种赋值方式，名称赋值，对象赋值，数字序列赋值
	 * @property {String|Number} item-height = [34|42|50|58|62] 项目的高度单位px
	 * @property {Array} list = [] 选择器的数据，可选格式：Array<string>,Array<object>.如果为object格式需要提供rangKey.如果为多级需要提供children.key值
	 * @property {String} rang-key = [text|title] 默认：text,如果List格式为对象数组，需要提供此值
	 * @property {String} children-key = [children] 默认：children,如果List格式为对象数组且为多级联选择，需要提供此值，理论上无限级联数据
	 * @property {String|Boolean} black = [true|false] 是否开启暗黑模式。 
	 * @property {String|Boolean} disabled = [true|false] 是否禁用
	 * @property {String} bg-color = [white|blue] 默认：white,白色背景；请填写背景的主题色名称。 
	 * @property {Function} change 列数被选中改变时触发。
	 * 
	 */

	export default {
		name: "tm-pickersView",
		props: {
			// 默认选中的项
			// 格式有三种分别是[string,string...]
			// [数字序列，数字序列....]
			// 和list同等对象结构[{},{},...],此格式需要提供rangKey字段否则报错。
			defaultValue:{
				type:Array,
				default:()=>{return []}
			},
			// 行高。
			itemHeight: {
				type: String | Number,
				default: 40
			},
			list: {
				type: Array,
				default: () => {
					return []
				}
			},
			// 如果数据是对象，则需要提供key值。
			rangKey: {
				type: String,
				default: "text"
			},
			rangKeyId: {
				type: String,
				default: "id"
			},
			// 如果是联级，则需要提供子集key值。
			childrenKey: {
				type: String,
				default: "children"
			},
			black:{
				type:String|Boolean,
				default:null
			},
			// 是否禁用
			disabled:{
				type:String|Boolean,
				default:false
			},
			// 背景颜色，主题色名称。
			bgColor:{
				type:String,
				default:'white'
			}
		
		},
		data() {
			return {
				value_default:[],
				pre_value:[],
				scrollEvent: 0,
				childrenIndex: 0,
				listIndex: [],
				listData: [],
			
				idx:9123
			};
		},
		mounted() {
			this.$nextTick(function(){
				this.chulisdata()
				this.setDefaultValue();
				
			})
		},
		watch:{
			defaultValue:{
				deep:true,
				handler: function(newV,oldV){
					this.chulisdata()
					this.$nextTick(function(){
						this.inits();
					})
				}
			},
			list:{
				deep:true,
				handler:async function(newV,oldV){
					this.chulisdata()
					this.$nextTick(async function(){
						await this.inits();
					})
				}
			},
		},
		computed: {
			black_tmeme: function() {
				if (this.black !== null) return this.black;
				return this.$tm.vx.state().tmVuetify.black;
			},
			dataType: function() {
				// 数据有误
				if (typeof this.list !== 'object' && !Array.isArray(this.list) && !this.list.length) return null;
				if (typeof this.list[0] === 'string') return 'string';
				if (typeof this.list[0] === 'object') return 'object';
			},
			
			gridNum: function() {
				let t = this;
				if (
				(typeof this.list !== 'object' && !Array.isArray(this.list) && this.list.length==0)||
				typeof this.list[0] === 'undefined'
				) {
					this.listIndex = [{
						itemIndex: 0,
						childrenIndex: 0,
						wz: 0
					}]
					return 0
				};
				if (typeof this.list[0] === 'string') {
					this.listIndex = [{
						itemIndex: 0,
						childrenIndex: 0,
						wz: 0
					}]
					return 1
				}
				if (typeof this.list[0] === 'object') {
					let index = 0;
					let cindex = 1;
					let pds = []
					function tests(obj) {
						if(!obj||obj?.length==0){
							return;
						}
						cindex = cindex+1;
						index +=1;
						pds.push({
							itemIndex: 0,
							childrenIndex: index,
							wz: 0
						})
						if (obj && typeof obj === 'object' && Array.isArray(obj)) {
							if (obj[0][t.childrenKey]) {
								tests(obj[0][t.childrenKey]);
							}
						}
					}
					pds.push({
						itemIndex: 0,
						childrenIndex: index,
						wz: 0
					})
					tests(this.list[0][this.childrenKey])
					t.listIndex = pds;
					return cindex;
				}
			},

		},
		methods: {
			SeletecdeIndexdefault(){
				let d = []
				
				for(let i=0;i<this.gridNum;i++){
					d.push(this.listIndex[i].itemIndex)
				}
				this.value_default = d;
			},
			// 获取当前选中的数据。
			getSelectedValue(){
				let t = this;
				// 总的级联数。
				let dNum = this.gridNum;
				let pd = this.listIndex;
				
				if(this.dataType === 'string'){
					return [{
						index:this.listIndex[0].itemIndex,
						data:this.listData[0][this.listIndex[0].itemIndex]
					}]
				}else if(this.dataType === 'object'){
					
					if(dNum===1){
						
						let ps = {...this.listData[0][this.listIndex[0].itemIndex]};
						delete ps.children;
						return [{
							index:this.listIndex[0].itemIndex,
							data:ps
						}]
						
					}else if(dNum>1){
						let p = [];
						this.listIndex.forEach((item,index)=>{
							if(t.listData[index]){
								let ps = {...t.listData[index][item.itemIndex]};
								delete ps.children;
								p.push({
									index:item.itemIndex,
									data:ps
								})
							}
							
						})
						
						return p;
					}
				}
				return [];
			},
			chulisdata() {
				// 总的级联数。
				let dNum = this.gridNum;
				
				let t = this;
				if (dNum === 0) {
					this.listData = [];
					this.$forceUpdate()
					return this.listData;
				}
				if (dNum === 1) {
					this.listData = [this.list];
					// this.listData.push([...this.list]);
					this.$forceUpdate()
					
					return this.listData;
				}
				
				if (dNum > 1) {
					
					let index = 1;
					let list = [];
					let p = [];
					function tests(obj) {
						if(index > dNum) return;
						list.push([...obj])
						if(obj[t.listIndex[index]?.itemIndex]){
							let cl = obj[t.listIndex[index].itemIndex][t.childrenKey];
							if (cl && typeof cl === 'object' && Array.isArray(cl)) {
								index++;
							
								tests(cl);
							}
						}

					}
					p.push([...this.list])
					
					if(this.list[t.listIndex[0].itemIndex][this.childrenKey]){
						tests(this.list[t.listIndex[0].itemIndex][this.childrenKey])
					}
					p.push(...list);
					this.$forceUpdate()
					this.listData = p;
				}
				
				return this.listData;
			},
			setDefaultValue(objSelected){
				let t = this;
				uni.$tm.sleep(50).then(()=>t.inits(objSelected))
				.then(()=>uni.$tm.sleep(50))
				.then(()=>t.SeletecdeIndexdefault())
				
			},
			async inits(objSelected){
				// 总的级联数。
				let dNum = this.gridNum;
				let t = this;
				var sjd = null;
				if(typeof objSelected ==='object' && Array.isArray(objSelected)){
					sjd = objSelected;
				}else{
					if(!this.defaultValue||this.defaultValue.length==0) return;
					sjd = this.defaultValue;
				}
				let typeindex = typeof sjd[0];
				
				if(dNum===0) return;
				
				if(typeindex === 'number'){
					if (dNum === 1) {
						let itemIndex = sjd[0];
						if(typeof itemIndex === 'number' && !isNaN(itemIndex) ){
							this.$set(this.listIndex[0], 'itemIndex', itemIndex);
							
						}
						
						return 
					}else if(dNum > 1){
						
						let index = 1;
						async function tests() {
							if(index > dNum) return;
							
							let itemIndex = t.defaultValue[index];
							
							if(typeof itemIndex === 'number' && !isNaN(itemIndex) &&typeof t.listIndex[index] === 'object' && typeof t.listIndex[index] !=='undefined'){
								await uni.$tm.sleep(30)
								t.$set(t.listIndex[index], 'itemIndex', itemIndex);
								
								t.chulisdata();
								index++;
								await tests();
							}	
						}
						
						let itemIndex = sjd[0];
						
						this.$set(this.listIndex[0], 'itemIndex', itemIndex);
						
						
						this.chulisdata();
						
						await tests()
						
					}
					
				}else if(typeindex === 'string'){
					
					if(this.dataType==='string'){
						if (dNum === 1) {
							let valueStr = sjd[0];
							if(typeof valueStr !=='string' || typeof valueStr ==='undefined' || valueStr ==null){
								return;
							}
							let itemIndex = this.listData[0].indexOf(valueStr)
							if(itemIndex>-1){
								this.$set(this.listIndex[0], 'itemIndex', itemIndex);
								
							}
							
							return 
						}
					}else if(this.dataType === 'object'){
						if (dNum === 1) {
							let valueStr = sjd[0];
							if(typeof valueStr !=='string' || typeof valueStr ==='undefined' || valueStr ==null){
								return;
							}
							let itemIndex = this.listData[0].findIndex(item=>{
								return item[t.rangKey] ==  valueStr;
							})
							if(itemIndex>-1){
								this.$set(this.listIndex[0], 'itemIndex', itemIndex);
								
							}
							return 
						}else if(dNum>1){
							let index = 0;
							async function tests() {
								if(index > dNum) return;
								
								if(typeof t.listIndex[index] === 'object' && typeof t.listIndex[index] !=='undefined'){
									let valueStr = t.defaultValue[index];
									if(typeof valueStr !=='string' || typeof valueStr ==='undefined' || valueStr ==null){
										return;
									}
									let itemIndex = t.listData[index].findIndex(item=>{
										return item[t.rangKey] ==  valueStr;
									})
									if(itemIndex>-1){
										await uni.$tm.sleep(30)
										t.$set(t.listIndex[index], 'itemIndex', itemIndex);
										
										t.chulisdata();
										
									}
									
									index++;
									await tests();
									
								}	
							}
							
							await tests()

						}
						
						
						
						
					}
				}else if(typeindex === 'object'){
					
					if (dNum === 1) {
						let valueStr = sjd[0];
						if(typeof  valueStr[t.rangKey] ==='undefined' || typeof valueStr !=='object' || typeof valueStr ==='undefined' || valueStr ==null){
							return;
						}
						
						let itemIndex = this.listData[0].findIndex(item=>{
							return (item[t.rangKey] ==  valueStr[t.rangKey])||(parseInt(item[t.rangKeyId]) ==  parseInt(valueStr[t.rangKeyId]));;
						})
						if(itemIndex>-1){
							this.$set(this.listIndex[0], 'itemIndex', itemIndex);
							
						}
						
						return 
					}else if(dNum>1){
						let index = 0;
						async function tests() {
							if(index > dNum) return;
							
							if(typeof t.listIndex[index] === 'object' && typeof t.listIndex[index] !=='undefined'){
								let valueStr = t.defaultValue[index];
								if(typeof  valueStr[t.rangKey] ==='undefined' || typeof valueStr !=='object' || typeof valueStr ==='undefined' || valueStr ==null){
									return;
								}
								let itemIndex = t.listData[index].findIndex(item=>{
									return (item[t.rangKey] ==  valueStr[t.rangKey])||(parseInt(item[t.rangKeyId]) ==  parseInt(valueStr[t.rangKeyId]));
								})
								if(itemIndex>-1){
									await uni.$tm.sleep(30)
									t.$set(t.listIndex[index], 'itemIndex', itemIndex);
									t.$set(t.listIndex[index], 'wz', itemIndex * t.itemHeight);
									t.chulisdata();
								}
								
								index++;
								await tests();
								
							}	
						}
						await tests()
					
					}
				}
			},
			change(e) {
				let pl = [...e.detail.value];
				
				this.pre_value =[...this.value_default];
				
				if(this.disabled){
					this.value_default = this.pre_value;
					
					return;
				}
				let childrenIndex = 0;
				for(let i=0;i<pl.length;i++){
					if(this.listIndex[i].itemIndex !== pl[i]){
						childrenIndex = this.listIndex[i].childrenIndex;
						break;
					}
				}
				
				this.childrenIndex = childrenIndex;
				
				for(let i=childrenIndex;i<pl.length;i++){
					if(this.listIndex[i]?.itemIndex !== pl[i]){
						this.$set(this.listIndex[i],'itemIndex',pl[i])
					}else{
						this.$set(this.listIndex[i],'itemIndex',0)
						pl[i] = 0;
					}
				}
				
				this.chulisdata()
				this.$nextTick(function(){
					this.value_default = pl;
					this.$emit("change",pl)
				})
				
			},

		},
	}
</script>

<style >
	.tm-pickersView .tm-pickersBView-item-h{
		height: 50px;
		background-color: rgba(0,0,0,0.03);
		width: calc(100% - 10px);
		margin-left: 5px;
		border-radius: 20rpx;
		border: none;
	}
	.tm-pickersView .tm-pickersBView-item-h::after,.tm-pickersView .tm-pickersBView-item-h::before{
		border: none;
	}
	.tm-pickersView .tm-pickersBView-wk{
		position: relative;
		width: 750rpx;
		height: 500rpx;
		
	}
	.tm-pickersView .tm-pickersBView-wk .tm-pickersBView-item.bk{
		opacity: 0.4;
	}
	.tm-pickersView .tm-pickersBView-wk .tm-pickersBView-item.active{
		opacity: 1;
		border-radius: 20rpx;
		border: none;
		background-color: rgba(0,0,0,0.06);
	}
	.tm-pickersView .tm-pickersBView-wk .tm-pickersBView-item.active.bk{
		background-color: rgba(255,255,255,0.06);
	}
</style>