库存调整功能优化

skyouc

2025-08-04 3f54021c96ed84ce42181b3709788610e2ab57ca

 rsf-admin/src/page/basicInfo/matnr/PrintModal.jsx

@@ -29,11 +29,11 @@
    TextField,
    Box,
    Button,
    Paper,
    TableContainer,
    Table,
    TableHead,
    TableBody,
    Radio,
    RadioGroup,
    FormControlLabel,
    FormControl,
    FormLabel,
    TableRow,
    TableCell,
    Tooltip,
@@ -52,15 +52,32 @@
import { DataGrid } from '@mui/x-data-grid';
import StatusSelectInput from "../../components/StatusSelectInput";

import { useReactToPrint } from "react-to-print";
import jsbarcode from 'jsbarcode'
import { el } from "date-fns/locale";


const InitModal = ({ open, setOpen }) => {
const PrintModal = ({ open, setOpen, rows }) => {
    const refresh = useRefresh();
    const translate = useTranslate();


    const notify = useNotify();

    const contentRef = useRef();
    const reactToPrintFn = useReactToPrint({
        content: () => {
            return contentRef.current
        },
        documentTitle: `物料信息`,
        pageStyle: `
        @page {
            
            margin: 10mm;
        }
        @media print {
             html, body {
                width: 70mm;     // A4横向宽度
                height: 40mm;    // A4横向高度
            }
        }`
    });

    const handleClose = (event, reason) => {
        if (reason !== "backdropClick") {
@@ -68,22 +85,244 @@
        }
    };

    const [value, setValue] = useState('temp1');

    const handleChange = (event) => {
        setValue(event.target.value);
    };

    const handlePrint = () => {
        // handleClose()
        reactToPrintFn()
    };

    return (
        <Dialog open={open} maxWidth="sm" fullWidth>
            <DialogCloseButton onClose={handleClose} />
            <DialogTitle>{translate('toolbar.print')}</DialogTitle>
            <DialogContent sx={{ mt: 2 }}>
                1
            <DialogContent >
                <FormControl >
                    <RadioGroup
                        row
                        aria-labelledby="demo-controlled-radio-buttons-group"
                        name="controlled-radio-buttons-group"
                        value={value}
                        onChange={handleChange}
                        size="small"
                        sx={{ justifyContent: 'center' }}
                    >
                        <FormControlLabel value="temp1" control={<Radio />} label="模板1" size="small" />
                    </RadioGroup>
                </FormControl>

                <Box>
                    <div style={{ textAlign: 'center', display: 'flex', justifyContent: 'center' }}>
                        <table
                            className="contain"
                            style={{
                                overflow: 'hidden',
                                fontSize: 'small',
                                tableLayout: 'fixed',
                                width: '280px',
                                borderCollapse: 'collapse', // 合并边框
                                border: '1px solid black' // 设置表格整体边框
                            }}
                        >
                            <tbody>
                                <tr style={{ height: '74px' }}>
                                    <td
                                        align="center"
                                        colSpan={3}
                                        style={{ border: '1px solid black' }} // 设置单元格边框
                                    >
                                        商品编码
                                    </td>
                                    <td
                                        align="center"
                                        className="barcode"
                                        colSpan={9}
                                        style={{ border: '1px solid black' }}
                                    >
                                        <img className="template-code" src={'/img/barcode.jpeg'} style={{ width: '90%' }} alt="Barcode" />
                                        <div style={{ letterSpacing: '2px', marginTop: '1px', textAlign: 'center' }}>
                                            <span>{'xxxxxx'}</span>
                                        </div>
                                    </td>
                                </tr>
                                <tr style={{ height: '74px' }}>
                                    <td
                                        align="center"
                                        colSpan={3}
                                        style={{ border: '1px solid black' }}
                                    >
                                        商品
                                    </td>
                                    <td
                                        align="center"
                                        colSpan={5}
                                        style={{
                                            overflow: 'hidden',
                                            whiteSpace: 'nowrap',
                                            textOverflow: 'ellipsis',
                                            border: '1px solid black'
                                        }}
                                    >
                                        {'xxxxxxxx'}
                                    </td>
                                    <td
                                        align="center"
                                        colSpan={2}
                                        style={{ border: '1px solid black' }}
                                    >
                                        备注
                                    </td>
                                    <td
                                        align="center"
                                        colSpan={2}
                                        style={{ border: '1px solid black' }}
                                    >
                                        {'xx'}
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <style>{`
                    @media print {
                    .print-content {
                            display: block!important;
                        }
                    }`} </style>
                    <div ref={contentRef} className="print-content" style={{ textAlign: 'center', display: 'none' }}>
                        <PrintTemp key={'bb'} rows={rows} />
                    </div>
                </Box>
            </DialogContent>
            <DialogActions sx={{ position: 'sticky', bottom: 0, backgroundColor: 'background.paper', zIndex: 1000 }}>
                <Box sx={{ width: '100%', display: 'flex', justifyContent: 'space-between' }}>
                    <Button onClick={handleClose} variant="contained" startIcon={<SaveIcon />}>
                    <Button onClick={handlePrint} variant="contained" startIcon={<SaveIcon />}>
                        {translate('toolbar.confirm')}
                    </Button>
                </Box>
            </DialogActions>
        </Dialog>
        </Dialog >
    );
}

export default InitModal;
export default PrintModal;

const PrintTemp = ({ rows }) => {
    const notify = useNotify();
    const [data, setData] = useState([]);
    const http = async () => {
        const res = await request.post(`/matnrs/many/${rows?.join()}`);
        if (res?.data?.code === 200) {
            let val = res.data.data.map((el => {
                return {
                    barcode: '/img/barcode.jpeg',
                    code: el.code,
                    name: el.name,
                    memo: el.memo
                }
            }))
            setData(val)
            setTimeout(() => {
                val.forEach((el) => {
                    jsbarcode(`#barcode${el.code}`, el.code, { height: 30 });
                });
            }, 10);



        } else {
            notify(res.data.msg);
        }
    }

    useEffect(() => {
        if (rows?.length > 0) {
            http();
        }

    }, [rows]);


    return (
        <>
            {data.map((item, index) => (
                <table
                    key={index}
                    className="contain"
                    style={{
                        overflow: 'hidden',
                        fontSize: 'small',
                        tableLayout: 'fixed',
                        width: '520px',
                        borderCollapse: 'collapse',
                        borderSpacing: 0,
                        margin: '0 auto',
                        marginTop: '10px',
                    }}
                >
                    <tbody>
                        <tr style={{ height: '74px' }}>
                            <td align="center" colSpan={3} style={{ border: '1px solid black' }} >
                                商品编码
                            </td>
                            <td
                                align="center"
                                className="barcode"
                                colSpan={9}
                                style={{ border: '1px solid black' }}
                            >
                                {/* <img id={"barcode" + item.code} style={{ width: '70%', verticalAlign: 'middle' }} /> */}
                                <img className="template-code" src={item.barcode} style={{ width: '90%', verticalAlign: 'middle' }} alt="Barcode" />
                                <div style={{ letterSpacing: '2px', marginTop: '1px', textAlign: 'center' }}>
                                    <span>{item.code}</span>
                                </div>
                            </td>
                        </tr>
                        <tr style={{ height: '74px' }}>
                            <td
                                align="center"
                                colSpan={3}
                                style={{ border: '1px solid black' }}
                            >
                                商品
                            </td>
                            <td
                                align="center"
                                colSpan={5}
                                style={{
                                    overflow: 'hidden',
                                    whiteSpace: 'nowrap',
                                    textOverflow: 'ellipsis',
                                    border: '1px solid black'
                                }}
                            >
                                {item.name}
                            </td>
                            <td
                                align="center"
                                colSpan={2}
                                style={{ border: '1px solid black' }}
                            >
                                备注
                            </td>
                            <td
                                align="center"
                                colSpan={2}
                                style={{ border: '1px solid black' }}
                            >
                                {item.memo}
                            </td>
                        </tr>
                    </tbody>
                </table>
            ))}

        </>
    )
}