import React, { useState, useRef, useEffect, useMemo } from "react";
|
import {
|
CreateBase,
|
useTranslate,
|
TextInput,
|
NumberInput,
|
BooleanInput,
|
DateInput,
|
SaveButton,
|
SelectInput,
|
ReferenceInput,
|
ReferenceArrayInput,
|
AutocompleteInput,
|
Toolbar,
|
required,
|
useDataProvider,
|
useNotify,
|
Form,
|
useCreateController,
|
useListContext,
|
useRefresh,
|
} from 'react-admin';
|
import {
|
Dialog,
|
DialogActions,
|
DialogContent,
|
DialogTitle,
|
Grid,
|
TextField,
|
Box,
|
Button,
|
Radio,
|
RadioGroup,
|
FormControlLabel,
|
FormControl,
|
FormLabel,
|
TableRow,
|
TableCell,
|
Tooltip,
|
IconButton,
|
styled
|
|
|
} from '@mui/material';
|
import DialogCloseButton from "../../components/DialogCloseButton";
|
import DictionarySelect from "../../components/DictionarySelect";
|
import { useForm, Controller, useWatch, FormProvider, useFormContext } from "react-hook-form";
|
import SaveIcon from '@mui/icons-material/Save';
|
import request from '@/utils/request';
|
import { Add, Edit, Delete } from '@mui/icons-material';
|
import _ from 'lodash';
|
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 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") {
|
setOpen(false);
|
}
|
};
|
|
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 >
|
<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={handlePrint} variant="contained" startIcon={<SaveIcon />}>
|
{translate('toolbar.confirm')}
|
</Button>
|
</Box>
|
</DialogActions>
|
</Dialog >
|
);
|
}
|
|
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>
|
))}
|
|
</>
|
)
|
}
|
