From 992b4d6c4b964082adfabbef2f44dc50698ce8ed Mon Sep 17 00:00:00 2001
From: vincentlu <t1341870251@gmail.com>
Date: 星期五, 14 二月 2025 11:18:43 +0800
Subject: [PATCH] #
---
rsf-admin/src/page/role/AssignPermissions.jsx | 71 +++++++++++++++++++++++++----------
1 files changed, 51 insertions(+), 20 deletions(-)
diff --git a/rsf-admin/src/page/role/AssignPermissions.jsx b/rsf-admin/src/page/role/AssignPermissions.jsx
index df0eae5..134163b 100644
--- a/rsf-admin/src/page/role/AssignPermissions.jsx
+++ b/rsf-admin/src/page/role/AssignPermissions.jsx
@@ -3,7 +3,7 @@
useTranslate,
useNotify,
} from 'react-admin';
-import { Box, Button, Card, Stack, CardContent } from '@mui/material';
+import { Box, Button, Card, Stack, CardContent, Skeleton } from '@mui/material';
import { SimpleTreeView, TreeItem, RichTreeView, useTreeViewApiRef } from '@mui/x-tree-view';
import SaveIcon from '@mui/icons-material/Save';
import request from '@/utils/request'
@@ -15,10 +15,11 @@
const translate = useTranslate();
const notify = useNotify();
- const [treeData, setTreeData] = React.useState([]);
- const [selectedItems, setSelectedItems] = React.useState([]);
- const [expandedItems, setExpandedItems] = React.useState([]);
- const toggledItemRef = React.useRef({});
+ const [loading, setLoading] = useState(false);
+ const [treeData, setTreeData] = useState([]);
+ const [selectedItems, setSelectedItems] = useState([]);
+ const [expandedItems, setExpandedItems] = useState([]);
+ const toggledItemRef = useRef({});
const apiRef = useTreeViewApiRef();
useEffect(() => {
@@ -45,7 +46,9 @@
} else {
notify(res.data.msg, { type: 'error' });
}
+ setLoading(false);
}
+ setLoading(true);
setTimeout(() => {
http();
}, 200);
@@ -197,22 +200,27 @@
boxShadow: '0 1px 2px rgba(0, 0, 0, 0.2)',
backgroundColor: 'background.paper',
}}>
- <RichTreeView
- multiSelect
- checkboxSelection
- apiRef={apiRef}
- items={treeData}
- selectedItems={selectedItems}
- onSelectedItemsChange={handleSelectedItemsChange}
- onItemSelectionToggle={(event, itemId, isSelected) => {
- toggledItemRef.current[itemId] = isSelected;
- }}
+ {loading ? (
+ <SkeletonBox />
+ ) : (
+ <RichTreeView
+ multiSelect
+ checkboxSelection
+ apiRef={apiRef}
+ items={treeData}
+ selectedItems={selectedItems}
+ onSelectedItemsChange={handleSelectedItemsChange}
+ onItemSelectionToggle={(event, itemId, isSelected) => {
+ toggledItemRef.current[itemId] = isSelected;
+ }}
- expandedItems={expandedItems}
- onExpandedItemsChange={(event, itemIds) => {
- setExpandedItems(itemIds);
- }}
- />
+ expandedItems={expandedItems}
+ onExpandedItemsChange={(event, itemIds) => {
+ setExpandedItems(itemIds);
+ }}
+ />
+ )}
+
</Box>
</Box>
<Box sx={{
@@ -326,4 +334,27 @@
return childrenIds;
};
+const SkeletonBox = () => {
+ return (
+ <Stack spacing={1}>
+ <Skeleton variant="rounded" width={200} height={20} />
+ <Skeleton variant="rounded" width={200} height={20} style={{ marginLeft: '50px' }} />
+ <Skeleton variant="rounded" width={200} height={20} style={{ marginLeft: '50px' }} />
+ <Skeleton variant="rounded" width={200} height={20} style={{ marginLeft: '50px' }} />
+ <Skeleton variant="rounded" width={200} height={20} />
+ <Skeleton variant="rounded" width={200} height={20} style={{ marginLeft: '50px' }} />
+ <Skeleton variant="rounded" width={200} height={20} style={{ marginLeft: '50px' }} />
+ <Skeleton variant="rounded" width={200} height={20} style={{ marginLeft: '50px' }} />
+ <Skeleton variant="rounded" width={200} height={20} />
+ <Skeleton variant="rounded" width={200} height={20} style={{ marginLeft: '50px' }} />
+ <Skeleton variant="rounded" width={200} height={20} style={{ marginLeft: '50px' }} />
+ <Skeleton variant="rounded" width={200} height={20} style={{ marginLeft: '50px' }} />
+ <Skeleton variant="rounded" width={200} height={20} />
+ <Skeleton variant="rounded" width={200} height={20} style={{ marginLeft: '50px' }} />
+ <Skeleton variant="rounded" width={200} height={20} style={{ marginLeft: '50px' }} />
+ <Skeleton variant="rounded" width={200} height={20} style={{ marginLeft: '50px' }} />
+ </Stack>
+ )
+}
+
export default AssignPermissions;
\ No newline at end of file
--
Gitblit v1.9.1