|  |  | 
 |  |  | 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) { | 
 |  |  | 
 |  |  |         })); | 
 |  |  |     }; | 
 |  |  |  | 
 |  |  |     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() | 
 |  |  |             } else { | 
 |  |  |                 notify(res.data.msg); | 
 |  |  |             } | 
 |  |  | 
 |  |  |             if (res?.data?.code === 200) { | 
 |  |  |                 setOpen(false); | 
 |  |  |                 refresh(); | 
 |  |  |                 billReload?.current() | 
 |  |  |  | 
 |  |  |             } else { | 
 |  |  |                 notify(res.data.msg); | 
 |  |  |             } | 
 |  |  |         } | 
 |  |  |  | 
 |  |  |         setDisabled(false) | 
 |  |  |  | 
 |  |  |     }; | 
 |  |  |  | 
 |  |  | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     const [selectedRows, setSelectedRows] = useState([]); | 
 |  |  |  | 
 |  |  |  | 
 |  |  |  | 
 |  |  |     const handleDeleteItem = () => { | 
 |  |  |         const newTableData = _.filter(tabelData, (item) => !selectedRows.includes(item.matnrId)); | 
 |  |  | 
 |  |  |                     </Box> | 
 |  |  |  | 
 |  |  |                     <Box sx={{ mt: 2 }}> | 
 |  |  |                         <AsnOrderModalTable tabelData={tabelData} setTableData={setTableData} asnId={asnId} selectedRows={selectedRows} setSelectedRows={setSelectedRows} ></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, selectedRows, setSelectedRows }) => { | 
 |  |  | const AsnOrderModalTable = ({ tabelData, setTableData, asnId, selectedRows, setSelectedRows, tableRef }) => { | 
 |  |  |     const translate = useTranslate(); | 
 |  |  |     const notify = useNotify(); | 
 |  |  |  | 
 |  |  | 
 |  |  |         { | 
 |  |  |             field: 'maktx', | 
 |  |  |             headerName: translate('table.field.asnOrderItem.maktx'), | 
 |  |  |             minWidth: 100, | 
 |  |  |             flex: 1, | 
 |  |  |             width: 250, | 
 |  |  |             editable: false, | 
 |  |  |         }, | 
 |  |  |         { | 
 |  |  |             field: 'maktxCode', | 
 |  |  |             headerName: translate('table.field.asnOrderItem.maktxCode'), | 
 |  |  |             minWidth: 100, | 
 |  |  |             flex: 1, | 
 |  |  |             field: 'matnrCode', | 
 |  |  |             headerName: translate('table.field.asnOrderItem.matnrCode'), | 
 |  |  |             width: 130, | 
 |  |  |             editable: false, | 
 |  |  |         }, | 
 |  |  |         { | 
 |  |  |             field: 'anfme', | 
 |  |  |             headerName: translate('table.field.asnOrderItem.purQty'), | 
 |  |  |             type: 'number', | 
 |  |  |             minWidth: 100, | 
 |  |  |             flex: 1, | 
 |  |  |             editable: true, | 
 |  |  |             // preProcessEditCellProps: (params) => { | 
 |  |  |             //     const hasError = params.props.value.length !== ''; | 
 |  |  |             //     return { ...params.props, error: hasError }; | 
 |  |  |             // }, | 
 |  |  |         }, | 
 |  |  |         { | 
 |  |  |             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'), | 
 |  |  |             minWidth: 100, | 
 |  |  |             flex: 1, | 
 |  |  |             editable: true, | 
 |  |  |         }, | 
 |  |  |         { | 
 |  |  |             field: 'poDetlId', | 
 |  |  |             headerName: translate('table.field.asnOrderItem.poDetlId'), | 
 |  |  |             minWidth: 100, | 
 |  |  |             flex: 1, | 
 |  |  |         }, | 
 |  |  |         { | 
 |  |  |             field: 'poDetlCode', | 
 |  |  |             headerName: translate('table.field.asnOrderItem.poDetlCode'), | 
 |  |  |             field: 'platItemId', | 
 |  |  |             headerName: translate('table.field.asnOrderItem.platItemId'), | 
 |  |  |             minWidth: 100, | 
 |  |  |             flex: 1, | 
 |  |  |         }, | 
 |  |  | 
 |  |  |  | 
 |  |  |  | 
 |  |  |     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; | 
 |  |  |     }; | 
 |  |  | 
 |  |  |  | 
 |  |  |     }; | 
 |  |  |  | 
 |  |  |     tableRef.current = useGridApiRef(); | 
 |  |  |  | 
 |  |  |  | 
 |  |  |     return ( | 
 |  |  |         <div style={{ height: 400, width: '100%' }}> | 
 |  |  |             <DataGrid | 
 |  |  |                 apiRef={tableRef} | 
 |  |  |                 rows={tabelData} | 
 |  |  |                 columns={columns} | 
 |  |  |                 disableRowSelectionOnClick |