From f6ba6151e53a9cd4bd46f56edcb6d88ec86a92bd Mon Sep 17 00:00:00 2001 From: luxiaotao1123 <t1341870251@163.com> Date: 星期五, 20 九月 2024 09:32:37 +0800 Subject: [PATCH] # --- zy-acs-flow/src/page/agv/AgvList.jsx | 59 ++++++++++++++++++++++++++++- zy-acs-flow/src/page/agv/GridList.jsx | 55 +++++++++++++++++++++++++++ zy-acs-flow/src/page/agv/index.jsx | 5 +- 3 files changed, 114 insertions(+), 5 deletions(-) diff --git a/zy-acs-flow/src/page/agv/AgvList.jsx b/zy-acs-flow/src/page/agv/AgvList.jsx index 7a9a0c0..4f03c6c 100644 --- a/zy-acs-flow/src/page/agv/AgvList.jsx +++ b/zy-acs-flow/src/page/agv/AgvList.jsx @@ -30,6 +30,10 @@ ReferenceArrayInput, AutocompleteInput, DeleteButton, + useGetIdentity, + ListBase, + Title, + Pagination, } from 'react-admin'; import { Box, Typography, Card, Stack } from '@mui/material'; import { styled } from '@mui/material/styles'; @@ -42,6 +46,57 @@ import MyField from "../components/MyField"; import { PAGE_DRAWER_WIDTH, OPERATE_MODE } from '@/config/setting'; import * as Common from '@/utils/common'; +import { ImageList } from "./GridList"; + + +export const AgvGrid = () => { + const { identity } = useGetIdentity(); + if (!identity) return null; + const [createDialog, setCreateDialog] = useState(false); + + return ( + <> + <ListBase perPage={50} sort={{ field: "uuid", order: "asc" }}> + <AgvGridLayout + setCreateDialog={setCreateDialog} + /> + </ListBase> + <AgvCreate + open={createDialog} + setOpen={setCreateDialog} + /> + </> + ) +} + +const AgvGridLayout = (props) => { + const { data, isPending, filterValues } = useListContext(); + const hasFilters = filterValues && Object.keys(filterValues).length > 0; + + if (isPending) return null; + if (!data?.length && !hasFilters) return <EmptyData onClick={() => { props.setCreateDialog(true) }} />; + + return ( + <Stack direction="row" component="div"> + <Stack sx={{ width: '100%' }}> + <Title title={'Companies'} /> + <ListToolbar actions={( + <TopToolbar> + <FilterButton /> + <MyCreateButton onClick={() => { setCreateDialog(true) }} /> + <MyExportButton /> + </TopToolbar> + )} /> + <ImageList /> + <Pagination rowsPerPageOptions={[10, 25, 50, 100]} /> + </Stack> + </Stack> + ); +} + + + + const StyledDatagrid = styled(DatagridConfigurable)(({ theme }) => ({ '& .css-1vooibu-MuiSvgIcon-root': { @@ -92,7 +147,7 @@ />, ] -const AgvList = () => { +export const AgvList = () => { const translate = useTranslate(); const [createDialog, setCreateDialog] = useState(false); @@ -174,5 +229,3 @@ </Box> ) } - -export default AgvList; diff --git a/zy-acs-flow/src/page/agv/GridList.jsx b/zy-acs-flow/src/page/agv/GridList.jsx new file mode 100644 index 0000000..be1e4b1 --- /dev/null +++ b/zy-acs-flow/src/page/agv/GridList.jsx @@ -0,0 +1,55 @@ +import * as React from 'react'; +import { Box, Paper, Typography } from '@mui/material'; +import { RecordContextProvider, useListContext } from 'react-admin'; + +// import { CompanyCard } from './CompanyCard'; + +const times = (nbChildren, fn) => Array.from({ length: nbChildren }, (_, key) => fn(key)); + +const LoadingGridList = () => ( + <Box display="flex" flexWrap="wrap" width={1008} gap={1}> + {times(15, key => ( + <Paper + sx={{ + height: 200, + width: 194, + display: 'flex', + flexDirection: 'column', + backgroundColor: 'grey[200]', + }} + key={key} + /> + ))} + </Box> +); + +// const LoadedGridList = () => { +// const { data, error, isPending } = useListContext(); + +// if (isPending || error) return null; + +// return ( +// <Box +// width="100%" +// gap={1} +// display="grid" +// gridTemplateColumns="repeat(auto-fill, minmax(180px, 1fr))" +// > +// {data.map(record => ( +// <RecordContextProvider key={record.id} value={record}> +// <CompanyCard /> +// </RecordContextProvider> +// ))} + +// {data.length === 0 && ( +// <Typography p={2}>No companies found</Typography> +// )} +// </Box> +// ); +// }; + +export const ImageList = () => { + const { isPending } = useListContext(); + // return isPending ? <LoadingGridList /> : <LoadedGridList />; + return <LoadingGridList />; +}; diff --git a/zy-acs-flow/src/page/agv/index.jsx b/zy-acs-flow/src/page/agv/index.jsx index 327e7c7..6919a02 100644 --- a/zy-acs-flow/src/page/agv/index.jsx +++ b/zy-acs-flow/src/page/agv/index.jsx @@ -5,11 +5,12 @@ ShowGuesser, } from "react-admin"; -import AgvList from "./AgvList"; +import { AgvList, AgvGrid } from "./AgvList"; import AgvEdit from "./AgvEdit"; export default { - list: AgvList, + // list: AgvList, + list: AgvGrid, edit: AgvEdit, show: ShowGuesser, recordRepresentation: (record) => { -- Gitblit v1.9.1