From 515dc2664c481e3a65245b71aa1ff4a4d6bfb64f Mon Sep 17 00:00:00 2001 From: skyouc Date: 星期五, 21 三月 2025 15:32:06 +0800 Subject: [PATCH] Merge branch 'devlop' of http://47.97.1.152:5880/r/wms-master into devlop --- rsf-admin/src/page/basicInfo/matnr/PrintModal.jsx | 152 +++++++++++++++++++++++++++++++++++++++++++++----- 1 files changed, 137 insertions(+), 15 deletions(-) diff --git a/rsf-admin/src/page/basicInfo/matnr/PrintModal.jsx b/rsf-admin/src/page/basicInfo/matnr/PrintModal.jsx index 46c4d0d..83df0e0 100644 --- a/rsf-admin/src/page/basicInfo/matnr/PrintModal.jsx +++ b/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,14 @@ import { DataGrid } from '@mui/x-data-grid'; import StatusSelectInput from "../../components/StatusSelectInput"; +import { useReactToPrint } from "react-to-print"; - -const InitModal = ({ open, setOpen }) => { +const PrintModal = ({ open, setOpen }) => { const refresh = useRefresh(); const translate = useTranslate(); - - const notify = useNotify(); - + const contentRef = useRef(null); + const reactToPrintFn = useReactToPrint({ contentRef }); const handleClose = (event, reason) => { if (reason !== "backdropClick") { @@ -68,22 +67,145 @@ } }; + 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' }}> + <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={handleClose} variant="contained" startIcon={<SaveIcon />}> + <Button onClick={handlePrint} variant="contained" startIcon={<SaveIcon />}> {translate('toolbar.confirm')} </Button> </Box> </DialogActions> - </Dialog> + </Dialog > ); } -export default InitModal; \ No newline at end of file +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', + 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 className="template-code" src={item.barcode} style={{ width: '90%', verticalAlign: 'middle' }} 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' + }} + > + {item.product} + </td> + <td + align="center" + colSpan={2} + style={{ border: '1px solid black' }} + > + 澶囨敞 + </td> + <td + align="center" + colSpan={2} + style={{ border: '1px solid black' }} + > + {item.remark} + </td> + </tr> + </tbody> + </table> + ))} + + </> + ) +} + + -- Gitblit v1.9.1