|  |  |  | 
|---|
|  |  |  | import SaveIcon from '@mui/icons-material/Save'; | 
|---|
|  |  |  | import request from '@/utils/request'; | 
|---|
|  |  |  | import { Add, Edit, Delete } from '@mui/icons-material'; | 
|---|
|  |  |  | import _ from 'lodash'; | 
|---|
|  |  |  | import { DataGrid } from '@mui/x-data-grid'; | 
|---|
|  |  |  | import _, { set } from 'lodash'; | 
|---|
|  |  |  | import { DataGrid, useGridApiRef } from '@mui/x-data-grid'; | 
|---|
|  |  |  | import DictionarySelect from "../components/DictionarySelect"; | 
|---|
|  |  |  | import DictSelect from "../components/DictSelect"; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const AsnOrderModal = (props) => { | 
|---|
|  |  |  | const { open, setOpen, asnId } = props; | 
|---|
|  |  |  | const { open, setOpen, asnId, billReload } = props; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const translate = useTranslate(); | 
|---|
|  |  |  | const notify = useNotify(); | 
|---|
|  |  |  | const refresh = useRefresh(); | 
|---|
|  |  |  | const [disabled, setDisabled] = useState(false) | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const [createDialog, setCreateDialog] = useState(false); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const tableRef = useRef(); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | useEffect(() => { | 
|---|
|  |  |  | if (open && asnId !== 0) { | 
|---|
|  |  |  | requestGetHead() | 
|---|
|  |  |  | requestGetBody() | 
|---|
|  |  |  | } | 
|---|
|  |  |  | setDisabled(false) | 
|---|
|  |  |  | }, [open]) | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const handleClose = (event, reason) => { | 
|---|
|  |  |  | 
|---|
|  |  |  | const [formData, setFormData] = useState({ | 
|---|
|  |  |  | type: '', | 
|---|
|  |  |  | wkType: '', | 
|---|
|  |  |  | poCode: '', | 
|---|
|  |  |  | logisNo: '' | 
|---|
|  |  |  | }); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const [tabelData, setTableData] = useState([]); | 
|---|
|  |  |  | 
|---|
|  |  |  | })); | 
|---|
|  |  |  | }; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const resetData = () => { | 
|---|
|  |  |  | setFormData({ | 
|---|
|  |  |  | type: '', | 
|---|
|  |  |  | wkType: '', | 
|---|
|  |  |  | poCode: '', | 
|---|
|  |  |  | logisNo: '' | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | setTableData([]) | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const setFinally = () => { | 
|---|
|  |  |  | const rows = tableRef.current.state.editRows; | 
|---|
|  |  |  | for (const key in rows) { | 
|---|
|  |  |  | const find = tabelData.find(item => item.matnrId === +key); | 
|---|
|  |  |  | find.anfme = rows[key].anfme.value; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | setTableData([...tabelData]); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const handleSubmit = async () => { | 
|---|
|  |  |  | setFinally() | 
|---|
|  |  |  | setDisabled(true) | 
|---|
|  |  |  |  | 
|---|
|  |  |  | if (asnId === 0) { | 
|---|
|  |  |  | const parmas = { | 
|---|
|  |  |  | "orders": formData, | 
|---|
|  |  |  | 
|---|
|  |  |  | if (res?.data?.code === 200) { | 
|---|
|  |  |  | setOpen(false); | 
|---|
|  |  |  | refresh(); | 
|---|
|  |  |  | billReload?.current() | 
|---|
|  |  |  | resetData() | 
|---|
|  |  |  | } else { | 
|---|
|  |  |  | notify(res.data.msg); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | 
|---|
|  |  |  | "orders": formData, | 
|---|
|  |  |  | "items": tabelData, | 
|---|
|  |  |  | } | 
|---|
|  |  |  | console.log(parmas); | 
|---|
|  |  |  | // const res = await request.post(`/asnOrder/items/save`, parmas); | 
|---|
|  |  |  | // if (res?.data?.code === 200) { | 
|---|
|  |  |  | //     setOpen(false); | 
|---|
|  |  |  | //     refresh(); | 
|---|
|  |  |  | // } else { | 
|---|
|  |  |  | //     notify(res.data.msg); | 
|---|
|  |  |  | // } | 
|---|
|  |  |  | // setOpen(false); | 
|---|
|  |  |  | const res = await request.post(`/asnOrder/items/update`, parmas); | 
|---|
|  |  |  | if (res?.data?.code === 200) { | 
|---|
|  |  |  | setOpen(false); | 
|---|
|  |  |  | refresh(); | 
|---|
|  |  |  | billReload?.current() | 
|---|
|  |  |  | resetData() | 
|---|
|  |  |  | } else { | 
|---|
|  |  |  | notify(res.data.msg); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | setDisabled(false) | 
|---|
|  |  |  |  | 
|---|
|  |  |  | }; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const [selectedRows, setSelectedRows] = useState([]); | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const handleDeleteItem = () => { | 
|---|
|  |  |  | const newTableData = _.filter(tabelData, (item) => !selectedRows.includes(item.matnrId)); | 
|---|
|  |  |  | setTableData(newTableData); | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | return ( | 
|---|
|  |  |  | <> | 
|---|
|  |  |  | <Dialog | 
|---|
|  |  |  | 
|---|
|  |  |  | aria-hidden | 
|---|
|  |  |  | fullWidth | 
|---|
|  |  |  | disableRestoreFocus | 
|---|
|  |  |  | maxWidth="md"   // 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 
|---|
|  |  |  | maxWidth="lg"   // 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <DialogTitle id="form-dialog-title" sx={{ | 
|---|
|  |  |  | position: 'sticky', | 
|---|
|  |  |  | 
|---|
|  |  |  | <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}> | 
|---|
|  |  |  | <Form> | 
|---|
|  |  |  | <Grid container spacing={2}> | 
|---|
|  |  |  | <Grid item xs={4}> | 
|---|
|  |  |  | <Grid item md={3}> | 
|---|
|  |  |  | <DictSelect | 
|---|
|  |  |  | label={translate("table.field.asnOrder.type")} | 
|---|
|  |  |  | value={formData.type} | 
|---|
|  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | </Grid> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <Grid item xs={4}> | 
|---|
|  |  |  | <Grid item md={3}> | 
|---|
|  |  |  | <DictSelect | 
|---|
|  |  |  | label={translate("table.field.asnOrder.wkType")} | 
|---|
|  |  |  | value={formData.wkType} | 
|---|
|  |  |  | onChange={(e) => handleChange(e.target.value, 'wkType')} | 
|---|
|  |  |  | dictTypeCode="sys_business_type" | 
|---|
|  |  |  | required | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | </Grid> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <Grid item md={3}> | 
|---|
|  |  |  | <TextField | 
|---|
|  |  |  | label={translate("table.field.asnOrder.poCode")} | 
|---|
|  |  |  | value={formData.poCode} | 
|---|
|  |  |  | onChange={(e) => handleChange(e.target.value, 'poCode')} | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | </Grid> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <Grid item md={3}> | 
|---|
|  |  |  | <TextField | 
|---|
|  |  |  | label={translate("table.field.asnOrder.logisNo")} | 
|---|
|  |  |  | value={formData.logisNo} | 
|---|
|  |  |  | onChange={(e) => handleChange(e.target.value, 'logisNo')} | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | </Grid> | 
|---|
|  |  |  | </Grid> | 
|---|
|  |  |  | 
|---|
|  |  |  | <Box sx={{ mt: 2 }}> | 
|---|
|  |  |  | <Stack direction="row" spacing={2}> | 
|---|
|  |  |  | <Button variant="contained" onClick={() => setCreateDialog(true)}>新增物料</Button> | 
|---|
|  |  |  | {asnId !== '' && <ConfirmButton label={'删除'} variant="outlined" color="error" onConfirm={handleDelete} />} | 
|---|
|  |  |  | {/* {asnId !== '' && <ConfirmButton label={'删除'} variant="outlined" color="error" onConfirm={handleDelete} />} */} | 
|---|
|  |  |  | <ConfirmButton label={'删除'} variant="outlined" color="error" onConfirm={handleDeleteItem} /> | 
|---|
|  |  |  | </Stack> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | </Box> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <Box sx={{ mt: 2 }}> | 
|---|
|  |  |  | <AsnOrderModalTable tabelData={tabelData} setTableData={setTableData} asnId={asnId} ></AsnOrderModalTable> | 
|---|
|  |  |  | <AsnOrderModalTable tabelData={tabelData} setTableData={setTableData} asnId={asnId} selectedRows={selectedRows} setSelectedRows={setSelectedRows} tableRef={tableRef}></AsnOrderModalTable> | 
|---|
|  |  |  | </Box> | 
|---|
|  |  |  | </DialogContent> | 
|---|
|  |  |  | <DialogActions sx={{ position: 'sticky', bottom: 0, backgroundColor: 'background.paper', zIndex: 1000 }}> | 
|---|
|  |  |  | <Toolbar sx={{ width: '100%', justifyContent: 'space-between' }}  > | 
|---|
|  |  |  | <Button onClick={handleSubmit} variant="contained" startIcon={<SaveIcon />}> | 
|---|
|  |  |  | <Button disabled={disabled} onClick={handleSubmit} variant="contained" startIcon={<SaveIcon />}> | 
|---|
|  |  |  | {translate('toolbar.confirm')} | 
|---|
|  |  |  | </Button> | 
|---|
|  |  |  | </Toolbar> | 
|---|
|  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | export default AsnOrderModal; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const AsnOrderModalTable = ({ tabelData, setTableData, asnId }) => { | 
|---|
|  |  |  | const AsnOrderModalTable = ({ tabelData, setTableData, asnId, selectedRows, setSelectedRows, tableRef }) => { | 
|---|
|  |  |  | const translate = useTranslate(); | 
|---|
|  |  |  | const notify = useNotify(); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const [columns, setColumns] = useState([ | 
|---|
|  |  |  | { | 
|---|
|  |  |  | field: 'action', | 
|---|
|  |  |  | headerName: '操作', | 
|---|
|  |  |  | width: 70, | 
|---|
|  |  |  | lockPosition: 'left', | 
|---|
|  |  |  | renderCell: (params) => ( | 
|---|
|  |  |  | <Tooltip title="Delete"> | 
|---|
|  |  |  | <IconButton onClick={() => handleDelete(params.row)}> | 
|---|
|  |  |  | <Delete /> | 
|---|
|  |  |  | </IconButton> | 
|---|
|  |  |  | </Tooltip> | 
|---|
|  |  |  | ), | 
|---|
|  |  |  |  | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | { | 
|---|
|  |  |  | field: 'matnrId', | 
|---|
|  |  |  | headerName: translate('table.field.asnOrderItem.matnrId'), | 
|---|
|  |  |  | minWidth: 100, | 
|---|
|  |  |  | flex: 1, | 
|---|
|  |  |  | editable: false, | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | { | 
|---|
|  |  |  | field: 'maktx', | 
|---|
|  |  |  | headerName: translate('table.field.asnOrderItem.maktx'), | 
|---|
|  |  |  | minWidth: 100, | 
|---|
|  |  |  | flex: 1, | 
|---|
|  |  |  | editable: true, | 
|---|
|  |  |  | width: 250, | 
|---|
|  |  |  | editable: false, | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | { | 
|---|
|  |  |  | field: 'poDetlId', | 
|---|
|  |  |  | headerName: translate('table.field.asnOrderItem.poDetlId'), | 
|---|
|  |  |  | minWidth: 100, | 
|---|
|  |  |  | flex: 1, | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | { | 
|---|
|  |  |  | field: 'poDetlCode', | 
|---|
|  |  |  | headerName: translate('table.field.asnOrderItem.poDetlCode'), | 
|---|
|  |  |  | minWidth: 100, | 
|---|
|  |  |  | flex: 1, | 
|---|
|  |  |  | field: 'matnrCode', | 
|---|
|  |  |  | headerName: translate('table.field.asnOrderItem.matnrCode'), | 
|---|
|  |  |  | width: 130, | 
|---|
|  |  |  | editable: false, | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | { | 
|---|
|  |  |  | field: 'anfme', | 
|---|
|  |  |  | headerName: translate('table.field.asnOrderItem.anfme'), | 
|---|
|  |  |  | minWidth: 100, | 
|---|
|  |  |  | flex: 1, | 
|---|
|  |  |  | editable: true, | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | { | 
|---|
|  |  |  | field: 'stockUnit', | 
|---|
|  |  |  | headerName: translate('table.field.asnOrderItem.stockUnit'), | 
|---|
|  |  |  | minWidth: 100, | 
|---|
|  |  |  | flex: 1, | 
|---|
|  |  |  | editable: false, | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | { | 
|---|
|  |  |  | field: 'purQty', | 
|---|
|  |  |  | headerName: translate('table.field.asnOrderItem.purQty'), | 
|---|
|  |  |  | type: 'number', | 
|---|
|  |  |  | minWidth: 100, | 
|---|
|  |  |  | flex: 1, | 
|---|
|  |  |  | editable: true, | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | { | 
|---|
|  |  |  | field: 'purUnit', | 
|---|
|  |  |  | headerName: translate('table.field.asnOrderItem.purUnit'), | 
|---|
|  |  |  | minWidth: 100, | 
|---|
|  |  |  | flex: 1, | 
|---|
|  |  |  | editable: false, | 
|---|
|  |  |  | valueFormatter: (val) => val < 0 ? 0 : val | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | { | 
|---|
|  |  |  | field: 'splrCode', | 
|---|
|  |  |  | 
|---|
|  |  |  | flex: 1, | 
|---|
|  |  |  | editable: true, | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | // { | 
|---|
|  |  |  | //     field: 'packName', | 
|---|
|  |  |  | //     headerName: translate('table.field.asnOrderItem.packName'), | 
|---|
|  |  |  | //     minWidth: 100, | 
|---|
|  |  |  | //     flex: 1, | 
|---|
|  |  |  | //     editable: true, | 
|---|
|  |  |  | // }, | 
|---|
|  |  |  | // { | 
|---|
|  |  |  | //     field: 'poDetlId', | 
|---|
|  |  |  | //     headerName: translate('table.field.asnOrderItem.poDetlId'), | 
|---|
|  |  |  | //     minWidth: 100, | 
|---|
|  |  |  | //     flex: 1, | 
|---|
|  |  |  | // }, | 
|---|
|  |  |  | { | 
|---|
|  |  |  | field: 'packName', | 
|---|
|  |  |  | headerName: translate('table.field.asnOrderItem.packName'), | 
|---|
|  |  |  | field: 'platItemId', | 
|---|
|  |  |  | headerName: translate('table.field.asnOrderItem.platItemId'), | 
|---|
|  |  |  | minWidth: 100, | 
|---|
|  |  |  | flex: 1, | 
|---|
|  |  |  | editable: true, | 
|---|
|  |  |  | }, | 
|---|
|  |  |  |  | 
|---|
|  |  |  | { | 
|---|
|  |  |  | field: 'stockUnit', | 
|---|
|  |  |  | headerName: translate('table.field.asnOrderItem.stockUnit'), | 
|---|
|  |  |  | minWidth: 100, | 
|---|
|  |  |  | flex: 1, | 
|---|
|  |  |  | editable: false, | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | // { | 
|---|
|  |  |  | //     field: 'purQty', | 
|---|
|  |  |  | //     headerName: translate('table.field.asnOrderItem.purQty'), | 
|---|
|  |  |  | //     minWidth: 100, | 
|---|
|  |  |  | //     flex: 1, | 
|---|
|  |  |  | //     editable: true, | 
|---|
|  |  |  | // }, | 
|---|
|  |  |  | { | 
|---|
|  |  |  | field: 'purUnit', | 
|---|
|  |  |  | headerName: translate('table.field.asnOrderItem.purUnit'), | 
|---|
|  |  |  | minWidth: 100, | 
|---|
|  |  |  | flex: 1, | 
|---|
|  |  |  | editable: false, | 
|---|
|  |  |  | }, | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | ]) | 
|---|
|  |  |  |  | 
|---|
|  |  |  | 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([]); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | 
|---|
|  |  |  | headerName: el.fieldsAlise, | 
|---|
|  |  |  | minWidth: 100, | 
|---|
|  |  |  | flex: 1, | 
|---|
|  |  |  | editable: el.unique | 
|---|
|  |  |  | editable: false | 
|---|
|  |  |  | })) | 
|---|
|  |  |  | setColumns([...columns, ...cols]) | 
|---|
|  |  |  | setColumns([...columns, ...cols, action]) | 
|---|
|  |  |  | } else { | 
|---|
|  |  |  | notify(msg); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const processRowUpdate = (newRow, oldRow) => { | 
|---|
|  |  |  | setTableData((prevData) => | 
|---|
|  |  |  | prevData.map((r) => | 
|---|
|  |  |  | r.matnrId === newRow.matnrId ? { ...newRow } : r | 
|---|
|  |  |  | ) | 
|---|
|  |  |  | ); | 
|---|
|  |  |  | const rows = tabelData.map((r) => | 
|---|
|  |  |  | r.matnrId === newRow.matnrId ? { ...newRow } : r | 
|---|
|  |  |  | ) | 
|---|
|  |  |  | setTableData(rows) | 
|---|
|  |  |  | // setTableData((prevData) => | 
|---|
|  |  |  | //     prevData.map((r) => | 
|---|
|  |  |  | //         r.matnrId === newRow.matnrId ? { ...newRow } : r | 
|---|
|  |  |  | //     ) | 
|---|
|  |  |  |  | 
|---|
|  |  |  | // ); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | 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 | 
|---|
|  |  |  | 
|---|
|  |  |  | disableColumnSorting | 
|---|
|  |  |  | disableMultipleColumnsSorting | 
|---|
|  |  |  | processRowUpdate={processRowUpdate} | 
|---|
|  |  |  | autoPageSize | 
|---|
|  |  |  | initialState={{ | 
|---|
|  |  |  | pagination: { | 
|---|
|  |  |  | paginationModel: { | 
|---|
|  |  |  | pageSize: 25, | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | }} | 
|---|
|  |  |  | pageSizeOptions={[10, 25, 50, 100]} | 
|---|
|  |  |  | editMode="row" | 
|---|
|  |  |  | checkboxSelection | 
|---|
|  |  |  | onRowSelectionModelChange={handleSelectionChange} | 
|---|
|  |  |  | selectionModel={selectedRows} | 
|---|
|  |  |  | sx={{ | 
|---|
|  |  |  | '& .MuiDataGrid-cell input': { | 
|---|
|  |  |  | border: '1px solid #ccc' | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | }} | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | ); | 
|---|