<template>
|
<div class="container" v-loading="loading">
|
<div class="group">
|
<div class="label">
|
<label>{{ title }}</label>
|
</div>
|
<div class="details">
|
<div class="permissions-box" v-for="(permission, moduleName) in allPermissions" :key="moduleName">
|
<el-checkbox-group v-model="permissionModuleNames">
|
<div class="module-box">
|
<el-checkbox
|
@change="moduleCheck($event, permission, moduleName)"
|
class="module"
|
:value="moduleName"
|
:label="moduleName"
|
:indeterminate="halfPermissions.includes(moduleName)"
|
></el-checkbox>
|
</div>
|
</el-checkbox-group>
|
<el-checkbox-group v-model="checkedPermissionNames">
|
<ul class="permissions-ul">
|
<li class="permissions-li" v-for="(item, key) in permission" :key="key">
|
<el-checkbox
|
:value="item.name"
|
:label="item.name"
|
@change="singleCheck(item.id, permission, moduleName)"
|
></el-checkbox>
|
</li>
|
</ul>
|
</el-checkbox-group>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { onMounted, ref } from 'vue'
|
import AdminModel from '@/lin/model/admin'
|
|
export default {
|
props: ['id', 'title'],
|
setup(props, ctx) {
|
const loading = ref(false)
|
const allPermissions = ref({})
|
const halfPermissions = ref([]) // 该分类下的权限没有全选中
|
const permissionModuleIds = ref([]) // 权限组 集合 id
|
const permissionModuleNames = ref([]) // 权限组 module name
|
const checkedPermissionNames = ref([])
|
|
/**
|
* 初始化权限
|
* 通过判断有没有传入id，来判断当前页面是添加分组还是编辑分组
|
*/
|
const getGroupPermissions = async () => {
|
allPermissions.value = await AdminModel.getAllPermissions()
|
// 编辑分组权限
|
if (props.id) {
|
const res = await AdminModel.getOneGroup(props.id)
|
let temp = []
|
const cache = {}
|
res.permissions.forEach(v => {
|
permissionModuleIds.value.push(v.id)
|
checkedPermissionNames.value.push(v.name)
|
temp.push(v.module)
|
// 每个module拥有权限个数
|
if (!cache[v.module]) {
|
cache[v.module] = 1
|
} else {
|
cache[v.module]++
|
}
|
})
|
// 去重
|
temp = Array.from(new Set(temp))
|
// 半选
|
temp.forEach(item => {
|
if (allPermissions.value[item].length !== cache[item]) {
|
halfPermissions.value.push(item)
|
}
|
})
|
permissionModuleNames.value = Array.from(new Set(temp))
|
}
|
ctx.emit('getCacheAuthIds', permissionModuleIds.value.slice())
|
ctx.emit('updatePermissions', permissionModuleIds.value)
|
ctx.emit('updateAllPermissions', allPermissions.value)
|
}
|
|
onMounted(async () => {
|
try {
|
loading.value = true
|
await getGroupPermissions()
|
loading.value = false
|
} catch (e) {
|
loading.value = false
|
console.error(e)
|
}
|
})
|
|
/**
|
* 权限批量选中（一个module）
|
*/
|
const moduleCheck = (checked, ids, moduleName) => {
|
const _ids = ids.map(item => item.id)
|
const checkedNames = ids.map(item => item.name)
|
if (checked) {
|
permissionModuleIds.value = Array.from(new Set(permissionModuleIds.value.concat(_ids)))
|
checkedPermissionNames.value = Array.from(new Set(checkedPermissionNames.value.concat(checkedNames)))
|
if (!permissionModuleNames.value.includes(moduleName)) {
|
permissionModuleNames.value.push(moduleName)
|
}
|
} else {
|
permissionModuleIds.value = permissionModuleIds.value.filter(v => !_ids.includes(v))
|
checkedPermissionNames.value = checkedPermissionNames.value.filter(v => !checkedNames.includes(v))
|
permissionModuleNames.value = permissionModuleNames.value.filter(v => v !== moduleName)
|
}
|
|
console.log('permissionModuleIds')
|
console.log(permissionModuleIds)
|
console.log('checkedPermissionNames')
|
console.log(checkedPermissionNames)
|
halfPermissions.value = halfPermissions.value.filter(v => v !== moduleName)
|
ctx.emit('updatePermissions', permissionModuleIds.value)
|
}
|
|
/**
|
* 单选某一权限
|
*/
|
const singleCheck = (id, permission, moduleName) => {
|
|
const _ids = permission.map(item => item.id)
|
let count = 0
|
const index = permissionModuleIds.value.indexOf(id)
|
if (index === -1) {
|
permissionModuleIds.value.push(id)
|
} else {
|
permissionModuleIds.value.splice(index, 1)
|
}
|
_ids.forEach(item => {
|
if (permissionModuleIds.value.indexOf(item) > -1) {
|
count++
|
}
|
// 全选状态
|
if (_ids.length === count) {
|
permissionModuleNames.value.push(moduleName)
|
halfPermissions.value = halfPermissions.value.filter(v => v !== moduleName)
|
} else if (count === 0) {
|
// 未选中状态
|
permissionModuleNames.value = permissionModuleNames.value.filter(v => v !== moduleName)
|
halfPermissions.value = halfPermissions.value.filter(v => v !== moduleName)
|
} else {
|
// 半选状态
|
permissionModuleNames.value = permissionModuleNames.value.filter(v => v !== moduleName)
|
if (!halfPermissions.value.includes(moduleName)) {
|
halfPermissions.value.push(moduleName)
|
}
|
}
|
})
|
ctx.emit('updatePermissions', permissionModuleIds.value)
|
}
|
|
return {
|
loading,
|
moduleCheck,
|
singleCheck,
|
allPermissions,
|
halfPermissions,
|
getGroupPermissions,
|
permissionModuleIds,
|
permissionModuleNames,
|
checkedPermissionNames,
|
}
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.group {
|
margin-left: -95px;
|
|
.label {
|
margin-bottom: 10px;
|
width: 70px;
|
margin-left: 20px;
|
float: left;
|
font-weight: 500;
|
|
label {
|
color: #333333;
|
font-size: 14px;
|
font-weight: 500;
|
height: 20px;
|
line-height: 20px;
|
}
|
|
.necessary {
|
color: #e46a76;
|
font-size: 14px;
|
font-weight: 500px;
|
margin-right: 5px;
|
font-size: 16px;
|
}
|
}
|
|
.details {
|
display: inline-block;
|
width: calc(100% - 95px);
|
margin-top: 5px;
|
margin-left: 5px;
|
|
.text-input {
|
height: 40px;
|
width: 780px;
|
background: rgba(255, 255, 255, 1);
|
border-radius: 2px;
|
border: 1px solid #dee2e6;
|
text-indent: 20px;
|
|
&::placeholder {
|
font-size: 14px;
|
font-weight: 400;
|
color: #c4c9d2;
|
text-indent: 20px;
|
}
|
}
|
|
.permissions-box {
|
.module {
|
height: 20px;
|
font-size: 13px;
|
color: #45526b;
|
line-height: 20px;
|
margin-bottom: 10px;
|
}
|
|
.permissions-ul {
|
display: flex;
|
flex-wrap: wrap;
|
justify-content: space-between;
|
padding: 20px 20px 0;
|
background: #f5f5f6;
|
margin-bottom: 20px;
|
|
.permissions-li {
|
width: 150px;
|
height: 20px;
|
line-height: 20px;
|
margin-bottom: 20px;
|
display: flex;
|
flex-direction: row;
|
justify-content: flex-start;
|
vertical-align: text-top;
|
margin-right: 10px;
|
|
.check {
|
transform: translateY(2px);
|
margin-right: 5px;
|
}
|
|
.permissions-name {
|
height: 20px;
|
font-size: 14px;
|
font-weight: 400;
|
color: #596c8e;
|
line-height: 20px;
|
margin-right: 20px;
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
