workApp/components/tree-node.vue

<template>
	<view class="tree-node">
		<view v-for="item in treeData" :key="item.id" class="node-item">
			<view class="tree_row" :style="getRowStyle()" @click="handleExpand(item)">
				<view class="checkbox_wrap" @click.stop="handleSelect(item)">
					<view class="checkbox" :class="{ checked: item.checked, 'half-checked': item.halfChecked }">
						<view v-if="(item.checked || item.halfChecked) && item.children && item.children.length > 0" class="checkbox_minus"></view>
						<image v-else-if="item.checked && (!item.children || item.children.length === 0)" src="/static/image/publish/correct.png" class="checkbox_check_image" mode="aspectFit"></image>
					</view>
				</view>
				<text class="row_text" :class="{ 'leaf-node': !item.children || item.children.length === 0 }">{{ item.name }}</text>
				<view v-if="item.children && item.children.length > 0" class="expand_icon">
					<image src="/static/image/icon/xiala.png" class="expand-arrow" :class="{ expanded: expandedIds.includes(item.id) }" mode="aspectFit"></image>
				</view>
			</view>

			<view v-if="expandedIds.includes(item.id) && item.children && item.children.length > 0" class="children-container">
				<TreeNode :tree-data="item.children" :expanded-ids="expandedIds" :level="level + 1"
					@toggle-expand="(ids) => $emit('toggle-expand', ids)"
					@toggle-select="(item) => $emit('toggle-select', item)" />
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'TreeNode',
	props: {
		treeData: {
			type: Array,
			default: () => []
		},
		expandedIds: {
			type: Array,
			default: () => []
		},
		level: {
			type: Number,
			default: 0
		}
	},
	methods: {
		handleExpand(item) {
			if (item.children && item.children.length > 0) {
				const siblingIds = this.treeData.map(n => n.id);
				const isExpanded = this.expandedIds.includes(item.id);
				this.$emit('toggle-expand', { itemId: item.id, siblingIds, isExpanded });
			}
		},
		handleSelect(item) {
			this.$emit('toggle-select', item);
		},
		getRowStyle() {
			return {
				paddingLeft: `${24 + this.level * 48}rpx`
			};
		}
	}
};
</script>

<style lang="scss" scoped>
.tree-node {
	.node-item {
		background-color: #FFFFFF;
		border-bottom: 2rpx solid #F3F3F3;

		&:last-child {
			border-bottom: none;
		}
	}

	.tree_row {
		display: flex;
		align-items: center;
		padding: 24rpx;
		padding-right: 24rpx;

		.checkbox_wrap {
			margin-right: 16rpx;
			flex-shrink: 0;

			.checkbox {
				width: 32rpx;
				height: 32rpx;
				border: 2rpx solid #DCDFE6;
				border-radius: 6rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				&.checked {
					background-color: #2E64FA;
					border-color: #2E64FA;

					.checkbox_minus {
						width: 16rpx;
						height: 0;
						border-top: 2rpx solid #FFFFFF;
						border-bottom: 2rpx solid #FFFFFF;
					}

					.checkbox_check_image {
						width: 32rpx;
						height: 32rpx;
					}
				}

				&.half-checked {
					background-color: #2E64FA;
					border-color: #2E64FA;

					.checkbox_minus {
						width: 16rpx;
						height: 0;
						border-top: 2rpx solid #FFFFFF;
						border-bottom: 2rpx solid #FFFFFF;
					}
				}
			}
		}

		.row_text {
			flex: 1;
			font-size: 28rpx;
			color: #333333;

			&.leaf-node {
				color: #666666;
			}
		}

		.expand_icon {
				flex-shrink: 0;
				margin-left: 8rpx;
				width: 24rpx;
				height: 24rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.expand-arrow {
					width: 32rpx;
					height: 32rpx;
					display: inline-block;
					transform: rotate(-90deg);
					transition: transform 0.3s ease;

					&.expanded {
						transform: rotate(0deg);
					}
				}
			}

		.arrow_right {
			font-size: 24rpx;
			color: #999999;
			flex-shrink: 0;
			margin-left: 8rpx;
		}
	}

	.children-container {
		border-top: 2rpx solid #F3F3F3;
	}
}
</style>