|  |  | 
 |  |  |  | 
 |  |  | import { Box, Card, Grid, LinearProgress, Select, MenuItem, ListItemText } from "@mui/material"; | 
 |  |  | import React, { useState, useRef, useEffect, useMemo } from "react"; | 
 |  |  | import { Box, Card, Grid, LinearProgress, Select, MenuItem, ListItemText, TextField } from "@mui/material"; | 
 |  |  | import { DataGrid, useGridApiContext, GridActionsCellItem, useGridApiRef } from '@mui/x-data-grid'; | 
 |  |  | import React, { useState, useRef, useEffect, useMemo } from "react"; | 
 |  |  | import QueryStatsIcon from '@mui/icons-material/QueryStats'; | 
 |  |  | import request from '@/utils/request'; | 
 |  |  | import { | 
 |  |  |     List, | 
 |  |  |     Button, | 
 |  |  | 
 |  |  | } from 'react-admin'; | 
 |  |  |  | 
 |  |  | const CheckPreviewTable = (props) => { | 
 |  |  |     const { rows, gridRef, setRows, record, selectedIds, setSelectedIds, setDialog, formData } = props; | 
 |  |  |     const { rows, gridRef, setRows, record, lefSelectedIds, setLeftSelectedIds, selectedMatnr, setDialog, formData } = props; | 
 |  |  |     // const translate = useTranslate(); | 
 |  |  |     // const refresh = useRefresh(); | 
 |  |  |     // const notify = useNotify(); | 
 |  |  |     gridRef.current = useGridApiRef(); | 
 |  |  |     const translate = useTranslate(); | 
 |  |  |  | 
 |  |  |     useEffect(() => { | 
 |  |  |         if (selectedIds.length > 0) { | 
 |  |  |             console.log(selectedIds); | 
 |  |  |         } | 
 |  |  |     }, [selectedIds]) | 
 |  |  |     // useEffect(() => { | 
 |  |  |     //     if (lefSelectedIds.length > 0) { | 
 |  |  |     //         console.log(lefSelectedIds); | 
 |  |  |     //     } | 
 |  |  |     // }, [lefSelectedIds]) | 
 |  |  |  | 
 |  |  |     const baseColumns = [ | 
 |  |  |         { field: 'locCode', headerName: '库位', width: 110 }, | 
 |  |  | 
 |  |  |             ) | 
 |  |  |         }, | 
 |  |  |         { | 
 |  |  |             field: 'siteNo', | 
 |  |  |             field: 'site', | 
 |  |  |             headerName: '出库口', | 
 |  |  |             width: 90, | 
 |  |  |             type: 'singleSelect', | 
 |  |  |             editable: true, | 
 |  |  |             editable: false, | 
 |  |  |             renderCell: (params) => ( | 
 |  |  |                 <OutStockSiteNo value={params.value} /> | 
 |  |  |             ), | 
 |  |  | 
 |  |  |     }); | 
 |  |  |  | 
 |  |  |     const CustomToolBar = () => { | 
 |  |  |         const [queryParams, setQueryParams] = useState({ locCode: null, channel: null, matnrCode: selectedMatnr }); | 
 |  |  |         const notify = useNotify(); | 
 |  |  |         const queryClick = async () => { | 
 |  |  |             const { data: { code, data, msg } } = await request.post('/check/locs/', queryParams); | 
 |  |  |             if (code === 200) { | 
 |  |  |                 setRows(data) | 
 |  |  |             } else { | 
 |  |  |                 notify(msg); | 
 |  |  |             } | 
 |  |  |         } | 
 |  |  |  | 
 |  |  |         const handleChange = (e) => { | 
 |  |  |             const { name, value } = e.target; | 
 |  |  |             setQueryParams(() => ({ | 
 |  |  |                 ...queryParams, | 
 |  |  |                 [name]: value | 
 |  |  |             })); | 
 |  |  |  | 
 |  |  |         }; | 
 |  |  |  | 
 |  |  |         const selectSiteNo = () => { | 
 |  |  |             setDialog(true) | 
 |  |  |         } | 
 |  |  |         return ( | 
 |  |  |             <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> | 
 |  |  |             <> | 
 |  |  |                 <Box sx={{ | 
 |  |  |                     p: 1, | 
 |  |  |                     display: 'flex', | 
 |  |  |                     justifyContent: 'space-between', | 
 |  |  |                     borderTop: '1px solid rgba(224, 224, 224, 1)' | 
 |  |  |                 }}> | 
 |  |  |                     <Box sx={{ | 
 |  |  |                         '& > :not(style)': { m: 1, width: '25ch' }, | 
 |  |  |                         display: 'flex', | 
 |  |  |                     }}> | 
 |  |  |                         <TextField | 
 |  |  |                             label={translate("table.field.stockTransfer.inputLoc")} | 
 |  |  |                             size="small" | 
 |  |  |                             name="locCode" | 
 |  |  |                             value={queryParams?.locCode} | 
 |  |  |                             onChange={handleChange} | 
 |  |  |                             sx={{ mr: 1 }} /> | 
 |  |  |  | 
 |  |  |                         <TextField | 
 |  |  |                             label={translate("table.field.stockTransfer.inputChannel")} | 
 |  |  |                             size="small" | 
 |  |  |                             name="channel" | 
 |  |  |                             value={queryParams?.channel} | 
 |  |  |                             onChange={handleChange} | 
 |  |  |                             sx={{ mr: 1 }} /> | 
 |  |  |  | 
 |  |  |                         <Box sx={{ | 
 |  |  |                             '& > :not(style)': { m: 1, width: '11ch' }, | 
 |  |  |                         }}> | 
 |  |  |                             <Button variant="contained" | 
 |  |  |                                 size="medium" | 
 |  |  |                                 startIcon={<QueryStatsIcon />} | 
 |  |  |                                 label="toolbar.query" | 
 |  |  |                                 onClick={queryClick} /> | 
 |  |  |                         </Box> | 
 |  |  |                     </Box> | 
 |  |  |                     <Box sx={{ | 
 |  |  |                         '& > :not(style)': { m: 1, width: '13ch' }, | 
 |  |  |                     }}> | 
 |  |  |                         <Button | 
 |  |  |                             onClick={selectSiteNo} | 
 |  |  |                             variant="outlined" | 
 |  |  |                             label="toolbar.modiftySite" | 
 |  |  |                             size="medium" | 
 |  |  |                             sx={{ mr: 1 }} /> | 
 |  |  |                     </Box> | 
 |  |  |                 </Box> | 
 |  |  |  | 
 |  |  |             </> | 
 |  |  |         ); | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |  | 
 |  |  |     const OutStockSite = (params) => { | 
 |  |  |         const { id, field, siteNo, row: { staNos } } = params; | 
 |  |  | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     return ( | 
 |  |  |         <DataGrid | 
 |  |  |             storeKey={"locItemPreview"} | 
 |  |  |             rows={rows} | 
 |  |  |             columns={columns} | 
 |  |  |             slots={{ toolbar: CustomToolBar }} | 
 |  |  |             apiRef={gridRef} | 
 |  |  |             checkboxSelection | 
 |  |  |             disableRowSelectionOnClick | 
 |  |  |             hideFooterPagination={true}  // 隐藏分页控件 | 
 |  |  |             hideFooter={false} | 
 |  |  |             onRowSelectionModelChange={(ids) => { | 
 |  |  |                 setSelectedIds(ids) | 
 |  |  |             }} | 
 |  |  |         /> | 
 |  |  |         <Box sx={{ maxHeight: 780 }}> | 
 |  |  |             <DataGrid | 
 |  |  |                 sx={{ maxHeight: 730 }} | 
 |  |  |                 storeKey={"locItemPreview"} | 
 |  |  |                 rows={rows} | 
 |  |  |                 columns={columns} | 
 |  |  |                 slots={{ toolbar: CustomToolBar }} | 
 |  |  |                 apiRef={gridRef} | 
 |  |  |                 checkboxSelection | 
 |  |  |                 disableRowSelectionOnClick | 
 |  |  |                 hideFooterPagination={true}  // 隐藏分页控件 | 
 |  |  |                 hideFooter={false} | 
 |  |  |                 onRowSelectionModelChange={(ids) => { | 
 |  |  |                     setLeftSelectedIds(ids) | 
 |  |  |                 }} | 
 |  |  |             /> | 
 |  |  |         </Box> | 
 |  |  |  | 
 |  |  |     ) | 
 |  |  | } | 
 |  |  |  |