调拔单功能优化

skyouc

2025-07-29 c229a84e0a8eb68c974e6d23fa1296e064025d76

 rsf-admin/src/page/orders/check/CheckOrderPub.jsx

@@ -3,50 +3,32 @@
import {
    List,
    DatagridConfigurable,
    SearchInput,
    TopToolbar,
    Button,
    SelectColumnsButton,
    EditButton,
    FilterButton,
    CreateButton,
    ExportButton,
    BulkDeleteButton,
    WrapperField,
    useRecordContext,
    useTranslate,
    useNotify,
    useListContext,
    FunctionField,
    TextField,
    NumberField,
    DateField,
    BooleanField,
    ReferenceField,
    TextInput,
    DateTimeInput,
    DateInput,
    SelectInput,
    NumberInput,
    ReferenceInput,
    ReferenceArrayInput,
    AutocompleteInput,
    DeleteButton,
    SimpleForm,
    useRecordSelection,
    required,
    Form,
    useRefresh,
    useRedirect,
    TextInput,
} from 'react-admin';
import { PAGE_DRAWER_WIDTH, OPERATE_MODE, DEFAULT_PAGE_SIZE, DEFAULT_ITEM_PAGE_SIZE, DEFAULT_TYPE } from '@/config/setting';
import { styled } from '@mui/material/styles';
import { DataGrid, useGridApiContext, GridActionsCellItem, useGridApiRef } from '@mui/x-data-grid';
import request from '@/utils/request';
import ConfirmationNumberOutlinedIcon from '@mui/icons-material/ConfirmationNumberOutlined';
import CloseSharpIcon from '@mui/icons-material/CloseSharp';
import ConfirmButton from '../../components/ConfirmButton';
import { Delete, Edit, Add } from '@mui/icons-material';
import CheckOrderSiteDialog from "./CheckOrderSiteDialog";
import CheckPreviewTable from "./CheckPreviewTable";
import { styled } from '@mui/material/styles';
import request from '@/utils/request';


const StyledDatagrid = styled(DatagridConfigurable)(({ theme }) => ({
    '& .css-1vooibu-MuiSvgIcon-root': {
@@ -58,24 +40,20 @@
    '& .column-maktx': {
        width: 200
    },

    mt: '60px'
    // '& .RaBulkActionsToolbar-toolbar': {
    //     display: 'none'
    // }

}));

const CheckOrderPub = (props) => {
    const { record, open, setOpen, setManualDialog } = props;
    const notify = useNotify();
    const translate = useTranslate();
    const gridRef = useGridApiRef();
    const [rows, setRows] = useState([]);
    const [fetchRows, setFetchRows] = useState([]);
    const translate = useTranslate();
    const [selectItem, setSelectItem] = useState({});
    const [rowSelectedIds, setRowSelectedIds] = useState([]);
    const [selectedMatnr, setSelectedMatnr] = useState([]);
    const [selectedIds, setSelectedIds] = useState([]);
    const [leftSelectedIds, setLeftSelectedIds] = useState([]);
    const [formData, setFormData] = useState({ orderId: record?.id, waveId: DEFAULT_TYPE });
    const [dialog, setDialog] = useState(false);
    const [selectedValue, setSelectedValue] = useState({});
@@ -85,23 +63,37 @@
            setRows(fetchRows)
        } else {
            const mas = fetchRows.filter(item => selectedMatnr.includes(item.matnrCode));
            setRows(mas)
            let ids = mas.map(item => item.matnrCode);
            getLocs(ids)
        }
    }, [selectedMatnr])


    const getLocs = async (ids) => {
        let params = { matnrCode: ids }
        const { data: { code, data, msg } } = await request.post('/check/locs/', params);
        if (code === 200) {
            setRows(data)
            const matnrs = selectedMatnr.filter(item => data.some(bigData => bigData.matnrCode === item));
            // setSelectedMatnr(matnrs)
        } else {
            notify(msg);
        }
    }


    const ComfirmButton = () => {
        const { selectedIds, data } = useListContext();
        const { selectedIds, data, onUnselectItems, } = useListContext();
        const handleRowClick = () => {
            const ids = data.filter(item => selectedIds.includes(item.id)).map(item => item.id);
            const ids = data.filter(item => selectedIds.includes(item.id));
            setRowSelectedIds(ids);
            const mas = data.filter(item => selectedIds.includes(item.id)).map(item => item.matnrCode);
            //设置库位信息筛选条件
            setSelectedMatnr(mas);
            onUnselectItems();
        }

        return (
            <Button label="toolbar.confirm" size="medium" onClick={handleRowClick} />
            record.exceStatus != 3 ? <><Button label="toolbar.confirm" size="medium" onClick={handleRowClick} /></> : <></>
        )
    };

@@ -139,7 +131,7 @@
        if (formData.waveId == null && formData.waveId == undefined) {
            return
        }
        const { data: { code, data, msg } } = await request.post('/outStock/order/getOutTaskItems', { ...formData });
        const { data: { code, data, msg } } = await request.post('/check/order/items', { ...formData });
        if (code === 200) {
            setFetchRows(data)
        } else {
@@ -205,14 +197,14 @@
                                    omit={['id', 'splrName', 'qty',]}
                                >
                                    <NumberField source="id" />
                                    <TextField source="orderCode" label="table.field.outStockItem.orderCode" />
                                    <TextField source="matnrCode" label="table.field.outStockItem.matnrCode" />
                                    <TextField source="maktx" label="table.field.outStockItem.maktx" />
                                    <NumberField source="anfme" label="table.field.outStockItem.anfme" />
                                    <NumberField source="workQty" label="table.field.outStockItem.workQty" />
                                    <NumberField source="qty" label="table.field.outStockItem.qty" />
                                    <TextField source="stockUnit" label="table.field.outStockItem.stockUnit" />
                                    <TextField source="splrName" label="table.field.outStockItem.splrName" />
                                    <TextField source="orderCode" label="table.field.checkOrderItem.orderCode" />
                                    <TextField source="matnrCode" label="table.field.checkOrderItem.matnrCode" />
                                    <TextField source="maktx" label="table.field.checkOrderItem.maktx" />
                                    <NumberField source="anfme" label="table.field.checkOrderItem.anfme" />
                                    <NumberField source="workQty" label="table.field.checkOrderItem.workQty" />
                                    <NumberField source="qty" label="table.field.checkOrderItem.qty" />
                                    <TextField source="stockUnit" label="table.field.checkOrderItem.stockUnit" />
                                    <TextField source="splrName" label="table.field.checkOrderItem.splrName" />
                                </StyledDatagrid>
                            </List>
                        </Card>
@@ -220,20 +212,29 @@
                    <Grid item xl={6.3} gap={2}>
                        <Card sx={{ minHeight: 1050, height: 'calc(100% - 10px)', width: '100%' }}>
                            <Box>
                                <PreviewTable
                                <CheckPreviewTable
                                    rows={rows}
                                    gridRef={gridRef}
                                    setRows={setRows}
                                    record={record}
                                    formData={formData}
                                    selectedIds={selectedIds}
                                    selectedMatnr={selectedMatnr}
                                    leftSelectedIds={leftSelectedIds}
                                    setDialog={setDialog}
                                    setSelectedIds={setSelectedIds}
                                    setLeftSelectedIds={setLeftSelectedIds}
                                />
                            </Box>
                            <Box sx={{ textAlign: 'center' }}>
                                <CloseButton setOpen={setOpen} />
                                <SubmitButton selectedIds={selectedIds} setSelectedIds={setSelectedIds} gridRef={gridRef} record={record} />
                                <SubmitButton
                                    leftSelectedIds={leftSelectedIds}
                                    setOpen={setOpen}
                                    setLeftSelectedIds={setLeftSelectedIds}
                                    selectItem={selectItem}
                                    selectedMatnr={selectedMatnr}
                                    rowSelectedIds={rowSelectedIds}
                                    gridRef={gridRef}
                                    record={record} />
                            </Box>
                        </Card>
                    </Grid>
@@ -250,206 +251,46 @@
    );
}

const PreviewTable = ({ rows, gridRef, setRows, record, selectedIds, setSelectedIds, setDialog, formData }) => {
    gridRef.current = useGridApiRef();
    const translate = useTranslate();

    useEffect(() => {
        if (selectedIds.length > 0) {
            console.log(selectedIds);
        }
    }, [selectedIds])

    const baseColumns = [
        // { field: 'id', headerName: 'ID', width: 40 },
        { field: 'locCode', headerName: '库位', width: 110 },
        { field: 'barcode', headerName: '容器', width: 120 },
        { field: 'matnrCode', headerName: '物料编码', width: 120 },
        { field: 'batch', headerName: '批次', width: 90 },
        { field: 'unit', headerName: '单位', width: 60 },
        { field: 'outQty', headerName: '出库数量', width: 110, },
        {
            field: 'anfme', headerName: '库存数量', width: 110,
            renderCell: (params) => (
                <OutStockAnfme value={params.value} />
            )
        },
        {
            field: 'siteNo',
            headerName: '出库口',
            width: 90,
            type: 'singleSelect',
            editable: true,
            renderCell: (params) => (
                <OutStockSiteNo value={params.value} />
            ),
            renderEditCell: (params) => (
                <OutStockSite {...params} />
            ),
        },
    ]

    const optAction = {
        field: 'actions',
        type: 'actions',
        headerName: translate('common.field.opt'),
        with: 120,
        getActions: (params) => [
            <GridActionsCellItem
                icon={<Delete />}
                label="Delete"
                onClick={() => handleDelete(params.row, rows, setRows)}
            />,
        ]
    }

    const columns = (formData.waveId == 15 || formData.waveId == 16) ? [...baseColumns] : [...baseColumns, optAction];

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

    const OutStockAnfme = React.memo(function OutStockAnfme(props) {
        const { value } = props;
        return (
            value > 0 ?
                <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                    <span>{value}</span>
                </Box>
                :
                <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                    <span style={{ color: 'red' }}>{translate('common.edit.title.insuffInventory')}</span>
                </Box>
        );
    });

    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 CustomToolBar = () => {
        const selectSiteNo = () => {
            setDialog(true)
        }
        return (
            <Box sx={{
                p: 1,
                display: 'flex',
                justifyContent: 'flex-end',
                borderTop: '1px solid rgba(224, 224, 224, 1)'
            }}>
                <Button
                    onClick={selectSiteNo}
                    variant="outlined"
                    label="toolbar.modiftySite"
                    size="medium"
                    sx={{ mr: 1 }} />
            </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
            storeKey={"locItemPreview"}
            rows={rows}
            columns={columns}
            slots={{ toolbar: CustomToolBar }}
            apiRef={gridRef}
            checkboxSelection
            disableRowSelectionOnClick
            hideFooterPagination={true}  // 隐藏分页控件
            hideFooter={false}
            onRowSelectionModelChange={(ids) => {
                setSelectedIds(ids)
            }}
        />
    )
}


//提交按钮
const SubmitButton = ({ selectedIds, setSelectedIds, gridRef, record }) => {
const SubmitButton = ({ leftSelectedIds, setLeftSelectedIds, rowSelectedIds, selectItem, gridRef, record, setOpen, selectedMatnr }) => {
    const notify = useNotify();
    const refresh = useRefresh();
    const translate = useTranslate();
    const redirect = useRedirect();
    const submit = async () => {
        const items = gridRef.current?.getSortedRows();
        const { data: { code, data, msg } } = await request.post('/outStock/generate/tasks', { items, outId: record?.id });
        if (code == 200) {
            refresh();
            redirect("/task")
        } else {
            notify(msg);
        let selctRecord = items.filter(item => leftSelectedIds.includes(item?.id));

        if (selctRecord == undefined || selctRecord.length < 1) {
            notify(translate('common.msg.locEmpty'), { type: 'error' });
            return
        }

        //过滤，将库位添加至盘点单明细中
        const records = rowSelectedIds.map(map => {
            return {
                ...map,
                items: selctRecord.filter(item => item.matnrCode == map.matnrCode)
            }
        })

        let params = records.filter(record => record?.items.length > 0);

        redirect("/task")


        // const { data: { code, data, msg } } = await request.post('/check/generate/tasks', params);
        // if (code == 200) {
        //     refresh();
        //     redirect("/task")
        //     setOpen(false)
        // } else {
        //     notify(msg);
        // }
    }
    return (
        <ConfirmButton
            label="toolbar.allComfirm"
            label="toolbar.confirmSelect"
            variant="contained"
            size="medium"
            onConfirm={submit}