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= ...
随机推荐
- Golang解析、验证、修改URL之Host、Port、Path
URL解析验证问题 net.ParseIP()只能解析不带冒号以及端口号的IP4/IP6 ✔: 127.0.0.1.2001:db8::68 ✖: 127.0.0.1:8080.www.baidu.c ...
- 解决新版本R3.6.0不能加载devtools包问题
首先是看到下面这个文章想试着练习一下,结果第一步就卡住了,无法加载devtools包,繁体字都冒出来了......汗!(没有截图,但过程痛苦不堪~) https://www.sohu.com/a/12 ...
- web开发-心路历程
从事web开发已经有几年了,感触颇多,在此记录一下. 对于学习: 几年的经历让我认识到了,学习确实是一个持续永恒的过程.目前的社会发展很快,各种新的思想,新的机会不断刷新我的认知,也让我体会到了自己能 ...
- Fiddler手机抓包不完全记录
准备工作: 1.必须确保安装fiddler的电脑和手机在同一个wifi环境下 备注:如果电脑是笔记本当然最好;如果电脑用的是台式机,可以安装一个随身wifi,来确保台式机和手机在同一wifi环境下 ...
- Linux VIM8.1 Python3 编辑器配置文件
Linux VIM8.1 Python3 编辑器配置文件 实现功能: 自动补全(包括函数模块方法补全) 自动代码标准格式化 自动检查代码错误 自定义头文件 自动括号补全 缩进指示线 代码一键折叠 代码 ...
- opencv imshow plt imshow
opencv官方文档上写的,https://docs.opencv.org/master/dc/d2e/tutorial_py_image_display.html Color image loade ...
- 完美解决SpringMVC中静态资源无法找到（No mapping found for HTTP request with URI）问题
https://blog.csdn.net/kingmax54212008/article/details/79330308 今天遇到一个比较新奇的问题,但是也应该是使用spring MVC框架时由于 ...
- IdentityServer4学习及简单使用
本文,主要用来记录IdentityServer4的简单使用. 一. IdentityServer的预备知识 要学习IdentityServer,需要了解下基于Token的验证体系,其中涉及到Token ...
- String.Operation
// 字符串切割 StringField.Split(",".ToCharArray(), StringSplitOptions.RemoveEmptyEntries);
- Java自学-数字与字符串 比较字符串
Java 比较字符串 示例 1 : 是否是同一个对象 str1和str2的内容一定是一样的! 但是,并不是同一个字符串对象 package character; public class TestSt ...