verou
2025-03-21 b30fa5efb91d667ed67feacc3c4888cbbd578e74
rsf-admin/src/page/basicInfo/matnr/PrintModal.jsx
@@ -54,7 +54,7 @@
import { useReactToPrint } from "react-to-print";
const InitModal = ({ open, setOpen }) => {
const PrintModal = ({ open, setOpen }) => {
    const refresh = useRefresh();
    const translate = useTranslate();
    const notify = useNotify();
@@ -98,25 +98,59 @@
                </FormControl>
                <Box>
                    <div ref={contentRef} style={{ display: 'flex', justifyContent: 'center' }}>
                    <div style={{ textAlign: 'center' }}>
                        <PrintTemp />
                    </div>
                    <style>{`
                    @media print {
                    .print-content {
                            display: block!important;
                        }
                    }`} </style>
                    <div ref={contentRef} className="print-content" style={{ textAlign: 'center', display: 'none' }}>
                        <PrintTemp />
                    </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={handlePrint} variant="contained" startIcon={<SaveIcon />}>
                        {translate('toolbar.confirm')}
                    </Button>
                </Box>
            </DialogActions>
        </Dialog >
    );
}
export default PrintModal;
const PrintTemp = (props) => {
    const [data, setData] = useState([{
        barcode: '/img/barcode.jpeg',
        product: 'xxxxxx-xx/xx',
        remark: 'xx'
    }]);
    return (
        <>
            {data.map((item, index) => (
                        <table
                    key={index}
                            className="contain"
                            style={{
                                overflow: 'hidden',
                                fontSize: 'small',
                                tableLayout: 'fixed',
                                width: '280px',
                                borderCollapse: 'collapse', // 合并边框
                                border: '1px solid black' // 设置表格整体边框
                        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 align="center" colSpan={3} style={{ border: '1px solid black' }} >
                                        商品编码
                                    </td>
                                    <td
@@ -125,9 +159,9 @@
                                        colSpan={9}
                                        style={{ border: '1px solid black' }}
                                    >
                                        {/* <img className="template-code" src={barcodeUrl} style={{ width: '90%' }} alt="Barcode" /> */}
                                <img className="template-code" src={item.barcode} style={{ width: '90%', verticalAlign: 'middle' }} alt="Barcode" />
                                        <div style={{ letterSpacing: '2px', marginTop: '1px', textAlign: 'center' }}>
                                            <span>{'matnr'}</span>
                                    <span>{'xxxxxx'}</span>
                                        </div>
                                    </td>
                                </tr>
@@ -149,7 +183,7 @@
                                            border: '1px solid black'
                                        }}
                                    >
                                        {'maktx'}
                                {item.product}
                                    </td>
                                    <td
                                        align="center"
@@ -163,23 +197,15 @@
                                        colSpan={2}
                                        style={{ border: '1px solid black' }}
                                    >
                                        {'memo'}
                                {item.remark}
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </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={handlePrint} variant="contained" startIcon={<SaveIcon />}>
                        {translate('toolbar.confirm')}
                    </Button>
                </Box>
            </DialogActions>
        </Dialog>
    );
            ))}
        </>
    )
}
export default InitModal;