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

<template>
	<!-- 自定义表格 -->
    <el-scrollbar height="100%">
        <div class="customTable">
            <div class="tableBody" v-for="(item,index) in list" :key="index">
                    <div class="trTitle">
                        <div class="name">
							{{item.category_name}}
                        </div>
                    </div>
				<div class="childView">
					<div class="tr" v-for="(em,ind) in item.set_info" :key="ind">
						<div class="td module">
							<div class="textName">敏感数据权限</div>
							<div class="viewBox">
                                <el-checkbox v-model="em.is_view" :size="size">{{em.resource_name}}</el-checkbox>
							</div>
						</div>
						<div class="td module">
							<div class="textName">操作权限</div>
							<div class="viewBox">
								<el-checkbox v-model="em.action.view" :size="size">查看</el-checkbox>
								<el-checkbox v-model="em.action.edit" :size="size">编辑</el-checkbox>
							</div>
						</div>
					</div>
				</div>
            </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){
                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 {
	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 {
	display: flex;
}
.childView{
	display: flex;
	flex-direction: column;
	flex: 1;
}
.tableBody .trTitle {
	background: #f5f7fa;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 10px;
	border-bottom: 1px solid var(--el-border-color-light);
	border-right: 1px solid var(--el-border-color-light);
	flex-basis: 140px;
	.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 {
	border-bottom: 1px solid var(--el-border-color-light);

	.td {
		padding: 0 10px;
		border-bottom: 1px solid var(--el-border-color-light);
		display: flex;
		align-items: stretch;
		.textName{
			flex-basis: 110px;
			display: flex;
			align-items: center;
			border-right: 1px solid var(--el-border-color-light);
		}
		.viewBox{
			padding: 0 0 0 10px;
		}
		.nextTd {
			border-bottom: 1px solid var(--el-border-color-light);
			flex: 1;
		}
		.nextTd:last-child {
			border-bottom: 0;
		}
	}

	.td:first-child {
		border-left: 0;
	}
	.td:last-child{
		border-bottom: 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;
				}
			}
		}
	}
}
</style>