116 lines
3.5 KiB
Vue
116 lines
3.5 KiB
Vue
<template>
|
|
<div
|
|
v-can="{ value: [corePermissionCodes.role.read, corePermissionCodes.permission.read], mode: 'and' }"
|
|
class="permission-settings"
|
|
>
|
|
<t-cell-group title="权限配置" theme="card">
|
|
<t-cell v-can="corePermissionCodes.role.read" title="角色管理" :note="`${permissionStore.roleList.length} 个角色`" arrow hover @click="go('/management/permissions/roles')">
|
|
<template #leftIcon>
|
|
<t-icon name="user-setting" size="1.75rem" />
|
|
</template>
|
|
</t-cell>
|
|
<t-cell v-can="corePermissionCodes.permission.read" title="权限管理" :note="`${permissionStore.permissionList.length} 个权限`" arrow hover @click="go('/management/permissions/items')">
|
|
<template #leftIcon>
|
|
<t-icon name="secured" size="1.75rem" />
|
|
</template>
|
|
</t-cell>
|
|
<t-cell v-can="rolePermissionAssignAccess" title="角色权限授权" note="为角色分配可用权限" arrow hover @click="go('/management/permissions/assign')">
|
|
<template #leftIcon>
|
|
<t-icon name="user-checked" size="1.75rem" />
|
|
</template>
|
|
</t-cell>
|
|
<t-cell v-can="corePermissionCodes.userRole.read" title="用户角色授权" note="为用户分配业务角色" arrow hover @click="go('/management/permissions/user-roles')">
|
|
<template #leftIcon>
|
|
<t-icon name="usergroup" size="1.75rem" />
|
|
</template>
|
|
</t-cell>
|
|
</t-cell-group>
|
|
<div class="struct">
|
|
<div class="header">
|
|
<span class="title">当前角色结构</span>
|
|
<span class="tips orange">上级角色包含子级角色所有权限</span>
|
|
</div>
|
|
<t-cell-group theme="card">
|
|
<t-cell
|
|
v-can="{ value: [corePermissionCodes.role.read, corePermissionCodes.permission.read], mode: 'and' }"
|
|
v-for="item in permissionStore.roleTree"
|
|
:key="item.id"
|
|
:note="`${item.permissionIdList.length} 项权限`"
|
|
arrow
|
|
hover
|
|
@click="goAssign(item.id)"
|
|
>
|
|
<template #title>
|
|
<div class="title" v-text="item.name" :style="{ paddingLeft: `${item.level * 1.25}rem` }" />
|
|
</template>
|
|
</t-cell>
|
|
</t-cell-group>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { usePermissionSettingsStore } from "@/store/permissionSettingsStore";
|
|
import { corePermissionCodes } from "@/utils/permission";
|
|
|
|
defineOptions({
|
|
name: "PermissionSettings"
|
|
});
|
|
|
|
const router = useRouter();
|
|
const permissionStore = usePermissionSettingsStore();
|
|
const rolePermissionAssignAccess = {
|
|
value: [
|
|
corePermissionCodes.role.read,
|
|
corePermissionCodes.permission.read,
|
|
corePermissionCodes.rolePermission.read,
|
|
corePermissionCodes.roleRelation.read
|
|
],
|
|
mode: "and"
|
|
} as const;
|
|
|
|
async function go(path: string): Promise<void> {
|
|
await router.push(path);
|
|
}
|
|
|
|
async function goAssign(roleId: string): Promise<void> {
|
|
await router.push({
|
|
path: "/management/permissions/assign",
|
|
query: {
|
|
roleId
|
|
}
|
|
});
|
|
}
|
|
|
|
onMounted(async () => {
|
|
await permissionStore.loadAll();
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.permission-settings {
|
|
gap: 1rem;
|
|
padding: calc(var(--app-nav-height) + 1rem) 0 1rem 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.struct {
|
|
|
|
.header {
|
|
display: flex;
|
|
padding: 0 var(--td-cell-group-title-padding-left, 16px);
|
|
font-size: var(--td-cell-group-title-font-size, 14px);
|
|
text-align: left;
|
|
background: var(--td-cell-group-title-bg-color, var(--td-bg-color-secondarycontainer, var(--td-gray-color-1, #f3f3f3)));
|
|
line-height: var(--td-cell-group-title-line-height, 45px);
|
|
justify-content: space-between;
|
|
|
|
.title {
|
|
color: var(--td-cell-group-title-color, var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, 0.4))));
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|