#

luxiaotao1123

2024-09-20 f6ba6151e53a9cd4bd46f56edcb6d88ec86a92bd

#

 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;

 zy-acs-flow/src/page/agv/GridList.jsx

New file
@@ -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 />;
};

 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) => {