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

<template>
	<view class="tm-treeSelect fulled-height">
		<view class="tm-treeSelect-slide ">
			<scroll-view scroll-y
			:style="{
				height:activeHeight+'px'
			}"
			>
				<tm-listitem :disabled="item['disabled']?true:false" 
				:black="black_tmeme" @click="activeIndex=index" 
				:disabled-color="bgColor"
				v-for="(item,index) in formaData" :key='index' 
				:color="activeIndex==index?(text?' text ' + color:'white'):bgColor" 
				:show-right-icon="false" 
				:margin="[0,0]"
				fontSize="26"
				:class-style="activeIndex==index?`border-${color_tmeme}-l-2`:'border-grey-lighten-5-l-2'"
				round="0" shadow="0"
				>
				<tm-badges color='red' :fllowTheme="false" :offset="[12,-10]" v-if="item.dot>0&&dot" :dot="false" :label="item.dot"></tm-badges>
				<view class="mr-10">
					<text  :class="[`text-${activeIndex==index?color_tmeme:fontColor}`,item['disabled']?'opacity-3':'']">{{item[rangKey]}}</text>
				</view>
				</tm-listitem>
			</scroll-view>
		</view>
		<view class="tm-treeSelect-slideitem" > 
			<scroll-view  scroll-y
			:style="{
				height:activeHeight+'px'
			}"
			>
				<tm-groupcheckbox  v-if="formaData[activeIndex]" :max="max" @change="changeOk">
					<block v-for="(item,index) in formaData[activeIndex].children" :key='index'>
						<tm-checkbox dense
						:disabled="item['disabled']||formaData[activeIndex]['disabled']?true:false" 
						:color="color_tmeme" round="2" @change="itemChange"  
						:name="item" 
						v-model="item.checked">
						<tm-listitem  fontSize="28" :black="black_tmeme" :padding="[24,24]" :margin="[0,0]" :border-bottom="true" round="0" shadow="0" 
						:title="item[rangKey]"  >
						<template #default>
							<text :class="[item.checked?'text-'+color_tmeme:'']">{{item[rangKey]}}</text>
						</template>
							<template v-slot:rightIcon>
								<view style="line-height: 0;vertical-align: middle;min-width: 40rpx;" class="fulled">
									<view v-if="item.checked" class="rounded flex-center" :class="[color_tmeme,`shadow-${color_tmeme}-4`]" style="width: 34rpx;height: 34rpx;">
										<text class="iconfont icon-check text-size-xs"></text>
									</view>
									<!-- <tm-icons dense v-if="item.checked" name="icon-check-circle"></tm-icons> -->
									<!-- <tm-button v-if="item.checked" icon="icon-check" fab size="xs"></tm-button> -->
								</view>
							</template>
						</tm-listitem>
						</tm-checkbox>
					</block>
					
				</tm-groupcheckbox>
			</scroll-view>
		</view>
		
	</view>
</template>

<script>
	/**
	 * 分类选择
	 * @property {Number|String} height = [] 默认0，单位upx,自动使用父组件的高度。
	 * @property {Array} default-selected = [] 默认[]，可以是id索引也可以是对象数组,可以混着来。[1]
	 * @property {Array} list = [] 默认[]，数据结构对象，必须需要含有唯一标识符id即可。[{title:'苏州',id:1}],每一个类目和子类可以含有disabled值，用来禁用类目或者选项。
	 * @property {String} rang-key = [] 默认'title'，数据结构对象中，需要展示标签的key
	 * @property {Number} max = [] 默认999，每一项目最大选择数量，1可以实现单选。
	 * @property {String} color = [] 默认 primary，主题色名
	 * @property {String} bg-color = [] 默认 grey-lighten-5，主题色名未选择时的背景色。
	 * @property {String} font-color = [] 默认 grey，未选中时的文字颜色
	 * @property {Boolean} text = [] 默认 false，使用主题文本色为高亮色。
	 * @property {Boolean} black = [] 默认 false，是否暗黑模式。
	 * @property {Boolean} dot = [] 默认 false，是否显示角标数字,当前选中的数量。
	 * @property {Function} children-change 选中单个选项时触发。返回选中的数据。
	 * @property {Function} change 每次选择变化都会触发全局change,返回当前类目和所有类目选中的数据。
	 * @example <tm-treeSelect  color="green" ></tm-treeSelect>
	 */
	import tmListitem from "@/tm-vuetify/components/tm-listitem/tm-listitem.vue"
	import tmGrouplist from "@/tm-vuetify/components/tm-grouplist/tm-grouplist.vue"
	import tmBadges from "@/tm-vuetify/components/tm-badges/tm-badges.vue"
	import tmGroupcheckbox from "@/tm-vuetify/components/tm-groupcheckbox/tm-groupcheckbox.vue"
	import tmCheckbox from "@/tm-vuetify/components/tm-checkbox/tm-checkbox.vue"
	export default {
		components:{tmListitem,tmGrouplist,tmBadges,tmGroupcheckbox,tmCheckbox},
		name:"tm-treeSelect",
		props:{
			// 高度，默认为0时，自动使用父组件的高度.
			height: {
				type: String | Number,
				default: 0
			},
			// 可以是id索引也可以是对象数组,可以混着来。
			defaultSelected:{
				type:Array,
				default:()=>{
					return []
				}
			},
			// 对象数组
			list:{
				type:Array,
				default:()=>{
					return [];
				}
			},
			// 显示标签的key.
			rangKey:{
				type:String,
				default:'title'
			},
			// 每一项目最大选择数量，1可以实现单选。
			max:{
				type:Number,
				default:999
			},
			// 主题色名
			color:{
				type:String,
				default:'primary'
			},
			// 未选择时的背景色。
			bgColor:{
				type:String,
				default:'grey-lighten-5'
			},
			//未选择时的文字色。
			fontColor:{
				type:String,
				default:'grey-darken-1'
			},
			// 使用主题文本色为高亮色。
			text:{
				type:Boolean,
				default:false
			},
			black:{
				type:Boolean,
				default:null
			},
			// 是否显示角标数字当前选中的数量。
			dot:{
				type:Boolean,
				default:false
			},
			// 跟随主题色的改变而改变。
			fllowTheme:{
				type:Boolean|String,
				default:true
			}
		},
		data() {
			return {
				activeHeight: 0,
				activeIndex:0,
				formaData:[]
			};
		},
		watch:{
			list:{
				deep:true,
				handler:function(){
					this.formaData = [...this.dataList];
				}
			},
			defaultSelected:{
				deep:true,
				handler:function(){
					this.clear()
					this.formaData = [...this.clear()]
					this.formaData = [...this.dataList];
				}
			}
		},
		computed:{
			black_tmeme: function() {
				if (this.black !== null) return this.black;
				return this.$tm.vx.state().tmVuetify.black;
			},
			color_tmeme:function(){
				if(this.$tm.vx.state().tmVuetify.color!==null&&this.$tm.vx.state().tmVuetify.color && this.fllowTheme){
					return this.$tm.vx.state().tmVuetify.color;
				}
				return this.color;
			},
			dataList(){
				let t = this;
				let p = this.$tm.deepClone(this.list)
				for(let j=0;j<p.length;j++){
					p[j]['dot'] = 0;
					if(p[j].children){
						let ic = p[j].children;
						for(let k=0;k<ic.length;k++){
							if(!ic[k].hasOwnProperty('checked')){
								ic[k]['checked'] = false;
							}
							
							for(let i=0 ;i < t.defaultSelected.length;i++){
									let lsitem = t.defaultSelected[i];
									if(typeof lsitem === 'object'){
										if(lsitem['id'] == ic[k]['id']){
											ic[k]['checked'] = true;
										}
									}else{
										if(lsitem == ic[k]['id']){
											ic[k]['checked'] = true;
											
										}
									}
				
								}
							if(ic[k]['checked']===true){
								p[j]['dot'] +=1
							}
						}
					}
				}
				return p;
			},
		},
		mounted() {
			
			let t = this;
			this.$nextTick(async function() {
				this.activeHeight = uni.upx2px(this.height);
				if (!this.activeHeight) {
					let wsz = await this.$Querey(".tm-treeSelect",this).catch(e=>{})
					this.activeHeight = wsz[0].height||250;
				}
				this.formaData = [...this.dataList];
			});
		},
		methods: {
			clear(){
				let t = this;
				let p = this.$tm.deepClone(this.list)
				for(let j=0;j<p.length;j++){
					p[j]['dot'] = 0;
					if(p[j].children){
						let ic = p[j].children;
						for(let k=0;k<ic.length;k++){
							if(!ic[k].hasOwnProperty('checked')){
								ic[k]['checked'] = false;
							}else{
								ic[k]['checked'] = false;
							}
						}
					}
				}
				return p;
			},
			// 所有选项。
			changeOk(e) {
				
				let p = [];
				function ts(obj){
					if(Array.isArray(obj)){
						obj.forEach(item=>{
							if(item.children){
								ts(item.children);
							}else{
								if(item.checked===true){
									p.push(item)
								}
							}
							
						})
					}
					
					
				}
				
				ts(this.dataList);
				this.$emit('change',{
					all:p,//所有选择项
					index:this.activeIndex,//当前数目索引
					children:e//当前类目的选中的选择项
				});
				if(this.formaData.length>0){
					this.$set(this.formaData[this.activeIndex],'dot',e.length)
				}
				
			},
			// 单个数组点击切换产生的选项。
			itemChange(e){
				let t = this;
				//返回的格式： {"index":4,"checked":true,"value":推荐的数据}
				this.$emit('children-change',e)
				
			}
		},
	}
</script>

<style lang="scss" scoped>
.tm-treeSelect{
	height: 100%;
	display: flex;
	justify-content: flex-start;
	.tm-treeSelect-slide{
		width: 190upx;
	}
	.tm-treeSelect-slideitem{
		width: calc(100% - 190upx);
	}
}
</style>