|  |  | 
 |  |  | import { Box, Card, Grid, LinearProgress } from "@mui/material"; | 
 |  |  | import React, { useState, useRef, useEffect, useMemo } from "react"; | 
 |  |  | import { | 
 |  |  |     List, | 
 |  |  | 
 |  |  |     SaveButton, | 
 |  |  |     useRefresh, | 
 |  |  |     useGetList, | 
 |  |  |     useGetOne, | 
 |  |  | } from 'react-admin'; | 
 |  |  | import { PAGE_DRAWER_WIDTH, OPERATE_MODE, DEFAULT_PAGE_SIZE, DEFAULT_ITEM_PAGE_SIZE } from '@/config/setting'; | 
 |  |  | import { styled } from '@mui/material/styles'; | 
 |  |  | import { DataGrid } from '@mui/x-data-grid'; | 
 |  |  |  | 
 |  |  | const StyledDatagrid = styled(DatagridConfigurable)(({ theme }) => ({ | 
 |  |  |     '& .css-1vooibu-MuiSvgIcon-root': { | 
 |  |  |         height: '.9em' | 
 |  |  |     }, | 
 |  |  |     '& .RaDatagrid-row': { | 
 |  |  |         cursor: 'auto' | 
 |  |  |     }, | 
 |  |  | })); | 
 |  |  |  | 
 |  |  |  | 
 |  |  | const OutStockPublic = (props) => { | 
 |  |  |     const { record } = props; | 
 |  |  |  | 
 |  |  |     return ( | 
 |  |  |         <> | 
 |  |  |          | 
 |  |  |             <Box> | 
 |  |  |                 <Grid sx={{ display: "flex" }} container rowSpacing={2} columnSpacing={2}> | 
 |  |  |                     <Grid item xl={6} gap={2} > | 
 |  |  |                         <Card> | 
 |  |  |                             <List | 
 |  |  |                                 resource="outStockItem" | 
 |  |  |                                 storeKey='outStockItem' | 
 |  |  |                                 sx={{ | 
 |  |  |                                     flexGrow: 1, | 
 |  |  |                                     transition: (theme) => | 
 |  |  |                                         theme.transitions.create(['all'], { | 
 |  |  |                                             duration: theme.transitions.duration.enteringScreen, | 
 |  |  |                                         }), | 
 |  |  |                                 }} | 
 |  |  |                                 title={"menu.outStockItem"} | 
 |  |  |                                 empty={false} | 
 |  |  |                                 filter={{ asnId: record?.id, deleted: 0 }} | 
 |  |  |                                 sort={{ field: "create_time", order: "desc" }} | 
 |  |  |                                 actions={false} | 
 |  |  |                                 perPage={DEFAULT_ITEM_PAGE_SIZE} | 
 |  |  |                             > | 
 |  |  |                                 <LinearProgress | 
 |  |  |                                     sx={{ height: "2px", position: 'absolute', top: 0, left: 0, right: 0, }} | 
 |  |  |                                 /> | 
 |  |  |                                 <StyledDatagrid | 
 |  |  |                                     preferenceKey='outStockItem' | 
 |  |  |                                     bulkActionButtons={false} | 
 |  |  |                                     rowClick={false} | 
 |  |  |                                     omit={['id', 'splrName', 'qty']} | 
 |  |  |                                 > | 
 |  |  |                                     <NumberField source="id" /> | 
 |  |  |                                     <TextField source="asnCode" label="table.field.outStockItem.asnCode" /> | 
 |  |  |                                     <TextField source="poCode" label="table.field.outStockItem.poCode" /> | 
 |  |  |                                     <TextField source="matnrCode" label="table.field.outStockItem.matnrCode" /> | 
 |  |  |                                     <TextField source="maktx" label="table.field.outStockItem.maktx" /> | 
 |  |  |                                     <NumberField source="anfme" label="table.field.outStockItem.anfme" /> | 
 |  |  |                                     <NumberField source="workQty" label="table.field.outStockItem.workQty" /> | 
 |  |  |                                     <NumberField source="qty" label="table.field.outStockItem.qty" /> | 
 |  |  |                                     <TextField source="stockUnit" label="table.field.outStockItem.stockUnit" /> | 
 |  |  |                                     <TextField source="splrName" label="table.field.outStockItem.splrName" /> | 
 |  |  |                                 </StyledDatagrid> | 
 |  |  |                             </List> | 
 |  |  |                         </Card> | 
 |  |  |                     </Grid> | 
 |  |  |                     <Grid item xl={6} gap={2}> | 
 |  |  |                         <Card> | 
 |  |  |                             <Box> | 
 |  |  |                                 <DataGrid | 
 |  |  |                                     rows={rows} | 
 |  |  |                                     columns={columns} | 
 |  |  |                                     initialState={{ | 
 |  |  |                                         pagination: { | 
 |  |  |                                             paginationModel: { | 
 |  |  |                                                 pageSize: 15, | 
 |  |  |                                             }, | 
 |  |  |                                         }, | 
 |  |  |                                     }} | 
 |  |  |                                     pageSizeOptions={[15, 25, 35, 45]} | 
 |  |  |                                     disableRowSelectionOnClick | 
 |  |  |                                 /> | 
 |  |  |                             </Box> | 
 |  |  |                         </Card> | 
 |  |  |                     </Grid> | 
 |  |  |                 </Grid> | 
 |  |  |             </Box> | 
 |  |  |         </> | 
 |  |  |     ); | 
 |  |  | } | 
 |  |  |  | 
 |  |  |  | 
 |  |  | const rows = [ | 
 |  |  |     { id: 1, locCode: '03-02-1-2-1', container: 'Snow', batch: 'Jon', curQty: 14 }, | 
 |  |  |     { id: 2, locCode: '03-02-1-2-1', container: 'Lannister', batch: 'Cersei', curQty: 31 }, | 
 |  |  |     { id: 3, locCode: '03-02-1-2-1', container: 'Lannister', batch: 'Jaime', curQty: 31 }, | 
 |  |  |     { id: 4, locCode: '03-02-1-2-1', container: 'Stark', batch: 'Arya', curQty: 11 }, | 
 |  |  |     { id: 5, locCode: '03-02-1-2-1', container: 'Targaryen', batch: 'Daenerys', curQty: null }, | 
 |  |  |     { id: 6, locCode: '03-02-1-2-1', container: 'Melisandre', batch: null, curQty: 150 }, | 
 |  |  |     { id: 7, locCode: '03-02-1-2-1', container: 'Clifford', batch: 'Ferrara', curQty: 44 }, | 
 |  |  |     { id: 8, locCode: '03-02-1-2-1', container: 'Frances', batch: 'Rossini', curQty: 36 }, | 
 |  |  |     { id: 9, locCode: '03-02-1-2-1', container: 'Roxie', batch: 'Harvey', curQty: 65 }, | 
 |  |  | ] | 
 |  |  |  | 
 |  |  | const columns = [ | 
 |  |  |     { field: 'id', headerName: 'ID', width: 40 }, | 
 |  |  |     { field: 'locCode', headerName: '库位', width: 110 }, | 
 |  |  |     { field: 'container', headerName: '容器', width: 120 }, | 
 |  |  |     { field: 'batch', headerName: '批次', width: 90 }, | 
 |  |  |     { field: 'unit', headerName: '单位', width: 90 }, | 
 |  |  |     { field: 'curQty', headerName: '本次出库数量', width: 110 }, | 
 |  |  |     { field: 'siteNo', headerName: '出库口', width: 90 }, `` | 
 |  |  | ] | 
 |  |  |  | 
 |  |  |  | 
 |  |  | export default OutStockPublic; | 
 |  |  |  | 
 |  |  |  |