| import { Dialog, DialogActions, DialogContent, DialogTitle, Box, LinearProgress, Grid, } from "@mui/material"; | 
| import React, { useState, useRef, useEffect, useMemo, memo } from "react"; | 
| import { | 
|     Toolbar, | 
|     Button, | 
|     useTranslate, | 
|     useNotify, | 
|     useRefresh, | 
|     useGetList, | 
| } from 'react-admin'; | 
| import request from '@/utils/request'; | 
| import { styled } from '@mui/material/styles'; | 
| import { PAGE_DRAWER_WIDTH, OPERATE_MODE, DEFAULT_PAGE_SIZE } from '@/config/setting'; | 
| import { DataGrid, useGridApiContext, GridActionsCellItem, useGridApiRef } from '@mui/x-data-grid'; | 
| import DialogCloseButton from "../../components/DialogCloseButton"; | 
|   | 
|   | 
| const OutOrderPreview = (props) => { | 
|     const { open, setOpen, record, selectedIds, setCloseParent } = props; | 
|     const translate = useTranslate(); | 
|     const gridRef = useGridApiRef(); | 
|     const [rows, setRows] = useState([]); | 
|     const notify = useNotify(); | 
|     const refresh = useRefresh(); | 
|     const handleClose = async (event, reason) => { | 
|         if (reason !== "backdropClick") { | 
|             // const res = await request.get(`/outStock/items/cancel/` + selectedIds); | 
|             setOpen(false); | 
|             setCloseParent(false) | 
|         } | 
|     }; | 
|   | 
|     if (!selectedIds) { return } | 
|   | 
|     const { data, isLoading, error } = useGetList('/deliveryItem/edit', { | 
|         pagination: { page: 1, perPage: 1000 }, | 
|         filter: { deleted: 0, ids: selectedIds } | 
|     }); | 
|   | 
|     return ( | 
|         <Dialog | 
|             open={open} | 
|             onClose={handleClose} | 
|             aria-labelledby="form-dialog-title" | 
|             aria-hidden | 
|             fullWidth | 
|             maxWidth="lg" | 
|         > | 
|             <DialogTitle id="form-dialog-title" sx={{ | 
|                 position: 'sticky', | 
|                 top: 0, | 
|                 backgroundColor: 'background.paper', | 
|                 zIndex: 1000 | 
|             }}> | 
|                 {translate('create.title')} | 
|                 <Box sx={{ position: 'absolute', top: 8, right: 8, zIndex: 1001 }}> | 
|                     <DialogCloseButton onClose={handleClose} /> | 
|                 </Box> | 
|             </DialogTitle> | 
|             <DialogContent> | 
|                 <Grid container xl={12}> | 
|                     <Grid item xl={12}> | 
|                         <Box display="flex" sx={{ height: 400, width: '100%', '& .RaConfigurable-root': { width: '100%' } }}> | 
|                             <LinearProgress sx={{ height: "2px", position: 'absolute', top: 0, left: 0, right: 0, }} /> | 
|                             <OrderPreview rows={data} gridRef={gridRef} /> | 
|                         </Box > | 
|                     </Grid> | 
|                 </Grid> | 
|                 <Toolbar sx={{ justifyContent: 'end' }}> | 
|                     <ConfirmButton label="toolbar.confirm" variant="contained" size="large" gridRef={gridRef} setOpen={setOpen} setCloseParent={setCloseParent} /> | 
|                 </Toolbar> | 
|             </DialogContent> | 
|         </Dialog> | 
|     ) | 
| } | 
|   | 
| export default OutOrderPreview; | 
|   | 
| const ConfirmButton = ({ gridRef, setOpen, setCloseParent }) => { | 
|     const refresh = useRefresh(); | 
|     const notify = useNotify(); | 
|     const confirm = async () => { | 
|         const items = gridRef.current?.getSortedRows(); | 
|         const { data: { code, msg } } = await request.post(`/outStock/generate/orders`, { ids: items }); | 
|         if (code === 200) { | 
|             notify(msg); | 
|             refresh() | 
|             setOpen(false) | 
|             setCloseParent(false) | 
|         } else { | 
|             notify(msg); | 
|         } | 
|     } | 
|   | 
|     return ( | 
|         <Button label="toolbar.confirm" variant="contained" size="large" onClick={confirm} /> | 
|     ) | 
| } | 
|   | 
| const OrderPreview = ({ rows, gridRef }) => { | 
|     gridRef.current = useGridApiRef(); | 
|   | 
|     const columns = [ | 
|         { field: 'matnrCode', headerName: '物料编码', width: 110 }, | 
|         { field: 'maktx', headerName: '物料名称', width: 190 }, | 
|         { | 
|             field: 'anfme', headerName: '出库数量', width: 110, type: 'number', editable: true, | 
|             valueGetter: (value, row) => { | 
|                 return row.anfme - row.workQty - row.qty; | 
|             }, | 
|             preProcessEditCellProps: (params) => { | 
|                 const hasError = !params.props.value || params.props.value.trim() === ''; | 
|                 return { | 
|                     ...params.props, | 
|                     error: hasError, | 
|                     message: hasError ? '计划数量不能为空!!' : '', | 
|                 }; | 
|             }, | 
|         }, | 
|         { | 
|             field: 'workQty', headerName: '剩余数量', width: 110, type: 'number', | 
|             valueGetter: (value, row) => { | 
|                 return row.anfme - row.workQty - row.qty; | 
|             }, | 
|         }, | 
|         { field: 'unit', headerName: '单位', width: 110 }, | 
|         { field: 'splrBatch', headerName: '批次', width: 110 }, | 
|         { field: 'splrName', headerName: '供应商', width: 110 }, | 
|         { field: 'updateTime', headerName: '更新时间', width: 110 }, | 
|         { field: 'updateBy$', headerName: '更新人员', width: 110 }, | 
|     ] | 
|   | 
|     return ( | 
|         <DataGrid | 
|             storeKey={"outOrderItemPreview"} | 
|             rows={rows} | 
|             columns={columns} | 
|             apiRef={gridRef} | 
|             disableRowSelectionOnClick | 
|             hideFooterPagination={true}  // 隐藏分页控件 | 
|             hideFooter={true} | 
|             onRowSelectionModelChange={(ids) => { | 
|                 setSelectedIds(ids) | 
|             }} | 
|         /> | 
|     ) | 
| } |