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="!hasChildren" 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'],
		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);
			},
			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';
			}
		},
		methods: {
			rowClick: function() {
				if(!this.hasChildren) return;
				this.openKeysHandle(arrFilter(this.option.key, this.openKeys));
			},
			checkedHandle: function(e) {
				_stopPropagation(e);
				this.checkedKeysHandle(arrFilter(this.option.key, this.checkedKeys));
			},
			openKeysHandle: function(arr) {
				this.$emit('open-keys', arr);
			},
			checkedKeysHandle: function(arr) {
				this.$emit('checked-keys', arr);
			}
		}
	}
</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>