權限分配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="width: 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.......√')
            }
        }