From e427f61669e3d7adae588dd5c0d3d349dfccea58 Mon Sep 17 00:00:00 2001
From: verou <857149855@qq.com>
Date: 星期日, 30 三月 2025 14:53:08 +0800
Subject: [PATCH] feat:收货单修改
---
rsf-admin/src/page/asnOrder/AsnOrderModal.jsx | 440 ++++++++++++++++++++++++++++++++++++------------------
1 files changed, 291 insertions(+), 149 deletions(-)
diff --git a/rsf-admin/src/page/asnOrder/AsnOrderModal.jsx b/rsf-admin/src/page/asnOrder/AsnOrderModal.jsx
index 87d0b1f..e75c230 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,52 +50,118 @@
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';
+import DictionarySelect from "../components/DictionarySelect";
+import DictSelect from "../components/DictSelect";
+
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: '', wkType: '' })
+ setTableData([])
}
};
const [formData, setFormData] = useState({
type: '',
- wkType: ''
+ wkType: '',
});
const [tabelData, setTableData] = useState([]);
- const handleChange = (e) => {
- const { name, value } = e.target;
+
+ const handleChange = (value, name) => {
setFormData((prevData) => ({
...prevData,
[name]: value
}));
};
- 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 {
+ const parmas = {
+ "orders": formData,
+ "items": tabelData,
+ }
+ const res = await request.post(`/asnOrder/items/update`, parmas);
+ if (res?.data?.code === 200) {
+ setOpen(false);
+ refresh();
+ } else {
+ notify(res.data.msg);
+ }
+ }
+
+
};
+
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 [selectedRows, setSelectedRows] = useState([]);
+
+ const handleDeleteItem = () => {
+ const newTableData = _.filter(tabelData, (item) => !selectedRows.includes(item.matnrId));
+ setTableData(newTableData);
+ }
return (
<>
@@ -100,6 +169,7 @@
open={open}
onClose={handleClose}
aria-labelledby="form-dialog-title"
+ aria-hidden
fullWidth
disableRestoreFocus
maxWidth="md" // 'xs' | 'sm' | 'md' | 'lg' | 'xl'
@@ -116,48 +186,51 @@
</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 sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
+ <Form>
+ <Grid container spacing={2}>
+ <Grid item md={4}>
+ <DictSelect
+ label={translate("table.field.asnOrder.type")}
+ value={formData.type}
+ onChange={(e) => handleChange(e.target.value, 'type')}
+ dictTypeCode="sys_order_type"
+ required
+ />
- <Grid item xs={4}>
- <TextField
- label={translate('table.field.asnOrder.wkType')}
- name="wkType"
- value={formData.wkType}
- onChange={handleChange}
- variant="outlined"
- size="small"
- />
+
+ </Grid>
+
+ <Grid item md={4}>
+ <DictSelect
+ label={translate("table.field.asnOrder.wkType")}
+ value={formData.wkType}
+ onChange={(e) => handleChange(e.target.value, 'wkType')}
+ dictTypeCode="sys_business_type"
+ required
+ />
+ </Grid>
</Grid>
- </Grid>
+ </Form>
</Box>
<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} ></AsnOrderModalTable>
+ <AsnOrderModalTable tabelData={tabelData} setTableData={setTableData} asnId={asnId} selectedRows={selectedRows} setSelectedRows={setSelectedRows} ></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 />}>
- 纭
+ {translate('toolbar.confirm')}
</Button>
</Toolbar>
</DialogActions>
@@ -167,6 +240,8 @@
<AsnWareModal
open={createDialog}
setOpen={setCreateDialog}
+ data={tabelData}
+ setData={setTableData}
/>
</>
)
@@ -174,127 +249,194 @@
export default AsnOrderModal;
-const AsnOrderModalTable = ({ tabelData, setTableData }) => {
+const AsnOrderModalTable = ({ tabelData, setTableData, asnId, selectedRows, setSelectedRows }) => {
const translate = useTranslate();
const notify = useNotify();
- const refresh = useRefresh();
- const columns = [
- {
- id: 'matnrId',
- label: 'table.field.asnOrderItem.matnrId',
- minWidth: 100,
- },
- {
- id: 'matnk',
- label: 'table.field.asnOrderItem.matnk',
- minWidth: 100,
- },
- {
- id: 'poDetlId',
- label: 'table.field.asnOrderItem.poDetlId',
- minWidth: 100,
- },
- {
- id: 'poDetlCode',
- label: 'table.field.asnOrderItem.poDetlCode',
- minWidth: 100,
- },
- {
- id: 'anfme',
- label: 'table.field.asnOrderItem.anfme',
- minWidth: 100,
- },
- {
- id: 'stockUnit',
- label: 'table.field.asnOrderItem.stockUnit',
- minWidth: 100,
- },
- {
- id: 'purQty',
- label: 'table.field.asnOrderItem.purQty',
- minWidth: 100,
- },
- {
- id: 'purUnit',
- label: 'table.field.asnOrderItem.purUnit',
- minWidth: 100,
- },
- {
- id: 'splrCode',
- label: 'table.field.asnOrderItem.splrCode',
- minWidth: 100,
- },
- {
- id: 'splrName',
- label: 'table.field.asnOrderItem.splrName',
- minWidth: 100,
- },
- {
- id: 'qrcode',
- label: 'table.field.asnOrderItem.qrcode',
- minWidth: 100,
- },
- {
- id: 'barcode',
- label: 'table.field.asnOrderItem.barcode',
- minWidth: 100,
- },
- {
- id: 'packName',
- label: 'table.field.asnOrderItem.packName',
- minWidth: 100,
- }]
+ const [columns, setColumns] = useState([
- const StyledTableRow = styled(TableRow)(({ theme }) => ({
- "& .MuiButtonBase-root.": {
- padding: "0px 0px",
+ {
+ 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,
+ },
+ {
+ field: 'maktxCode',
+ headerName: translate('table.field.asnOrderItem.maktxCode'),
+ 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'),
+ minWidth: 100,
+ flex: 1,
+ },
+ {
+ field: 'anfme',
+ headerName: translate('table.field.asnOrderItem.purQty'),
+ 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,
+ },
+ {
+ field: 'splrCode',
+ headerName: translate('table.field.asnOrderItem.splrCode'),
+ minWidth: 100,
+ flex: 1,
+ editable: true,
+ },
+ {
+ field: 'splrName',
+ headerName: translate('table.field.asnOrderItem.splrName'),
+ minWidth: 100,
+ flex: 1,
+ editable: true,
+ },
+ {
+ field: 'packName',
+ headerName: translate('table.field.asnOrderItem.packName'),
+ minWidth: 100,
+ flex: 1,
+ editable: true,
+ },
- const StyledTableCell = styled(TableCell)(({ theme }) => ({
- "& .MuiButtonBase-root": {
- padding: "0px 0px",
- },
- overflow: "hidden",
- textOverflow: "ellipsis",
- whiteSpace: "nowrap",
- maxWidth: 600,
- }));
+
+ ])
+
+ 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: true
+ }))
+ 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) => {
+ setTableData((prevData) =>
+ prevData.map((r) =>
+ r.matnrId === newRow.matnrId ? { ...newRow } : r
+ )
+ );
+
+ return newRow;
+ };
+
+
+
+ const handleSelectionChange = (ids) => {
+ setSelectedRows(ids)
+
+ };
+
+
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}
+ autoPageSize
+ editMode="row"
+ checkboxSelection
+ onRowSelectionModelChange={handleSelectionChange}
+ selectionModel={selectedRows}
+ sx={{
+ '& .MuiDataGrid-cell input': {
+ border: '1px solid #ccc'
+ },
+ }}
+ />
+ </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