Merge remote-tracking branch 'origin/devlop_jdxaj' into devlop_jdxaj

chen.lin

6 天以前 a40ecf9cc55abc8dafbd19391d82040b70b590c2

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

@@ -1,4 +1,4 @@
import { Box, Card, Grid, LinearProgress } from "@mui/material";
import { Box, Card, Grid, LinearProgress, Select, MenuItem, ListItemText } from "@mui/material";
import React, { useState, useRef, useEffect, useMemo } from "react";
import {
    List,
@@ -13,7 +13,6 @@
    ExportButton,
    BulkDeleteButton,
    WrapperField,
    Toolbar,
    useRecordContext,
    useTranslate,
    useNotify,
@@ -36,16 +35,20 @@
    SimpleForm,
    required,
    Form,
    SaveButton,
    useRefresh,
    useGetList,
    useGetOne,
    useRedirect,
    useRecordSelection,
} from 'react-admin';
import { PAGE_DRAWER_WIDTH, OPERATE_MODE, DEFAULT_PAGE_SIZE, DEFAULT_ITEM_PAGE_SIZE } from '@/config/setting';
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 } from '@mui/x-data-grid';
import { DataGrid, useGridApiContext, GridActionsCellItem, useGridApiRef } from '@mui/x-data-grid';
import request from '@/utils/request';
import DictSelect from "../../components/DictSelect";
import { formatQuantity } from '@/utils/common';
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 OutStockSiteDialog from "./OutStockSiteDialog";

const StyledDatagrid = styled(DatagridConfigurable)(({ theme }) => ({
    '& .css-1vooibu-MuiSvgIcon-root': {
@@ -54,44 +57,238 @@
    '& .RaDatagrid-row': {
        cursor: 'auto'
    },
    '& .column-maktx': {
        width: 200
    },

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

}));


const OutStockPublic = (props) => {
    const { record, open } = props;
    const [formData, setFormData] = useState({
        orderId: record?.id
    });
    const { record, open, setOpen, setManualDialog } = props;
    const notify = useNotify();
    const gridRef = useGridApiRef();
    const [rows, setRows] = useState([]);
    const [fetchRows, setFetchRows] = useState([]);
    const [isLoading, setIsLoading] = useState(false);
    const translate = useTranslate();
    const [rowSelectedIds, setRowSelectedIds] = useState([]);
    const [selectedMatnr, setSelectedMatnr] = useState([]);
    const [selectedIds, setSelectedIds] = useState([]);
    const [formData, setFormData] = useState({ orderId: record?.id, waveId: DEFAULT_TYPE });
    const [dialog, setDialog] = useState(false);
    const [selectedValue, setSelectedValue] = useState({});

    useEffect(() => {
        getWaveRule()
    }, [formData, open])
        console.log('useEffect triggered - selectedMatnr:', selectedMatnr, 'fetchRows length:', fetchRows.length);
        if (selectedMatnr.length < 1) {
            console.log('没有选中物料，显示所有数据');
            setRows(fetchRows)
        } else {
            console.log('过滤数据，选中的物料编码:', selectedMatnr);
            const mas = fetchRows.filter(item => {
                const matnrCode = item.matnrCode || item.locItem?.matnrCode;
                const included = selectedMatnr.includes(matnrCode);
                console.log('物料编码:', matnrCode, '是否包含:', included);
                return included;
            });
            console.log('过滤后的数据:', mas);
            setRows(mas)
        }
    }, [selectedMatnr, fetchRows])

    const getWaveRule = async () => {
        if (formData.waveId == null && formData.waveId == undefined) {

    const ComfirmButton = () => {
        const { selectedIds, data } = useListContext();
        const handleRowClick = async () => {
            console.log('selectedIds:', selectedIds);
            console.log('data:', data);
            console.log('fetchRows:', fetchRows);
            console.log('isLoading:', isLoading);
            
            if (!selectedIds || selectedIds.length === 0) {
                notify('请先选择物料');
                return;
            }
            
            if (!data || data.length === 0) {
                notify('数据加载中，请稍候');
                return;
            }
            
            const ids = data.filter(item => selectedIds.includes(item.id)).map(item => item.id);
            setRowSelectedIds(ids);
            const mas = data.filter(item => selectedIds.includes(item.id)).map(item => item.matnrCode);
            console.log('selectedMatnr:', mas);
            
            // 检查选中的物料是否已全部出库
            const selectedItems = data.filter(item => selectedIds.includes(item.id));
            const allCompleted = selectedItems.every(item => {
                const remaining = (item.anfme || 0) - (item.workQty || 0);
                return remaining <= 0;
            });
            
            if (allCompleted) {
                notify('选中的物料已全部出库（已出数量 >= 计划出库数），没有可出库的库存数据');
                setSelectedMatnr(mas);
                setRows([]);
                return;
            }
            
            //设置库位信息筛选条件
            setSelectedMatnr(mas);
            
            // 如果 fetchRows 还没有数据，重新加载
            if (!fetchRows || fetchRows.length === 0) {
                console.log('fetchRows为空，重新加载数据');
                notify('正在加载库存数据...');
                // 重新加载数据，getWaveRule 会在加载完成后自动处理 selectedMatnr
                await getWaveRule(formData);
            } else {
                // 如果 fetchRows 有数据，立即过滤显示
                const filteredRows = fetchRows.filter(item => {
                    const matnrCode = item.matnrCode || item.locItem?.matnrCode;
                    return mas.includes(matnrCode);
                });
                console.log('filteredRows:', filteredRows);
                setRows(filteredRows);
                
                // 如果过滤后没有数据，提示用户
                if (filteredRows.length === 0) {
                    notify('选中的物料没有可出库的库存数据，可能已全部出库或库存不足');
                }
            }
        }

        return (
            <Button 
                label="toolbar.confirm" 
                size="medium" 
                onClick={handleRowClick}
                disabled={isLoading}
            />
        )
    };

    const handleClickOpen = () => {
        setDialog(true);
    };

    const handleClose = (value) => {
        setDialog(false);
        setSelectedValue(value);
        if (selectedIds.length == 0) {
            const newRows = rows.map(item => {
                return {
                    ...item,
                    siteNo: value?.site
                }
            })
            setRows(newRows);
        } else {
            const newRows = rows.map(item => {
                return selectedIds.includes(item?.id) ? {
                    ...item,
                    siteNo: value?.site
                } : item
            })
            setRows(newRows);
        }
    };

    useEffect(() => {
        if (open && record?.id) {
            // 重置状态，确保数据能正确显示
            setSelectedMatnr([]);
            setRows([]);
            setFetchRows([]);
            setIsLoading(false);
            // 确保 formData 正确初始化
            const initialFormData = { orderId: record.id, waveId: DEFAULT_TYPE };
            setFormData(initialFormData);
            getWaveRule(initialFormData)
        }
    }, [open, record?.id])

    const getWaveRule = async (data = formData) => {
        if (data.waveId == null || data.waveId == undefined) {
            return
        }
        const res = await request.post('/outStock/order/getOutTaskItems', {...formData});
        if (res?.data?.code === 200) {
            setRows(res.data.data.records)
        } else {
            notify(res.data.msg);
        if (!data.orderId) {
            return
        }
        setIsLoading(true);
        try {
            const { data: { code, data: responseData, msg } } = await request.post('/outStock/order/getOutTaskItems', { ...data });
            if (code === 200) {
                console.log('API返回的数据:', responseData);
                // 处理返回的数据，确保数据结构正确
                const processedData = (responseData || []).map((item, index) => {
                    // 出库单下发任务：优先用后端返回的 siteNo/sitesNo，没有则默认 1001
                    const defaultSiteNo = item.siteNo || item.sitesNo || '1001';
                    // 如果数据有 locItem 嵌套结构，需要展开
                    if (item.locItem) {
                        return {
                            ...item.locItem,
                            id: item.locItem.id || `temp_${index}`,
                            siteNo: defaultSiteNo,
                            staNos: item.staNos || [],
                            sourceId: item.sourceId,
                            source: item.source
                        };
                    }
                    // 如果数据已经是扁平结构，直接返回
                    return {
                        ...item,
                        id: item.id || `temp_${index}`,
                        siteNo: defaultSiteNo
                    };
                });
                console.log('处理后的数据:', processedData);
                setFetchRows(processedData);
                
                // 如果返回的数据为空，且用户已选中物料，提示原因
                if (processedData.length === 0 && selectedMatnr.length > 0) {
                    notify('选中的物料已全部出库，没有可出库的库存数据');
                } else if (processedData.length === 0) {
                    notify('当前出库单没有可出库的库存数据，可能所有物料已全部出库');
                }
                // useEffect 会自动根据 selectedMatnr 和 fetchRows 来过滤数据
            } else {
                notify(msg);
            }
        } catch (error) {
            console.error('获取库存数据失败:', error);
            notify('获取库存数据失败，请重试');
        } finally {
            setIsLoading(false);
        }
    }

    const handleChange = (value, name) => {
        setFormData((prevData) => ({
            ...prevData,
            [name]: value
        }));
        setFormData((prevData) => {
            const newData = {
                ...prevData,
                [name]: value
            };
            // 当策略改变时，重新获取数据
            if (name === 'waveId' && value && prevData.orderId) {
                getWaveRule(newData);
            }
            return newData;
        });
    };


    return (
        <>
            <Box>
                <Grid sx={{ display: "flex" }} container rowSpacing={2} columnSpacing={2}>
                    <Grid item xl={6} gap={2} >
                    <Grid item xl={5.7} gap={2} >
                        <Card>
                            <Form>
                                <ReferenceInput
@@ -101,18 +298,12 @@
                                    <AutocompleteInput
                                        label="table.field.waveRule.type"
                                        onChange={(e) => handleChange(e, 'waveId')}
                                        defaultValue={15}
                                        value={formData.type}
                                        validate={required()}
                                    />
                                </ReferenceInput>
                            </Form>
                            {/* <DictSelect
                                label={translate("table.field.waveRule.type")}
                                onChange={(e) => handleChange(e.target.value, 'type')}
                                value={formData.type}
                                dictTypeCode="sys_wave_rule_code"
                                required
                            /> */}
                            <List
                                resource="outStockItem"
                                storeKey='outStockItem'
@@ -125,83 +316,295 @@
                                }}
                                title={"menu.outStockItem"}
                                empty={false}
                                filter={{ asnId: record?.id, deleted: 0 }}
                                filter={{ orderId: record?.id, deleted: 0 }}
                                sort={{ field: "create_time", order: "desc" }}
                                actions={false}
                                pagination={false}
                                perPage={DEFAULT_ITEM_PAGE_SIZE}
                            >
                                <LinearProgress
                                    sx={{ height: "2px", position: 'absolute', top: 0, left: 0, right: 0, }}
                                />
                                <StyledDatagrid
                                    storeKey={"outStockPublic"}
                                    preferenceKey='outStockItem'
                                    bulkActionButtons={false}
                                    rowClick={false}
                                    omit={['id', 'splrName', 'qty', 'poCode']}
                                    bulkActionButtons={<>
                                        <ComfirmButton />
                                    </>}
                                    omit={['id', 'splrName', 'qty', 'poCode',]}
                                >
                                    <NumberField source="id" />
                                    <TextField source="asnCode" label="table.field.outStockItem.asnCode" />
                                    <TextField source="asnCode" label="table.field.outStockItem.orderCode" />
                                    <TextField source="poCode" label="table.field.outStockItem.poCode" />
                                    <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" />
                                    <NumberField source="anfme" label="table.field.outStockItem.anfme" options={{ maximumFractionDigits: 6 }} />
                                    <NumberField source="workQty" label="table.field.outStockItem.workQty" options={{ maximumFractionDigits: 6 }} />
                                    <NumberField source="qty" label="table.field.outStockItem.qty" options={{ maximumFractionDigits: 6 }} />
                                    <TextField source="stockUnit" label="table.field.outStockItem.stockUnit" />
                                    <TextField source="splrName" label="table.field.outStockItem.splrName" />
                                </StyledDatagrid>
                            </List>
                        </Card>
                    </Grid>
                    <Grid item xl={6} gap={2}>
                        <Card>
                    <Grid item xl={6.3} gap={2}>
                        <Card sx={{ minHeight: 1050, height: 'calc(100% - 10px)', width: '100%' }}>
                            <Box>
                                <DataGrid
                                <PreviewTable
                                    rows={rows}
                                    columns={columns}
                                    initialState={{
                                        pagination: {
                                            paginationModel: {
                                                pageSize: 15,
                                            },
                                        },
                                    }}
                                    pageSizeOptions={[15, 25, 35, 45]}
                                    disableRowSelectionOnClick
                                    gridRef={gridRef}
                                    setRows={setRows}
                                    record={record}
                                    formData={formData}
                                    selectedIds={selectedIds}
                                    setDialog={setDialog}
                                    setSelectedIds={setSelectedIds}
                                />
                            </Box>
                            <Box sx={{ textAlign: 'center' }}>
                                <CloseButton setOpen={setOpen} />
                                <SubmitButton selectedIds={selectedIds} setSelectedIds={setSelectedIds} gridRef={gridRef} record={record} />
                            </Box>
                        </Card>
                    </Grid>
                </Grid>
                <Grid>
                    <OutStockSiteDialog
                        selectedValue={selectedValue}
                        open={dialog}
                        onClose={handleClose}
                    />
                </Grid>
            </Box>
        </>
    );
}

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, valueFormatter: (v) => formatQuantity(v) },
        {
            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={translate('ra.action.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;
        const num = Number(value);
        const hasStock = typeof num === 'number' && !Number.isNaN(num) && num > 1e-6;
        return (
            hasStock ? (
                <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                    <span>{formatQuantity(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 rows = [
    { id: 1, locCode: '03-02-1-2-1', container: 'Snow', batch: 'Jon', curQty: 14 },
    { id: 2, locCode: '03-02-1-2-1', container: 'Lannister', batch: 'Cersei', curQty: 31 },
    { id: 3, locCode: '03-02-1-2-1', container: 'Lannister', batch: 'Jaime', curQty: 31 },
    { id: 4, locCode: '03-02-1-2-1', container: 'Stark', batch: 'Arya', curQty: 11 },
    { id: 5, locCode: '03-02-1-2-1', container: 'Targaryen', batch: 'Daenerys', curQty: null },
    { id: 6, locCode: '03-02-1-2-1', container: 'Melisandre', batch: null, curQty: 150 },
    { id: 7, locCode: '03-02-1-2-1', container: 'Clifford', batch: 'Ferrara', curQty: 44 },
    { id: 8, locCode: '03-02-1-2-1', container: 'Frances', batch: 'Rossini', curQty: 36 },
    { id: 9, locCode: '03-02-1-2-1', container: 'Roxie', batch: 'Harvey', curQty: 65 },
]
//提交按钮
const SubmitButton = ({ selectedIds, setSelectedIds, gridRef, record }) => {
    const notify = useNotify();
    const refresh = useRefresh();
    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);
        }
    }
    return (
        <ConfirmButton
            label="toolbar.allComfirm"
            variant="contained"
            size="medium"
            onConfirm={submit}
        />
    )
}

const columns = [
    { field: 'id', headerName: 'ID', width: 40 },
    { field: 'locCode', headerName: '库位', width: 110 },
    { field: 'container', headerName: '容器', width: 120 },
    { field: 'batch', headerName: '批次', width: 90 },
    { field: 'unit', headerName: '单位', width: 90 },
    { field: 'curQty', headerName: '本次出库数量', width: 110 },
    { field: 'siteNo', headerName: '出库口', width: 90 }, ``
]

//关闭按钮
const CloseButton = ({ setOpen }) => {
    const close = () => {
        setOpen(false)
    }
    return (
        <Button
            label="toolbar.close"
            variant="outlined"
            size="medium"
            onClick={close}
            startIcon={<CloseSharpIcon />}
            sx={{ margin: '3.5em' }} />
    )
}

export default OutStockPublic;