<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.......√')
}
}