添加出库单据任务取消功能

skyouc

2025-06-10 1aa6e5963e5c4eca765924e9b2b094e6e2c525b3

 rsf-admin/src/page/orders/outStock/OutStockPublic.jsx

@@ -94,7 +94,6 @@
        }));
    };

    gridRef.current = useGridApiRef();

    return (
        <>
@@ -158,27 +157,11 @@
                    <Grid item xl={6.3} gap={2}>
                        <Card>
                            <Box sx={{ height: 500, width: '100%' }}>
                                <DataGrid
                                    rows={rows}
                                    columns={columns}
                                    apiRef={gridRef}
                                    initialState={{
                                        pagination: {
                                            paginationModel: {
                                                pageSize: 15,
                                            },
                                        },
                                    }}
                                    checkboxSelection
                                    pageSizeOptions={[15, 25, 35, 45]}
                                    onRowSelectionModelChange={(ids) => {
                                        setSelectedIds(ids)
                                    }}
                                />
                                <PreviewTable rows={rows} gridRef={gridRef} setRows={setRows} record={record}/>
                            </Box>
                            <Box sx={{ textAlign: 'center' }}>
                                <CloseButton setOpen={setOpen} />
                                <SubmitButton selectedIds={selectedIds} setSelectedIds={setSelectedIds} gridRef={gridRef} />
                                <SubmitButton selectedIds={selectedIds} setSelectedIds={setSelectedIds} gridRef={gridRef} record={record}/>
                            </Box>
                        </Card>
                    </Grid>
@@ -188,15 +171,149 @@
    );
}

const PreviewTable = ({ rows, gridRef, setRows, record }) => {
    gridRef.current = useGridApiRef();

    const columns = [
        { field: 'id', headerName: 'ID', width: 40 },
        { field: 'locCode', headerName: '库位', width: 110 },
        { field: 'barcode', headerName: '容器', width: 120 },
        { field: 'batch', headerName: '批次', width: 90 },
        { field: 'unit', headerName: '单位', width: 90 },
        { field: 'outQty', headerName: '本次出库数量', width: 110 },
        {
            field: 'siteNo',
            headerName: '出库口',
            width: 90,
            type: 'singleSelect',
            editable: true,
            renderCell: (params) => (
                <OutStockSiteNo value={params.value} />
            ),
            renderEditCell: (params) => (
                <OutStockSite {...params} />
            ),
        },
        {
            field: 'actions',
            type: 'actions',
            headerName: '操作',
            with: 120,
            getActions: (params) => [
                <GridActionsCellItem
                    icon={<Delete />}
                    label="Delete"
                    onClick={() => handleDelete(params.row, rows, setRows)}
                />,
            ]
        },
    ]

    /**
     * 删除事件
     * @param {*} params 
     */
    const handleDelete = (params, rows, setRows) => {
        const outRows = rows.filter(row => { 
             return row.id !== params.id 
        })
        setRows(outRows)
    }

    const OutStockSiteNo = React.memo(function OutStockSiteNo(props) {
        const { value } = props;
        if (!value) {
            return null;
        }
        return (
            <Box
                sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}
            >
                <span>{value}</span>
            </Box>
        );
    });

    const OutStockSite = (params) => {
        const { id, field, siteNo, row: { staNos } } = params;
        const apiRef = useGridApiContext();
        const handleChange = async (event) => {
            await apiRef.current.setEditCellValue(
                { id, field, value: event.target.value },
                event,
            );
            apiRef.current.stopCellEditMode({ id, field });
        };

        const handleClose = (event, reason) => {
            if (reason === 'backdropClick') {
                apiRef.current.stopCellEditMode({ id, field });
            }
        };

        return (
            <Select
                value={siteNo}
                onChange={handleChange}
                MenuProps={{
                    onClose: handleClose,
                }}
                sx={{
                    height: '100%',
                    '& .MuiSelect-select': {
                        display: 'flex',
                        alignItems: 'center',
                        pl: 1,
                    },
                }}
                autoFocus
                fullWidth
                open
            >
                {staNos.map((option) => {
                    return (
                        <MenuItem
                            key={option}
                            value={option.staNo}
                        >
                            <ListItemText sx={{ overflow: 'hidden' }} primary={option.staNo} />
                        </MenuItem>
                    );
                })}
            </Select >
        )
    }

    return (
        <DataGrid
            rows={rows}
            columns={columns}
            apiRef={gridRef}
            initialState={{
                pagination: {
                    paginationModel: {
                        pageSize: 15,
                    },
                },
            }}
            checkboxSelection
            pageSizeOptions={[15, 25, 35, 45]}
            onRowSelectionModelChange={(ids) => {
                setSelectedIds(ids)
            }}
        />
    )
}

//提交按钮
const SubmitButton = ({ selectedIds, setSelectedIds, gridRef }) => {
const SubmitButton = ({ selectedIds, setSelectedIds, gridRef, record }) => {
    const notify = useNotify();
    const refresh = useRefresh();
    const redirect = useRedirect();    
    const redirect = useRedirect();
    const submit = async () => {
        console.log(record);
        const items = gridRef.current?.getSortedRows();
        const { data: { code, data, msg } } = await request.post('/outStock/generate/tasks', { items });
        const { data: { code, data, msg } } = await request.post('/outStock/generate/tasks', { items, outId: record?.id });
        if (code == 200) {
            refresh();
            redirect("/task")
@@ -230,117 +347,6 @@
            sx={{ margin: '3.5em' }} />
    )
}

const columns = [
    { field: 'id', headerName: 'ID', width: 40 },
    { field: 'locCode', headerName: '库位', width: 110 },
    { field: 'barcode', headerName: '容器', width: 120 },
    { field: 'batch', headerName: '批次', width: 90 },
    { field: 'unit', headerName: '单位', width: 90 },
    { field: 'outQty', headerName: '本次出库数量', width: 110 },
    {
        field: 'siteNo',
        headerName: '出库口',
        width: 90,
        type: 'singleSelect',
        editable: true,
        renderCell: (params) => (
            <OutStockSiteNo value={params.value} />
        ),
        renderEditCell: (params) => (
            <OutStockSite {...params} />
        ),
    },
    {
        field: 'actions',
        type: 'actions',
        headerName: '操作',
        with: 120,
        getActions: (params) => [
            <GridActionsCellItem
                icon={<Delete />}
                label="Delete"
                onClick={() => handleDelete(params.row.id)}
            />,
        ]
    },
]

/**
 * 删除事件
 * @param {*} params 
 */
const handleDelete = (params) => {
    console.log(params);

}


const OutStockSiteNo = React.memo(function OutStockSiteNo(props) {
    const { value } = props;
    if (!value) {
        return null;
    }
    return (
        <Box
            sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}
        >
            <span>{value}</span>
        </Box>
    );
});


const OutStockSite = (params) => {
    const { id, field, siteNo, row: { staNos } } = params;
    const apiRef = useGridApiContext();
    const handleChange = async (event) => {
        await apiRef.current.setEditCellValue(
            { id, field, value: event.target.value },
            event,
        );
        apiRef.current.stopCellEditMode({ id, field });
    };

    const handleClose = (event, reason) => {
        if (reason === 'backdropClick') {
            apiRef.current.stopCellEditMode({ id, field });
        }
    };

    return (
        <Select
            value={siteNo}
            onChange={handleChange}
            MenuProps={{
                onClose: handleClose,
            }}
            sx={{
                height: '100%',
                '& .MuiSelect-select': {
                    display: 'flex',
                    alignItems: 'center',
                    pl: 1,
                },
            }}
            autoFocus
            fullWidth
            open
        >
            {staNos.map((option) => {
                return (
                    <MenuItem
                        key={option}
                        value={option.staNo}
                    >
                        <ListItemText sx={{ overflow: 'hidden' }} primary={option.staNo} />
                    </MenuItem>
                );
            })}
        </Select >
    )
}


export default OutStockPublic;