| | |
| | | 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 [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); |
| | | } |
| | |
| | | if (res?.data?.code === 200) { |
| | | setOpen(false); |
| | | refresh(); |
| | | billReload?.current() |
| | | resetData() |
| | | } else { |
| | | notify(res.data.msg); |
| | | } |
| | |
| | | |
| | | const [selectedRows, setSelectedRows] = useState([]); |
| | | |
| | | |
| | | |
| | | const handleDeleteItem = () => { |
| | | const newTableData = _.filter(tabelData, (item) => !selectedRows.includes(item.matnrId)); |
| | | setTableData(newTableData); |
| | |
| | | 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 md={4}> |
| | | <Grid item md={3}> |
| | | <DictSelect |
| | | label={translate("table.field.asnOrder.type")} |
| | | value={formData.type} |
| | |
| | | |
| | | </Grid> |
| | | |
| | | <Grid item md={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> |
| | | |
| | | <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 }}> |
| | |
| | | |
| | | 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: 'anfme', |
| | | headerName: translate('table.field.asnOrderItem.purQty'), |
| | | type: 'number', |
| | | minWidth: 100, |
| | | flex: 1, |
| | | editable: true, |
| | | valueFormatter: (val) => val < 0 ? 0 : val |
| | | }, |
| | | { |
| | | field: 'splrCode', |
| | |
| | | |
| | | |
| | | 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 |
| | |
| | | disableColumnSorting |
| | | disableMultipleColumnsSorting |
| | | processRowUpdate={processRowUpdate} |
| | | autoPageSize |
| | | initialState={{ |
| | | pagination: { |
| | | paginationModel: { |
| | | pageSize: 25, |
| | | }, |
| | | }, |
| | | }} |
| | | pageSizeOptions={[10, 25, 50, 100]} |
| | | editMode="row" |
| | | checkboxSelection |
| | | onRowSelectionModelChange={handleSelectionChange} |