376 lines
9.5 KiB
Vue
376 lines
9.5 KiB
Vue
<template>
|
|
<el-container class="mainBox">
|
|
<el-header>
|
|
<div class="left-panel">
|
|
<el-button type="primary" :size="size" @click="savePermission">保存权限</el-button>
|
|
</div>
|
|
<div class="right-panel"><div class="companyName">{{name}}</div></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" 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)" :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" :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)" v-model="li.checked" :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)" v-model="li.checked" :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: "addPermission",
|
|
data(){
|
|
return{
|
|
size:'small',
|
|
id: this.$route.query.id,
|
|
name:this.$route.query.name,
|
|
list:[],
|
|
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 = {
|
|
company_id:this.id
|
|
}
|
|
this.loading = true;
|
|
const res = await this.$API.system.company.permission.post(params);
|
|
this.loading = false;
|
|
res.data.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;
|
|
},
|
|
allCheckChange(e){
|
|
this.list.forEach(item=>{
|
|
item.checked = e;
|
|
if(item.children){
|
|
item.children.forEach(em=>{
|
|
em.checked = e;
|
|
if(em.meta.data_permission && em.meta.data_permission.length>0){
|
|
em.meta.data_permission.forEach((li)=>{
|
|
li.checked = e;
|
|
})
|
|
}
|
|
if(em.checked){
|
|
em.isCheck = false;
|
|
}
|
|
})
|
|
if(item.checked){
|
|
item.isCheck = false;
|
|
}
|
|
}
|
|
})
|
|
},
|
|
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;
|
|
}
|
|
})
|
|
},
|
|
async savePermission() {
|
|
let params = this.setList();
|
|
const res = await this.$API.system.company.moduleAdd.post(params);
|
|
if(res.code == 200){
|
|
this.$message.success("授权成功");
|
|
await this.getPermission();
|
|
}
|
|
},
|
|
setList(){
|
|
let obj = {
|
|
company_id:this.id,
|
|
menu_permission:[],
|
|
data_permission:[]
|
|
}
|
|
this.list.forEach(item=>{
|
|
if(item.checked || item.isCheck){
|
|
obj.menu_permission.push(item.meta.code);
|
|
}
|
|
if(item.children){
|
|
item.children.forEach(em=>{
|
|
if(em.checked || em.isCheck){
|
|
obj.menu_permission.push(em.meta.code);
|
|
}
|
|
if(em.meta.data_permission && em.meta.data_permission.length>0){
|
|
let list = em.meta.data_permission.filter(e=>e.checked).map(u=>{
|
|
let obj = {
|
|
actions:u.actions,
|
|
title:u.title
|
|
}
|
|
return obj
|
|
});
|
|
if(list.length>0){
|
|
obj.data_permission.push({[em.meta.code]:list})
|
|
}
|
|
}
|
|
if(em.children && em.children.length>0){
|
|
em.children.forEach(daList=>{
|
|
if(em.checked || em.isCheck && daList.meta.hidden){
|
|
obj.menu_permission.push(daList.meta.code);
|
|
}
|
|
})
|
|
}
|
|
})
|
|
}
|
|
})
|
|
return obj
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.companyName{
|
|
color: var(--el-color-primary);
|
|
font-size: 14px;
|
|
}
|
|
.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;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.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;
|
|
}
|
|
|
|
</style>
|