From 3900916ffa698a8d057ab9ee910b292657b536ae Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期一, 07 十月 2024 09:42:57 +0800
Subject: [PATCH] #
---
zy-acs-flow/src/page/mission/demo.jsx | 365 ++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 365 insertions(+), 0 deletions(-)
diff --git a/zy-acs-flow/src/page/mission/demo.jsx b/zy-acs-flow/src/page/mission/demo.jsx
new file mode 100644
index 0000000..890392a
--- /dev/null
+++ b/zy-acs-flow/src/page/mission/demo.jsx
@@ -0,0 +1,365 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { alpha } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableHead from '@mui/material/TableHead';
+import TablePagination from '@mui/material/TablePagination';
+import TableRow from '@mui/material/TableRow';
+import TableSortLabel from '@mui/material/TableSortLabel';
+import Toolbar from '@mui/material/Toolbar';
+import Typography from '@mui/material/Typography';
+import Paper from '@mui/material/Paper';
+import Checkbox from '@mui/material/Checkbox';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Switch from '@mui/material/Switch';
+import DeleteIcon from '@mui/icons-material/Delete';
+import FilterListIcon from '@mui/icons-material/FilterList';
+import { visuallyHidden } from '@mui/utils';
+
+function createData(id, name, calories, fat, carbs, protein) {
+ return {
+ id,
+ name,
+ calories,
+ fat,
+ carbs,
+ protein,
+ };
+}
+
+const rows = [
+ createData(1, 'Cupcake', 305, 3.7, 67, 4.3),
+ createData(2, 'Donut', 452, 25.0, 51, 4.9),
+ createData(3, 'Eclair', 262, 16.0, 24, 6.0),
+ createData(4, 'Frozen yoghurt', 159, 6.0, 24, 4.0),
+ createData(5, 'Gingerbread', 356, 16.0, 49, 3.9),
+ createData(6, 'Honeycomb', 408, 3.2, 87, 6.5),
+ createData(7, 'Ice cream sandwich', 237, 9.0, 37, 4.3),
+ createData(8, 'Jelly Bean', 375, 0.0, 94, 0.0),
+ createData(9, 'KitKat', 518, 26.0, 65, 7.0),
+ createData(10, 'Lollipop', 392, 0.2, 98, 0.0),
+ createData(11, 'Marshmallow', 318, 0, 81, 2.0),
+ createData(12, 'Nougat', 360, 19.0, 9, 37.0),
+ createData(13, 'Oreo', 437, 18.0, 63, 4.0),
+];
+
+function descendingComparator(a, b, orderBy) {
+ if (b[orderBy] < a[orderBy]) {
+ return -1;
+ }
+ if (b[orderBy] > a[orderBy]) {
+ return 1;
+ }
+ return 0;
+}
+
+function getComparator(order, orderBy) {
+ return order === 'desc'
+ ? (a, b) => descendingComparator(a, b, orderBy)
+ : (a, b) => -descendingComparator(a, b, orderBy);
+}
+
+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)',
+ },
+];
+
+function EnhancedTableHead(props) {
+ const { onSelectAllClick, order, orderBy, numSelected, rowCount, onRequestSort } =
+ props;
+ const createSortHandler = (property) => (event) => {
+ onRequestSort(event, property);
+ };
+
+ return (
+ <TableHead>
+ <TableRow>
+ <TableCell padding="checkbox">
+ <Checkbox
+ color="primary"
+ indeterminate={numSelected > 0 && numSelected < rowCount}
+ checked={rowCount > 0 && numSelected === rowCount}
+ onChange={onSelectAllClick}
+ inputProps={{
+ 'aria-label': 'select all desserts',
+ }}
+ />
+ </TableCell>
+ {headCells.map((headCell) => (
+ <TableCell
+ key={headCell.id}
+ align={headCell.numeric ? 'right' : 'left'}
+ padding={headCell.disablePadding ? 'none' : 'normal'}
+ sortDirection={orderBy === headCell.id ? order : false}
+ >
+ <TableSortLabel
+ active={orderBy === headCell.id}
+ direction={orderBy === headCell.id ? order : 'asc'}
+ onClick={createSortHandler(headCell.id)}
+ >
+ {headCell.label}
+ {orderBy === headCell.id ? (
+ <Box component="span" sx={visuallyHidden}>
+ {order === 'desc' ? 'sorted descending' : 'sorted ascending'}
+ </Box>
+ ) : null}
+ </TableSortLabel>
+ </TableCell>
+ ))}
+ </TableRow>
+ </TableHead>
+ );
+}
+
+EnhancedTableHead.propTypes = {
+ numSelected: PropTypes.number.isRequired,
+ onRequestSort: PropTypes.func.isRequired,
+ onSelectAllClick: PropTypes.func.isRequired,
+ order: PropTypes.oneOf(['asc', 'desc']).isRequired,
+ orderBy: PropTypes.string.isRequired,
+ rowCount: PropTypes.number.isRequired,
+};
+
+function EnhancedTableToolbar(props) {
+ const { numSelected } = props;
+ return (
+ <Toolbar
+ sx={[
+ {
+ pl: { sm: 2 },
+ pr: { xs: 1, sm: 1 },
+ },
+ numSelected > 0 && {
+ bgcolor: (theme) =>
+ alpha(theme.palette.primary.main, theme.palette.action.activatedOpacity),
+ },
+ ]}
+ >
+ {numSelected > 0 ? (
+ <Typography
+ sx={{ flex: '1 1 100%' }}
+ color="inherit"
+ variant="subtitle1"
+ component="div"
+ >
+ {numSelected} selected
+ </Typography>
+ ) : (
+ <Typography
+ sx={{ flex: '1 1 100%' }}
+ variant="h6"
+ id="tableTitle"
+ component="div"
+ >
+ Nutrition
+ </Typography>
+ )}
+ {numSelected > 0 ? (
+ <Tooltip title="Delete">
+ <IconButton>
+ <DeleteIcon />
+ </IconButton>
+ </Tooltip>
+ ) : (
+ <Tooltip title="Filter list">
+ <IconButton>
+ <FilterListIcon />
+ </IconButton>
+ </Tooltip>
+ )}
+ </Toolbar>
+ );
+}
+
+EnhancedTableToolbar.propTypes = {
+ numSelected: PropTypes.number.isRequired,
+};
+
+export default function EnhancedTable() {
+ const [order, setOrder] = React.useState('asc');
+ const [orderBy, setOrderBy] = React.useState('calories');
+ const [selected, setSelected] = React.useState([]);
+ const [page, setPage] = React.useState(0);
+ const [dense, setDense] = React.useState(false);
+ const [rowsPerPage, setRowsPerPage] = React.useState(5);
+
+ const handleRequestSort = (event, property) => {
+ const isAsc = orderBy === property && order === 'asc';
+ setOrder(isAsc ? 'desc' : 'asc');
+ setOrderBy(property);
+ };
+
+ const handleSelectAllClick = (event) => {
+ if (event.target.checked) {
+ const newSelected = rows.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);
+ };
+
+ const handleChangePage = (event, newPage) => {
+ setPage(newPage);
+ };
+
+ const handleChangeRowsPerPage = (event) => {
+ setRowsPerPage(parseInt(event.target.value, 10));
+ setPage(0);
+ };
+
+ const handleChangeDense = (event) => {
+ setDense(event.target.checked);
+ };
+
+ // Avoid a layout jump when reaching the last page with empty rows.
+ const emptyRows =
+ page > 0 ? Math.max(0, (1 + page) * rowsPerPage - rows.length) : 0;
+
+ const visibleRows = React.useMemo(
+ () =>
+ [...rows]
+ .sort(getComparator(order, orderBy))
+ .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage),
+ [order, orderBy, page, rowsPerPage],
+ );
+
+ return (
+ <Box sx={{ width: '100%' }}>
+ <Paper sx={{ width: '100%', mb: 2 }}>
+ <EnhancedTableToolbar numSelected={selected.length} />
+ <TableContainer>
+ <Table
+ sx={{ minWidth: 750 }}
+ aria-labelledby="tableTitle"
+ size={dense ? 'small' : 'medium'}
+ >
+ <EnhancedTableHead
+ numSelected={selected.length}
+ order={order}
+ orderBy={orderBy}
+ onSelectAllClick={handleSelectAllClick}
+ onRequestSort={handleRequestSort}
+ rowCount={rows.length}
+ />
+ <TableBody>
+ {visibleRows.map((row, index) => {
+ const isItemSelected = selected.includes(row.id);
+ const labelId = `enhanced-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>
+ );
+ })}
+ {emptyRows > 0 && (
+ <TableRow
+ style={{
+ height: (dense ? 33 : 53) * emptyRows,
+ }}
+ >
+ <TableCell colSpan={6} />
+ </TableRow>
+ )}
+ </TableBody>
+ </Table>
+ </TableContainer>
+ <TablePagination
+ rowsPerPageOptions={[5, 10, 25]}
+ component="div"
+ count={rows.length}
+ rowsPerPage={rowsPerPage}
+ page={page}
+ onPageChange={handleChangePage}
+ onRowsPerPageChange={handleChangeRowsPerPage}
+ />
+ </Paper>
+ <FormControlLabel
+ control={<Switch checked={dense} onChange={handleChangeDense} />}
+ label="Dense padding"
+ />
+ </Box>
+ );
+}
--
Gitblit v1.9.1