reportProduct.html 5.18 KB
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <head th:include="include :: header"></head>
    <title>文字</title>
    <!--<link href="css/bootstrap.min.css" rel="stylesheet" />-->
    <!--<link href="css/font-awesome.min.css" rel="stylesheet" />-->
    <!--&lt;!&ndash;[if IE]>-->
    <!--<link href="css/font-awesome-ie7.min.css" rel="stylesheet" />-->
    <!--<![endif]&ndash;&gt;-->

    <style type="text/css">
        .table-bordered td, .table-bordered th {
            border: 1px solid #000 !important;
        }

        .table tbody tr td {
            padding: 1px;
            text-align: center;
        }
    </style>
</head>

<body id="ddd">
<div class="noprint container" style="text-align:right; padding: 20px;float: right">
    <span style="padding-left:20px;"><button type="button" onClick="a()"><i
            class="fa fa-print"></i> 打印</button></span>
</div>
<div class="container" style=" width:400px;/*height:228px*/;color: #333">
    <div class="row">
        <table width="100%" border="0" cellspacing="0" cellpadding="0" class="dy-report table table-bordered"
               th:each="row:${reportProduct}">
            <span th:id="${row.materialCode}" style="display: none" th:text="${row.id}"></span>
            <!--      <caption style="font-size:18px;text-align:center; color:#333; padding-bottom: 3px;" th:text="${row.companyName}"></caption>-->
            <caption style="font-size:20px;text-align:center; color:#333; padding-bottom: 3px;">
                昆山华恒焊接股份有限公司
                <!--<img
                    style="width: 75px;float:left" alt="[ 华恒 ]" src="../static/huaheng.png" th:src="@{/huaheng.png}">-->
            </caption>
            <tbody>
            <tr>
                <td width="20%" scope="col">存货编码</td>
                <td colspan="2" style="text-align:left">
                    <span th:text="${row.materialCode}"></span>
                </td>
            </tr>
            <tr>
                <td width="20%" scope="col">存货代码</td>
                <td colspan="2" style="text-align:left">
                    <span th:text="${row.materialCode}"></span>
                </td>
            </tr>
            <tr style="vertical-align:middle">
                <td width="20%" scope="col">存货名称</td>
                <td colspan="2" style="text-align:left">
                    <span th:text="${row.materialName}"></span>
                </td>
            </tr>
            <tr style="vertical-align:middle">
                <td width="20%" scope="col">规格型号</td>
                <td colspan="2" style="text-align:left">
                    <span th:text="${row.materialSpec}"></span>
                </td>
            </tr>
            <tr>
                <td width="20%" scope="col">数量</td>
                <td colspan="1" style="text-align:left">
                    <span th:text="${row.qty}"></span>
                </td>
                <td scope="col" style="text-align:center" rowspan="2">
                    <div class="qrcode"></div>
                </td>
            </tr>
            <tr>
                <td width="20%" scope="col">生产编号</td>
                <td colspan="1" style="text-align:left">
                    <span th:text="${row.moCode}"></span>
                </td>
            </tr>

            </tbody>
        </table>
    </div>
</div>
<div th:include="include :: footer"></div>
<style type="text/css">
    @media print {
        .noprint {
            display: none;
        }
    }
</style>
<!--<script type="text/javascript" src="../../../js/jquery.jqprint-0.3.js"></script>-->
<script type="text/javascript" src="../../../js/qrcode/qrcode.min.js"></script>
<script type="text/javascript">
    function a() {
        $(".qrcode").children().remove();
        print_qrcode();
        window.print();
    }

    function print_qrcode() {
        $('.dy-report').each(function (i, item) {
            let materialCode = $(this).children()[1].children[0].innerText.substring(4);
            // let code = $(this).children()[1].children[1].innerText.substring(2);
            let materialName = $(this).children()[1].children[2].innerText.substring(4);
            let materialSpec = $(this).children()[1].children[3].innerText.substring(4);
            let qty = $(this).children()[1].children[4].innerText.substring(3);
            let moCode = $(this).children()[1].children[5].innerText.substring(4);

            console.log(materialName)
            let code_text = materialCode.replace(/\s+/g, "") + "||||" +
                materialName.replace(/\s+/g, "") + "||" + materialSpec.replace(/\s+/g, "") +
                "||" + qty + "||" + moCode.replace(/\s+/g, "");
            let QRcode = new QRCode($(this).find('.qrcode')[0], {
                text: code_text,
                width: 55,
                height: 55,
                correctLevel: QRCode.CorrectLevel.L
            });
        });
    }

    print_qrcode();

</script>

</body>
</html>