xw_admin/src/views/setting/role/dataTree.vue

<template>
	<!-- 自定义表格 -->
	<el-scrollbar height="100%">
		<div class="customTable">
			<div class="tableBody" v-if="list.length>0">
				<template v-for="(item,inde) in list" :key="inde">
					<div class="trTitle">
						<div class="name">
							<el-checkbox :indeterminate="item.isCheck" v-model="item.checked" @change="menuCheckChange(item)" :size="size">{{item.meta.title}}</el-checkbox>
						</div>
						<div class="coseBtn" @click="item.show=!item.show">
							<div class="coseBtnIcon">
								<span v-if="item.show"><el-icon-arrowDown /></span>
								<span v-else><el-icon-arrowRight /></span>
							</div>
						</div>
					</div>
					<template v-if="item.show">
						<div class="tr" v-for="(em,ind) in item.children" :key="ind">
							<div class="td module">
								<el-checkbox :indeterminate="em.isCheck" v-model="em.checked" @change="moduleCheckChange(item,em)" :size="size">{{em.meta.title}}</el-checkbox>
							</div>
							<div class="td tdChild">
								<div class="nextTd">
									<div class="tdName authority">
										<div class="boxName" v-for="(li,ind) in em.meta.data_permission" :key="ind">
											<el-checkbox v-model="li.checked" :size="size" @change="checkChange(item,em)"><span class="name">{{li.title}}</span></el-checkbox>
										</div>
									</div>
								</div>
							</div>
						</div>
					</template>
				</template>
			</div>
		</div>
	</el-scrollbar>
</template>

<script>
export default {
	data() {
		return {
			size: "default",
			list:[]
		};
	},
	props:{
		data:{
			type:Array
		}
	},
	watch:{
		data(val){
			if(val && val.length>0){
				val.forEach(item=>{
					item.show = true;
					if(item.children){
						item.children.forEach(em=>{
							if(em.meta.data_permission && em.meta.data_permission.length>0){
								let check = em.meta.data_permission.filter((li)=>li.checked).length;
								let ed = em.meta.data_permission.length;
								em.isCheck = check>0 && check != ed?true:false;
								if(ed>0){
									em.checked = check>0 && check== ed?true:false;
								}
							}
						})
						let check = item.children.filter((em)=>em.checked).length;
						let isCheck = item.children.filter((em)=>em.isCheck).length;
						let ed = item.children.length;

						item.isCheck = (check>0 && check != ed) || (isCheck>0 && check != ed)?true:false;
						item.checked =  check>0 && check== ed?true:false;
					}
				})

				this.list = JSON.parse(JSON.stringify(val));
			}
		}
	},
	computed:{

	},
	methods:{
		menuCheckChange(e){
			this.list.forEach(item=>{
				if(e.id == item.id){
					if(item.children){
						item.children.forEach(em=>{
							em.checked = e.checked;
							if(em.meta.data_permission && em.meta.data_permission.length>0){
								em.meta.data_permission.forEach((li)=>{
									li.checked = e.checked;
								})
							}
							if(em.checked){
								em.isCheck = false;
							}
						})
					}
					if(item.checked){
						item.isCheck = false;
					}
				}
			})
		},
		moduleCheckChange(pre,e){
			this.list.forEach(item=>{
				if(pre.id == item.id){
					if(item.children){
						item.children.forEach(em=>{
							if(em.id == e.id){
								if(em.meta.data_permission && em.meta.data_permission.length>0){
									em.meta.data_permission.forEach((li)=>{
										li.checked = e.checked;
									})
								}
								if(e.checked){
									e.isCheck = false;
								}
							}
						})
						let check = item.children.filter((em)=>em.checked).length;
						let isCheck = item.children.filter((em)=>em.isCheck).length;
						let ed = item.children.length;
						item.checked = check>0 && check == ed?true:false;
						item.isCheck = (check>0 || isCheck>0) && ed!=check?true:false;
					}
				}
			})
		},
		checkChange(max,pre){
			this.list.forEach(item=>{
				if(item.id == max.id){
					if(item.children){
						item.children.forEach((em)=>{
							if(pre.id == em.id){
								let check = em.meta.data_permission.filter((em)=>em.checked).length;
								let ed = em.meta.data_permission.length;
								em.checked = check>0 && check == ed?true:false;
								em.isCheck = check>0 && check != ed?true:false;
							}
						})
					}
					let check = item.children.filter((em)=>em.checked).length;
					let isCheck = item.children.filter((em)=>em.isCheck).length;
					let ed = item.children.length;
					item.checked = check>0 && check == ed?true:false;
					item.isCheck = (check>0 || isCheck>0) && ed!=check?true:false;
				}
			})
		},
	}
};
</script>

<style lang="scss" scoped>
.module{
	flex-basis: 120px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.check{
	flex-basis: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.menu{
	flex:1;
}
.authority{
	flex-basis: 80px;
	text-align: center;
}
.customTable{
	border: 1px solid var(--el-border-color-light);
	border-bottom: 0;
}
.tableBodyNull{
	border-top:1px solid var(--el-border-color-light);
}
.tableBody .trTitle{
	background: #f5f7fa;
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 36px;
	padding: 0 10px;
	border-bottom: 1px solid var(--el-border-color-light);
	.name{
		flex: 1;
	}
	.coseBtn{
		flex-basis: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		.coseBtnIcon{
			width: 14px;
			color: var(--el-color-primary);
		}
	}
}
.tableBody .tr{
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	border-bottom:1px solid var(--el-border-color-light);
	.td{
		padding: 0 10px;
		border-left: 1px solid var(--el-border-color-light);
		.nextTd{
			border-bottom:1px solid var(--el-border-color-light);
			flex: 1;
		}
		.nextTd:last-child{
			border-bottom: 0;
		}
	}
	.td:first-child{
		border-left: 0;
	}
	.tdChild{
		flex: 1;
		padding: 0;
		border-left: 1px solid var(--el-border-color-light);
		.tdName:first-child{
			border-left: 0;
		}
		.tdName{
			border-left: 1px solid var(--el-border-color-light);
			padding: 0 10px;
			width: 100%;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-wrap: wrap;
			.boxName{
				display: flex;
				align-items: center;
				margin-right: 20px;
				width: 120px;
				.name{
					width: 100px;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					display: block;
					text-align: left;
				}
			}
		}
	}
}
.tableBody .tr:last-child{
	//border-bottom: 0;
}
</style>