|  |  | 
 |  |  |     DialogActions, | 
 |  |  |     DialogContent, | 
 |  |  |     DialogTitle, | 
 |  |  |     TextField, | 
 |  |  |     Button, | 
 |  |  |     Stack, | 
 |  |  |     Grid, | 
 |  |  |     Box, | 
 |  |  | } from '@mui/material'; | 
 |  |  | import DialogCloseButton from "../../components/DialogCloseButton.jsx"; | 
 |  |  | import StatusSelectInput from "../../components/StatusSelectInput.jsx"; | 
 |  |  | import MemoInput from "../../components/MemoInput.jsx"; | 
 |  |  | import CreateBySelectMats from "./CreateBySelectMats.jsx"; | 
 |  |  | import { DataGrid, useGridApiRef } from '@mui/x-data-grid'; | 
 |  |  | import ConfirmButton from "../../components/ConfirmButton"; | 
 |  |  | import DictSelect from "../../components/DictSelect"; | 
 |  |  | import SaveIcon from '@mui/icons-material/Save'; | 
 |  |  | import request from '@/utils/request'; | 
 |  |  |  | 
 |  |  | const TransferCreate = (props) => { | 
 |  |  |     const { open, setOpen } = props; | 
 |  |  |  | 
 |  |  |     const translate = useTranslate(); | 
 |  |  |     const { open, setOpen, orderId } = props; | 
 |  |  |     const tableRef = useRef(); | 
 |  |  |     const notify = useNotify(); | 
 |  |  |     const translate = useTranslate(); | 
 |  |  |     const [tabelData, setTableData] = useState([]); | 
 |  |  |     const [disabled, setDisabled] = useState(false) | 
 |  |  |     const [selectedRows, setSelectedRows] = useState([]); | 
 |  |  |     const [createDialog, setCreateDialog] = useState(false); | 
 |  |  |     const [formData, setFormData] = useState({}); | 
 |  |  |  | 
 |  |  |     const handleClose = (event, reason) => { | 
 |  |  |         if (reason !== "backdropClick") { | 
 |  |  | 
 |  |  |         } | 
 |  |  |     }; | 
 |  |  |  | 
 |  |  |     const handleSubmit = async () => { | 
 |  |  |         setFinally() | 
 |  |  |         setDisabled(true) | 
 |  |  |  | 
 |  |  |         if (asnId === 0) { | 
 |  |  |             const parmas = { | 
 |  |  |                 "orders": formData, | 
 |  |  |                 "items": tabelData, | 
 |  |  |             } | 
 |  |  |             const res = await request.post(`/outStock/items/save`, parmas); | 
 |  |  |             if (res?.data?.code === 200) { | 
 |  |  |                 setOpen(false); | 
 |  |  |                 refresh(); | 
 |  |  |                 resetData() | 
 |  |  |             } else { | 
 |  |  |                 notify(res.data.msg); | 
 |  |  |             } | 
 |  |  |         } else { | 
 |  |  |             const parmas = { | 
 |  |  |                 "orders": formData, | 
 |  |  |                 "items": tabelData, | 
 |  |  |             } | 
 |  |  |             const res = await request.post(`/outStock/items/update`, parmas); | 
 |  |  |             if (res?.data?.code === 200) { | 
 |  |  |                 setOpen(false); | 
 |  |  |                 refresh(); | 
 |  |  |                 resetData() | 
 |  |  |             } else { | 
 |  |  |                 notify(res.data.msg); | 
 |  |  |             } | 
 |  |  |         } | 
 |  |  |         setDisabled(false) | 
 |  |  |  | 
 |  |  |     }; | 
 |  |  |  | 
 |  |  |     const handleSuccess = async (data) => { | 
 |  |  |         setOpen(false); | 
 |  |  |         notify('common.response.success'); | 
 |  |  |     }; | 
 |  |  |  | 
 |  |  |     const handleDeleteItem = () => { | 
 |  |  |         const newTableData = _.filter(tabelData, (item) => !selectedRows.includes(item.matnrId)); | 
 |  |  |         setTableData(newTableData); | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     const handleError = async (error) => { | 
 |  |  |         notify(error.message || 'common.response.fail', { type: 'error', messageArgs: { _: error.message } }); | 
 |  |  | 
 |  |  |  | 
 |  |  |     return ( | 
 |  |  |         <> | 
 |  |  |             <CreateBase | 
 |  |  |                 record={{}} | 
 |  |  |                 transform={(data) => { | 
 |  |  |                     return data; | 
 |  |  |                 }} | 
 |  |  |                 mutationOptions={{ onSuccess: handleSuccess, onError: handleError }} | 
 |  |  |             <Dialog | 
 |  |  |                 open={open} | 
 |  |  |                 onClose={handleClose} | 
 |  |  |                 aria-labelledby="form-dialog-title" | 
 |  |  |                 aria-hidden | 
 |  |  |                 fullWidth | 
 |  |  |                 disableRestoreFocus | 
 |  |  |                 maxWidth="xl"   // 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 
 |  |  |             > | 
 |  |  |                 <Dialog | 
 |  |  |                     open={open} | 
 |  |  |                     onClose={handleClose} | 
 |  |  |                     aria-labelledby="form-dialog-title" | 
 |  |  |                     fullWidth | 
 |  |  |                     disableRestoreFocus | 
 |  |  |                     maxWidth="md"   // 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 
 |  |  |                 > | 
 |  |  |                     <Form> | 
 |  |  |                         <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 sx={{ mt: 2 }}> | 
 |  |  |                             <Grid container rowSpacing={2} columnSpacing={2}> | 
 |  |  |                                 <Grid item xs={6} display="flex" gap={1}> | 
 |  |  |                                     <TextInput | 
 |  |  |                                         label="table.field.transfer.code" | 
 |  |  |                                         source="code" | 
 |  |  |                                         parse={v => v} | 
 |  |  |                                         autoFocus | 
 |  |  |                 <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 sx={{ mt: 2 }}> | 
 |  |  |                     <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}> | 
 |  |  |                         <Form defaultValues={formData}> | 
 |  |  |                             <Grid container spacing={2}> | 
 |  |  |                                 <Grid item md={2}> | 
 |  |  |                                     <DictSelect | 
 |  |  |                                         label={translate("table.field.outStock.wkType")} | 
 |  |  |                                         value={formData.wkType} | 
 |  |  |                                         variant="filled" | 
 |  |  |                                         group='2' | 
 |  |  |                                         onChange={(e) => handleChange(e.target.value, 'wkType')} | 
 |  |  |                                         dictTypeCode="sys_business_type" | 
 |  |  |                                         required | 
 |  |  |                                     /> | 
 |  |  |                                 </Grid> | 
 |  |  |                                 <Grid item xs={6} display="flex" gap={1}> | 
 |  |  |                                     <NumberInput | 
 |  |  |                                         label="table.field.transfer.type" | 
 |  |  |                                         source="type" | 
 |  |  |                                 <Grid item md={2}> | 
 |  |  |                                     <TextField | 
 |  |  |                                         label={translate("table.field.outStock.poCode")} | 
 |  |  |                                         value={formData.poCode} | 
 |  |  |                                         variant="filled" | 
 |  |  |                                         size='small' | 
 |  |  |                                         onChange={(e) => handleChange(e.target.value, 'poCode')} | 
 |  |  |                                     /> | 
 |  |  |                                 </Grid> | 
 |  |  |                                 <Grid item xs={6} display="flex" gap={1}> | 
 |  |  |                                     <SelectInput | 
 |  |  |                                         label="table.field.transfer.source" | 
 |  |  |                                         source="source" | 
 |  |  |                                         choices={[ | 
 |  |  |                                             { id: 1, name: 'ERP系统' }, | 
 |  |  |                                             { id:  2, name: 'WMS系统生成' }, | 
 |  |  |                                             { id:  3, name: 'EXCEL导入 ' }, | 
 |  |  |                                             { id:  4, name: 'QMS系统' }, | 
 |  |  |                                         ]} | 
 |  |  |                                 <Grid item md={2}> | 
 |  |  |                                     <TextField | 
 |  |  |                                         label={translate("table.field.outStock.logisNo")} | 
 |  |  |                                         value={formData.logisNo} | 
 |  |  |                                         variant="filled" | 
 |  |  |                                         size='small' | 
 |  |  |                                         onChange={(e) => handleChange(e.target.value, 'logisNo')} | 
 |  |  |                                     /> | 
 |  |  |                                 </Grid> | 
 |  |  |                                 <Grid item xs={6} display="flex" gap={1}> | 
 |  |  |                                     <SelectInput | 
 |  |  |                                         label="table.field.transfer.exceStatus" | 
 |  |  |                                         source="exceStatus" | 
 |  |  |                                         choices={[ | 
 |  |  |                                             { id: 0, name: '未执行' }, | 
 |  |  |                                             { id:  1, name: '执行中' }, | 
 |  |  |                                             { id:  2, name: '执行完成' }, | 
 |  |  |                                         ]} | 
 |  |  |                                 <Grid item md={2}> | 
 |  |  |                                     <DateInput | 
 |  |  |                                         source="arrTime" | 
 |  |  |                                         label="table.field.outStock.arrTime" | 
 |  |  |                                         size='small' | 
 |  |  |                                         variant="filled" | 
 |  |  |                                         value={formData.arrTime} | 
 |  |  |                                         onChange={(e) => handleChange(e.target.value, 'arrTime')} | 
 |  |  |                                     /> | 
 |  |  |                                 </Grid> | 
 |  |  |                                 <Grid item xs={6} display="flex" gap={1}> | 
 |  |  |                                     <NumberInput | 
 |  |  |                                         label="table.field.transfer.orgWareId" | 
 |  |  |                                         source="orgWareId" | 
 |  |  |                                     /> | 
 |  |  |                                 </Grid> | 
 |  |  |                                 <Grid item xs={6} display="flex" gap={1}> | 
 |  |  |                                     <TextInput | 
 |  |  |                                         label="table.field.transfer.orgWareName" | 
 |  |  |                                         source="orgWareName" | 
 |  |  |                                         parse={v => v} | 
 |  |  |                                     /> | 
 |  |  |                                 </Grid> | 
 |  |  |                                 <Grid item xs={6} display="flex" gap={1}> | 
 |  |  |                                     <NumberInput | 
 |  |  |                                         label="table.field.transfer.tarWareId" | 
 |  |  |                                         source="tarWareId" | 
 |  |  |                                     /> | 
 |  |  |                                 </Grid> | 
 |  |  |                                 <Grid item xs={6} display="flex" gap={1}> | 
 |  |  |                                     <TextInput | 
 |  |  |                                         label="table.field.transfer.tarWareName" | 
 |  |  |                                         source="tarWareName" | 
 |  |  |                                         parse={v => v} | 
 |  |  |                                     /> | 
 |  |  |                                 </Grid> | 
 |  |  |                                 <Grid item xs={6} display="flex" gap={1}> | 
 |  |  |                                     <NumberInput | 
 |  |  |                                         label="table.field.transfer.orgAreaId" | 
 |  |  |                                         source="orgAreaId" | 
 |  |  |                                     /> | 
 |  |  |                                 </Grid> | 
 |  |  |                                 <Grid item xs={6} display="flex" gap={1}> | 
 |  |  |                                     <TextInput | 
 |  |  |                                         label="table.field.transfer.orgAreaName" | 
 |  |  |                                         source="orgAreaName" | 
 |  |  |                                         parse={v => v} | 
 |  |  |                                     /> | 
 |  |  |                                 </Grid> | 
 |  |  |                                 <Grid item xs={6} display="flex" gap={1}> | 
 |  |  |                                     <NumberInput | 
 |  |  |                                         label="table.field.transfer.tarAreaId" | 
 |  |  |                                         source="tarAreaId" | 
 |  |  |                                     /> | 
 |  |  |                                 </Grid> | 
 |  |  |                                 <Grid item xs={6} display="flex" gap={1}> | 
 |  |  |                                     <TextInput | 
 |  |  |                                         label="table.field.transfer.tarAreaName" | 
 |  |  |                                         source="tarAreaName" | 
 |  |  |                                         parse={v => v} | 
 |  |  |                                     /> | 
 |  |  |                                 </Grid> | 
 |  |  |  | 
 |  |  |                                 <Grid item xs={6} display="flex" gap={1}> | 
 |  |  |                                     <StatusSelectInput /> | 
 |  |  |                                 </Grid> | 
 |  |  |                                 <Grid item xs={12} display="flex" gap={1}> | 
 |  |  |                                     <Stack direction="column" spacing={1} width={'100%'}> | 
 |  |  |                                         <MemoInput /> | 
 |  |  |                                     </Stack> | 
 |  |  |                                 </Grid> | 
 |  |  |                             </Grid> | 
 |  |  |                         </DialogContent> | 
 |  |  |                         <DialogActions sx={{ position: 'sticky', bottom: 0, backgroundColor: 'background.paper', zIndex: 1000 }}> | 
 |  |  |                             <Toolbar sx={{ width: '100%', justifyContent: 'space-between' }}  > | 
 |  |  |                                 <SaveButton /> | 
 |  |  |                             </Toolbar> | 
 |  |  |                         </DialogActions> | 
 |  |  |                     </Form> | 
 |  |  |                 </Dialog> | 
 |  |  |             </CreateBase> | 
 |  |  |                         </Form> | 
 |  |  |                     </Box> | 
 |  |  |  | 
 |  |  |                     <Box sx={{ mt: 2 }}> | 
 |  |  |                         <Stack direction="row" spacing={2}> | 
 |  |  |                             <Button variant="contained" onClick={() => setCreateDialog(true)} > | 
 |  |  |                                 {translate('common.action.newAddMats')} | 
 |  |  |                             </Button> | 
 |  |  |                             <ConfirmButton label={"toolbar.delete"} variant="outlined" color="error" onConfirm={handleDeleteItem} /> | 
 |  |  |                         </Stack> | 
 |  |  |                     </Box> | 
 |  |  |                     <Box sx={{ mt: 2 }}> | 
 |  |  |                         <TransferTableView | 
 |  |  |                             tabelData={tabelData} | 
 |  |  |                             setTableData={setTableData} | 
 |  |  |                             asnId={orderId} | 
 |  |  |                             selectedRows={selectedRows} | 
 |  |  |                             setSelectedRows={setSelectedRows} | 
 |  |  |                             tableRef={tableRef}> | 
 |  |  |                         </TransferTableView> | 
 |  |  |                     </Box> | 
 |  |  |                 </DialogContent> | 
 |  |  |                 <DialogActions sx={{ position: 'sticky', bottom: 0, backgroundColor: 'background.paper', zIndex: 1000 }}> | 
 |  |  |                     <Toolbar sx={{ width: '100%', justifyContent: 'space-between' }}  > | 
 |  |  |                         <Button disabled={disabled} onClick={handleSubmit} variant="contained" startIcon={<SaveIcon />}> | 
 |  |  |                             {translate('toolbar.confirm')} | 
 |  |  |                         </Button> | 
 |  |  |                     </Toolbar> | 
 |  |  |                 </DialogActions> | 
 |  |  |             </Dialog> | 
 |  |  |             <CreateBySelectMats | 
 |  |  |                 open={createDialog} | 
 |  |  |                 setOpen={setCreateDialog} | 
 |  |  |                 data={tabelData} | 
 |  |  |                 setData={setTableData} | 
 |  |  |             /> | 
 |  |  |         </> | 
 |  |  |     ) | 
 |  |  | } | 
 |  |  |  | 
 |  |  | const TransferTableView = ({ tabelData, setTableData, orderId, selectedRows, setSelectedRows, tableRef }) => { | 
 |  |  |     const translate = useTranslate(); | 
 |  |  |     const notify = useNotify(); | 
 |  |  |  | 
 |  |  |     const [columns, setColumns] = useState([ | 
 |  |  |         { | 
 |  |  |             field: 'maktx', | 
 |  |  |             headerName: translate('table.field.outStockItem.maktx'), | 
 |  |  |             width: 250, | 
 |  |  |             editable: false, | 
 |  |  |         }, | 
 |  |  |         { | 
 |  |  |             field: 'matnrCode', | 
 |  |  |             headerName: translate('table.field.outStockItem.matnrCode'), | 
 |  |  |             width: 130, | 
 |  |  |             editable: false, | 
 |  |  |         }, | 
 |  |  |         { | 
 |  |  |             field: 'anfme', | 
 |  |  |             headerName: translate('table.field.outStockItem.anfme') + "*", | 
 |  |  |             type: 'number', | 
 |  |  |             minWidth: 100, | 
 |  |  |             flex: 1, | 
 |  |  |             editable: true, | 
 |  |  |             valueFormatter: (val) => val < 0 ? 0 : val, | 
 |  |  |             headerClassName: "custom", | 
 |  |  |         }, | 
 |  |  |         { | 
 |  |  |             field: 'splrCode', | 
 |  |  |             headerName: translate('table.field.outStockItem.splrCode') + "*", | 
 |  |  |             minWidth: 100, | 
 |  |  |             flex: 1, | 
 |  |  |             editable: true, | 
 |  |  |             renderEditCell: (params) => ( | 
 |  |  |                 <SelectInputSplrCodeEditCell {...params} /> | 
 |  |  |             ), | 
 |  |  |             headerClassName: "custom", | 
 |  |  |         }, | 
 |  |  |         { | 
 |  |  |             field: 'splrName', | 
 |  |  |             headerName: translate('table.field.outStockItem.splrName') + "*", | 
 |  |  |             minWidth: 100, | 
 |  |  |             flex: 1, | 
 |  |  |             editable: true, | 
 |  |  |             renderEditCell: (params) => ( | 
 |  |  |                 <SelectInputSplrNameEditCell {...params} /> | 
 |  |  |             ), | 
 |  |  |             headerClassName: "custom", | 
 |  |  |         }, | 
 |  |  |         { | 
 |  |  |             field: 'splrBatch', | 
 |  |  |             headerName: translate('table.field.outStockItem.splrBatch'), | 
 |  |  |             minWidth: 100, | 
 |  |  |             flex: 1, | 
 |  |  |             editable: true, | 
 |  |  |         }, | 
 |  |  |         { | 
 |  |  |             field: 'poCode', | 
 |  |  |             headerName: translate('table.field.outStockItem.poDetlCode'), | 
 |  |  |             minWidth: 100, | 
 |  |  |             flex: 1, | 
 |  |  |             editable: true, | 
 |  |  |         }, | 
 |  |  |         { | 
 |  |  |             field: 'stockUnit', | 
 |  |  |             headerName: translate('table.field.outStockItem.stockUnit'), | 
 |  |  |             minWidth: 100, | 
 |  |  |             flex: 1, | 
 |  |  |             editable: true, | 
 |  |  |         }, | 
 |  |  |     ]) | 
 |  |  |  | 
 |  |  |     const action = { | 
 |  |  |         field: 'action', | 
 |  |  |         headerName: '操作', | 
 |  |  |         width: 70, | 
 |  |  |         lockPosition: 'left', | 
 |  |  |         renderCell: (params) => ( | 
 |  |  |             <Tooltip title="Delete"> | 
 |  |  |                 <IconButton onClick={() => handleDelete(params.row)}> | 
 |  |  |                     <Delete /> | 
 |  |  |                 </IconButton> | 
 |  |  |             </Tooltip> | 
 |  |  |         ), | 
 |  |  |  | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     let cdata = useRef([]); | 
 |  |  |  | 
 |  |  |     useEffect(() => { | 
 |  |  |         getDynamicFields(); | 
 |  |  |     }, []); | 
 |  |  |  | 
 |  |  |     useEffect(() => { | 
 |  |  |         cdata.current = tabelData | 
 |  |  |     }, [tabelData]); | 
 |  |  |  | 
 |  |  |  | 
 |  |  |     const getDynamicFields = async () => { | 
 |  |  |         const { | 
 |  |  |             data: { code, data, msg }, | 
 |  |  |         } = await request.get("/fields/enable/list"); | 
 |  |  |         if (code === 200) { | 
 |  |  |             const cols = data.map(el => ({ | 
 |  |  |                 field: el.fields, | 
 |  |  |                 headerName: el.fieldsAlise, | 
 |  |  |                 minWidth: 100, | 
 |  |  |                 flex: 1, | 
 |  |  |                 editable: false | 
 |  |  |             })) | 
 |  |  |             setColumns([...columns, ...cols, action]) | 
 |  |  |         } else { | 
 |  |  |             notify(msg); | 
 |  |  |         } | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |  | 
 |  |  |     const handleDelete = (row) => { | 
 |  |  |         const newData = _.filter(cdata.current, (item) => item.matnrId !== row.matnrId); | 
 |  |  |         setTableData(newData); | 
 |  |  |     }; | 
 |  |  |  | 
 |  |  |  | 
 |  |  |     const processRowUpdate = (newRow, oldRow) => { | 
 |  |  |         const rows = tabelData.map((r) => | 
 |  |  |             r.matnrId === newRow.matnrId ? { ...newRow } : r | 
 |  |  |         ) | 
 |  |  |         setTableData(rows) | 
 |  |  |         return newRow; | 
 |  |  |     }; | 
 |  |  |  | 
 |  |  |     const handleSelectionChange = (ids) => { | 
 |  |  |         setSelectedRows(ids) | 
 |  |  |     }; | 
 |  |  |  | 
 |  |  |     tableRef.current = useGridApiRef(); | 
 |  |  |  | 
 |  |  |     return ( | 
 |  |  |         <div style={{ height: 400, width: '100%' }}> | 
 |  |  |             <DataGrid | 
 |  |  |                 apiRef={tableRef} | 
 |  |  |                 rows={tabelData} | 
 |  |  |                 columns={columns} | 
 |  |  |                 disableRowSelectionOnClick | 
 |  |  |                 getRowId={(row) => row.matnrId ? row.matnrId : row.id} | 
 |  |  |                 disableColumnFilter | 
 |  |  |                 disableColumnSelector | 
 |  |  |                 disableColumnSorting | 
 |  |  |                 disableMultipleColumnsSorting | 
 |  |  |                 processRowUpdate={processRowUpdate} | 
 |  |  |                 initialState={{ | 
 |  |  |                     pagination: { | 
 |  |  |                         paginationModel: { | 
 |  |  |                             pageSize: 25, | 
 |  |  |                         }, | 
 |  |  |                     }, | 
 |  |  |                 }} | 
 |  |  |                 pageSizeOptions={[15, 25, 50, 100]} | 
 |  |  |                 editMode="row" | 
 |  |  |                 checkboxSelection | 
 |  |  |                 onRowSelectionModelChange={handleSelectionChange} | 
 |  |  |                 selectionModel={selectedRows} | 
 |  |  |                 sx={{ | 
 |  |  |                     '& .MuiDataGrid-cell input': { | 
 |  |  |                         border: '1px solid #ccc' | 
 |  |  |                     }, | 
 |  |  |                 }} | 
 |  |  |             /> | 
 |  |  |         </div> | 
 |  |  |     ); | 
 |  |  | }; | 
 |  |  |  | 
 |  |  | export default TransferCreate; |