fix:删除table panel

verou

2025-03-20 9adf42677de00fbee0655b156c10ef12aff84333

 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,51 +50,103 @@
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";

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([]);

    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 {
            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 +155,7 @@
                open={open}
                onClose={handleClose}
                aria-labelledby="form-dialog-title"
                aria-hidden
                fullWidth
                disableRestoreFocus
                maxWidth="md"   // 'xs' | 'sm' | 'md' | 'lg' | 'xl'
@@ -116,20 +172,22 @@
                    </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 xs={4}>
                                    <DictionarySelect
                                        label={translate("table.field.asnOrder.type")}
                                        name="type"
                                        value={formData.type}
                                        onChange={(e) => handleChange(+e.target.value, 'type')}
                                        size="small"
                                        dictTypeCode="sys_bill_type"
                                    />

                            <Grid item xs={4}>
                                </Grid>

                                {/* <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 }}>
@@ -176,139 +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} >
                                    <TextField
                                        key={row.id}
                                        value={row[column.id]}
                                        variant="outlined"
                                        size="small"
                                        sx={{
                                            padding: '2px', '& .MuiOutlinedInput-input': {
                                                padding: '2px 5px',
                                                minWidth: '50px',
                                            }
                                        }}
                                    />
                                </StyledTableCell>

                            ))}
                        </StyledTableRow>
                    ))}

                </TableBody>
            </Table>
        </TableContainer>
    )
}