Skip to content

S
SuperMan
Commit d8207d33 authored by 沈良进's avatar 沈良进
Browse files
Options

save

parent 89e4af2a
Show whitespace changes
Inline Side-by-side
Showing with 458 additions and 254 deletions
src/components/platformModule/permissionList.vue
View file @ d8207d33
<style> <style>
.per_title{font-size: 14px; color: #333; border-left: 3px solid #E95252; height: 14px; line-height: 14px; margin: 40px 0; padding-left: 15px;} .per_title {
.mentTable{background: #BCBCBC; width: 100%; font-size: 14px; } font-size: 14px;
.mentTable td{background: #fff; height: 30px;} color: #333;
.per_first_menu{overflow: hidden;} border-left: 3px solid #e95252;
.per_first_menu li{float: left; margin-right: 30px; position: relative; cursor: pointer; background: #fff; color: #999; width: 80px; font-size: 12px; height: 60px; padding: 10px 0; border-radius: 4px; text-align: center;} height: 14px;
.per_first_menu li.FirsrMenuCked{background: #E95252; color: #f1f1f1;} line-height: 14px;
.per_first_menu li i{font-size: 30px; line-height: 35px;} margin: 40px 0;
.per_first_menu-set{overflow: hidden;} padding-left: 15px;
.per_first_menu-set li{float: left; margin-right: 30px; position: relative; cursor: pointer; background: #fff; color: #999; width: 140px; font-size: 12px; height: 80px; padding:0 10px; border-radius: 4px;} }
.per_first_menu-set li.FirsrMenuCked{background: #E95252; color: #f1f1f1;} .mentTable {
.per_first_menu-set li i{font-size: 30px;} background: #bcbcbc;
.per_detail_menu{width: 100%; height: 300px; padding: 20px; margin: 40px 0; background: #fff; border-radius: 8px;} width: 100%;
.per_secondMenu{height: auto; overflow: hidden; margin-bottom: 20px;} font-size: 14px;
.per_secondMenu li{float: left; height: 24px; font-size:12px; cursor: pointer; padding: 0 30px; position: relative;} }
.per_secondMenu li>div{width: 0; height: 3px; background: #F26262; margin: 5px auto 0;} .mentTable td {
.per_secondMenu li:hover>div{width: 17px; transition: width .3s;} background: #fff;
.per_secondMenu li.per_secondLevelCked>div{width: 17px;} height: 30px;
.per_secondMenu li .liSplit{ height: 12px; width: 1px; background: #DCDFE6; position: absolute; right: 0; top: 2px;} }
.per_thirdMenu li{float: left; margin: 0 50px 50px 0; width: 80px; cursor: pointer; height: 85px; padding:15px 10px 0; position: relative; font-size: 12px; color: #666; text-align: center; border-radius: 4px; background: #EBEBEB;} .per_first_menu {
.per_thirdMenu li i{position: absolute; bottom: 10px; right: 10px; font-size: 20px;} overflow: hidden;
.per_SaveBtn{float: right; margin-top: 50px; margin-left: 15px;} }
.per_thirdMenu li.thirdLevelMenuCked{background: #E95252; color: #f1f1f1;} .per_first_menu li {
.per_firstLevelCkbox{position: absolute!important;right:3px; top: 0;} float: left;
.per_thirdLevelAllCked{float: right;} margin-right: 30px;
position: relative;
cursor: pointer;
background: #fff;
color: #999;
width: 80px;
font-size: 12px;
height: 60px;
padding: 10px 0;
border-radius: 4px;
text-align: center;
}
.per_first_menu li.FirsrMenuCked {
background: #e95252;
color: #f1f1f1;
}
.per_first_menu li i {
font-size: 30px;
line-height: 35px;
}
.per_first_menu-set {
overflow: hidden;
}
.per_first_menu-set li {
float: left;
margin-right: 30px;
position: relative;
cursor: pointer;
background: #fff;
color: #999;
width: 140px;
font-size: 12px;
height: 80px;
padding: 0 10px;
border-radius: 4px;
border-bottom: 1px solid #eee
}
.per_first_menu-set li.FirsrMenuCked {
background: #e95252;
color: #f1f1f1;
}
.per_first_menu-set li i {
font-size: 30px;
}
.per_detail_menu {
width: 100%;
height: 300px;
padding: 20px;
margin: 40px 0;
background: #fff;
border-radius: 8px;
}
.per_secondMenu {
height: auto;
overflow: hidden;
margin-bottom: 20px;
}
.per_secondMenu li {
float: left;
height: 24px;
font-size: 12px;
cursor: pointer;
padding: 0 30px;
position: relative;
}
.per_secondMenu li > div {
width: 0;
height: 3px;
background: #f26262;
margin: 5px auto 0;
}
.per_secondMenu li:hover > div {
width: 17px;
transition: width 0.3s;
}
.per_secondMenu li.per_secondLevelCked > div {
width: 17px;
}
.per_secondMenu li .liSplit {
height: 12px;
width: 1px;
background: #dcdfe6;
position: absolute;
right: 0;
top: 2px;
}
.per_thirdMenu li {
float: left;
margin: 0 50px 50px 0;
width: 80px;
cursor: pointer;
height: 85px;
padding: 15px 10px 0;
position: relative;
font-size: 12px;
color: #666;
text-align: center;
border-radius: 4px;
background: #ebebeb;
}
.per_thirdMenu li i {
position: absolute;
bottom: 10px;
right: 10px;
font-size: 20px;
}
.per_SaveBtn {
float: right;
margin-top: 50px;
margin-left: 15px;
}
.per_thirdMenu li.thirdLevelMenuCked {
background: #e95252;
color: #f1f1f1;
}
.per_firstLevelCkbox {
position: absolute !important;
right: 3px;
top: 0;
}
.per_thirdLevelAllCked {
float: right;
}
</style> </style>
<template> <template>
<div>
<div>
<div class="per_title">权限设置</div> <div class="per_title">权限设置</div>
<div class="per_first_menu"> <div class="per_first_menu">
<ul> <ul>
<li v-model="item.IsShow" v-for="(item,index) in MenuList" @click="getSecondLevelMenu(index)" :class="{FirsrMenuCked:index==firstLevel}" > <li
<i :class="[fontPub,item.icon]"></i><br/>{{item.MenuName}} v-model="item.IsShow"
<el-checkbox :indeterminate="item.choseParent" class="per_firstLevelCkbox" type="checkbox" :value="item.IsShow" v-model="item.IsShow" v-for="(item, index) in MenuList"
@change="firstCheckAll" v-bind:checked="item.IsShow" ></el-checkbox> @click="getSecondLevelMenu(index)"
:class="{ FirsrMenuCked: index == firstLevel }"
>
<i :class="[fontPub, item.icon]"></i><br />{{ item.MenuName }}
<el-checkbox
:indeterminate="item.choseParent"
class="per_firstLevelCkbox"
type="checkbox"
:value="item.IsShow"
v-model="item.IsShow"
@change="firstCheckAll"
v-bind:checked="item.IsShow"
></el-checkbox>
</li> </li>
<input type="button" value="保存" class="normalBtn per_SaveBtn" @click="updateMenu()"/> <input
type="button"
value="保存"
class="normalBtn per_SaveBtn"
@click="updateMenu()"
/>
<!-- <input type="button" value="返回" class="hollowFixedBtn per_SaveBtn" @click="goback"/>--> <!-- <input type="button" value="返回" class="hollowFixedBtn per_SaveBtn" @click="goback"/>-->
</ul> </ul>
</div> </div>
<div class="per_detail_menu"> <div class="per_detail_menu">
<div class="per_secondMenu" v-if="MenuList.length>0 && MenuList[firstLevel].ChildMenu!=null"> <div
<li v-model="item.IsShow" :class="{per_secondLevelCked:index==secondLevel}" v-for="(item,index) in MenuList[firstLevel].ChildMenu" @click="getThirdLevelMenu(index)">{{item.MenuName}}<div></div><span class="liSplit"></span></li> class="per_secondMenu"
<el-checkbox class='per_thirdLevelAllCked' @change='checkedAll($event)' v-model='secondChkAllState'>全选</el-checkbox> v-if="MenuList.length > 0 && MenuList[firstLevel].ChildMenu != null"
>
<li
v-model="item.IsShow"
:class="{ per_secondLevelCked: index == secondLevel }"
v-for="(item, index) in MenuList[firstLevel].ChildMenu"
@click="getThirdLevelMenu(index)"
>
{{ item.MenuName }}
<div></div>
<span class="liSplit"></span>
</li>
<el-checkbox
class="per_thirdLevelAllCked"
@change="checkedAll($event)"
v-model="secondChkAllState"
>全选</el-checkbox
>
</div> </div>
<div class="per_thirdMenu" v-if="MenuList.length>0 && MenuList[firstLevel].ChildMenu!=null"> <div
<li v-model="item.IsShow" @click="thirdLevelMenuCked(item)" :class="{thirdLevelMenuCked:item.IsShow}" v-for="(item,index) in MenuList[firstLevel].ChildMenu[secondLevel].ChildMenu">{{item.MenuName}}<i :class="[fontPub,item.icon]"></i></li> class="per_thirdMenu"
v-if="MenuList.length > 0 && MenuList[firstLevel].ChildMenu != null"
>
<li
v-model="item.IsShow"
@click="thirdLevelMenuCked(item)"
:class="{ thirdLevelMenuCked: item.IsShow }"
v-for="(item, index) in MenuList[firstLevel].ChildMenu[secondLevel]
.ChildMenu"
>
{{ item.MenuName }}<i :class="[fontPub, item.icon]"></i>
</li>
</div> </div>
</div> </div>
<div class="per_title">功能管理</div> <div class="per_title">功能管理</div>
<div class="per_first_menu-set"> <div class="per_first_menu-set">
<ul> <ul>
<li v-model="item.IsShow" v-for="(item,index) in actionList" @click="item.IsShow = !item.IsShow;" > <li
<el-checkbox type="checkbox" :value="item.IsShow" v-model="item.IsShow" v-model="item.IsShow"
v-bind:checked="item.IsShow" ></el-checkbox> v-for="(item, index) in actionList"
<i :class="[fontPub,item.icon]"></i><span>{{item.ActionName}}</span> @click="item.IsShow = !item.IsShow"
<div style="border-bottom: 1px solid #eee"></div> >
<span>{{item.ActionCode}}</span> <el-checkbox
type="checkbox"
:value="item.IsShow"
v-model="item.IsShow"
v-bind:checked="item.IsShow"
></el-checkbox>
<i :class="[fontPub, item.icon]"></i
><span>{{ item.ActionName }}</span>
<div></div>
<span>{{ item.ActionCode }}</span>
</li> </li>
<input type="button" value="保存" class="normalBtn per_SaveBtn" @click="saveAction()"/> <input
type="button"
value="保存"
class="normalBtn per_SaveBtn"
@click="saveAction()"
/>
</ul> </ul>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
fontPub:'iconfont', fontPub: "iconfont",
MenuList:[], MenuList: [],
thirdLevelMenu:[], thirdLevelMenu: [],
msg:{ msg: {
RoleId:0 RoleId: 0,
}, },
updateMsg:{ updateMsg: {
RoleId:0, RoleId: 0,
Permission:[], Permission: [],
}, },
firstLevel:0, firstLevel: 0,
secondLevel:0, secondLevel: 0,
secondChkAllState:false, secondChkAllState: false,
//功能菜单 //功能菜单
actionList:[], actionList: [],
} };
}, },
mounted() { mounted() {
this.updateMsg.RoleId=this.msg.RoleId = this.$route.query.id this.updateMsg.RoleId = this.msg.RoleId = this.$route.query.id;
let sysId=this.$route.query.sysId let sysId = this.$route.query.sysId;
this.getMenu() this.getMenu();
this.getActionMenu(); this.getActionMenu();
}, },
methods: { methods: {
getActionMenu() { getActionMenu() {
this.apipost("admin_get_RoleGetPostPermissionAction", this.updateMsg, res => { this.apipost(
if(res.data.resultCode == 1) { "admin_get_RoleGetPostPermissionAction",
let tempList=res.data.data; this.updateMsg,
(res) => {
if (res.data.resultCode == 1) {
let tempList = res.data.data;
this.actionList = tempList; this.actionList = tempList;
}else{} } else {
}, err => {}) }
},
(err) => {}
);
}, },
getMenu() { getMenu() {
this.apipost("admin_get_RoleGetPostPermission", this.updateMsg, res => { this.apipost(
if(res.data.resultCode == 1) { "admin_get_RoleGetPostPermission",
let tempList=res.data.data this.updateMsg,
tempList.forEach(x=>{ (res) => {
if(x.ParentId==0){ if (res.data.resultCode == 1) {
let menuStyle=JSON.parse(x.MenuStyle) let tempList = res.data.data;
x.icon=menuStyle.icon tempList.forEach((x) => {
x.color=menuStyle.color if (x.ParentId == 0) {
x.choseParent=false let menuStyle = JSON.parse(x.MenuStyle);
this.initParentChk(x) x.icon = menuStyle.icon;
this.MenuList.push(x) x.color = menuStyle.color;
x.choseParent = false;
this.initParentChk(x);
this.MenuList.push(x);
} }
}) });
}else{} } else {
}, err => {}) }
},
(err) => {}
);
}, },
updateMenu() { updateMenu() {
this.MenuList.forEach(x=>{ this.MenuList.forEach((x) => {});
}) this.updateMsg.Permission = [];
this.updateMsg.Permission=[]
this.getCkdId(this.MenuList); this.getCkdId(this.MenuList);
this.apipost("admin_post_RoleUpdateRolePermission", this.updateMsg, res => { this.apipost(
if(res.data.resultCode == 1) { "admin_post_RoleUpdateRolePermission",
this.$message.success('保存成功！') this.updateMsg,
}else{ (res) => {
this.$message.error('保存失败！') if (res.data.resultCode == 1) {
this.$message.success("保存成功！");
} else {
this.$message.error("保存失败！");
} }
}, err => {})
}, },
getSecondLevelMenu(index){ (err) => {}
this.firstLevel=index; );
this.secondLevel=0; },
getSecondLevelMenu(index) {
this.firstLevel = index;
this.secondLevel = 0;
this.threeChange(); this.threeChange();
this.getThirdLevelMenu(0); this.getThirdLevelMenu(0);
}, },
getThirdLevelMenu(index){ //三级菜单 getThirdLevelMenu(index) {
this.secondLevel=index; //三级菜单
this.MenuList[this.firstLevel].ChildMenu[index].ChildMenu.forEach(x=>{ this.secondLevel = index;
let menuStyle=JSON.parse(x.MenuStyle) this.MenuList[this.firstLevel].ChildMenu[index].ChildMenu.forEach((x) => {
x.icon=menuStyle.icon let menuStyle = JSON.parse(x.MenuStyle);
x.color=menuStyle.color x.icon = menuStyle.icon;
this.thirdLevelMenu.push(x) x.color = menuStyle.color;
}) this.thirdLevelMenu.push(x);
this.threeChange() });
this.threeChange();
}, },
thirdLevelMenuCked(item){ thirdLevelMenuCked(item) {
item.IsShow=!item.IsShow item.IsShow = !item.IsShow;
this.threeChange() this.threeChange();
}, },
firstCheckAll(){ firstCheckAll() {
this.MenuList[this.firstLevel].ChildMenu.forEach(x=>{ this.MenuList[this.firstLevel].ChildMenu.forEach((x) => {
x.IsShow=this.MenuList[this.firstLevel].IsShow x.IsShow = this.MenuList[this.firstLevel].IsShow;
x.ChildMenu.forEach((item,index)=>{ x.ChildMenu.forEach((item, index) => {
item.IsShow=x.IsShow item.IsShow = x.IsShow;
}) });
}) });
this.MenuList[this.firstLevel].choseParent=false this.MenuList[this.firstLevel].choseParent = false;
this.threeChange() this.threeChange();
}, },
checkedAll(){ checkedAll() {
let thirdMenuLength=this.MenuList[this.firstLevel].ChildMenu[this.secondLevel].ChildMenu.length; let thirdMenuLength =
let chkNo=0; this.MenuList[this.firstLevel].ChildMenu[this.secondLevel].ChildMenu
this.MenuList[this.firstLevel].ChildMenu[this.secondLevel].ChildMenu.forEach((item)=>{ .length;
if(item.IsShow==true) let chkNo = 0;
chkNo++ this.MenuList[this.firstLevel].ChildMenu[
}) this.secondLevel
if(chkNo==thirdMenuLength){ ].ChildMenu.forEach((item) => {
this.MenuList[this.firstLevel].ChildMenu[this.secondLevel].ChildMenu.forEach((item)=>{ if (item.IsShow == true) chkNo++;
item.IsShow=false });
}) if (chkNo == thirdMenuLength) {
}else{ this.MenuList[this.firstLevel].ChildMenu[
this.MenuList[this.firstLevel].ChildMenu[this.secondLevel].ChildMenu.forEach((item)=>{ this.secondLevel
item.IsShow=true ].ChildMenu.forEach((item) => {
}) item.IsShow = false;
});
} else {
this.MenuList[this.firstLevel].ChildMenu[
this.secondLevel
].ChildMenu.forEach((item) => {
item.IsShow = true;
});
} }
this.threeChange() this.threeChange();
}, },
threeChange(){ threeChange() {
let chkCount=0 let chkCount = 0;
let count=0 let count = 0;
this.MenuList[this.firstLevel].ChildMenu.forEach((x,i)=>{ this.MenuList[this.firstLevel].ChildMenu.forEach((x, i) => {
let secondCheckCount=0 let secondCheckCount = 0;
x.ChildMenu.forEach((item,index)=>{ x.ChildMenu.forEach((item, index) => {
count++ count++;
if(item.IsShow){ if (item.IsShow) {
chkCount++ chkCount++;
secondCheckCount++ secondCheckCount++;
} }
}) });
if(this.secondLevel==i){ if (this.secondLevel == i) {
if(x.ChildMenu.length>0){ if (x.ChildMenu.length > 0) {
this.secondChkAllState=x.ChildMenu.length==secondCheckCount this.secondChkAllState = x.ChildMenu.length == secondCheckCount;
} else } else this.secondChkAllState = false;
this.secondChkAllState=false
} }
x.IsShow=secondCheckCount>0 x.IsShow = secondCheckCount > 0;
}) });
this.MenuList[this.firstLevel].IsShow=chkCount>0 this.MenuList[this.firstLevel].IsShow = chkCount > 0;
this.MenuList[this.firstLevel].choseParent=chkCount>0&&chkCount<count this.MenuList[this.firstLevel].choseParent =
chkCount > 0 && chkCount < count;
}, },
initParentChk(p){ initParentChk(p) {
if(!p.ChildMenu || p.ChildMenu.length==0||p.ChildMenu) if (!p.ChildMenu || p.ChildMenu.length == 0 || p.ChildMenu) return;
return let chkCount = 0;
let chkCount=0 let count = 0;
let count=0 p.ChildMenu.forEach((x) => {
p.ChildMenu.forEach(x=>{ x.ChildMenu.forEach((item, index) => {
x.ChildMenu.forEach((item,index)=>{ count++;
count++ if (item.IsShow) {
if(item.IsShow){ chkCount++;
chkCount++
} }
}) });
}) });
p.choseParent=chkCount>0&&chkCount<count p.choseParent = chkCount > 0 && chkCount < count;
p.IsShow=chkCount>0 p.IsShow = chkCount > 0;
}, },
//保存功能管理 //保存功能管理
saveAction() { saveAction() {
this.updateMsg.Permission=[] this.updateMsg.Permission = [];
this.getCkdActionId(this.actionList); this.getCkdActionId(this.actionList);
this.apipost("admin_post_RoleUpdateRolePermissionAction", this.updateMsg, res => { this.apipost(
if(res.data.resultCode == 1) { "admin_post_RoleUpdateRolePermissionAction",
this.$message.success('保存成功！') this.updateMsg,
}else{ (res) => {
this.$message.error('保存失败！') if (res.data.resultCode == 1) {
this.$message.success("保存成功！");
} else {
this.$message.error("保存失败！");
} }
}, err => {}) },
(err) => {}
);
}, },
getCkdId(array){ getCkdId(array) {
array.forEach(x=>{ array.forEach((x) => {
if(x.IsShow==1||x.IsShow==true){ if (x.IsShow == 1 || x.IsShow == true) {
this.updateMsg.Permission.push(x.MenuId) this.updateMsg.Permission.push(x.MenuId);
if(x.ChildMenu){ if (x.ChildMenu) {
this.getCkdId(x.ChildMenu) this.getCkdId(x.ChildMenu);
} }
} }
}) });
}, },
//过滤获取功能管理id //过滤获取功能管理id
getCkdActionId(array){ getCkdActionId(array) {
array.forEach(x=>{ array.forEach((x) => {
if(x.IsShow==1||x.IsShow==true){ if (x.IsShow == 1 || x.IsShow == true) {
this.updateMsg.Permission.push(x.Id); this.updateMsg.Permission.push(x.Id);
} }
}) });
}, },
goback(){ goback() {
history.back(-1) history.back(-1);
} },
} },
} };
</script> </script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment