wms-master.git - Gitblit

			@@ -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;
			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>
			))}

			</>
			)
			}