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>