|  |  | 
 |  |  | import { Box, Card, Grid, LinearProgress, Select, MenuItem, ListItemText, Tooltip, IconButton } from "@mui/material"; | 
 |  |  | import { Box, Card, Grid, LinearProgress, Select, MenuItem, ListItemText } from "@mui/material"; | 
 |  |  | import React, { useState, useRef, useEffect, useMemo } from "react"; | 
 |  |  | import { | 
 |  |  |     List, | 
 |  |  | 
 |  |  | import CloseSharpIcon from '@mui/icons-material/CloseSharp'; | 
 |  |  | import ConfirmButton from '../../components/ConfirmButton'; | 
 |  |  | import { Delete, Edit, Add } from '@mui/icons-material'; | 
 |  |  | import OutStockSiteDialog from "./OutStockSiteDialog"; | 
 |  |  |  | 
 |  |  | const StyledDatagrid = styled(DatagridConfigurable)(({ theme }) => ({ | 
 |  |  |     '& .css-1vooibu-MuiSvgIcon-root': { | 
 |  |  | 
 |  |  |     const [formData, setFormData] = useState({ | 
 |  |  |         orderId: record?.id | 
 |  |  |     }); | 
 |  |  |     const [dialog, setDialog] = useState(false); | 
 |  |  |     const [selectedValue, setSelectedValue] = useState({}); | 
 |  |  |  | 
 |  |  |     const handleClickOpen = () => { | 
 |  |  |         setDialog(true); | 
 |  |  |     }; | 
 |  |  |  | 
 |  |  |     const handleClose = (value) => { | 
 |  |  |         setDialog(false); | 
 |  |  |         setSelectedValue(value); | 
 |  |  |         console.log(rows); | 
 |  |  |         console.log(value); | 
 |  |  |            const newRows = rows.map(item => { | 
 |  |  |                 return { | 
 |  |  |                     ...item,  | 
 |  |  |                     siteNo: value?.site | 
 |  |  |                 } | 
 |  |  |             }) | 
 |  |  |             setRows(newRows); | 
 |  |  |     }; | 
 |  |  |  | 
 |  |  |     useEffect(() => { | 
 |  |  |         getWaveRule() | 
 |  |  |     }, [formData, open]) | 
 |  |  |  | 
 |  |  |  | 
 |  |  |     const getWaveRule = async () => { | 
 |  |  |         if (formData.waveId == null && formData.waveId == undefined) { | 
 |  |  | 
 |  |  |                     <Grid item xl={6.3} gap={2}> | 
 |  |  |                         <Card> | 
 |  |  |                             <Box sx={{ height: 500, width: '100%' }}> | 
 |  |  |                                 <PreviewTable rows={rows} gridRef={gridRef} setRows={setRows} record={record}/> | 
 |  |  |                                 <PreviewTable | 
 |  |  |                                     rows={rows} | 
 |  |  |                                     gridRef={gridRef} | 
 |  |  |                                     setRows={setRows} | 
 |  |  |                                     record={record} | 
 |  |  |                                     selectedIds={selectedIds} | 
 |  |  |                                     setDialog={setDialog} | 
 |  |  |                                     setSelectedIds={setSelectedIds} | 
 |  |  |                                 /> | 
 |  |  |                             </Box> | 
 |  |  |                             <Box sx={{ textAlign: 'center' }}> | 
 |  |  |                                 <CloseButton setOpen={setOpen} /> | 
 |  |  |                                 <SubmitButton selectedIds={selectedIds} setSelectedIds={setSelectedIds} gridRef={gridRef} record={record}/> | 
 |  |  |                                 <SubmitButton selectedIds={selectedIds} setSelectedIds={setSelectedIds} gridRef={gridRef} record={record} /> | 
 |  |  |                             </Box> | 
 |  |  |                         </Card> | 
 |  |  |                     </Grid> | 
 |  |  |                 </Grid> | 
 |  |  |                 <Grid> | 
 |  |  |                     <OutStockSiteDialog | 
 |  |  |                         selectedValue={selectedValue} | 
 |  |  |                         open={dialog} | 
 |  |  |                         onClose={handleClose} | 
 |  |  |                     /> | 
 |  |  |                 </Grid> | 
 |  |  |             </Box> | 
 |  |  |         </> | 
 |  |  |     ); | 
 |  |  | } | 
 |  |  |  | 
 |  |  | const PreviewTable = ({ rows, gridRef, setRows, record }) => { | 
 |  |  | const PreviewTable = ({ rows, gridRef, setRows, record, selectedIds, setSelectedIds, setDialog }) => { | 
 |  |  |     gridRef.current = useGridApiRef(); | 
 |  |  |  | 
 |  |  |     const columns = [ | 
 |  |  | 
 |  |  |      * @param {*} params  | 
 |  |  |      */ | 
 |  |  |     const handleDelete = (params, rows, setRows) => { | 
 |  |  |         const outRows = rows.filter(row => {  | 
 |  |  |              return row.id !== params.id  | 
 |  |  |         const outRows = rows.filter(row => { | 
 |  |  |             return row.id !== params.id | 
 |  |  |         }) | 
 |  |  |         setRows(outRows) | 
 |  |  |     } | 
 |  |  | 
 |  |  |             </Box> | 
 |  |  |         ); | 
 |  |  |     }); | 
 |  |  |  | 
 |  |  |     const CustomToolBar = () => { | 
 |  |  |         const selectSiteNo = () => { | 
 |  |  |             setDialog(true) | 
 |  |  |         } | 
 |  |  |  | 
 |  |  |         return ( | 
 |  |  |             selectedIds.length > 0 ? <Box sx={{ | 
 |  |  |                 p: 1, | 
 |  |  |                 display: 'flex', | 
 |  |  |                 justifyContent: 'flex-end', | 
 |  |  |                 borderTop: '1px solid rgba(224, 224, 224, 1)' | 
 |  |  |             }}> | 
 |  |  |                 <Button | 
 |  |  |                     onClick={selectSiteNo} | 
 |  |  |                     variant="outlined" | 
 |  |  |                     label="toolbar.modiftySite" | 
 |  |  |                     size="medium" | 
 |  |  |                     sx={{ mr: 1 }} /> | 
 |  |  |             </Box> : <></> | 
 |  |  |         ); | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     const OutStockSite = (params) => { | 
 |  |  |         const { id, field, siteNo, row: { staNos } } = params; | 
 |  |  | 
 |  |  |         <DataGrid | 
 |  |  |             rows={rows} | 
 |  |  |             columns={columns} | 
 |  |  |             slots={{ toolbar: CustomToolBar }} | 
 |  |  |             apiRef={gridRef} | 
 |  |  |             initialState={{ | 
 |  |  |                 pagination: { | 
 |  |  | 
 |  |  |     ) | 
 |  |  | } | 
 |  |  |  | 
 |  |  |  | 
 |  |  |  | 
 |  |  | //提交按钮 | 
 |  |  | const SubmitButton = ({ selectedIds, setSelectedIds, gridRef, record }) => { | 
 |  |  |     const notify = useNotify(); |