zoukankan      html  css  js  c++  java
  • 权限分配vue

    <el-tab-pane label="配置权限" name="配置权限" style="margin-top:10px;" >
                            <div v-for="(item, index) of getAdminPermissionListAdmin" :key="index">
                                <!-- 父级权限 -->
                                <el-checkbox :indeterminate="isIndeterminateArray[index]"
                                             v-model="checkAllArray[index]"
                                             @change="onClickTopAllCheck($event, index)"
                                >
                                    {{item.name}}
                                </el-checkbox>
                                <div style="margin: 20px 0;"></div>
                                <!-- 子级权限 -->
                                <el-checkbox-group v-model="getUserPermissionIds" @change="handleCheckedChildPermissionsChange($event, index)">
                                    <el-checkbox v-for="(child, childIndex) in item.permission"
                                                 :label="child.id"
                                                 :key="childIndex"
                                    >
                                        {{child.name}}
                                    </el-checkbox>
                                </el-checkbox-group>
                                <div style="margin: 15px 0;"></div>
    
                                <div style=" 500px;height: 1px;background: mediumvioletred"></div>
                            </div>
                        </el-tab-pane>
    data() {
          return {
              //    ======================================
              //    获取平台所有权限
              getAdminPermissionListAdmin: [],
              //    顶级-是否显示减号
              isIndeterminateArray: [],
              //    当前用户自己所有的权限
              getUserPermissionIds: [],
              //    ======================================
        }
    }
     onClickTopAllCheck(isChecked, index){
                console.log('api------------------------------------onClickTopAllCheck')
                console.log(isChecked, index)
                const self = this
                console.log(self.getAdminPermissionListAdmin[index])
                //  指定父级菜单:肯定不显示减号
                self.isIndeterminateArray[index] = false
                // 开始遍历指定index的父权限的子权限
                for(const item of self.getAdminPermissionListAdmin[index].permission) {
                    const childId = item.id
                    if (isChecked) {
                        //  true  说明 全选√
                        // 全选:已经不存在,则返回-1,则push到自己的权限种
                       if (self.getUserPermissionIds.indexOf(childId) === -1) {
                            self.getUserPermissionIds.push(childId)
                        }
                    } else {
                        // false 全不选,清空 当前顶级栏目下的自己所有的权限
                        const childIndex = self.getUserPermissionIds.indexOf(childId)
                        if (childIndex !== -1) {
                            //  不存在返回-1,   存在时清空
                            self.getUserPermissionIds.splice(childIndex, 1)
                        }
                    }
                }
                // console.log(self.allCheckedPermissionIds)
            }
    //  点击子集按钮
            onClickSonCheck(arr, index){
              console.log(arr, index)
                console.log('api-----------------onClickSonCheck---点击子集按钮')
                const that = this
                //  打印自己的权限
                console.log(that.getUserPermissionIds)
    
                console.log('自己拥有的权限:选择的索引为x:'+index)
                const newPermissionList = that.getAdminPermissionListAdmin[index].permission
                console.log(newPermissionList)
    
                //  遍历平台权限的所有权限
                let num = 0
                for (const child of newPermissionList) {
                    //  判断当前自己的权限,如果在父级中+1
                    if (that.getUserPermissionIds.indexOf(child.id) !== -1) {
                        num++
                    }
                }
                console.log(num)
                console.log('xxx')
                console.log(newPermissionList.length)
    
                // console.log('isIndeterminateArray:')
                // console.log(that.isIndeterminateArray[index])
                // console.log(that.checkAllArray[index])
                if (num === 0) {
                    console.log('000000000000000000000000000000000000000')
                    that.$set(that.isIndeterminateArray, index, false)
                    that.$set(that.checkAllArray, index, false)
                    //    如果一个权限也没有,则不显示横杠
                    // that.isIndeterminateArray[index] = false
                    // that.checkAllArray[index] = false
                } else if (num === newPermissionList.length) {
                    console.log('222222222222222222222222222222222222222222222222222222222222')
                    that.$set(that.isIndeterminateArray, index, false)
                    that.$set(that.checkAllArray, index, true)
                    // that.isIndeterminateArray[index] = false
                    // that.checkAllArray[index] = true
    
                    console.log('减号false,全选中true======')
                } else {
                    console.log('33333333333333333333333333333333333333333333333333333333333333')
                    that.$set(that.isIndeterminateArray, index, true)
                    that.$set(that.checkAllArray, index, false)
                    //    如果有权限,and 总数量不等于平台下的权限
                    // that.isIndeterminateArray[index] = true
                    // that.checkAllArray[index] = false
                    console.log('减号true,全选中false.......√')
                }
            }
  • 相关阅读:
    linux时间设置相关
    tcp/ip协议和http协议
    redis和memcache的比较
    How to Display Image In Picturebox in VC++ from Iplimage and Mat
    关于技术与业务的理解
    怎样写出好代码——设计原则
    怎么写出好代码——坏味道
    linux 用户管理
    浅谈ajax
    浅析闭包和内存泄露的问题
  • 原文地址:https://www.cnblogs.com/vip-deng-vip/p/12629995.html
Copyright © 2011-2022 走看看