reportmes2.html 8.04 KB

Edit Raw Blame History

<!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">
<head>
    <meta charset="utf-8">
    <title>MES打印</title>
    <script charset="utf-8" type="text/javascript" th:src="@{/js/barcode/JsBarcode.all.js} "></script>
    <script charset="utf-8" type="text/javascript" th:src="@{/js/jquery-1.4.4.min.js}"></script>
    <script charset="utf-8" type="text/javascript" th:src="@{/js/jquery.jqprint-0.3.js}"></script>
    <style>

        @media print {
            .printbar{ display:none;}
            .action{ display: none;}
            /* svg:nth-child(even)
            {
                page-break-inside :always;
                border:1px solid red;
            }
            */
            svg:nth-child(even)
            {
                /**分页chrome不起作用**/
                page-break-inside :always;
                /* border:1px solid red; */
            }
        }

        @page{
            margin:1cm;
        }
        body {
            margin: 0px;
            padding:0px;
            margin-left:7mm;  /**打印版面的左侧偏移量 7mm左右和打印机匹配**/
        }

        .preview {
            position: relative;
            width: 84.6mm;
            display: grid;
            height: 20mm;
            grid-template-columns: 1fr 1fr;
            border:0px solid blue;
            box-sizing:border-box;   /**把padding也算上宽度**/
            grid-gap: 0px 0px;  /*网格中间间距**/
            margin:0 auto;
            /* background-color: gray; */
        }

        .preview > div {
            border: 1px solid gray; /**打印边框后，斑马打印机才会让svg容垂直居中打印，否则会忽略空白区域，让svg顶格打印**/
            width:40mm;
            height:20.64mm;   /**高度要稍微>20mm一点，打印分页时才不会错位**/
            display: flex;
            vertical-align: middle;
            box-sizing:border-box;   /**把padding也算上宽度**/
        }

        .preview > div> svg {
            /* border:1px solid red; */
            width:38mm;
            position: relative;
            padding-left:1mm;
            padding-right:1mm;
            align-self:center;
            box-sizing:border-box;   /**把padding也算上宽度**/
        }

        /**奇数**/
        svg:nth-child(odd)
        {
            margin-left:1.3mm;
            margin-right:1mm;
            /* margin-top:1mm;
            margin-bottom: 1mm; */
        }

        /**偶数**/
        svg:nth-child(even)
        {
            margin-left:1mm;
            margin-right:1.3mm;
            /* margin-top:1mm;
            margin-bottom: 1mm; */
        }
        span{
            line-height: 10mm;
            color:black;
        }
        .printbar{
            text-align: right;
            background-color: #fafafa;
            margin-right:80px;
            padding-right:10px;
            border-bottom: 1px solid #ccc;
            padding-bottom: 15px;
        }
        .printbar > div{
            font-size: 14px;
            height: 28px;
            /* margin-right: 60px; */
        }
        .svgItem{
            display: none;
        }
        input[name='numItem']{
            width:40px;
            font-size: 14px;
        }
        .action{
            position: fixed;
            right: 0px;
            width: 70px;
            padding-right:10px;
            height:100%;
            padding-top:10px;
            top:0px;
            border-left: 1px solid #ccc;
            background-color: #fafafa;
        }
        .action > div{
            text-align: center;
            width:60px;
            color:blue;
            font-size: 10px;
        }
        .action > input{
            width:60px;
            height:30px;
            margin-left:10px;
            margin-bottom: 5px;
        }
        .spannum{
            width:80px;
            display: inline-block;
            text-align: left;
            /* background-color: #ccc; */
        }
    </style>
</head>

<body>
<div class="printbar">
    <div th:each="row:${receiptDetailMaterialCodes}">
        <svg class="svgItem" name="svgItem" th:attr="id=${row.materialCode}"></svg>
        <span th:text="'' + ${row.materialName}"></span> &nbsp;&nbsp;&nbsp;&nbsp;
        <span th:text="''+${row.materialCode}"></span>&nbsp;&nbsp;&nbsp;&nbsp;
        <span class="spannum" th:text="'数量：'+${#numbers.formatDecimal(row.qty,1,0)}"></span>
        打印 <input name="numItem" type="text" th:attr="value=${#numbers.formatDecimal(1,1,0)}"> 个
    </div>
</div>
<div class="action">
    <input type="button" value="预 览" onclick="preview()" id="pv"/><br/>
    <input type="button" value="打 印" onclick="preview();window.print()"/><br/><br/>
    <br/>

    <input type="button" value="+边距" onclick="addMargin(1)"/><br/>
    <div id="marginInfo">7mm</div>
    <input type="button" value="-边距" onclick="addMargin(-1)"/><br/><br/>
    <input type="button" value="重 置" onclick="window.location.reload(true)"/><br/>
    <input type="button" value="清 零" onclick="clearNum()"/><br/><br/>
    <div id="infoSum"></div>
</div>

<div class="preview" id="preview"></div>
<script type="text/javascript">
    var  barcodeStyle = {
        format: "CODE128",//选择要使用的条形码类型
        width:1,//设置条之间的宽度
        height:40,//高度
        displayValue:true,//是否在条形码下方显示文字
        // text:"456",//覆盖显示的文本
        // fontOptions:"bold italic",//使文字加粗体或变斜体
        font:"monospace",//设置文本的字体fantasy
        textAlign:"center",//设置文本的水平对齐方式
        textPosition:"bottom",//设置文本的垂直位置
        textMargin:0,//设置条形码和文本之间的间距
        fontSize:16,//设置文本的大小
        background:"#ffffff",//设置条形码的背景
        lineColor:"#000000",//设置条和文本的颜色。
        margin:1//设置条形码周围的空白边距
    };

    $(document).ready(function() {
        $("svg[name='svgItem']").each(function () {
            JsBarcode(this, this.id, barcodeStyle);
        })
    });

    function clearNum(){
        var inputList = $("input[name='numItem']")
        $("svg[name='svgItem']").each(function (i, m, n) {
            if(inputList[i] != undefined){
                inputList[i].value = 0
            }
        })
        preview()
    }

    function preview() {
        $("#preview").empty()
        var inputList = $("input[name='numItem']")
        var sum = 0;
        $("svg[name='svgItem']").each(function (i, m, n) {
            var num = inputList[i].value
            sum = sum + parseInt(num)
            for(var i=0; i<num; i++) {
                var bar = $(m).clone(true)

                var preview = document.getElementById("preview")

                var div = document.createElement("div")

                $("#preview").append('<div></div>');
                $("#preview").children("div:last-child").append(bar);
                // alert(1)
                bar.removeAttr("class")
            }
        })
        $("#infoSum").html("条码数<br/>" + sum)
    }
    $("#pv").click()

    var margin_src = 0
    function addMargin(offset) {
        offset = parseInt(offset)
        margin_src = margin_src + offset
        document.getElementsByTagName("body")[0].style.cssText = "margin-left: " +margin_src+ "mm"
        setCookie('margin', margin_src)
        $("#marginInfo").html(margin_src + "mm")
    }

    $(document).ready(function() {
        addMargin(getCookie("margin"))
    });

    function setCookie(name,value)
    {
        var Days = 30;
        var exp = new Date();
        exp.setTime(exp.getTime() + Days*24*60*60*1000);
        document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
    }

    function getCookie(name)
    {
        var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
        if(arr=document.cookie.match(reg))
            return unescape(arr[2]);
        else
            return 0;
    }
</script>


</body></html>