blob: c069bdd6bc9212e34ebd0bb8a69447c956fc95a5 [file] [log] [blame]
<!-- Permission management permission -->
<template>
<div class="permitpermission-content">
<p class="tips">{{ $t('sourcePage.permitTips') }}</p>
<div class="permit-list">
<div class="permit-list-type">
<div class="box box1">
<el-checkbox v-model="allChecked.user" :indeterminate="user" :label="$t('sourcePage.userRelevance')" @change="handleCheckAllChange('user')"></el-checkbox>
</div>
<el-checkbox-group v-model="checked.user" class="wraper" @change="handleItemCheckedChange($event, 'user')">
<el-checkbox v-for="item in relationList.user" :label="item.id" :key="item.id">{{ item.label }}</el-checkbox>
</el-checkbox-group>
</div>
<div class="permit-list-type">
<div class="box box2">
<el-checkbox v-model="allChecked.role" :indeterminate="role" :label="$t('sourcePage.roleRelevance')" @change="handleCheckAllChange('role')"></el-checkbox>
</div>
<el-checkbox-group v-model="checked.role" @change="handleItemCheckedChange($event, 'role')">
<el-checkbox v-for="item in relationList.role" :label="item.id" :key="item.id" @change="changeItemCheck">{{ item.label }}</el-checkbox>
</el-checkbox-group>
</div>
<div class="permit-list-type">
<div class="box box3">
<el-checkbox v-model="allChecked.udf" :indeterminate="udf" :label="$t('sourcePage.udf')" @change="handleCheckAllChange('udf')"></el-checkbox>
</div>
<el-checkbox-group v-model="checked.udf" @change="handleItemCheckedChange($event, 'udf')">
<el-checkbox v-for="item in relationList.udf" :label="item.id" :key="item.id">{{ item.label }}</el-checkbox>
</el-checkbox-group>
</div>
<div class="permit-list-type">
<div class="box box4">
<el-checkbox v-model="allChecked.trigger" :indeterminate="trigger" :label="$t('sourcePage.trigger')" @change="handleCheckAllChange('trigger')"></el-checkbox>
</div>
<el-checkbox-group v-model="checked.trigger" @change="handleItemCheckedChange($event, 'trigger')">
<el-checkbox v-for="item in relationList.trigger" :label="item.id" :key="item.id">{{ item.label }}</el-checkbox>
</el-checkbox-group>
</div>
</div>
<div class="permit-btn">
<el-button size="small" @click="cancel">{{ $t('common.cancel') }}</el-button>
<el-button type="primary" size="small" @click="submit">{{ $t('common.save') }}</el-button>
</div>
</div>
</template>
<script>
import { useI18n } from 'vue-i18n';
import { ref, reactive, toRefs, computed, watch, watchEffect } from 'vue';
import api from '../../api/index';
import { useRoute } from 'vue-router';
import { useStore } from 'vuex';
import { ElMessage } from 'element-plus';
export default {
name: 'AuthManage',
props: {
// 当前角色
roleInfo: {
type: Object,
default: () => {},
},
// 登录的账号
baseInfo: {
type: Object,
default: () => {},
},
},
setup(props) {
const { t, locale } = useI18n();
let serverId = useRoute().params.serverid;
const store = useStore();
let canPrivilege = {};
watchEffect(() => {
canPrivilege = store.getters.canPrivilege;
});
let oldPrivileges = ref([]);
let allChecked = ref({
user: false,
role: false,
udf: false,
trigger: false,
});
let checked = ref({
user: [],
role: [],
udf: [],
trigger: [],
});
let isIndeterminate = reactive({
user: false,
role: false,
udf: false,
trigger: false,
});
let relationList = ref({
user: [
{
id: 'LIST_USER',
label: t('sourcePage.listUser'),
},
{
id: 'CREATE_USER',
label: t('sourcePage.createUser'),
},
{ id: 'DELETE_USER', label: t('sourcePage.deleteUser') },
{ id: 'MODIFY_PASSWORD', label: t('sourcePage.editPassword') },
{
id: 'GRANT_USER_PRIVILEGE',
label: t('sourcePage.grantPrivilege'),
},
{
id: 'REVOKE_USER_PRIVILEGE',
label: t('sourcePage.revertPrivilege'),
},
{
id: 'GRANT_USER_ROLE',
label: t('sourcePage.grantUserRole'),
},
{
id: 'REVOKE_USER_ROLE',
label: t('sourcePage.revokeUserRole'),
},
],
role: [
{
id: 'LIST_ROLE',
label: t('sourcePage.listRole'),
},
{ id: 'CREATE_ROLE', label: t('sourcePage.createRole') },
{ id: 'DELETE_ROLE', label: t('sourcePage.deleteRole') },
{
id: 'GRANT_ROLE_PRIVILEGE',
label: t('sourcePage.grantRolePrivilege'),
},
{
id: 'REVOKE_ROLE_PRIVILEGE',
label: t('sourcePage.revertRolePrivilege'),
},
],
udf: [
{
id: 'CREATE_FUNCTION',
label: t('sourcePage.createFunction'),
},
{
id: 'DROP_FUNCTION',
label: t('sourcePage.uninstallFunction'),
},
],
trigger: [
{ id: 'CREATE_TRIGGER', label: t('sourcePage.createTrigger') },
{ id: 'DROP_TRIGGER', label: t('sourcePage.uninstallTrigger') },
{ id: 'START_TRIGGER', label: t('sourcePage.startTrigger') },
{ id: 'STOP_TRIGGER', label: t('sourcePage.stopTrigger') },
],
});
let allPrivileges = computed(() => {
return {
user: relationList.value.user.map((d) => d.id),
role: relationList.value.role.map((d) => d.id),
udf: relationList.value.udf.map((d) => d.id),
trigger: relationList.value.trigger.map((d) => d.id),
};
});
watch(locale, () => {
relationList.value = {
user: [
{
id: 'LIST_USER',
label: t('sourcePage.listUser'),
},
{
id: 'CREATE_USER',
label: t('sourcePage.createUser'),
},
{ id: 'DELETE_USER', label: t('sourcePage.deleteUser') },
{ id: 'MODIFY_PASSWORD', label: t('sourcePage.editPassword') },
{
id: 'GRANT_USER_PRIVILEGE',
label: t('sourcePage.grantPrivilege'),
},
{
id: 'REVOKE_USER_PRIVILEGE',
label: t('sourcePage.revertPrivilege'),
},
{
id: 'GRANT_USER_ROLE',
label: t('sourcePage.grantUserRole'),
},
{
id: 'REVOKE_USER_ROLE',
label: t('sourcePage.revokeUserRole'),
},
],
role: [
{
id: 'LIST_ROLE',
label: t('sourcePage.listRole'),
},
{ id: 'CREATE_ROLE', label: t('sourcePage.createRole') },
{ id: 'DELETE_ROLE', label: t('sourcePage.deleteRole') },
{
id: 'GRANT_ROLE_PRIVILEGE',
label: t('sourcePage.grantRolePrivilege'),
},
{
id: 'REVOKE_ROLE_PRIVILEGE',
label: t('sourcePage.revertRolePrivilege'),
},
],
udf: [
{
id: 'CREATE_FUNCTION',
label: t('sourcePage.createFunction'),
},
{
id: 'DROP_FUNCTION',
label: t('sourcePage.uninstallFunction'),
},
],
trigger: [
{ id: 'CREATE_TRIGGER', label: t('sourcePage.createTrigger') },
{ id: 'DROP_TRIGGER', label: t('sourcePage.uninstallTrigger') },
{ id: 'START_TRIGGER', label: t('sourcePage.startTrigger') },
{ id: 'STOP_TRIGGER', label: t('sourcePage.stopTrigger') },
],
};
});
// 更新全选状态
let resetAllChecked = (type) => {
const checkedCount = checked.value[type].length;
isIndeterminate[type] = checked.value[type].length > 0 && checked.value[type].length < relationList.value[type].length;
allChecked.value[type] = checkedCount === relationList.value[type].length;
};
watch(
() => props.roleInfo.privileges,
() => {
let privileges = props.roleInfo.privileges;
oldPrivileges.value = privileges;
checked.value = {
user: [],
role: [],
udf: [],
trigger: [],
};
let typeArr = ['user', 'role', 'udf', 'trigger'];
privileges.forEach((e) => {
typeArr.forEach((i) => {
if (allPrivileges.value[i].includes(e)) {
checked.value[i].push(e);
}
});
});
typeArr.forEach((e) => resetAllChecked(e));
},
{ immediate: true }
);
let cancel = () => {
let typeArr = ['user', 'role', 'udf', 'trigger'];
checked.value = {
user: [],
role: [],
udf: [],
trigger: [],
};
oldPrivileges.value.forEach((e) => {
typeArr.forEach((i) => {
if (allPrivileges.value[i].includes(e)) {
checked.value[i].push(e);
}
});
});
typeArr.forEach((e) => resetAllChecked(e));
};
let submit = async () => {
let newPrivileges = Object.values(checked.value).reduce((total, curr) => total.concat(curr));
let cancelPrivileges = oldPrivileges?.value?.filter((d) => !newPrivileges.includes(d));
let addPrivileges = newPrivileges?.filter((d) => !oldPrivileges?.value.includes(d));
if (!canPrivilege.canGrantRolePrivilege && addPrivileges.length) {
ElMessage.error(t('sourcePage.noAuthTip'));
return;
}
if (!canPrivilege.canCancelRolePrivilege && cancelPrivileges.length) {
ElMessage.error(t('sourcePage.noAuthTip'));
return;
}
try {
await api.editAuthPrivilege({ serverId, roleName: props.roleInfo.roleName }, { cancelPrivileges, privileges: addPrivileges });
oldPrivileges.value = newPrivileges;
store.dispatch('fetchAllPrivileges', {
serverId: serverId,
userName: props.baseInfo.userName,
});
ElMessage.success(t('sourcePage.editSucceed'));
} catch (e) {
//
}
};
let handleCheckAllChange = (type) => {
if (allChecked.value[type]) {
checked.value[type] = relationList.value[type].map((d) => d.id);
} else {
checked.value[type] = [];
}
resetAllChecked(type);
};
let handleItemCheckedChange = (event, type) => {
checked.value[type] = event;
resetAllChecked(type);
};
return {
t,
locale,
allChecked,
allPrivileges,
relationList,
cancel,
submit,
checked,
...toRefs(isIndeterminate),
handleCheckAllChange,
handleItemCheckedChange,
resetAllChecked,
canPrivilege,
};
},
};
</script>
<style scoped lang="scss">
.permitpermission-content {
height: 100%;
.tips {
color: #fb5151ff;
font-size: 12px;
margin-bottom: 16px;
}
.permit-list {
display: flex;
height: calc(100% - 60px);
.permit-list-type {
flex: 1;
background: #fff;
border-radius: 4px;
border: 1px solid #eaecf0;
margin-right: 20px;
padding: 16px;
overflow: auto;
&:last-child {
margin-right: 0;
}
.el-checkbox {
padding-left: 10px;
height: 32px;
line-height: 32px;
display: block;
}
.box {
border-radius: 4px;
height: 40px;
line-height: 40px;
padding-left: 10px;
.el-checkbox {
padding-left: 0;
height: 40px;
line-height: 40px;
}
}
.box1 {
background: #fff9f3;
}
.box2 {
background: #f3fbff;
}
.box3 {
background: #fff3f3;
}
.box4 {
background: #f2fff6;
}
}
}
.permit-btn {
text-align: center;
margin-top: 10px;
}
}
</style>