uni-zhihuikuangshan/components/origanizationTree/origanizationTree - 修改2.vue

<template>
	<view>
		<view class="section" v-for="(item,index) in list" :key="index">
			<view class="box">
				<view class="item">
					<view class="left">
						<view class="icon" v-if="item.children && active == index" @click="change_active(index)">
							<image src="./icon/close.png" mode=""></image>
						</view>
						<view class="icon" v-if="item.children && active != index" @click="change_active(index)">
							<image src="./icon/open.png" mode=""></image>
						</view>
						<view class="text">{{item.label}} （{{item.children.length}}）</view>
					</view>
					<view class="right">
						<uni-icons type="eye"></uni-icons>
					</view>
				</view>
				<view class="list" v-for="(item_2,index_2) in item.children"  v-if="!item_2.children && active == index">
					<!-- 人 -->
					<view class="item">
						<view class="icon">{{item_2.label.charAt(0)}}</view>
						<view class="text">{{item_2.label}} {{item_2.id}}</view>
					</view>
				</view>
				<view class="list" v-for="(item_2,index_2) in item.children"  v-if="item_2.children && active == index">
					<!-- 部门 -->
					<view class="item">
						<view class="icon" v-if="item.children && active == index" @click="change_active(index)">
							<image src="./icon/close.png" mode=""></image>
						</view>
						<view class="icon" v-if="item.children && active != index" @click="change_active(index)">
							<image src="./icon/open.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
			
			<view class="inner">
				<origanizationTree :list="list.children"></origanizationTree>
			</view>
		</view>
	</view>
</template>

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

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

<style lang="scss">
	.section{
		box-sizing: border-box;
		padding: 0 20rpx;
		
		.box{
			
			.item{
				height: 95rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				
				margin-left: 20rpx;
				border-bottom: 1rpx solid #F3F8F7;
				
				.left{
					display: flex;
					align-items: center;
					.icon{
						line-height: 95rpx;
						width: 90rpx;
						text-align: center;
						image{
							width: 24rpx;
							height: 24rpx;
						}
					}
					.text{
						font-size: 28rpx;
					}
				}
				.right{
					line-height: 95rpx;
					width: 90rpx;
					text-align: center;
				}
			}
			
			.list{
				.item{
					height: 95rpx;
					
					display: flex;
					justify-content: left;
					align-items: center;
					
					margin-left: 108rpx;
					border-bottom: 1rpx solid #F3F8F7;
					.icon{
						width: 35rpx;
						text-align: center;
						line-height: 35rpx;
						border-radius: 50%;
						border: 1rpx solid #00A1E9;
						
						font-size: 24rpx;
						color: #00A1E9;
					}
					.text{
						margin-left: 18rpx;
						font-size: 28rpx;
						
					}
				}
			}
		
		}
		
		.inner{
			
		}
		
	}
</style>