bklLiudl
2025-04-02 1bbbbc8bb49411b544626996a1370788142300e0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Demo页</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
        <link rel="stylesheet" href="../../layuiadmin/style/admin.css" media="all">
        <style media="print">
            @page{
                size: auto;
                margin: 0 0 0 10px;
            }
        </style>
    </head>
    <body>
        <div class="layui-fluid">
            <div class="layui-card" style="padding: 10px;">
                <div  style="padding-top: 10px;">
                    <img id="imgQr" />
                </div>
                <div id="divPrint" style="margin-top: 10px;">
                
                    <table style="width: 650px;margin: 0;padding: 10px; font-weight: 600;">
                        <tr style="line-height: 50px;">
                            <td style="width: 80px;">物料编码:</td>
                            <td>XXXXXXXXXXXXXXXXXX</td>
                            <td style="width: 80px;">批次号:</td>
                            <td>XXXXXXXXXXXXXXXXXX</td>
                        </tr>
                        <tr style="line-height: 50px;">
                            <td>物料名称:</td>
                            <td colspan="3">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</td>
                        </tr>
                        <tr style="line-height: 50px;">
                            <td>厂&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;家:</td>
                            <td>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</td>
                        </tr>
                        <tr style="line-height: 50px;">
                            <td>生产日期:</td>
                            <td>2021-12-12</td>
                            <td>到期日期:</td>
                            <td>2022-12-11</td>
                        </tr>
                        <tr style="">
                            <td colspan="4" style="text-align: center;padding-top: 15px;">
                                <img id="imgBar" />
                            </td>
                        </tr>
                    </table>
                <div style="page-break-after: always;"></div>
                
                </div>
                
                <div>
                    <button id="btnPrint" type="button">打印</button>
                </div>
            </div>
        </div>
        <script src="../../layuiadmin/layui/layui.js"></script>
        <script src="../../js/public.js"></script>
        <script src="../../js/jquery-3.5.1.min.js"></script>
        <script src="../../js/jquery.print.js"></script>
        <script>
            layui.config({
                base: '../../layuiadmin/' //静态资源所在路径
            }).extend({
                index: 'lib/index' //主入口模块
            }).use(['index', 'table', 'laypage', 'layer'], function() {
                var table = layui.table,
                    form = layui.form,
                    laypage = layui.laypage,
                    layer = layui.layer;
                //
                renderImg();
                $('#btnPrint').on('click', function() {
                    $("#divPrint").print();
                });
                //
                function renderImg(){
                    sendData(IP + "/Demo/GetBarImg", {}, 'post', function(res) {
                        console.log(res);
                        if (res.code == 1) { //成功
                            $("#imgBar").attr("src", res.data);
                        } else { //不成功
                            layer.msg('获取图片失败!', {
                                icon: 2,
                                time: 2000 //2秒关闭(如果不配置,默认是3秒)
                            }, function() {});
                        }
                    });
                    sendData(IP + "/Demo/GetQrImg", {}, 'post', function(res) {
                        console.log(res);
                        if (res.code == 1) { //成功
                            $("#imgQr").attr("src", res.data);
                        } else { //不成功
                            layer.msg('获取图片失败!', {
                                icon: 2,
                                time: 2000 //2秒关闭(如果不配置,默认是3秒)
                            }, function() {});
                        }
                    });
                }    
            });
        </script>
    </body>
</html>