|  |  |  | 
|---|
|  |  |  | 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(); | 
|---|
|  |  |  | 
|---|
|  |  |  | </FormControl> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <Box> | 
|---|
|  |  |  | <div ref={contentRef} style={{ display: 'flex', justifyContent: 'center' }}> | 
|---|
|  |  |  | <div style={{ textAlign: 'center', display: 'flex', justifyContent: 'center' }}> | 
|---|
|  |  |  | <table | 
|---|
|  |  |  | className="contain" | 
|---|
|  |  |  | style={{ | 
|---|
|  |  |  | 
|---|
|  |  |  | colSpan={9} | 
|---|
|  |  |  | style={{ border: '1px solid black' }} | 
|---|
|  |  |  | > | 
|---|
|  |  |  | {/* <img className="template-code" src={barcodeUrl} style={{ width: '90%' }} alt="Barcode" /> */} | 
|---|
|  |  |  | <img className="template-code" src={'/img/barcode.jpeg'} style={{ width: '90%' }} alt="Barcode" /> | 
|---|
|  |  |  | <div style={{ letterSpacing: '2px', marginTop: '1px', textAlign: 'center' }}> | 
|---|
|  |  |  | <span>{'matnr'}</span> | 
|---|
|  |  |  | <span>{'xxxxxx'}</span> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </td> | 
|---|
|  |  |  | </tr> | 
|---|
|  |  |  | 
|---|
|  |  |  | border: '1px solid black' | 
|---|
|  |  |  | }} | 
|---|
|  |  |  | > | 
|---|
|  |  |  | {'maktx'} | 
|---|
|  |  |  | {'xxxxxxxx'} | 
|---|
|  |  |  | </td> | 
|---|
|  |  |  | <td | 
|---|
|  |  |  | align="center" | 
|---|
|  |  |  | 
|---|
|  |  |  | colSpan={2} | 
|---|
|  |  |  | style={{ border: '1px solid black' }} | 
|---|
|  |  |  | > | 
|---|
|  |  |  | {'memo'} | 
|---|
|  |  |  | {'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> | 
|---|
|  |  |  | 
|---|
|  |  |  | </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> | 
|---|
|  |  |  | ))} | 
|---|
|  |  |  |  | 
|---|
|  |  |  | </> | 
|---|
|  |  |  | ) | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|