Web_TracerMethodology/components/tm-trees/row.vue

<template>
	<view class="row">
		<view class="content-wrap" @click="rowClick">
			<view class="left">
				<view>
					<image class="left-icon" 
						:style="{width: hasChildren ? '25rpx' : '20rpx'}"
						:src="`../../static/${leftIcon}.png`"></image>
				</view>
				<text>{{ option.label }}</text>
			</view>
			<view v-if="parentCheckble||option.parentId !== 0" class="right" @click="checkedHandle">
				<image :src="`../../static/${rightIcon}.png`"></image>
			</view>
		</view>
		<view class="children-wrap" v-if="open">
			<tm-trees-row v-for="(item,index) in option.children" 
				:option="item" 
				:openKeys="openKeys"
				:checkedKeys="checkedKeys"
				v-on:open-keys="openKeysHandle"
				v-on:checked-keys="checkedKeysHandle"
				:key="index"/>
		</view>
	</view>
</template>

<script>
	import {_stopPropagation} from "../../utils/compatible.js";
	import {arrFilter} from "../../utils/arrFilter.js";
	
	export default {
		data() {
			return {
			}
		},
		props: ['option', 'openKeys', 'checkedKeys','parentCheck'],
		computed: {
			hasChildren: function() {
				return this.option.children && this.option.children.length > 0;
			},
			open: function() {
				return this.hasChildren && this.openKeys.includes(this.option.key);
			},
			checked: function() {
				return this.checkedKeys.includes(this.option.key);
			},
			parentCheckble(){
				 //父级节点是否可选
				 return this.parentCheck;
			},
			leftIcon: function() {
				let iconName = 'parent-open';
				if(this.hasChildren) {
					if(this.open) {
						iconName = 'parent-close';
					}
				} else {
					iconName = 'child'
				}
				return iconName;
			},
			rightIcon: function() { 
				return this.checked ? 'check-checkbox' : 'check-no';
			}
		},
		
		mounted() {
			// console.log('this.props',this.parentCheckble);
		},

		methods: {
			rowClick: function() {
				if(!this.hasChildren) return;
				this.openKeysHandle(arrFilter(this.option.key, this.openKeys));
			},
			checkedHandle: function(e) {
				
				_stopPropagation(e);
				let checkedKeys = this.checkedKeys;
				
				if(this.option.children&&this.option.children.length>0){
					  //勾选的是父级
					  const keys = this.option.children.map(item=>item.key);
					  
					  [...keys,this.option.key].forEach(item=>{
						    const index = checkedKeys.findIndex(key => key == item);
						    if(index != -1){
								  checkedKeys.splice(index,1);   
							}else{
								  checkedKeys.push(item);
							}
					  });
					  
					  this.checkedKeysHandle(checkedKeys,this.option);
					  
				}else{
					
					this.checkedKeysHandle(arrFilter(this.option.key, this.checkedKeys),this.option);
				}
			
			},
			openKeysHandle: function(arr) {
				this.$emit('open-keys', arr);
			},
			checkedKeysHandle: function(arr,items) {
				this.$emit('checked-keys',arr,items);
			}
		}
	}
</script>

<style lang="less">
	.row {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-left: 25rpx;
		width: 100%;
		background-color: #fff;
		
		.content-wrap {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			border-bottom: 0.62rpx solid #DADEE6;
			width: 100%;
			height: 87.5rpx;
			font-size: 22.5rpx;
			line-height: 33.75rpx;
			color: #292C33;
			
			.left {
				display: flex;
				flex-direction: row;
				align-items: center;
				view {
					margin-right: 20rpx;
					height: 28rpx;
					image {
						width: 25rpx;
						height: 22.5rpx;
					}
				}
			}
			.right {
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				width: 87.5rpx;
				height: 87.5rpx;
				image {
					width: 25rpx;
					height: 25rpx;
				}
			}
		}
		.children-wrap {
			width: 100%;
			padding-left: 77.5rpx;
		}
	}
</style>