87 lines
3.1 KiB
JavaScript
87 lines
3.1 KiB
JavaScript
import Add from "@mui/icons-material/Add";
|
|
import SyncOutlined from "@mui/icons-material/SyncOutlined";
|
|
import { DataState } from "@/shared/ui/DataState.jsx";
|
|
import {
|
|
AdminActionIconButton,
|
|
AdminListBody,
|
|
AdminListPage,
|
|
AdminListToolbar,
|
|
AdminSearchBox
|
|
} from "@/shared/ui/AdminListLayout.jsx";
|
|
import { MenuFormDrawer } from "@/features/menus/components/MenuFormDrawer.jsx";
|
|
import { MenuTable } from "@/features/menus/components/MenuTable.jsx";
|
|
import { PermissionFormDrawer } from "@/features/menus/components/PermissionFormDrawer.jsx";
|
|
import { PermissionTable } from "@/features/menus/components/PermissionTable.jsx";
|
|
import { useMenusPage } from "@/features/menus/hooks/useMenusPage.js";
|
|
|
|
export function MenuManagementPage() {
|
|
const page = useMenusPage();
|
|
|
|
return (
|
|
<>
|
|
<AdminListPage>
|
|
<AdminListToolbar
|
|
filters={<AdminSearchBox value={page.query} onChange={page.changeQuery} placeholder="搜索菜单、权限码..." />}
|
|
actions={(
|
|
<>
|
|
{page.abilities.canSyncPermission ? (
|
|
<AdminActionIconButton label="同步权限" onClick={page.syncDefaultPermissions}>
|
|
<SyncOutlined fontSize="small" />
|
|
</AdminActionIconButton>
|
|
) : null}
|
|
{page.abilities.canCreatePermission ? (
|
|
<AdminActionIconButton label="新增权限" onClick={page.openCreatePermission}>
|
|
<Add fontSize="small" />
|
|
</AdminActionIconButton>
|
|
) : null}
|
|
{page.abilities.canCreateMenu ? (
|
|
<AdminActionIconButton label="新增菜单" primary onClick={page.openCreateMenu}>
|
|
<Add fontSize="small" />
|
|
</AdminActionIconButton>
|
|
) : null}
|
|
</>
|
|
)}
|
|
/>
|
|
|
|
<DataState error={page.error} loading={page.loading} onRetry={page.reload}>
|
|
<AdminListBody>
|
|
<section className="permission-page-grid">
|
|
<MenuTable
|
|
abilities={page.abilities}
|
|
flatMenus={page.flatMenus}
|
|
onEdit={page.openEditMenu}
|
|
onReorder={page.reorderMenu}
|
|
onRemove={page.removeMenu}
|
|
onToggleVisible={page.toggleVisible}
|
|
/>
|
|
<PermissionTable
|
|
abilities={page.abilities}
|
|
onEdit={page.openEditPermission}
|
|
onRemove={page.removePermission}
|
|
permissions={page.permissions}
|
|
/>
|
|
</section>
|
|
</AdminListBody>
|
|
</DataState>
|
|
</AdminListPage>
|
|
|
|
<MenuFormDrawer
|
|
editingMenu={page.editingMenu}
|
|
form={page.menuForm}
|
|
onClose={page.closeMenuDrawer}
|
|
onSubmit={page.submitMenu}
|
|
open={page.menuDrawerOpen}
|
|
setForm={page.setMenuForm}
|
|
/>
|
|
<PermissionFormDrawer
|
|
editingPermission={page.editingPermission}
|
|
form={page.permissionForm}
|
|
onClose={page.closePermissionDrawer}
|
|
onSubmit={page.submitPermission}
|
|
open={page.permissionDrawerOpen}
|
|
setForm={page.setPermissionForm}
|
|
/>
|
|
</>
|
|
);
|
|
}
|