dev/dcp-app-gate/pages/information/InformationData/dom/connectionTree.vue

<template>
	<view style="width: 100%;height: 100%">
		<scroll-view scroll-y="true" class="left">
			<view v-for="(fItem, fIndex) in dataList" :key="fItem+fIndex"
						class="row"
						:class="[fIndex===showCategoryIndex ?'on':'']"
						@tap="showCategory(fIndex)">
				<view class="text"
							:style="$i18n.locale=='zh'?'':'text-algin:center;'">
					{{ $i18n.locale == 'zh' ? fItem[labelZh] : fItem[labelEn] }}
				</view>
			</view>
		</scroll-view>
		<block v-for="(fItem, fIndex) in dataList" :key="fItem+fIndex+'1'"
					 @tap="showCategory(fIndex)">
			<scroll-view scroll-y class="right" v-if="fIndex === showCategoryIndex">
				<view v-for="(item,index) in fItem[childrenName]" :key="'c'+index"
							:class="(item[childrenName]&&item[childrenName].length>0)?'':'cate'">
					<view v-if="item[childrenName] && item[childrenName].length>0">
						<view :class="{'getCategory':item[childrenName].length>0}">
							{{ $i18n.locale=='zh'?item[labelZh]:item[labelEn] }}
						</view>
						<view class="threemenu">
							<view v-for="(i,j) in item[childrenName]" :key="j"
										class="cateText"
										@click="getCategory(i,j)"
										:class="{'cateTextActive':i.ifClick}">
								{{$i18n.locale=='zh'?i[labelZh]:i[labelEn]}}
							</view>
						</view>
					</view>
					<view v-else>
						<view class="cateText"
									@click="getCategory(item,index)"
									:class="{'cateTextActive':item.ifClick}">
							{{ $i18n.locale=='zh'?item[labelZh]:item[labelEn] }}
						</view>
					</view>
				</view>
			</scroll-view>
		</block>
	</view>
</template>

<script>
export default {
	name: "connectionTree",
	props: {
		dataList: {
			type: Array,
			default: []
		},
		childrenName: {
			type: String,
			default: 'children'
		},
		multiple: {
			type: Boolean,
			default: false
		},
		labelZh: {
			type: String,
			default: 'label'
		},
		labelEn: {
			type: String,
			default: 'label'
		},
		dataListMap:{
			type: [Array, Object]
		}
	},
	data() {
		return {
			showCategoryIndex: 0, // 一级菜单高亮显示序号
		}
	},
	mounted(){
		console.log(this.dataList)
	},
	methods: {
		showCategory(index) {
			this.showCategoryIndex = index;
		},
		getCategory(item,index){
			if(item[this.childrenName]?.length>0){
				return;
			}else{
				let ifClick = !item.ifClick
				if(!this.multiple){
					this.$emit('dataListMap', {item,ifClick})
				}else{
					this.$emit('dataListMap', {item,ifClick})
				}
			}
			setTimeout(()=>{
				this.$emit('getCategory',{item:this.dataListMap,index})
			},100)
		}
	}
}
</script>

<style scoped lang="scss">
.left, .right {
	position: absolute;
	height: 100%;
	top: 0;
	bottom: 0upx;
}

.left {
	width: 24%;
	left: 0upx;
	background: #F2F2F2;

}

.right {
	width: 76%;
	left: 24%;
	background-color: #fff;
	margin-left: 0;
	padding: 0 20upx;
}

.row {
	width: 100%;
	height: 90upx;
	display: flex;
	align-items: center;

	.text {
		width: 100%;
		position: relative;
		font-size: 28upx;
		display: flex;
		justify-content: center;
		color: #3c3c3c;
		text-align: center;

		.block {
			position: absolute;
			width: 0upx;
			left: 0;
		}
	}

	&.on {
		height: 90upx;
		background-color: #fff;

		.text {
			font-size: 30upx;
			color: #1677FD;

			.block {
				width: 6upx;
				height: 100%;
				left: 10upx;
			}
		}
	}
}

.threemenu {
	display: flex;
	flex-wrap: wrap;

	//.cateText {
	//	margin: 0 20upx 20upx 0;
	//	background: #F2F2F2;
	//	padding: 20upx;
	//	border-radius: 8upx;
	//	width: 46%;
	//	overflow: hidden;
	//	text-overflow: ellipsis;
	//	white-space: nowrap;
	//	text-align: center;
	//
	//	&.active {
	//		border: 1px solid #1777FE;
	//		color: #1777FE;
	//		background: #fff;
	//	}
	//}
}

.getCategory {
	height: 90upx;
	line-height: 90upx;
	font-weight: 700;
	color: #0079ef
}

.cate {
	display: inline-block;
	width: 240upx;
	vertical-align: middle;
	margin-right: 20upx;
}
.cateText {
	padding: 10upx;
	margin: 10upx 20upx 10upx 0;
	display: inline-block;
	width: 240upx;
	vertical-align: middle;
	background: #f1f2f3;
	text-align: center;
}
.cateTextActive {
	padding: 10upx;
	margin: 10upx 20upx 10upx 0;
	display: inline-block;
	width: 240upx;
	vertical-align: middle;
	background-color: #0079ef;
	color: #fff;
	text-align: center;
}
</style>