116 lines
2.7 KiB
Vue
116 lines
2.7 KiB
Vue
<template>
|
|
<div v-role="permissionManagementRoleAccess" v-can="{ value: [corePermissionCodes.role.read, corePermissionCodes.permission.read], mode: 'and' }" class="permission-list">
|
|
<t-cell-group v-if="sortedPermissions.length" theme="card">
|
|
<t-swipe-cell
|
|
v-for="item in sortedPermissions"
|
|
:key="item.id"
|
|
class="item"
|
|
>
|
|
<t-cell
|
|
:title="item.name"
|
|
>
|
|
<template #note>
|
|
<span class="code" v-text="item.code"></span>
|
|
</template>
|
|
</t-cell>
|
|
<template #right>
|
|
<t-button v-can="corePermissionCodes.permission.delete" class="delete" theme="danger" @click="removePermission(item.id)">删除</t-button>
|
|
</template>
|
|
</t-swipe-cell>
|
|
</t-cell-group>
|
|
<t-empty v-else-if="!permissionStore.loading" description="暂无权限" />
|
|
<t-button v-can="corePermissionCodes.permission.create" class="add" theme="primary" type="button" @click="goCreate">
|
|
<template #icon>
|
|
<t-icon name="add" />
|
|
</template>
|
|
新增权限
|
|
</t-button>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { Permission } from "@/store/permissionSettingsStore";
|
|
import { usePermissionSettingsStore } from "@/store/permissionSettingsStore";
|
|
import { corePermissionCodes, permissionManagementRoleAccess } from "@/utils/gaoPermission";
|
|
|
|
defineOptions({
|
|
name: "PermissionList"
|
|
});
|
|
|
|
const router = useRouter();
|
|
const permissionStore = usePermissionSettingsStore();
|
|
const sortedPermissions = computed<Permission[]>(() => [...permissionStore.permissionList].sort((left, right) => left.code.localeCompare(right.code)));
|
|
|
|
async function goCreate(): Promise<void> {
|
|
await router.push("/management/permissions/items/create");
|
|
}
|
|
|
|
async function removePermission(id: string): Promise<void> {
|
|
await permissionStore.removePermission(id);
|
|
}
|
|
|
|
onMounted(async () => {
|
|
await permissionStore.loadAll();
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.permission-list {
|
|
padding: calc(var(--app-nav-height) + 1rem) 0 6rem 0;
|
|
|
|
.item {
|
|
:deep(.t-cell__title) {
|
|
flex: 1 1 0;
|
|
min-width: 0;
|
|
}
|
|
|
|
:deep(.t-cell__title-text) {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
:deep(.t-cell__note) {
|
|
flex: 0 1 auto;
|
|
min-width: 0;
|
|
max-width: 56%;
|
|
text-align: right;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
:deep(.t-cell__right) {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.code {
|
|
width: 100%;
|
|
display: block;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
&:last-child {
|
|
|
|
:deep(.t-cell:after) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.delete {
|
|
height: 100%;
|
|
padding: 0 1rem;
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
|
|
.add {
|
|
left: 1rem;
|
|
right: 1rem;
|
|
bottom: calc(.75rem + env(safe-area-inset-bottom, 0));
|
|
position: fixed;
|
|
}
|
|
}
|
|
|
|
</style>
|