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= ...
随机推荐
- 【题解】与查询 [51nod1406]
[题解]与查询 [51nod1406] 传送门:与查询 \([51nod1406]\) [题目描述] 给出 \(n\) 个整数,对于 \(x \in [0,1000000]\),分别求出在这 \(n\ ...
- golang 学习笔记 使用cmd
package main import ( "bytes" "fmt" "os/exec" ) func main() { cmd0 := ...
- mybatis-plus 主键自增问题
主键不自增:返回值是插入的条数 <insert id="add" parameterType="EStudent"> insert into TSt ...
- Dapper安装与使用
1.VS2015直接使用nuget包搜索Dapper,安装时报错:显示版本不兼容. 于是使用命令安装dapper低版本. 步骤: 打开项目,vs工具---Nuget包管理器--程序包管理器控制台 ...
- VS 发布MVC网站缺少视图
mvc项目发布之后会有一些视图文件缺少,不包含在发布文件中,虽然可以直接从项目文件中直接拷贝过来,但还是想知道是什么原因,发布文件好像没有找到哪里有设置这个的地方 把生成操作:无-改成内容即可 原文
- 2d图片依次排列在屏幕中间（SpriteRenderer）
如图所示: C#代码: using System.Collections; using System.Collections.Generic; using UnityEngine; public cl ...
- Ubuntu安装MySQL配置远程登录、utf8mb4字符集
2019/11/19, Ubuntu Server 18.04,MySQL 5.7 摘要:Ubuntu Server 18.04 安装MySQL 5.7 并配置远程登录.utf8mb4字符集 由于My ...
- Javascript文件上传插件
jQuery File Uploader 这是最受欢迎的 jQuery 文件上传组件,支持批量上传,拖放上传,显示上传进度条以及校验功能. 支持预览图片.音频和视频,支持跨域上传和客户端图片缩放,支持 ...
- k8s+jenkins（DevOps全流程）
k8s集群搭建是参照别人的,链接找不到了.需要5台机器,3主2从,主最少搭建3台才能实现高可用. 流程jenkins打包代码 >> 把打包代码生成镜像 >> 备份镜像库旧镜像 ...
- Tomcat配置https加密连接
配置https安全连接(ssl加密连接) https连接需要用到数字证书与数字签名(MD5算法),网站https连接首先需要申请数字证书,配置加密连接器,浏览器安装证书. 证书运用到RSA技术,RSA ...