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= ...
随机推荐
- css伪类:before及:after除了插入文字内容还能做点儿啥？画图
全手打原创,转载请标明出处:https://www.cnblogs.com/dreamsqin/p/11181416.html 1.什么时候用伪类:before和:after? 结合实际开发情况,说一 ...
- Java.util.Math类--数学相关的工具类
Math类--数学相关的工具类 java.util.Math类是数学相关的工具类,里面提供了大量的静态方法,完成与数学运算相关的操作. public static double abs(double ...
- css元素水平垂直居中
温习一下元素水平垂直居中的几种方法 元素有具体宽度 1.absolute+负边距 .LV_center{ border: 1px solid red; position: absolute; widt ...
- Spring Security实现OAuth2.0授权服务 - 进阶版
<Spring Security实现OAuth2.0授权服务 - 基础版>介绍了如何使用Spring Security实现OAuth2.0授权和资源保护,但是使用的都是Spring Sec ...
- N-gram理解
如何来理解这个概率呢? p( i love you) 如果是 =p(i)p(love)p(you) 就是只考虑单词出现的概率本身. 如果是 =p(i)p(love|i)p(you|love) 就是 ...
- kvm第一章--概念
- Django:RestFramework之-------视图
10.视图 GenericAPIView封装一些方法,将这些方法返回值放在类变量位置上. 1.GenericAPIView视图示例:不怎么用 from api.utils.serializers.pa ...
- 模块化规范：AMD规范和CommonJs规范
为什么模块很重要? 因为有了模块,我们就可以更方便地使用别人的代码,想要什么功能,就加载什么模块. 但是,这样做有一个前提,那就是大家必须以同样的方式编写模块,否则你有你的写法,我有我的写法,岂不是乱 ...
- orcale的to_number方法
转自:https://blog.csdn.net/tiantangdizhibuxiang/article/details/81034893 TO_NUMBER函数()是Oracle中常用的类型转换函 ...
- 微信分享接口的java开发的一些小步骤
1.配置接口信息进行验证 代码如下: /** * 访问没认证的地址跳转 * * @param request * @return 登录页面 * @throws ...