vue分组全选权限，CheckBoxGroup
<template>
<div class="comPower">
<div class="card_header" v-show="!rolePowerVisi">
<Row>
<Col span="19" offset="1">
<div class="title_left">
{{powerList.powerType}}
</div>
</Col>
<Col span="4">
<div class="title_right">
<span class="iconfont icon-tianjia"></span>
添加自定义角色
</div>
</Col>
</Row>
</div>
<div class="card_content" v-show="!rolePowerVisi">
<div class="list_item" v-for="(item) in powerList.roleList" :key="item.id" @click="handleLook(item)">
<p>{{item.roleName}}</p>
<p v-show="item.defaultRole">
企业默认角色
</p>
</div>
</div>
<!-- 角色详细权限 -->
<div v-show="rolePowerVisi" class="powerDetail">
<div class="card_header">
<Row>
<Col span="19" offset="1">
<div class="title_left">
<span class="title_back" @click="rolePowerVisi = false">{{powerList.powerType}}</span>
<span> > </span>
<span>{{rolePowerDetail.roleName}}</span>
</div>
</Col>
<Col span="4"></Col>
</Row>
</div>
<div class="power_detail">
<ul>
<li v-for="(item,index) in roleMenu"
:key="item.id"
@click="handleSwitch(index)"
:class="indexA == index ? 'active':''"
v-show="item.show"
>
{{item.name}}
</li>
</ul>
<div class="roleCheckGroup" v-show="indexA == 1">
<Row class="list_item" v-for="(item,index) in rolePowerDetail.rolePower" :key="item.rolePowerTypeId">
<Col span="4">
<Checkbox
:indeterminate="item.rolePowerNow.length !== item.rolePowerList.length"
:value="item.rolePowerNow.length == item.rolePowerList.length"
class="check_item"
@click.prevent.native="handleCheckAll(item)">
{{item.rolePowerType}}
</Checkbox>
</Col>
<Col span="20">
<CheckboxGroup v-model="item.rolePowerNow" @on-change="checkAllGroupChange(item,index)">
<Checkbox
class="check_item"
v-for="(data) in item.rolePowerList"
:label="data.fieldId"
:key="data.fieldId"
>
<span>{{data.name}}</span>
</Checkbox>
</CheckboxGroup>
</Col>
</Row>
</div>
<div class="roleCheckGroup" v-show="indexA == 0">
当为自定义角色时，显示基本信息，待完善！
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "ComPower",
data(){
return {
powerList:{
powerType: "企业权限",
id: "comPower",
roleList: [
{
roleName: "拥有者",
id: "comOwners",
defaultRole: false, // boolean
selfDefinedRole: "sys", // 'sys' or 'self'
rolePower: [
{
rolePowerType: "项目分组管理",
rolePowerTypeId: "groupManage",
rolePowerNow:[
"group_build",
"group_del",
"group_edit",
"group_levelAdjust",
"group_memberManage",
"group_seeAll",
],
rolePowerList: [
{
name: "创建项目分组",
fieldId: "group_build",
},
{
name: "删除项目分组",
fieldId: "group_del",
},
{
name: "编辑项目分组",
fieldId: "group_edit",
},
{
name: "项目分组层级调整",
fieldId: "group_levelAdjust",
},
{
name: "分组成员管理",
fieldId: "group_memberManage",
},
{
name: "查看企业所有项目分组",
fieldId: "group_seeAll",
}, ]
},
{
rolePowerType: "项目管理",
rolePowerTypeId: "projManage",
rolePowerNow:[
"proj_build",
"proj_seeAll",
"proj_selfAdd",
"proj_lockField",
"proj_buildTemp",
"proj_manageTemp",
"proj_moveIn",
"proj_moveOut",
],
rolePowerList: [
{
name: "创建项目",
fieldId: "proj_build",
},
{
name: "查看企业所有项目",
fieldId: "proj_seeAll",
},
{
name: "全企业内主动加入项目",
fieldId: "proj_selfAdd",
},
{
name: "解锁/锁定项目信息字段",
fieldId: "proj_lockField",
},
{
name: "创建企业项目模板",
fieldId: "proj_buildTemp",
},
{
name: "管理企业模板",
fieldId: "proj_manageTemp",
},
{
name: "迁入项目",
fieldId: "proj_moveIn",
},
{
name: "迁出项目",
fieldId: "proj_moveOut",
}
]
},
{
rolePowerType: "成员管理",
rolePowerTypeId: "memManage",
rolePowerNow: [
"mem_add",
"mem_addExter",
"mem_del",
"mem_useBoolean",
"mem_editRole",
"mem_editInfo",
"mem_editDepart",
"mem_createGroup",
"mem_addGroupMem",
],
rolePowerList: [
{
name: "添加企业成员",
fieldId: "mem_add",
},
{
name: "添加企业外部成员",
fieldId: "mem_addExter",
},
{
name: "移除企业成员",
fieldId: "mem_del",
},
{
name: "启用/停用企业成员",
fieldId: "mem_useBoolean",
},
{
name: "修改企业成员的角色",
fieldId: "mem_editRole",
},
{
name: "修改企业成员信息",
fieldId: "mem_editInfo",
},
{
name: "编辑部门",
fieldId: "mem_editDepart",
},
{
name: "创建群组",
fieldId: "mem_createGroup",
},
{
name: "添加群组成员",
fieldId: "mem_addGroupMem",
},
]
},
{
rolePowerType: "权限设置",
rolePowerTypeId: "powerSet",
rolePowerNow: [
"power_build",
"power_edit",
"power_del",
"power_switchDef",
],
rolePowerList: [
{
name: "创建自定义角色",
fieldId: "power_build",
},
{
name: "修改自定义角色",
fieldId: "power_edit",
},
{
name: "删除自定义角色",
fieldId: "power_del",
},
{
name: "选择企业成员的默认角色",
fieldId: "power_switchDef",
}
]
},
{
rolePowerType: "企业操作",
rolePowerTypeId: "comOperate",
rolePowerNow: [
"com_editInfo",
"com_addSelfField",
"com_addTaskType",
"com_lockeSelfField",
"com_updateSelfField",
],
rolePowerList: [
{
name: "修改企业基础信息",
fieldId: "com_editInfo",
},
{
name: "新增/管理自定义字段",
fieldId: "com_addSelfField",
},
{
name: "新增/管理任务类型",
fieldId: "com_addTaskType",
},
{
name: "锁定/取消锁定自定义字段",
fieldId: "com_lockeSelfField",
},
{
name: "强制更新自定义字段",
fieldId: "com_updateSelfField",
}
]
}
]
},
{
roleName: "管理员",
id: "Administrators",
defaultRole: false, // boolean
selfDefinedRole: "sys", // 'sys' or 'self'
rolePower: [
{
rolePowerType: "项目分组管理",
rolePowerTypeId: "groupManage",
rolePowerNow:[
"group_build",
"group_edit",
"group_memberManage", ],
rolePowerList: [
{
name: "创建项目分组",
fieldId: "group_build",
},
{
name: "删除项目分组",
fieldId: "group_del",
},
{
name: "编辑项目分组",
fieldId: "group_edit",
},
{
name: "项目分组层级调整",
fieldId: "group_levelAdjust",
},
{
name: "分组成员管理",
fieldId: "group_memberManage",
},
{
name: "查看企业所有项目分组",
fieldId: "group_seeAll",
}, ]
},
{
rolePowerType: "项目管理",
rolePowerTypeId: "projManage",
rolePowerNow:["proj_build","proj_seeAll","proj_lockField","proj_moveIn"],
rolePowerList: [
{
name: "创建项目",
fieldId: "proj_build",
},
{
name: "查看企业所有项目",
fieldId: "proj_seeAll",
},
{
name: "全企业内主动加入项目",
fieldId: "proj_selfAdd",
},
{
name: "解锁/锁定项目信息字段",
fieldId: "proj_lockField",
},
{
name: "创建企业项目模板",
fieldId: "proj_buildTemp",
},
{
name: "管理企业模板",
fieldId: "proj_manageTemp",
},
{
name: "迁入项目",
fieldId: "proj_moveIn",
},
{
name: "迁出项目",
fieldId: "proj_moveOut",
}
]
},
{
rolePowerType: "成员管理",
rolePowerTypeId: "memManage",
rolePowerNow: ["mem_addExter","mem_editRole"],
rolePowerList: [
{
name: "添加企业成员",
fieldId: "mem_add",
},
{
name: "添加企业外部成员",
fieldId: "mem_addExter",
},
{
name: "移除企业成员",
fieldId: "mem_del",
},
{
name: "启用/停用企业成员",
fieldId: "mem_useBoolean",
},
{
name: "修改企业成员的角色",
fieldId: "mem_editRole",
},
{
name: "修改企业成员信息",
fieldId: "mem_editInfo",
},
{
name: "编辑部门",
fieldId: "mem_editDepart",
},
{
name: "创建群组",
fieldId: "mem_createGroup",
},
{
name: "添加群组成员",
fieldId: "mem_addGroupMem",
},
]
},
{
rolePowerType: "权限设置",
rolePowerTypeId: "powerSet",
rolePowerNow: ["power_build","power_switchDef"],
rolePowerList: [
{
name: "创建自定义角色",
fieldId: "power_build",
},
{
name: "修改自定义角色",
fieldId: "power_edit",
},
{
name: "删除自定义角色",
fieldId: "power_del",
},
{
name: "选择企业成员的默认角色",
fieldId: "power_switchDef",
}
]
},
{
rolePowerType: "企业操作",
rolePowerTypeId: "comOperate",
rolePowerNow: ["com_editInfo","com_addTaskType","com_updateSelfField"],
rolePowerList: [
{
name: "修改企业基础信息",
fieldId: "com_editInfo",
},
{
name: "新增/管理自定义字段",
fieldId: "com_addSelfField",
},
{
name: "新增/管理任务类型",
fieldId: "com_addTaskType",
},
{
name: "锁定/取消锁定自定义字段",
fieldId: "com_lockeSelfField",
},
{
name: "强制更新自定义字段",
fieldId: "com_updateSelfField",
}
]
}
]
},
{
roleName: "成员",
id: "members",
defaultRole: true, // boolean
selfDefinedRole: "sys", // 'sys' or 'self'
rolePower: [
{
rolePowerType: "项目分组管理",
rolePowerTypeId: "groupManage",
rolePowerNow:["group_build","group_del", "group_edit","group_memberManage"],
rolePowerList: [
{
name: "创建项目分组",
fieldId: "group_build",
},
{
name: "删除项目分组",
fieldId: "group_del",
},
{
name: "编辑项目分组",
fieldId: "group_edit",
},
{
name: "项目分组层级调整",
fieldId: "group_levelAdjust",
},
{
name: "分组成员管理",
fieldId: "group_memberManage",
},
{
name: "查看企业所有项目分组",
fieldId: "group_seeAll",
}, ]
},
{
rolePowerType: "项目管理",
rolePowerTypeId: "projManage",
rolePowerNow:["proj_build","proj_seeAll","proj_selfAdd","proj_lockField","proj_moveIn"],
rolePowerList: [
{
name: "创建项目",
fieldId: "proj_build",
},
{
name: "查看企业所有项目",
fieldId: "proj_seeAll",
},
{
name: "全企业内主动加入项目",
fieldId: "proj_selfAdd",
},
{
name: "解锁/锁定项目信息字段",
fieldId: "proj_lockField",
},
{
name: "创建企业项目模板",
fieldId: "proj_buildTemp",
},
{
name: "管理企业模板",
fieldId: "proj_manageTemp",
},
{
name: "迁入项目",
fieldId: "proj_moveIn",
},
{
name: "迁出项目",
fieldId: "proj_moveOut",
}
]
},
{
rolePowerType: "成员管理",
rolePowerTypeId: "memManage",
rolePowerNow: ["mem_add","mem_addExter","mem_del","mem_editRole"],
rolePowerList: [
{
name: "添加企业成员",
fieldId: "mem_add",
},
{
name: "添加企业外部成员",
fieldId: "mem_addExter",
},
{
name: "移除企业成员",
fieldId: "mem_del",
},
{
name: "启用/停用企业成员",
fieldId: "mem_useBoolean",
},
{
name: "修改企业成员的角色",
fieldId: "mem_editRole",
},
{
name: "修改企业成员信息",
fieldId: "mem_editInfo",
},
{
name: "编辑部门",
fieldId: "mem_editDepart",
},
{
name: "创建群组",
fieldId: "mem_createGroup",
},
{
name: "添加群组成员",
fieldId: "mem_addGroupMem",
},
]
},
{
rolePowerType: "权限设置",
rolePowerTypeId: "powerSet",
rolePowerNow: ["power_build","power_edit","power_switchDef"],
rolePowerList: [
{
name: "创建自定义角色",
fieldId: "power_build",
},
{
name: "修改自定义角色",
fieldId: "power_edit",
},
{
name: "删除自定义角色",
fieldId: "power_del",
},
{
name: "选择企业成员的默认角色",
fieldId: "power_switchDef",
}
]
},
{
rolePowerType: "企业操作",
rolePowerTypeId: "comOperate",
rolePowerNow: ["com_editInfo","com_addSelfField","com_addTaskType","com_updateSelfField"],
rolePowerList: [
{
name: "修改企业基础信息",
fieldId: "com_editInfo",
},
{
name: "新增/管理自定义字段",
fieldId: "com_addSelfField",
},
{
name: "新增/管理任务类型",
fieldId: "com_addTaskType",
},
{
name: "锁定/取消锁定自定义字段",
fieldId: "com_lockeSelfField",
},
{
name: "强制更新自定义字段",
fieldId: "com_updateSelfField",
}
]
}
]
},
{
roleName: "外部成员",
id: "externalMembers",
defaultRole: false, // boolean
selfDefinedRole: "self", // 'sys' or 'self'
rolePower: [
{
rolePowerType: "项目分组管理",
rolePowerTypeId: "groupManage",
rolePowerNow:["group_build"],
rolePowerList: [
{
name: "创建项目分组",
fieldId: "group_build",
},
{
name: "删除项目分组",
fieldId: "group_del",
},
{
name: "编辑项目分组",
fieldId: "group_edit",
},
{
name: "项目分组层级调整",
fieldId: "group_levelAdjust",
},
{
name: "分组成员管理",
fieldId: "group_memberManage",
},
{
name: "查看企业所有项目分组",
fieldId: "group_seeAll",
}, ]
},
{
rolePowerType: "项目管理",
rolePowerTypeId: "projManage",
rolePowerNow:["proj_build"],
rolePowerList: [
{
name: "创建项目",
fieldId: "proj_build",
},
{
name: "查看企业所有项目",
fieldId: "proj_seeAll",
},
{
name: "全企业内主动加入项目",
fieldId: "proj_selfAdd",
},
{
name: "解锁/锁定项目信息字段",
fieldId: "proj_lockField",
},
{
name: "创建企业项目模板",
fieldId: "proj_buildTemp",
},
{
name: "管理企业模板",
fieldId: "proj_manageTemp",
},
{
name: "迁入项目",
fieldId: "proj_moveIn",
},
{
name: "迁出项目",
fieldId: "proj_moveOut",
}
]
},
{
rolePowerType: "成员管理",
rolePowerTypeId: "memManage",
rolePowerNow: ["mem_add"],
rolePowerList: [
{
name: "添加企业成员",
fieldId: "mem_add",
},
{
name: "添加企业外部成员",
fieldId: "mem_addExter",
},
{
name: "移除企业成员",
fieldId: "mem_del",
},
{
name: "启用/停用企业成员",
fieldId: "mem_useBoolean",
},
{
name: "修改企业成员的角色",
fieldId: "mem_editRole",
},
{
name: "修改企业成员信息",
fieldId: "mem_editInfo",
},
{
name: "编辑部门",
fieldId: "mem_editDepart",
},
{
name: "创建群组",
fieldId: "mem_createGroup",
},
{
name: "添加群组成员",
fieldId: "mem_addGroupMem",
},
]
},
{
rolePowerType: "权限设置",
rolePowerTypeId: "powerSet",
rolePowerNow: [],
rolePowerList: [
{
name: "创建自定义角色",
fieldId: "power_build",
},
{
name: "修改自定义角色",
fieldId: "power_edit",
},
{
name: "删除自定义角色",
fieldId: "power_del",
},
{
name: "选择企业成员的默认角色",
fieldId: "power_switchDef",
}
]
},
{
rolePowerType: "企业操作",
rolePowerTypeId: "comOperate",
rolePowerNow: ["com_editInfo"],
rolePowerList: [
{
name: "修改企业基础信息",
fieldId: "com_editInfo",
},
{
name: "新增/管理自定义字段",
fieldId: "com_addSelfField",
},
{
name: "新增/管理任务类型",
fieldId: "com_addTaskType",
},
{
name: "锁定/取消锁定自定义字段",
fieldId: "com_lockeSelfField",
},
{
name: "强制更新自定义字段",
fieldId: "com_updateSelfField",
}
]
}
]
},
]
},
rolePowerVisi:false,
rolePowerDetail:{},
roleMenu:[
{
name: "基本信息",
id: "badicInfo",
show: false
},
{
name: "权限配置",
id: "powerSet",
show: true
}
],
indexA: 1,
}
},
methods: {
handleLook(item){
if(item.selfDefinedRole !== "sys"){
this.roleMenu[0].show = true;
} else {
this.roleMenu[0].show = false;
}
this.rolePowerVisi = true;
this.rolePowerDetail = item;
},
handleSwitch(index){
this.indexA = index;
},
//
handleCheckAll (item) {
let allPower = [];
item.rolePowerList.map((item,index) => {
allPower.push(item.fieldId);
}) if(item.rolePowerNow.length !== item.rolePowerList.length){
item.rolePowerNow = allPower;
} else {
item.rolePowerNow = [];
}
},
checkAllGroupChange (item,index) {
let length = item.rolePowerList.length;
// console.log( this.rolePowerDetail.rolePower[index].rolePowerNow )
let data = this.rolePowerDetail.rolePower[index].rolePowerNow;
}
//
},
beforeDestroy(){
this.rolePowerVisi = false;
}
}
</script> <style lang="scss" scoped>
.comPower {
.card_header {
padding: 26px 0px;
border-bottom: 1px solid #e5e5e5;
.title_left {
font-size: 18px;
}
.title_right {
color: #1b9aee;
}
.title_back {
cursor: pointer;
&:hover {
color: #1b9aee;
}
}
}
.card_content {
padding:0px 20px;
.list_item {
cursor: pointer;
padding: 22px 24px;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
border-bottom: 1px solid #e5e5e5;
&:hover {
background: #f7f7f7;
}
}
}
.powerDetail {
.power_detail {
ul {
height: 40px;
line-height: 40px;
display: flex;
justify-content: flex-start;
li {
margin-left: 20px;
cursor: pointer;
}
.active {
color: #262626;
box-shadow: inset 0 -4px #1b9aee;
}
}
}
}
.roleCheckGroup {
margin: 20px;
.list_item {
margin-bottom: 1px;
border-bottom: 1px solid #e5e5e5;
.check_item {
margin:16px 50px 16px 0;
}
}
}
}
</style>
vue分组全选权限，CheckBoxGroup的更多相关文章
- vue实现全选效果
vue实现全选效果 接触vue快半年了,记得刚用vue做项目的时候遇到一个全选功能,当时到处百度也没有找到怎么实现,最后还是用了jquery进行dom操作实现的. 今天没事就顺手写了一个,感觉很简单, ...
- vue实现全选框效果
vue实现全选框效果 一.总结 一句话总结: 全选的checkbox点击的时候判断这个checkbox的状态,如果没选中,说明下一个操作是选中所有 下面的每个checkbox判断一下是否所有的chec ...
- vue多级复杂列表展开/折叠，全选/分组全选实现
首先,来看下效果图 在线体验地址:https://hxkj.vip/demo/multipleList/.温馨提示,打开之后按F12,使用手机模式食用,口味更佳! 可以看出,这个列表有三种展现形式: ...
- [原]vue实现全选，反选
用vue写业务代码时候,后端大神丢给我一堆数据,要求是做全选,反选功能,然后把用户更改的数据全部返回给他 基本思路 如果父级选中了,那么父级下面的子集全部选中checked=true; 如果子集中选中 ...
- Vue Checkbox全选和选中的方法
<div class="search-content"> <Checkbox :value="checkAll" @click.prevent ...
- vue分页全选和单选操作
<!DOCTYPE html> <html> <head> <title>演示Vue</title> <style> ul,li ...
- vue中全选和取消
1.效果预览 2.index.html <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
- sencha touch list 选择插件，可记忆已选项，可分组全选
选择记忆功能参考:https://market.sencha.com/extensions/ext-plugin-rememberselection 插件代码: /* * 记住列表选择状态 * 如果分 ...
- vue实现全选，反选
1.example.vue <template> <table class="table-common"> <tr> <th class= ...
随机推荐
- 67 GC 垃圾回收机制
GC是JVM中自带的一个线程 他会不定时来堆中回收那些不再使用的对象,以释放内存 可以通过System.gc()来主动建议jvm尽快调度gc来回收垃圾 不同的平台的jvm对GC的策略是有所不同的 我们 ...
- IDEA——配置代码检测
一.问题 利用idea安装代码检查机制,完成bug的检测.内容分为两部分:1.完成工具的安装2.完成代码的审核 二.解决1.工具的安装由于idea这个ide具有的性质,所以具有两种不同的安装方式.1) ...
- SQL系列（六）—— 过滤（where）
在日常的应用中的,大多数业务场景都只是需要特定的数据,所以能够过滤筛选数据显得尤为至关重要.从需求角度分析,需要特定的数据,即需要一定条件的数据,即从全量数据中根据特定条件过滤出需要的数据. 如果需要 ...
- 网络编程之网络架构及其演变过程、互联网与互联网的组成、OSI七层协议、socket抽象层
目录 网络架构及其演变过程 单机架构 CS架构 BS架构 BS架构和CS架构的区别 C/S架构的优缺点: B/S架构的优缺点: 互联网与互联网的组成 互联网的组成(教科书版) 互联网的组成(科普版) ...
- 连接池未注册org.logicalcobwebs.proxool.ProxoolException: Attempt to refer to a unregistered pool by its alias 'XXX'
代码之前一直好好的,写了一个定时器后报错,本地测试为了立马能执行就用cron表达式* * * * * ?,为了只执行一次在最后面加上Thread.sleep(1000*3600*24)睡眠二十四小时从 ...
- IntelliJ IDEA重命名变量的问题
当我尝试使用Shift+ F6或简单地使用Refactor => Rename重命名变量时,有时intellij不仅重命名我想要的那个,而且还重命名具有相同名称的所有其他变量(在其他文件中)以及 ...
- Jvm调优积累的文章
Linux查看CPU和内存使用情况 stat命令查看jvm的GC情况 (以Linux为例) jvm优化必知系列——监控工具 Java JVM 参数设置大全
- html中对应Word中的字体和字号
原文链接:https://blog.csdn.net/xuexizhe88/article/details/79277587:https://blog.csdn.net/qq_31603575/art ...
- Kali linux network is unreachable
使用树莓派4 安装完kali linux后,配置好ip,能ping通上级路由. 但ping公网地址显示网络不可达. Ping: connect: network is unreachable 解决方法 ...
- SpringCloud2.0 Hystrix Ribbon 基于Ribbon实现断路器
原文:https://www.cnblogs.com/songlu/p/9949203.html 1.启动[服务中心]集群,工程名:springcloud-eureka-server 参考 Sprin ...