smart-app/pages/personBase/personBase.vue

<template>
	<view>
		<scroll-view scroll-y class="">
			<!-- 头部 -->
		    <cu-custom bgColor="bg-blue" :isBack="true" :backNum="2">
				<block slot="backText">资料管理</block>
				<block slot="content"></block>
				<block slot="right">
					<view class=" flex justify-center" >
					 	<button @click="search()"  class="cu-btn round line-blue text-white" style="width: 160rpx;height: 66rpx;padding: 0;">
							<image src="/static/index/search-white.png" style="width: 32rpx;height: 32rpx;margin-right: 16rpx;"></image>搜索
						</button>
					</view>
				</block>
			</cu-custom>	
			<!-- 上级选择的内容 -->
			<view class="goback_b">
				<image @click="backTo()" src="../../static/task/show.png" style="width: 80rpx;height: 80rpx;margin-right: 20rpx;"></image>
				<view style="font-size: 34rpx;color: #101010;font-weight: bold;">{{nodeName}}</view>
			</view>
			
			
			<!-- 内容 -->
			<view v-for="(item,index) in treeData" class="treeData_b" :key="item.id">
				<view class="treeData_1" @click="treeTap(index+1,item)">
					<view style="font-weight: bold;font-size: 34rpx;" :class="item.selected?'indexColor':''">{{item.name}}</view>
					<view v-if="item.children.length>0">
						<image src="/static/information/shang.png" style="width: 40rpx;height: 40rpx;vertical-align: middle;" v-if="show == index + 1"></image>
						<image src="/static/information/xia.png" style="width: 40rpx;height: 40rpx;vertical-align: middle;" v-if="show != index + 1 || show == 0"></image>
					</view>
				</view>
				<view v-for="(second,seconds) in item.children" :key="second.id" v-if="show == index + 1">
					<view class="treeData_1s treeData_2" @click="secondTap(seconds + 1,second)">
						<view :class="second.selected?'indexColor':''">{{second.name}}</view>
						<view v-if="second.children.length>0">
							<image src="/static/information/shang.png" style="width: 40rpx;height: 40rpx;vertical-align: middle;" v-if="showsecond == seconds + 1"></image>
							<image src="/static/information/xia.png" style="width: 40rpx;height: 40rpx;vertical-align: middle;" v-if="showsecond != seconds + 1 || showsecond == 0"></image>
						</view>
					</view>
					<view v-if="showsecond == seconds + 1" :style="{'padding-bottom': second.children.length>0 ? '22rpx':''}">
						<view v-for="(three,threes) in second.children" :key="three.id" class="treeData_three">
							<view class="treeData_1s treeData_3" @click="threeTap(threes + 1,three)">
								<view :class="three.selected?'indexColor':''">{{three.name}}</view>
								<view v-if="three.children.length>0">
									<image src="/static/information/shang.png" style="width: 40rpx;height: 40rpx;vertical-align: middle;" v-if="showthree == threes + 1"></image>
									<image src="/static/information/xia.png" style="width: 40rpx;height: 40rpx;vertical-align: middle;" v-if="showthree != threes + 1 || showthree == 0"></image>
								</view>
							</view>
							<view v-if="showthree == threes + 1" v-for="(four,fours) in three.children" :key="four.id">
								<view class="treeData_1s treeData_3" @click="fourTap(fours + 1,four)">
									<view style="padding-left: 22rpx;" :class="four.selected?'indexColor':''"><text style="margin-right: 10rpx;">◈</text>{{four.name}}</view>
									<view v-if="four.children.length>0">
										<image src="/static/information/shang.png" style="width: 40rpx;height: 40rpx;vertical-align: middle;" v-if="showfour == fours + 1"></image>
										<image src="/static/information/xia.png" style="width: 40rpx;height: 40rpx;vertical-align: middle;" v-if="showfour != fours + 1 || showfour == 0"></image>
									</view>
								</view>
								<view v-if="showfour == fours + 1" v-for="(five,fives) in four.children" :key="five.id">
									<view class="treeData_1s treeData_3" @click="fiveTap(fives + 1,five)">
										<view style="padding-left: 44rpx;" :class="five.selected?'indexColor':''"><text style="margin-right: 10rpx;">➣</text>{{five.name}}</view>
										<view v-if="five.children.length>0">
											<image src="/static/information/shang.png" style="width: 40rpx;height: 40rpx;vertical-align: middle;" v-if="showfive == fives + 1"></image>
											<image src="/static/information/xia.png" style="width: 40rpx;height: 40rpx;vertical-align: middle;" v-if="showfive != fives + 1 || showfive == 0"></image>
										</view>
									</view>
									<view v-if="showfive == fives + 1" v-for="(six,sixs) in five.children" :key="six.id">
										<view class="treeData_1s treeData_3" @click="sixTap(sixs + 1,six)">
											<view style="padding-left: 66rpx;" :class="six.selected?'indexColor':''"><text style="margin-right: 10rpx;">•</text>{{six.name}}</view>
											<view v-if="six.children.length>0">
												<image src="/static/information/shang.png" style="width: 40rpx;height: 40rpx;vertical-align: middle;" v-if="showsix == sixs + 1"></image>
												<image src="/static/information/xia.png" style="width: 40rpx;height: 40rpx;vertical-align: middle;" v-if="showsix != sixs + 1 || showsix == 0"></image>
											</view>
										</view>
										<view v-if="showsix == sixs + 1" v-for="(seven,sevens) in six.children" :key="seven.id">
											<view class="treeData_1s treeData_3" @click="sevenTap(sevens + 1,seven)">
												<view style="padding-left: 88rpx;" :class="seven.selected?'indexColor':''">{{seven.name}}</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			
		<!-- 	<ly-tree  :tree-data="treeData"
			     ref="tree"
			     node-key="id" 
				:ready="true"
				:accordion="true"
				:filter-node-method="filterNode"
				:highlightCurrent="true"
				:checkOnlyLeaf="true"
			    @node-click="handleNodeClick">
			</ly-tree> -->
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				nodeName:"",
				id:"",
				treeData:[],
				show: 0, //一级状态
				showsecond: 0, //二级状态
				showthree: 0, //三级状态
				showfour: 0, //四级状态
				showfive: 0, //五级状态
				showsix: 0, //六级状态
				showseven: 0, //七级状态
				
				engineeringType:'',//6为隐蔽工程
			}
		},
		onLoad(e){
			this.nodeName =e.name;
			this.id=e.id;
			this.engineeringType=e.type;
			this.findTree(e.id);
		},
		methods: {
			findTree(id){
				var that =this;
				
				let obj = {id:id}
				if(this.engineeringType){
					obj.type = this.engineeringType
				}
				
				  that.http.request('/app/divideClient/findDivideClientById',obj).then((result)=>{
					  if(result){
					  	that.treeData=result;
						that.text(that.treeData);
					  }else{
					  	that.$prompt.Error("暂无数据")
					  }
				  })
				
			},
			search(){
				uni.setStorageSync("pageType",0);//区分搜索页面跳转
				uni.navigateTo({
					url:"/pages/search/search"
				})
			},
			handleNodeClick(obj) {
			/* 	console.log("子节点信息:",obj);
				console.log("子节点路径:",this.$refs.tree.getNodePath(obj)) */
				if(obj.type==4){//判断是否为工序文件
					uni.navigateTo({
						url:"/pages/personBaseIndex/personBaseIndex?id="+obj.id
					})
				}else if(obj.type == 26){
					//隐蔽工程
					uni.navigateTo({
						url:"/pages/personBaseIndex/personBaseIndex?id="+obj.id
					})
				}
				
				/* else{
					this.$prompt.none("不是工序文件")
				} */
			},
			filterNode(value, data) {
				if (!value) return true;
				return data.label.indexOf(value) !== -1;
			},
			backTo(){
				uni.navigateBack({
				    delta: 1
				});
			},
			treeTap(e,r) {
				this.text(this.treeData)
				r.selected = true;
				if (this.show == e) {
					this.show = 0
				} else {
					this.show = e
				}
				this.handleNodeClick(r);
			},
			secondTap(e,r) {
				this.text(this.treeData)
				r.selected = true;
				if (this.showsecond == e) {
					this.showsecond = 0
				} else {
					this.showsecond = e
				}
				this.handleNodeClick(r);
			},
			threeTap(e,r) {
				this.text(this.treeData)
				r.selected = true;
				if (this.showthree == e) {
					this.showthree = 0
				} else {
					this.showthree = e
				}
				this.handleNodeClick(r);
			},
			fourTap(e,r) {
				this.text(this.treeData);
				this.$set(r,"selected",true);
				if (this.showfour == e) {
					this.showfour = 0
				} else {
					this.showfour = e
				}
				this.handleNodeClick(r);
			},
			fiveTap(e,r) {
				this.text(this.treeData);
				this.$set(r,"selected",true);
				if (this.showfive == e) {
					this.showfive = 0
				} else {
					this.showfive = e
				}
				this.handleNodeClick(r);
			},
			sixTap(e,r) {
				this.text(this.treeData)
				r.selected = true;
				if (this.showsix == e) {
					this.showsix = 0
				} else {
					this.showsix = e
				}
				this.handleNodeClick(r);
			},
			sevenTap(e,r) {
				this.text(this.treeData)
				r.selected = true;
				if (this.showseven == e) {
					this.showseven = 0
				} else {
					this.showseven = e
				}
				this.handleNodeClick(r);
			},
			text(data) {
				var that = this;
				data.forEach((item) => {
					item.selected = false;
					if (item.children.length > 0) {
						that.text(item.children);
					}
				})
				that.treeData  = data;
			}
		}
	}
</script>

<style>
	.goback_b{display: flex;align-items: center;height: 120rpx;background-color: #fff;padding: 0 22rpx;border-radius: 0 0 20rpx 20rpx;margin-bottom: 22rpx;box-shadow: 0px 1px 4px #D0D0D0;}
	.treeData_b {
		margin:0 22rpx 12rpx ;
		background-color: #fff;
		border-radius: 10rpx;
		padding: 0 22rpx;
	}
	
	.treeData_1 {
		font-size: 30rpx;
		color: #101010;
		height: 88rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.treeData_1s {
		font-size: 30rpx;
		color: #101010;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 22upx 0;
		min-height: 88rpx;
	}
	
	.treeData_2 {
		border-top: 1upx dashed #E3E1E1;
	}
	
	.treeData_3 {
		border-top: 1upx dashed #E3E1E1;
	}
	
	.treeData_three {
		background-color: #F7F7F7;
		padding: 0 22rpx;
		border-radius: 10rpx;
		margin-bottom: 22;
	}
	
	.treeData_three:first-child {
		border-radius: 10rpx 10rpx 0 0;
	}
	
	.treeData_three:last-child {
		border-radius: 0 0 10rpx 10rpx;
	}
	
	.indexColor {
		color: #0A8CD5;
		font-weight: bold;
	}
</style>