From 56e8529fc6ef8fee3d7494b24f33165cb79e4cc2 Mon Sep 17 00:00:00 2001 From: luxiaotao1123 <t1341870251@163.com> Date: 星期一, 07 十月 2024 09:43:00 +0800 Subject: [PATCH] # --- zy-acs-flow/src/page/mission/MissionResend.jsx | 229 +++++++++++++++++++++++++++++++++++++++++++++++++++++++-- 1 files changed, 220 insertions(+), 9 deletions(-) diff --git a/zy-acs-flow/src/page/mission/MissionResend.jsx b/zy-acs-flow/src/page/mission/MissionResend.jsx index 09a2a2b..1d9518f 100644 --- a/zy-acs-flow/src/page/mission/MissionResend.jsx +++ b/zy-acs-flow/src/page/mission/MissionResend.jsx @@ -1,17 +1,12 @@ import React, { useState, useRef, useEffect, useMemo, useCallback } from "react"; import { useTranslate, - EditButton, - ReferenceArrayField, - ReferenceField, - ReferenceManyField, ShowBase, useDataProvider, useNotify, useRecordContext, useRedirect, useRefresh, - useUpdate, } from 'react-admin'; import { Box, @@ -24,14 +19,22 @@ Typography, Avatar, useTheme, + TableContainer, + Table, + TableBody, + TableCell, + TableHead, + TableRow, + Paper, + Toolbar, + Tooltip, + Checkbox, + IconButton, } from '@mui/material'; +import { alpha } from '@mui/material/styles'; import { Link } from 'react-router-dom'; import DialogCloseButton from "../components/DialogCloseButton"; -import { blueGrey, blue } from '@mui/material/colors'; -import MoveToInboxIcon from '@mui/icons-material/MoveToInbox'; import { format } from 'date-fns'; -import { TaskList } from "./TaskList"; -import { ActionsIterator } from "../action/ActionsIterator"; import ArrowBackIosNewIcon from '@mui/icons-material/ArrowBackIosNew'; const MissionResend = ({ open, id }) => { @@ -133,6 +136,8 @@ </Box> )} + <ActionTable actionIds={record?.actionIds} /> + </Box> </Box> </Stack> @@ -140,4 +145,210 @@ ) }; +const headCells = [ + { + id: 'name', + numeric: false, + disablePadding: true, + label: 'Dessert聽(100g serving)', + }, + { + id: 'calories', + numeric: true, + disablePadding: false, + label: 'Calories', + }, + { + id: 'fat', + numeric: true, + disablePadding: false, + label: 'Fat聽(g)', + }, + { + id: 'carbs', + numeric: true, + disablePadding: false, + label: 'Carbs聽(g)', + }, + { + id: 'protein', + numeric: true, + disablePadding: false, + label: 'Protein聽(g)', + }, +]; + +const ActionTable = ({ actionIds }) => { + const dataProvider = useDataProvider(); + const [actions, setActions] = useState([]); + const [selected, setSelected] = React.useState([]); + + useEffect(() => { + if (actionIds?.length > 0) { + dataProvider.getMany('action', { ids: actionIds }).then(res => { + if (res.data?.length > 0) { + setActions(res.data); + } + }) + } + }, [actionIds]) + + const handleSelectAllClick = (event) => { + if (event.target.checked) { + const newSelected = actions.map((n) => n.id); + setSelected(newSelected); + return; + } + setSelected([]); + }; + + const handleClick = (event, id) => { + const selectedIndex = selected.indexOf(id); + let newSelected = []; + + if (selectedIndex === -1) { + newSelected = newSelected.concat(selected, id); + } else if (selectedIndex === 0) { + newSelected = newSelected.concat(selected.slice(1)); + } else if (selectedIndex === selected.length - 1) { + newSelected = newSelected.concat(selected.slice(0, -1)); + } else if (selectedIndex > 0) { + newSelected = newSelected.concat( + selected.slice(0, selectedIndex), + selected.slice(selectedIndex + 1), + ); + } + setSelected(newSelected); + }; + + + return ( + <> + <Box sx={{ width: '100%' }}> + <Paper sx={{ width: '100%', mb: 2 }}> + <Toolbar + sx={[ + { + pl: { sm: 2 }, + pr: { xs: 1, sm: 1 }, + }, + selected.length > 0 && { + bgcolor: (theme) => + alpha(theme.palette.primary.main, theme.palette.action.activatedOpacity), + }, + ]} + > + {selected.length > 0 ? ( + <Typography + sx={{ flex: '1 1 100%' }} + color="inherit" + variant="subtitle1" + component="div" + > + {selected.length} selected + </Typography> + ) : ( + <Typography + sx={{ flex: '1 1 100%' }} + variant="h6" + id="tableTitle" + component="div" + > + Actions + </Typography> + )} + {selected.length > 0 && ( + <Tooltip title="Delete"> + <IconButton> + <Button + onClick={() => { + alert('clicked'); + }} + > + ss + </Button> + </IconButton> + </Tooltip> + )} + </Toolbar> + <TableContainer> + <Table + sx={{ minWidth: 750 }} + aria-labelledby="tableTitle" + // size={dense ? 'small' : 'medium'} + size="small" + > + <TableHead> + <TableRow> + <TableCell padding="checkbox"> + <Checkbox + color="primary" + indeterminate={selected.length > 0 && selected.length < actions.length} + checked={actions.length > 0 && selected.length === actions.length} + onChange={handleSelectAllClick} + inputProps={{ + 'aria-label': 'select all desserts', + }} + /> + </TableCell> + {headCells.map((headCell) => ( + <TableCell + key={headCell.id} + align={headCell.numeric ? 'right' : 'left'} + padding={headCell.disablePadding ? 'none' : 'normal'} + > + {headCell.label} + </TableCell> + ))} + </TableRow> + </TableHead> + <TableBody> + {actions?.map((row, index) => { + const isItemSelected = selected.includes(row.id); + const labelId = `action-table-checkbox-${index}`; + + return ( + <TableRow + hover + onClick={(event) => handleClick(event, row.id)} + role="checkbox" + aria-checked={isItemSelected} + tabIndex={-1} + key={row.id} + selected={isItemSelected} + sx={{ cursor: 'pointer' }} + > + <TableCell padding="checkbox"> + <Checkbox + color="primary" + checked={isItemSelected} + inputProps={{ + 'aria-labelledby': labelId, + }} + /> + </TableCell> + <TableCell + component="th" + id={labelId} + scope="row" + padding="none" + > + {row.name} + </TableCell> + <TableCell align="right">{row.calories}</TableCell> + <TableCell align="right">{row.fat}</TableCell> + <TableCell align="right">{row.carbs}</TableCell> + <TableCell align="right">{row.protein}</TableCell> + </TableRow> + ); + })} + </TableBody> + </Table> + </TableContainer> + </Paper> + </Box> + </> + ) +} + export default MissionResend; \ No newline at end of file -- Gitblit v1.9.1