267 lines
6.8 KiB
Vue
267 lines
6.8 KiB
Vue
<template>
|
||
<el-container class="mainBox">
|
||
<el-header>
|
||
<div class="left-panel">
|
||
<span class="roleName">{{name}}</span>角色信息：
|
||
<template v-for="(item,index) in user_roles" :key="index">
|
||
<span class="roleTag">
|
||
<el-tag class="ml-2" :type="index==1?'success':index==2?'info':index==3?'danger':index==4?'warning':''">{{item}}</el-tag>
|
||
</span>
|
||
</template>
|
||
</div>
|
||
<div class="right-panel">
|
||
<el-alert title="个人用户权限不可编辑，需要编辑请到到角色编辑对应的权限" type="warning" :closable="false" />
|
||
</div>
|
||
</el-header>
|
||
<el-main class="nopadding" v-loading="loading" element-loading-text="加载中...">
|
||
<el-scrollbar>
|
||
<div class="treeTable">
|
||
<div :class="list.length===0?'thenTitle thenTitleBottom':'thenTitle'">
|
||
<div class="tr">
|
||
<div class="th module">功能模块</div>
|
||
<div class="th check"><el-checkbox :indeterminate="isCheckFun" @change="allCheckChange" :disabled="showPermission" v-model="checkedFun" :size="size" /></div>
|
||
<div class="th thFlex">
|
||
<div class="menu name">菜单</div>
|
||
<div class="th authority">数据操作权限</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="tableBody">
|
||
<div class="tr" v-for="(item,index) in list" :key="index">
|
||
<div class="td module">{{item.meta.title}}</div>
|
||
<div class="td check"><el-checkbox v-model="item.checked" :indeterminate="item.isCheck" @change="menuCheckChange(item)" :disabled="showPermission" :size="size" /></div>
|
||
<div class="td tdChild">
|
||
<div class="nextTd" v-for="(em,ind) in item.children" :key="ind">
|
||
<div class="tdName menu">
|
||
<el-checkbox @change="moduleCheckChange(item,em)" :indeterminate="em.isCheck" v-model="em.checked" :disabled="showPermission" :size="size">{{em.meta.title}}</el-checkbox>
|
||
</div>
|
||
<div class="tdName authority">
|
||
<div class="childTr">
|
||
<div class="preBox" v-for="(li,lidex) in em.meta.data_permission" :key="lidex">
|
||
<span v-if="li.title.length < 9">
|
||
<el-checkbox @change="checkChange(item,em,li)" v-model="li.checked" :disabled="showPermission" :size="size"><span class="name">{{li.title}}</span></el-checkbox>
|
||
</span>
|
||
<el-tooltip :content="li.title" placement="top" v-else>
|
||
<el-checkbox @change="checkChange(item,em,li)" v-model="li.checked" :disabled="showPermission" :size="size"><span class="name">{{li.title}}</span></el-checkbox>
|
||
</el-tooltip>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-scrollbar>
|
||
</el-main>
|
||
</el-container>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: "",
|
||
data(){
|
||
return{
|
||
size:'default',
|
||
id: this.$route.query.id,
|
||
name:this.$route.query.name,
|
||
user_roles:[],
|
||
list:[],
|
||
showPermission:false,
|
||
loading:false,
|
||
}
|
||
},
|
||
computed:{
|
||
isCheckFun(){
|
||
let isTrue = false;
|
||
let num = this.list.length;
|
||
let checkNum = this.list.filter((item)=>item.checked).length;
|
||
let isCheckNum = this.list.filter((item)=>item.isCheck).length;
|
||
|
||
isTrue = checkNum>0 && checkNum == num?false:checkNum>0 || isCheckNum>0 ? true:false;
|
||
return isTrue
|
||
},
|
||
checkedFun(){
|
||
let isTrue = false;
|
||
let num = this.list.length;
|
||
let checkNum = this.list.filter((item)=>item.checked).length;
|
||
|
||
isTrue = checkNum>0 && checkNum == num?true:false;
|
||
return isTrue
|
||
}
|
||
},
|
||
mounted() {
|
||
this.getPermission();
|
||
},
|
||
methods:{
|
||
async getPermission() {
|
||
let params = {
|
||
user_id:this.id
|
||
}
|
||
this.loading = true;
|
||
const res = await this.$API.system.user.userPermission.post(params);
|
||
this.loading = false;
|
||
this.user_roles = res.data && res.data.role?res.data.role:[];
|
||
if(res.data && res.data.menu && res.data.menu.length>0){
|
||
res.data.menu.forEach(item=>{
|
||
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 = res.data.menu;
|
||
}
|
||
},
|
||
allCheckChange(){
|
||
return
|
||
},
|
||
menuCheckChange(em){
|
||
em.checked = !em.checked;
|
||
return
|
||
},
|
||
moduleCheckChange(_a,em){
|
||
em.checked = !em.checked;
|
||
return
|
||
},
|
||
checkChange(_a,_b,em){
|
||
em.checked = !em.checked;
|
||
return
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.nopadding{
|
||
padding: 10px 0;
|
||
}
|
||
.module{
|
||
flex-basis: 120px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.check{
|
||
flex-basis: 60px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.menu{
|
||
flex-basis: 180px;
|
||
}
|
||
.authority{
|
||
flex:1;
|
||
text-align: center;
|
||
}
|
||
.treeTable{
|
||
border: 1px solid var(--el-border-color-light);
|
||
}
|
||
.thenTitle .tr {
|
||
display: flex;
|
||
align-items: stretch;
|
||
border-bottom:1px solid var(--el-border-color-light);
|
||
height: 40px;
|
||
background: var(--el-bg-color-overlay);
|
||
.th{
|
||
padding: 0 10px;
|
||
border-left: 1px solid var(--el-border-color-light);
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.th:first-child{
|
||
border-left: none;
|
||
}
|
||
.thFlex{
|
||
display: flex;
|
||
flex: 1;
|
||
padding: 0;
|
||
.name{
|
||
flex-basis: 180px;
|
||
padding: 10px;
|
||
}
|
||
}
|
||
}
|
||
.thenTitleBottom .tr{
|
||
border-bottom: 0;
|
||
}
|
||
.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{
|
||
display: flex;
|
||
align-items: center;
|
||
border-bottom:1px solid var(--el-border-color-light);
|
||
}
|
||
.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:last-child{
|
||
border-left: 1px solid var(--el-border-color-light);
|
||
}
|
||
.tdName{
|
||
padding: 0 10px;
|
||
min-height: 33px;
|
||
}
|
||
.childTr{
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
flex: 1;
|
||
.preBox{
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
margin-right: 20px;
|
||
width: 110px;
|
||
.name{
|
||
width: 100px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
display: block;
|
||
text-align: left;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.tableBody .tr:last-child{
|
||
border-bottom: 0;
|
||
}
|
||
.roleName{
|
||
color: var(--el-color-primary);
|
||
margin-right: 10px;
|
||
}
|
||
.roleTag{
|
||
margin-right: 10px;
|
||
}
|
||
</style>
|