新增asn单，修改asn单，添加动态字段修改功能

skyouc

2025-05-08 6732a988fe843cf59f12aae1460fc97fda5408dd

 rsf-admin/src/page/orders/asnOrder/AsnOrderModal.jsx

@@ -39,7 +39,9 @@
    TableCell,
    Tooltip,
    IconButton,
    styled
    styled,
    Select,
    MenuItem


} from '@mui/material';
@@ -55,6 +57,7 @@
import { DataGrid, useGridApiRef } from '@mui/x-data-grid';
import DictionarySelect from "../../components/DictionarySelect";
import DictSelect from "../../components/DictSelect";
import "./asnOrder.css";

const AsnOrderModal = (props) => {
    const { open, setOpen, asnId, billReload } = props;
@@ -63,9 +66,7 @@
    const notify = useNotify();
    const refresh = useRefresh();
    const [disabled, setDisabled] = useState(false)

    const [createDialog, setCreateDialog] = useState(false);

    const tableRef = useRef();

    useEffect(() => {
@@ -101,6 +102,7 @@
            ...prevData,
            [name]: value
        }));
        console.log(formData);
    };

    const resetData = () => {
@@ -223,14 +225,14 @@
                </DialogTitle>
                <DialogContent sx={{ mt: 2 }}>
                    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
                        <Form>
                        <Form defaultValues={formData}>
                            <Grid container spacing={2}>
                                <Grid item md={3}>
                                    <DictSelect
                                        label={translate("table.field.asnOrder.type")}
                                        value={formData.type}
                                        onChange={(e) => handleChange(e.target.value, 'type')}
                                        dictTypeCode="sys_order_type"
                                        dictTypeCode="sys_in_stock_type"
                                        required
                                    />
                                </Grid>
@@ -238,39 +240,35 @@
                                    <DictSelect
                                        label={translate("table.field.asnOrder.wkType")}
                                        value={formData.wkType}
                                        group='1'
                                        onChange={(e) => handleChange(e.target.value, 'wkType')}
                                        dictTypeCode="sys_business_type"
                                        required
                                    />
                                </Grid>
                                <Grid item md={3}>
                                <Grid item md={2}>
                                    <TextField
                                        label={translate("table.field.asnOrder.poCode")}
                                        value={formData.poCode}
                                        variant="filled"
                                        onChange={(e) => handleChange(e.target.value, 'poCode')}
                                    />
                                </Grid>
                                <Grid item md={3}>
                                <Grid item md={2}>
                                    <TextField
                                        label={translate("table.field.asnOrder.logisNo")}
                                        value={formData.logisNo}
                                        variant="filled"
                                        onChange={(e) => handleChange(e.target.value, 'logisNo')}
                                    />
                                </Grid>

                                <Grid item md={3}>
                                    {/* <TextField
                                        label={translate("table.field.asnOrder.arrTime")}
                                        value={formData.arrTime}
                                        onChange={(e) => handleChange(e.target.value, 'arrTime')}
                                    /> */}
                                    <DateInput
                                        source="arrTime"
                                        label="table.field.asnOrder.arrTime"
                                        value={formData.arrTime}
                                        onChange={(e) => handleChange(e.target.value, 'arrTime')}
                                    />

                                </Grid>
                            </Grid>
                        </Form>
@@ -280,11 +278,9 @@
                        <Stack direction="row" spacing={2}>
                            <Button variant="contained" onClick={() => setCreateDialog(true)}>新增物料</Button>
                            {/* {asnId !== '' && <ConfirmButton label={'删除'} variant="outlined" color="error" onConfirm={handleDelete} />} */}
                            <ConfirmButton label={'删除'} variant="outlined" color="error" onConfirm={handleDeleteItem} />
                            <ConfirmButton label={'ra.action.delete'} variant="outlined" color="error" onConfirm={handleDeleteItem} />
                        </Stack>

                    </Box>

                    <Box sx={{ mt: 2 }}>
                        <AsnOrderModalTable tabelData={tabelData} setTableData={setTableData} asnId={asnId} selectedRows={selectedRows} setSelectedRows={setSelectedRows} tableRef={tableRef}></AsnOrderModalTable>
                    </Box>
@@ -311,18 +307,128 @@

export default AsnOrderModal;

const SelectInputSplrNameEditCell = (params) => {
    const [formData, setFormData] = useState([{}])
    useEffect(() => {
        getOptions();
    }, []);
    const getOptions = async () => {
        const parmas = {
            "type": "supplier"
        }
        const {
            data: { code, data, msg },
        } = await request.post("companys/page", parmas);
        if (code === 200) {
            setFormData(data.records)
            console.log(data.records)
        } else {
            notify(msg);
        }
    }

    return (
        <Select
            value={params.value}
            onChange={(e) => {
                params.api.setEditCellValue({
                    id: params.id,
                    field: params.field,
                    value: e.target.value,
                })
                // 找到选中的供应商记录
                const selectedSupplier = formData.find(supplier => supplier.name === e.target.value);

                // 如果找到对应的供应商记录，同时更新splrCode字段
                if (selectedSupplier) {
                    params.api.setEditCellValue({
                        id: params.id,
                        field: 'splrCode',
                        value: selectedSupplier.id,
                    });
                }

            }

            }
            fullWidth

        >
            {formData.map(e => {
                return (
                    <MenuItem value={e.name} children={e.name} key={e.id} />
                );

            })}

        </Select>
    );
};

const SelectInputSplrCodeEditCell = (params) => {
    const [formData, setFormData] = useState([{}])
    useEffect(() => {
        getOptions();
    }, []);
    const getOptions = async () => {
        const parmas = {
            "type": "supplier"
        }
        const {
            data: { code, data, msg },
        } = await request.post("companys/page", parmas);
        if (code === 200) {
            setFormData(data.records)
            console.log(data.records)
        } else {
            notify(msg);
        }
    }

    return (
        <Select
            value={params.value}
            onChange={(e) => {
                params.api.setEditCellValue({
                    id: params.id,
                    field: params.field,
                    value: e.target.value,
                })
                const selectedSupplier = formData.find(supplier => supplier.id === e.target.value);

                // 如果找到对应的供应商记录，同时更新splrCode字段
                if (selectedSupplier) {
                    params.api.setEditCellValue({
                        id: params.id,
                        field: 'splrName',
                        value: selectedSupplier.name,
                    });
                }
            }

            }
            fullWidth

        >
            {formData.map(e => {
                return (
                    <MenuItem value={e.id} children={e.name} key={e.id} />
                );

            })}

        </Select>
    );
};




const AsnOrderModalTable = ({ tabelData, setTableData, asnId, selectedRows, setSelectedRows, tableRef }) => {
    const translate = useTranslate();
    const notify = useNotify();

    const [columns, setColumns] = useState([

        {
            field: 'maktx',
            headerName: translate('table.field.asnOrderItem.maktx'),
            width: 250,
            editable: false,
        },
        {
            field: 'matnrCode',
            headerName: translate('table.field.asnOrderItem.matnrCode'),
@@ -330,28 +436,43 @@
            editable: false,
        },
        {
            field: 'maktx',
            headerName: translate('table.field.asnOrderItem.maktx'),
            width: 250,
            editable: false,
        },
        {
            field: 'anfme',
            headerName: translate('table.field.asnOrderItem.anfme'),
            headerName: translate('table.field.asnOrderItem.anfme') + "*",
            type: 'number',
            minWidth: 100,
            flex: 1,
            editable: true,
            valueFormatter: (val) => val < 0 ? 0 : val
            valueFormatter: (val) => val < 0 ? 0 : val,
            headerClassName: "custom",
        },
        {
            field: 'splrCode',
            headerName: translate('table.field.asnOrderItem.splrCode'),
            headerName: translate('table.field.asnOrderItem.splrCode') + "*",
            minWidth: 100,
            flex: 1,
            editable: true,
            renderEditCell: (params) => (
                <SelectInputSplrCodeEditCell {...params} />
            ),
            headerClassName: "custom",
        },
        {
            field: 'splrName',
            headerName: translate('table.field.asnOrderItem.splrName'),
            minWidth: 100,
            flex: 1,
            editable: true,
        },
        // {
        //     field: 'splrName',
        //     headerName: translate('table.field.asnOrderItem.splrName') + "*",
        //     minWidth: 100,
        //     flex: 1,
        //     editable: true,
        //     renderEditCell: (params) => (
        //         <SelectInputSplrNameEditCell {...params} />
        //     ),
        //     headerClassName: "custom",
        // },
        // {
        //     field: 'packName',
        //     headerName: translate('table.field.asnOrderItem.packName'),
@@ -366,12 +487,22 @@
        //     flex: 1,
        // },
        {
            field: 'poCode',
            headerName: translate('table.field.asnOrderItem.poDetlCode'),
            field: 'platItemId',
            headerName: translate('table.field.asnOrderItem.platItemId') + "*",
            minWidth: 100,
            flex: 1,
            editable: true,
            headerClassName: "custom",
        },

        // {
        //     field: 'poCode',
        //     headerName: translate('table.field.asnOrderItem.poDetlCode') + "*",
        //     minWidth: 100,
        //     flex: 1,
        //     editable: true,
        //     headerClassName: "custom",
        // },

        {
            field: 'stockUnit',
@@ -436,7 +567,7 @@
                headerName: el.fieldsAlise,
                minWidth: 100,
                flex: 1,
                editable: false
                editable: true
            }))
            setColumns([...columns, ...cols, action])
        } else {