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= ...
随机推荐
- 13. Scala函数式编程(高级部分)
13.1 偏函数(partial function) 13.1.1 需求 -> 思考 一个集合val list = List(1,2,3,4,"abc"),完成如下要求 1) ...
- ubuntu docker inflxudb(安装 使用 备份 还原 以及python编码) telegraf Grafana
inflxudb1.7.7 1.拉取最新的镜像 docker pull influxdb 2.运行实例: docker run -d --restart=always -p 8086:8086 -p ...
- Python将背景图片的颜色去掉
一.问题 在使用图片的时候有时候我们希望把背景变成透明的,这样就只关注于图片本身.比如在连连看中就只有图片,而没有背景,其实我个人感觉有背景好看一点. 二.解决 我们需要使用RGBA(Red,Gr ...
- C# - Array.Sort()方法
Array类简介 Array类是C#中所有数组的基类.我们常用的[]声明数组即为Array类的语法,我们可通过Array类提供的各种方法对C#中数组进行操作.最典型的就是数组排序 Array.Sort ...
- 《即时消息技术剖析与实战》学习笔记1——IM系统的架构
一.IM的应用场景 聊天.直播.在线客服.物联网等所有需要实时互动.高实时性的场景,都需要应用到 IM 技术.
- .NET / C# HTTP中的GET和PSOT
需要引入using System.IO;using System.Net; public string GETs(string URL) { //创建httpWebRequest对象 HttpWebR ...
- C#项目 App.config 配置文件不同使用环境配置
问题 部署项目时,常常需要根据不同的环境使用不同的配置文件.例如,在部署网站时可能希望禁用调试选项,并更改连接字符串以使其指向不同的数据库.在创建 Web 项目时,Visual Studio 自动生成 ...
- 类再生（合成、继承、final）
类再生 有两种方法达到代码复用的效果:合成.继承. 合成的语法 合成就是形成对象,把复用的代码置入对象句柄. 在类内字段使用基本数据会初始化为零,但对象句柄会初始化为null.在下面的程序中若没有ne ...
- Beego 学习笔记二:第一个项目
第一个MVC项目 1> 使用beego命令,创建一个项目 首先切换到创建项目的位置,输入bee new firstweb命令,创建成功之后会出现一个名为firstweb的文件夹 2> ...
- HTML5深入学习之数据存储
概述 本来,数据存储都是由 cookie 完成的,但是 cookie 不适合大量数据的存储,cookie 速度慢且效率低. 现在,HMLT5提供了两种在客户端存储数据的办法: localStorage ...