From 75d3e411d1a6ac9c83b4f595db581c8c337e50a9 Mon Sep 17 00:00:00 2001 From: verou <857149855@qq.com> Date: 星期六, 15 三月 2025 16:55:51 +0800 Subject: [PATCH] feat:asn单据修改 --- rsf-admin/src/page/asnOrder/AsnOrderModal.jsx | 289 +++++++++++++++++++++++++++++++++++++-------------------- 1 files changed, 189 insertions(+), 100 deletions(-) diff --git a/rsf-admin/src/page/asnOrder/AsnOrderModal.jsx b/rsf-admin/src/page/asnOrder/AsnOrderModal.jsx index 87d0b1f..2942d22 100644 --- a/rsf-admin/src/page/asnOrder/AsnOrderModal.jsx +++ b/rsf-admin/src/page/asnOrder/AsnOrderModal.jsx @@ -17,6 +17,7 @@ useNotify, Form, useCreateController, + useListContext, useRefresh, } from 'react-admin'; import { @@ -36,6 +37,8 @@ TableBody, TableRow, TableCell, + Tooltip, + IconButton, styled @@ -47,25 +50,36 @@ import { useForm, Controller, useWatch, FormProvider, useFormContext } from "react-hook-form"; 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'; + const AsnOrderModal = (props) => { - const { open, setOpen } = props; + const { open, setOpen, asnId } = props; const translate = useTranslate(); const notify = useNotify(); const refresh = useRefresh(); const [createDialog, setCreateDialog] = useState(false); - const asnId = '' + useEffect(() => { + if (open && asnId !== 0) { + requestGetHead() + requestGetBody() + } + }, [open]) const handleClose = (event, reason) => { if (reason !== "backdropClick") { setOpen(false); + refresh(); + setFormData({ type: '' }) + setTableData([]) } }; const [formData, setFormData] = useState({ type: '', - wkType: '' }); const [tabelData, setTableData] = useState([]); @@ -78,20 +92,60 @@ })); }; - const handleSubmit = () => { - console.log(formData); + const handleSubmit = async () => { + if (asnId === 0) { + const parmas = { + "orders": formData, + "items": tabelData, + } + const res = await request.post(`/asnOrder/items/save`, parmas); + if (res?.data?.code === 200) { + setOpen(false); + refresh(); + } else { + notify(res.data.msg); + } + } else { + setOpen(false); + } + }; + const handleDelete = async () => { - const res = await request.post(`/asnOrder/remove/${asnId}`, {}); + const res = await request.post(`/asnOrder/remove/${asnId}`); if (res?.data?.code === 200) { setOpen(false); refresh(); } else { notify(res.data.msg); } - }; + + const requestGetHead = async () => { + const res = await request.get(`/asnOrder/${asnId}`); + if (res?.data?.code === 200) { + setFormData(res.data.data) + } else { + notify(res.data.msg); + } + } + + const requestGetBody = async () => { + const res = await request.post(`/asnOrderItem/page`, { asnId }); + if (res?.data?.code === 200) { + setTableData(res.data.data.records) + } else { + notify(res.data.msg); + } + } + + const requestSetHead = async () => { + if (asnId !== 0) { + const res = await request.post(`/asnOrder/update`, { ...formData }); + refresh() + } + } return ( @@ -100,6 +154,7 @@ open={open} onClose={handleClose} aria-labelledby="form-dialog-title" + aria-hidden fullWidth disableRestoreFocus maxWidth="md" // 'xs' | 'sm' | 'md' | 'lg' | 'xl' @@ -116,20 +171,23 @@ </Box> </DialogTitle> <DialogContent sx={{ mt: 2 }}> - <Box component="form" onSubmit={handleSubmit} sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}> - <Grid container spacing={2}> - <Grid item xs={4}> - <TextField - label={translate('table.field.asnOrder.type')} - name="type" - value={formData.type} - onChange={handleChange} - variant="outlined" - size="small" - /> - </Grid> + <Box component="form" sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}> + <form> + <Grid container spacing={2}> + <Grid item xs={4}> + <TextField + label={translate('table.field.asnOrder.type')} + name="type" + value={formData.type} + onChange={handleChange} + onBlur={requestSetHead} + variant="outlined" + size="small" + validate={required()} + /> + </Grid> - <Grid item xs={4}> + {/* <Grid item xs={4}> <TextField label={translate('table.field.asnOrder.wkType')} name="wkType" @@ -138,8 +196,9 @@ variant="outlined" size="small" /> + </Grid> */} </Grid> - </Grid> + </form> </Box> <Box sx={{ mt: 2 }}> @@ -151,7 +210,7 @@ </Box> <Box sx={{ mt: 2 }}> - <AsnOrderModalTable tabelData={tabelData} setTableData={setTableData} ></AsnOrderModalTable> + <AsnOrderModalTable tabelData={tabelData} setTableData={setTableData} asnId={asnId} ></AsnOrderModalTable> </Box> </DialogContent> <DialogActions sx={{ position: 'sticky', bottom: 0, backgroundColor: 'background.paper', zIndex: 1000 }}> @@ -167,6 +226,8 @@ <AsnWareModal open={createDialog} setOpen={setCreateDialog} + data={tabelData} + setData={setTableData} /> </> ) @@ -174,127 +235,155 @@ export default AsnOrderModal; -const AsnOrderModalTable = ({ tabelData, setTableData }) => { +const AsnOrderModalTable = ({ tabelData, setTableData, asnId }) => { const translate = useTranslate(); - const notify = useNotify(); - const refresh = useRefresh(); const columns = [ { - id: 'matnrId', - label: 'table.field.asnOrderItem.matnrId', + field: 'action', + headerName: '鎿嶄綔', minWidth: 100, + sticky: 'right', + flex: 1, + renderCell: (params) => ( + <Tooltip title="Delete"> + <IconButton onClick={() => handleDelete(params.row)}> + <Delete /> + </IconButton> + </Tooltip> + ), }, { - id: 'matnk', - label: 'table.field.asnOrderItem.matnk', + field: 'matnrId', + headerName: translate('table.field.asnOrderItem.matnrId'), minWidth: 100, + flex: 1, + editable: false, }, { - id: 'poDetlId', - label: 'table.field.asnOrderItem.poDetlId', + field: 'maktx', + headerName: translate('table.field.asnOrderItem.maktx'), minWidth: 100, + flex: 1, + editable: true, }, { - id: 'poDetlCode', - label: 'table.field.asnOrderItem.poDetlCode', + field: 'poDetlId', + headerName: translate('table.field.asnOrderItem.poDetlId'), minWidth: 100, + flex: 1, }, { - id: 'anfme', - label: 'table.field.asnOrderItem.anfme', + field: 'poDetlCode', + headerName: translate('table.field.asnOrderItem.poDetlCode'), minWidth: 100, + flex: 1, }, { - id: 'stockUnit', - label: 'table.field.asnOrderItem.stockUnit', + field: 'anfme', + headerName: translate('table.field.asnOrderItem.anfme'), minWidth: 100, + flex: 1, + editable: true, }, { - id: 'purQty', - label: 'table.field.asnOrderItem.purQty', + field: 'stockUnit', + headerName: translate('table.field.asnOrderItem.stockUnit'), minWidth: 100, + flex: 1, + editable: true, }, { - id: 'purUnit', - label: 'table.field.asnOrderItem.purUnit', + field: 'purQty', + headerName: translate('table.field.asnOrderItem.purQty'), minWidth: 100, + flex: 1, + editable: true, }, { - id: 'splrCode', - label: 'table.field.asnOrderItem.splrCode', + field: 'purUnit', + headerName: translate('table.field.asnOrderItem.purUnit'), minWidth: 100, + flex: 1, + editable: true, }, { - id: 'splrName', - label: 'table.field.asnOrderItem.splrName', + field: 'splrCode', + headerName: translate('table.field.asnOrderItem.splrCode'), minWidth: 100, + flex: 1, + editable: true, }, { - id: 'qrcode', - label: 'table.field.asnOrderItem.qrcode', + field: 'splrName', + headerName: translate('table.field.asnOrderItem.splrName'), minWidth: 100, + flex: 1, + editable: true, }, { - id: 'barcode', - label: 'table.field.asnOrderItem.barcode', + field: 'qrcode', + headerName: translate('table.field.asnOrderItem.qrcode'), minWidth: 100, + flex: 1, + editable: true, }, { - id: 'packName', - label: 'table.field.asnOrderItem.packName', + field: 'barcode', + headerName: translate('table.field.asnOrderItem.barcode'), minWidth: 100, - }] + flex: 1, + editable: true, + }, + { + field: 'packName', + headerName: translate('table.field.asnOrderItem.packName'), + minWidth: 100, + flex: 1, + editable: true, + }, - const StyledTableRow = styled(TableRow)(({ theme }) => ({ - "& .MuiButtonBase-root.": { - padding: "0px 0px", - }, - })); + ]; - const StyledTableCell = styled(TableCell)(({ theme }) => ({ - "& .MuiButtonBase-root": { - padding: "0px 0px", - }, - overflow: "hidden", - textOverflow: "ellipsis", - whiteSpace: "nowrap", - maxWidth: 600, - })); + const requestSetBody = async (row) => { + if (asnId !== 0) { + const res = await request.post(`/asnOrderItem/update`, row); + } + + } + + const handleDelete = (row) => { + const newData = _.filter(tabelData, (item) => item.matnrId !== row.matnrId); + setTableData(newData); + }; + + + const processRowUpdate = (newRow, oldRow) => { + setTableData((prevData) => + prevData.map((r) => + r.matnrId === newRow.matnrId ? { ...newRow } : r + ) + ); + + requestSetBody(newRow) + return newRow; + }; + return ( - <TableContainer component={Paper} > - <Table size="small" > - <TableHead> - <StyledTableRow key={'head'}> - {columns.map((column) => { - const value = column.label; - return ( - <StyledTableCell - key={column.id} - align={column.align || "left"} - > - {column.format ? column.format(value) : translate(value)} - </StyledTableCell> - ); + <div style={{ height: 400, width: '100%' }}> + <DataGrid + rows={tabelData} + columns={columns} + disableRowSelectionOnClick + getRowId={(row) => row.matnrId} + disableColumnFilter + disableColumnSelector + disableColumnSorting + disableMultipleColumnsSorting + processRowUpdate={processRowUpdate} + /> + </div> + ); +}; - })} - </StyledTableRow> - </TableHead> - - <TableBody> - {tabelData.map((row) => ( - <StyledTableRow key={row.id || Math.random()}> - {columns.map((column) => ( - <StyledTableCell key={column.id} > - {row[column.id]} - </StyledTableCell> - ))} - </StyledTableRow> - ))} - - </TableBody> - </Table> - </TableContainer> - ) -} -- Gitblit v1.9.1