uni-zhihuikuangshan/components/origanizationTree/origanizationTree - 副本.vue

<template>
	<view>
		<view class="section" v-for="(item,index) in list">
			<view class="box">
				<view class="box_item">
					<view class="box_item_left">
						<view class="box_item_icon" v-if="active == index" @click="change_active(index)">
							<image src="./icon/close.png" mode=""></image>
						</view>
						<view class="box_item_icon" v-if="active != index" @click="change_active(index)">
							<image src="./icon/open.png" mode=""></image>
						</view>
						<view class="box_item_text">{{item.label}} （{{item.children.length}}）</view>
					</view>
					<view class="box_item_right">
						<uni-icons type="eye"></uni-icons>
					</view>
				</view>
			</view>
			<view class="inner_list" v-if="active == index">
				<!-- <view class="inner_item" v-for="(item_2,index_2) in item.children">
					<view v-if="item_2.children">
						<view class="box_item_icon" v-if="active_2 == index_2" @click="change_active_2(index_2)">
							<image src="./icon/close.png" mode=""></image>
						</view>
						<view class="box_item_icon" v-if="active_2 != index_2" @click="change_active_2(index_2)">
							<image src="./icon/open.png" mode=""></image>
						</view>
					</view>
					
					<view v-if="!item_2.children">
						<view class="inner_icon">{{item_2.label.charAt(0)}}</view>
						<view class="inner_text">{{item_2.label}} {{item_2.id}}</view>
					</view>
					
				</view>
				
				
				<view class="inner_box">
					<origanizationTree :list="list.children"></origanizationTree>
				</view> -->
				<view>
					<view class="inner_item" v-for="(item_2,index_2) in item.children" v-if="item_2.children">
						<view class="box_item_icon" v-if="active_2 == index_2" @click="change_active_2(index_2)">
							<image src="./icon/close.png" mode=""></image>
						</view>
						<view class="box_item_icon" v-if="active_2 != index_2" @click="change_active_2(index_2)">
							<image src="./icon/open.png" mode=""></image>
						</view>
						<view class="inner_box">
							<origanizationTree :list="list.children"></origanizationTree>
						</view>
					</view>
					
				</view>
				<view>
					<view class="inner_item" v-for="(item_2,index_2) in item.children"  v-if="!item_2.children">
						<view class="inner_icon">{{item_2.label.charAt(0)}}</view>
						<view class="inner_text">{{item_2.label}} {{item_2.id}}</view>
						<view class="inner_box">
							<origanizationTree :list="list.children"></origanizationTree>
						</view>
					</view>
					
				</view>
				
				
				
				
				<!-- <view class="inner_item" v-for="(item_2,index_2) in item.children">
					<view class="inner_icon">{{item_2.label.charAt(0)}}</view>
					<view class="inner_text">{{item_2.label}} {{item_2.id}}</view>
				</view>
				<view class="inner_box">
					<origanizationTree :list="list.children"></origanizationTree>
				</view> -->

			</view>
		</view>
	</view>
</template>

<script>
	import origanizationTree from "@/components/origanizationTree/origanizationTree.vue"

	export default {
		name: "origanizationTree",
		components: {
			origanizationTree
		},
		props: [
			"list"
		],
		data() {
			return {
				active: 99999999,
				active_2: 99999999
			};
		},
		methods: {
			change_active(index) {
				if (this.active == index) {
					this.active = 99999999
				} else {
					this.active = index
				}
			},
			change_active_2(index_2) {
				if (this.active_2 == index_2) {
					this.active_2 = 99999999
				} else {
					this.active_2 = index_2
				}
			}
		}
	}
</script>

<style lang="scss">
	.section {
		box-sizing: border-box;
		padding: 0 20rpx;

		.box {

			.box_item {
				height: 95rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				margin-left: 20rpx;
				border-bottom: 1rpx solid #F3F8F7;

				.box_item_left {
					display: flex;
					align-items: center;

					.box_item_icon {
						line-height: 95rpx;
						width: 90rpx;
						text-align: center;

						image {
							width: 24rpx;
							height: 24rpx;
						}
					}

					.box_item_text {
						font-size: 28rpx;
					}
				}

				.box_item_right {
					line-height: 95rpx;
					width: 90rpx;
					text-align: center;
				}
			}
		}

		.inner_list {
			.inner_item {
				height: 95rpx;

				display: flex;
				align-items: center;

				margin-left: 108rpx;
				border-bottom: 1rpx solid #F3F8F7;

				.box_item_icon {
					line-height: 95rpx;
					width: 90rpx;
					text-align: center;

					image {
						width: 24rpx;
						height: 24rpx;
					}
				}

				.inner_icon {
					width: 35rpx;
					text-align: center;
					line-height: 35rpx;
					border-radius: 50%;
					border: 1rpx solid #00A1E9;

					font-size: 24rpx;
					color: #00A1E9;
				}

				.inner_text {
					margin-left: 18rpx;
					font-size: 28rpx;

				}
			}

			.inner_box {
				padding-left: 20rpx;

				.section {
					box-sizing: border-box;
					padding-right: 0rpx;

					.box {

						.box_item {
							height: 95rpx;
							display: flex;
							align-items: center;
							justify-content: space-between;

							margin-left: 20rpx;
							border-bottom: 1rpx solid #F3F8F7;

							.box_item_left {
								display: flex;
								align-items: center;

								.box_item_icon {
									line-height: 95rpx;
									width: 90rpx;
									text-align: center;

									image {
										width: 24rpx;
										height: 24rpx;
									}
								}

								.box_item_text {
									font-size: 28rpx;
								}
							}

							.box_item_right {
								line-height: 95rpx;
								width: 90rpx;
								text-align: center;
							}
						}
					}

					.inner_list {
						.inner_item {
							height: 95rpx;

							display: flex;
							align-items: center;

							margin-left: 108rpx;
							border-bottom: 1rpx solid #F3F8F7;

							.box_item_icon {
								line-height: 95rpx;
								width: 90rpx;
								text-align: center;

								image {
									width: 24rpx;
									height: 24rpx;
								}
							}

							.inner_icon {
								width: 35rpx;
								text-align: center;
								line-height: 35rpx;
								border-radius: 50%;
								border: 1rpx solid #00A1E9;

								font-size: 24rpx;
								color: #00A1E9;
							}

							.inner_text {
								margin-left: 18rpx;
								font-size: 28rpx;

							}
						}

						.inner_box {}
					}
				}
			}
		}
	}
</style>