feat:打印模板

verou

2025-03-21 242bcd15240d652874a9b19823d2ef3ed1f90347

 rsf-admin/src/page/basicInfo/matnr/PrintModal.jsx

@@ -53,8 +53,10 @@
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 }) => {
const PrintModal = ({ open, setOpen, rows }) => {
    const refresh = useRefresh();
    const translate = useTranslate();
    const notify = useNotify();
@@ -98,8 +100,76 @@
                </FormControl>

                <Box>
                    <div style={{ textAlign: 'center' }}>
                        <PrintTemp />
                    <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 {
@@ -108,7 +178,7 @@
                        }
                    }`} </style>
                    <div ref={contentRef} className="print-content" style={{ textAlign: 'center', display: 'none' }}>
                        <PrintTemp />
                        <PrintTemp key={'bb'} rows={rows} />
                    </div>
                </Box>
            </DialogContent>
@@ -125,12 +195,39 @@

export default PrintModal;

const PrintTemp = (props) => {
    const [data, setData] = useState([{
        barcode: '/img/barcode.jpeg',
        product: 'xxxxxx-xx/xx',
        remark: 'xx'
    }]);
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)
            val.forEach((el) => {
                jsbarcode(`#barcode${el.code}`, el.code, { height: 30 });
            });


        } else {
            notify(res.data.msg);
        }
    }

    useEffect(() => {
        if (rows?.length > 0) {
            http();
        }

    }, [rows]);


    return (
        <>
            {data.map((item, index) => (
@@ -159,10 +256,11 @@
                                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>
                                <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' }}>
@@ -183,7 +281,7 @@
                                    border: '1px solid black'
                                }}
                            >
                                {item.product}
                                {item.name}
                            </td>
                            <td
                                align="center"
@@ -197,7 +295,7 @@
                                colSpan={2}
                                style={{ border: '1px solid black' }}
                            >
                                {item.remark}
                                {item.memo}
                            </td>
                        </tr>
                    </tbody>