|  |  | 
 |  |  | import React, { useState, useRef, useEffect, useMemo } from "react"; | 
 |  |  | import { Box, Card, CardContent, Grid, Typography, Tooltip } from '@mui/material'; | 
 |  |  | import { Box, Card, CardContent, Grid, Typography, Button, TextField, Tooltip, Paper, TableContainer, Table, TableBody, TableCell, TableHead, TableRow } from '@mui/material'; | 
 |  |  | import { | 
 |  |  |     useTranslate, | 
 |  |  |     useRecordContext, | 
 |  |  |     useNotify, | 
 |  |  |     useRefresh, | 
 |  |  |     useListContext, | 
 |  |  | } from 'react-admin'; | 
 |  |  | import PanelTypography from "../components/PanelTypography"; | 
 |  |  | import * as Common from '@/utils/common' | 
 |  |  |  | 
 |  |  | import { styled } from "@mui/material/styles"; | 
 |  |  | import request from '@/utils/request'; | 
 |  |  | import debounce from 'lodash/debounce'; | 
 |  |  | import { DataGrid } from '@mui/x-data-grid'; | 
 |  |  | import PrintModal from './PrintModal'; | 
 |  |  | import { width } from "@mui/system"; | 
 |  |  | const AsnOrderPanel = () => { | 
 |  |  |     const record = useRecordContext(); | 
 |  |  |     if (!record) return null; | 
 |  |  |     const translate = useTranslate(); | 
 |  |  |     const notify = useNotify(); | 
 |  |  |     const [rows, setRows] = useState([]); | 
 |  |  |     const [maktx, setMaktx] = useState(''); | 
 |  |  |     const asnId = record.id; | 
 |  |  |  | 
 |  |  |     useEffect(() => { | 
 |  |  |         debouncedHttp({ maktx }); | 
 |  |  |     }, [asnId, maktx]); | 
 |  |  |  | 
 |  |  |  | 
 |  |  |     const http = async (parmas) => { | 
 |  |  |         const res = await request.post('/asnOrderItem/page', { ...parmas, asnId }); | 
 |  |  |         if (res?.data?.code === 200) { | 
 |  |  |             setRows(res.data.data.records) | 
 |  |  |         } else { | 
 |  |  |             notify(res.data.msg); | 
 |  |  |         } | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     const debouncedHttp = useMemo(() => debounce(http, 300), []); | 
 |  |  |  | 
 |  |  |  | 
 |  |  |  | 
 |  |  |     const columns = [ | 
 |  |  |         { | 
 |  |  |             field: 'asnId', | 
 |  |  |             headerName: translate('table.field.asnOrderItem.asnId') | 
 |  |  |         }, | 
 |  |  |         { | 
 |  |  |             field: 'asnCode', | 
 |  |  |             headerName: translate('table.field.asnOrderItem.asnCode') | 
 |  |  |         }, | 
 |  |  |         { | 
 |  |  |             field: 'poDetlId', | 
 |  |  |             headerName: translate('table.field.asnOrderItem.poDetlId') | 
 |  |  |         }, | 
 |  |  |         { | 
 |  |  |             field: 'poDetlCode', | 
 |  |  |             headerName: translate('table.field.asnOrderItem.poDetlCode') | 
 |  |  |         }, | 
 |  |  |         { | 
 |  |  |             field: 'matnrCode', | 
 |  |  |             headerName: translate('table.field.asnOrderItem.matnrCode') | 
 |  |  |         }, | 
 |  |  |         { | 
 |  |  |             field: 'maktx', | 
 |  |  |             headerName: translate('table.field.asnOrderItem.maktx'), | 
 |  |  |             width: 200, | 
 |  |  |         }, | 
 |  |  |         { | 
 |  |  |             field: 'anfme', | 
 |  |  |             headerName: translate('table.field.asnOrderItem.purQty') | 
 |  |  |         }, | 
 |  |  |         { | 
 |  |  |             field: 'stockUnit', | 
 |  |  |             headerName: translate('table.field.asnOrderItem.stockUnit') | 
 |  |  |         }, | 
 |  |  |         // { | 
 |  |  |         //     field: 'purQty', | 
 |  |  |         //     headerName: translate('table.field.asnOrderItem.purQty') | 
 |  |  |         // }, | 
 |  |  |         { | 
 |  |  |             field: 'purUnit', | 
 |  |  |             headerName: translate('table.field.asnOrderItem.purUnit') | 
 |  |  |         }, | 
 |  |  |         { | 
 |  |  |             field: 'qty', | 
 |  |  |             headerName: translate('table.field.asnOrderItem.qty') | 
 |  |  |         }, | 
 |  |  |         { | 
 |  |  |             field: 'splrBatch', | 
 |  |  |             headerName: translate('table.field.asnOrderItem.splrBatch') | 
 |  |  |         }, | 
 |  |  |         { | 
 |  |  |             field: 'splrCode', | 
 |  |  |             headerName: translate('table.field.asnOrderItem.splrCode') | 
 |  |  |         }, | 
 |  |  |         { | 
 |  |  |             field: 'splrName', | 
 |  |  |             headerName: translate('table.field.asnOrderItem.splrName') | 
 |  |  |         }, | 
 |  |  |         { | 
 |  |  |             field: 'trackCode', | 
 |  |  |             headerName: translate('table.field.asnOrderItem.barcode') | 
 |  |  |         }, | 
 |  |  |         { | 
 |  |  |             field: 'prodTime', | 
 |  |  |             headerName: translate('table.field.asnOrderItem.prodTime') | 
 |  |  |         }, | 
 |  |  |         { | 
 |  |  |             field: 'packName', | 
 |  |  |             headerName: translate('table.field.asnOrderItem.packName') | 
 |  |  |         }, | 
 |  |  |         { | 
 |  |  |             field: 'action', | 
 |  |  |             headerName: '操作', | 
 |  |  |             width: 70, | 
 |  |  |             lockPosition: 'left', | 
 |  |  |             renderCell: (params) => ( | 
 |  |  |                 <PrintButton rows={[params.row.id]} /> | 
 |  |  |             ), | 
 |  |  |  | 
 |  |  |         },] | 
 |  |  |  | 
 |  |  |     const [selectedRows, setSelectedRows] = useState([]); | 
 |  |  |  | 
 |  |  |     const handleSelectionChange = (ids) => { | 
 |  |  |         setSelectedRows(ids) | 
 |  |  |  | 
 |  |  |     }; | 
 |  |  |     const maktxChange = (value) => { | 
 |  |  |         setMaktx(value) | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |  | 
 |  |  |  | 
 |  |  |     return ( | 
 |  |  |         <> | 
 |  |  |             <Card sx={{ width: { xs: 300, sm: 500, md: 600, lg: 800 }, margin: 'auto' }}> | 
 |  |  |                 <CardContent> | 
 |  |  |                     <Grid container spacing={2}> | 
 |  |  |                         <Grid item xs={12} container alignContent="flex-end"> | 
 |  |  |                             <Typography variant="caption" color="textSecondary" sx={{ wordWrap: 'break-word', wordBreak: 'break-all' }}> | 
 |  |  |                                 {Common.camelToPascalWithSpaces(translate('common.field.memo'))}:{record.memo} | 
 |  |  |                             </Typography> | 
 |  |  |                         </Grid> | 
 |  |  |                     </Grid> | 
 |  |  |                     <Box height={20}> </Box> | 
 |  |  |                     <Grid container spacing={2}> | 
 |  |  |                         <Grid item xs={6}> | 
 |  |  |                             <PanelTypography | 
 |  |  |                                 title="table.field.asnOrder.code"  | 
 |  |  |                                 property={record.code} | 
 |  |  |                             /> | 
 |  |  |                         </Grid> | 
 |  |  |                         <Grid item xs={6}> | 
 |  |  |                             <PanelTypography | 
 |  |  |                                 title="table.field.asnOrder.poCode"  | 
 |  |  |                                 property={record.poCode} | 
 |  |  |                             /> | 
 |  |  |                         </Grid> | 
 |  |  |                         <Grid item xs={6}> | 
 |  |  |                             <PanelTypography | 
 |  |  |                                 title="table.field.asnOrder.poId"  | 
 |  |  |                                 property={record.poId} | 
 |  |  |                             /> | 
 |  |  |                         </Grid> | 
 |  |  |                         <Grid item xs={6}> | 
 |  |  |                             <PanelTypography | 
 |  |  |                                 title="table.field.asnOrder.type"  | 
 |  |  |                                 property={record.type} | 
 |  |  |                             /> | 
 |  |  |                         </Grid> | 
 |  |  |                         <Grid item xs={6}> | 
 |  |  |                             <PanelTypography | 
 |  |  |                                 title="table.field.asnOrder.wkType"  | 
 |  |  |                                 property={record.wkType} | 
 |  |  |                             /> | 
 |  |  |                         </Grid> | 
 |  |  |                         <Grid item xs={6}> | 
 |  |  |                             <PanelTypography | 
 |  |  |                                 title="table.field.asnOrder.anfme"  | 
 |  |  |                                 property={record.anfme} | 
 |  |  |                             /> | 
 |  |  |                         </Grid> | 
 |  |  |                         <Grid item xs={6}> | 
 |  |  |                             <PanelTypography | 
 |  |  |                                 title="table.field.asnOrder.qty"  | 
 |  |  |                                 property={record.qty} | 
 |  |  |                             /> | 
 |  |  |                         </Grid> | 
 |  |  |                         <Grid item xs={6}> | 
 |  |  |                             <PanelTypography | 
 |  |  |                                 title="table.field.asnOrder.logisNo"  | 
 |  |  |                                 property={record.logisNo} | 
 |  |  |                             /> | 
 |  |  |                         </Grid> | 
 |  |  |                         <Grid item xs={6}> | 
 |  |  |                             <PanelTypography | 
 |  |  |                                 title="table.field.asnOrder.arrTime"  | 
 |  |  |                                 property={record.arrTime$} | 
 |  |  |                             /> | 
 |  |  |                         </Grid> | 
 |  |  |                         <Grid item xs={6}> | 
 |  |  |                             <PanelTypography | 
 |  |  |                                 title="table.field.asnOrder.rleStatus"  | 
 |  |  |                                 property={record.rleStatus$} | 
 |  |  |                             /> | 
 |  |  |                         </Grid> | 
 |  |  |                     </Grid> | 
 |  |  |                 </CardContent> | 
 |  |  |             </Card > | 
 |  |  |         </> | 
 |  |  |         <Box sx={{ | 
 |  |  |             position: 'relative', | 
 |  |  |             padding: '5px 10px' | 
 |  |  |         }}> | 
 |  |  |  | 
 |  |  |             <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '4px', alignItems: 'center' }}> | 
 |  |  |                 <TextField value={maktx} onChange={(e) => maktxChange(e.target.value)} label="搜索物料" variant="outlined" sx={{ width: '300px' }} /> | 
 |  |  |  | 
 |  |  |                 <div style={{ display: 'flex', gap: '10px' }}> | 
 |  |  |                     <PrintsButton rows={selectedRows} /> | 
 |  |  |                 </div> | 
 |  |  |             </div> | 
 |  |  |  | 
 |  |  |  | 
 |  |  |             <DataGrid | 
 |  |  |                 size="small" | 
 |  |  |                 rows={rows} | 
 |  |  |                 columns={columns} | 
 |  |  |                 disableRowSelectionOnClick | 
 |  |  |                 checkboxSelection | 
 |  |  |                 onRowSelectionModelChange={handleSelectionChange} | 
 |  |  |                 selectionModel={selectedRows} | 
 |  |  |                 disableColumnMenu={true} | 
 |  |  |                 disableColumnSorting | 
 |  |  |                 disableMultipleColumnsSorting | 
 |  |  |             /> | 
 |  |  |         </Box > | 
 |  |  |  | 
 |  |  |     ); | 
 |  |  | }; | 
 |  |  |  | 
 |  |  | export default AsnOrderPanel; | 
 |  |  |  | 
 |  |  | const PrintsButton = ({ rows }) => { | 
 |  |  |     const record = useRecordContext(); | 
 |  |  |     const { resource, selectedIds } = useListContext(); | 
 |  |  |     const notify = useNotify(); | 
 |  |  |     const refresh = useRefresh(); | 
 |  |  |     const translate = useTranslate(); | 
 |  |  |  | 
 |  |  |     const [createDialog, setCreateDialog] = useState(false); | 
 |  |  |  | 
 |  |  |     const modalChange = () => { | 
 |  |  |         if (rows?.length === 0) { | 
 |  |  |             notify('请选择物料'); | 
 |  |  |             return; | 
 |  |  |         } else { | 
 |  |  |             setCreateDialog(true) | 
 |  |  |         } | 
 |  |  |  | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     return ( | 
 |  |  |         <> | 
 |  |  |             <Button size="small" variant="contained" color="secondary" onClick={modalChange}>{translate("toolbar.batchPrint")}</Button> | 
 |  |  |  | 
 |  |  |             <PrintModal | 
 |  |  |                 open={createDialog} | 
 |  |  |                 setOpen={setCreateDialog} | 
 |  |  |                 rows={rows} | 
 |  |  |             /> | 
 |  |  |         </> | 
 |  |  |     ) | 
 |  |  | } | 
 |  |  |  | 
 |  |  | const PrintButton = ({ rows }) => { | 
 |  |  |     const record = useRecordContext(); | 
 |  |  |  | 
 |  |  |     const notify = useNotify(); | 
 |  |  |     const refresh = useRefresh(); | 
 |  |  |  | 
 |  |  |     const [createDialog, setCreateDialog] = useState(false); | 
 |  |  |     const translate = useTranslate(); | 
 |  |  |  | 
 |  |  |     return ( | 
 |  |  |         <> | 
 |  |  |             <Button size="small" variant="contained" color="secondary" onClick={() => setCreateDialog(true)}>{translate("toolbar.print")}</Button> | 
 |  |  |  | 
 |  |  |             <PrintModal | 
 |  |  |                 open={createDialog} | 
 |  |  |                 setOpen={setCreateDialog} | 
 |  |  |                 rows={rows} | 
 |  |  |             /> | 
 |  |  |         </> | 
 |  |  |     ) | 
 |  |  | } |