#

luxiaotao1123

2021-03-12 a897c6650036f9f0e2a033bca554864c9b24e34f

#

 src/main/java/zy/cloud/wms/manager/controller/MatController.java

@@ -12,10 +12,19 @@
import com.core.common.R;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import zy.cloud.wms.common.CodeRes;
import zy.cloud.wms.common.config.AdminInterceptor;
import zy.cloud.wms.common.utils.BarcodeUtils;
import zy.cloud.wms.common.utils.QrCode;
import zy.cloud.wms.common.web.BaseController;
import zy.cloud.wms.manager.entity.Mat;
import zy.cloud.wms.manager.entity.MatPrint;
import zy.cloud.wms.manager.service.MatService;

import javax.imageio.ImageIO;
import javax.servlet.http.HttpServletResponse;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
@@ -138,4 +147,49 @@
        return R.ok();
    }

    @RequestMapping(value = "/mac/code/auth")
//    @ManagerAuth(memo = "物料编码条形码获取(type:1(条形码);2(二维码)")
    public R matCodeBarcode(@RequestParam(defaultValue = "1") Integer type
            , @RequestParam String param
            , HttpServletResponse response) throws Exception {
        AdminInterceptor.cors(response);
        if (Cools.isEmpty(param)){
            return R.parse(BaseRes.EMPTY);
        }
        BufferedImage img;
        if (type == 1) {
            img = BarcodeUtils.encode(param);
        } else {
            img = QrCode.createImg(param);
        }
        if (!ImageIO.write(img, "jpg", response.getOutputStream())) {
            throw new IOException("Could not write an image of format jpg");
        }
        response.getOutputStream().flush();
        response.getOutputStream().close();
        return R.ok();
    }

    // 打印
    @RequestMapping(value = "/mat/print/auth")
    @ManagerAuth(memo = "物料编码打印")
    public R matCodePrint(@RequestParam(value = "param[]") String[] param) {
        if(Cools.isEmpty(param)) {
            return R.parse(CodeRes.EMPTY);
        }
        List<MatPrint> res = new ArrayList<>();
        for (String matnr : param){
            Mat mat = matService.selectByMatnr(matnr);
            // 打印数据注入
            MatPrint print = new MatPrint();
            print.setMatnr(mat.getMatnr());
            print.setBarcode(mat.getBarcode());
            print.setMaktx(mat.getMaktx());
            print.setSpecs(mat.getSpecs());
            print.setUnit(mat.getUnit());
            res.add(print);
        }
        return R.ok().add(res);
    }

}

 src/main/java/zy/cloud/wms/manager/entity/MatPrint.java

New file
@@ -0,0 +1,36 @@
package zy.cloud.wms.manager.entity;

import lombok.Data;

/**
 * Created by vincent on 2020/6/8
 */
@Data
public class MatPrint {

    /**
     * 物料编码
     */
    private String matnr;

    /**
     * 条码地址
     */
    private String barcode;

    /**
     * 物料名称
     */
    private String maktx;

    /**
     * 物料单位
     */
    private String unit;

    /**
     * 物料规格
     */
    private String specs;

}

 src/main/webapp/static/js/mat/mat.js

@@ -1,4 +1,5 @@
var pageCurr;
var printMatCodeNos = [];
layui.use(['table','laydate', 'form'], function(){
    var table = layui.table;
    var $ = layui.jquery;
@@ -184,6 +185,29 @@
                    });
                });
                break;
            // 批量打印
            case "btnPrintBatch":
                printMatCodeNos = [];
                var data = checkStatus.data;
                if (data.length === 0){
                    layer.msg('请选择打印数据');
                } else {
                    layer.open({
                        type: 1,
                        title: '批量打印 [数量'+ data.length +']',
                        area: ['500px'],
                        shadeClose: true,
                        content: $('#printDataDiv'),
                        success: function(layero, index){
                            for (var i = 0; i<data.length;i++) {
                                printMatCodeNos.push(data[i].matnr);
                            }
                        },
                        end: function () {
                        }
                    });
                }
                break;
        }
    });

@@ -191,6 +215,23 @@
    table.on('tool(mat)', function(obj){
        var data = obj.data;
        switch (obj.event) {
            // 打印
            case "btnPrint":
                printMatCodeNos = [];
                layer.open({
                    type: 1,
                    title: data.matnr + ' [数量：1]',
                    area: ['500px'],
                    shadeClose: true,
                    content: $('#printDataDiv'),
                    success: function(layero, index){
                        layer.iframeAuto(index);
                        printMatCodeNos.push(data.matnr);
                    },
                    end: function () {
                    }
                });
                break;
            // 详情
            case 'detail':
                layer.open({
@@ -232,6 +273,49 @@
        }
    });

    // 模板选择
    form.on('radio(selectTemplateRadio)', function (data) {
        $('.template-preview').hide();
        $('#template-preview-'+data.value).show();
    });

    // 开始打印
    form.on('submit(doPrint)', function (data) {
        var templateNo = data.field.selectTemplate;
        $.ajax({
            url: baseUrl+"/mat/print/auth",
            headers: {'token': localStorage.getItem('token')},
            data: {param: printMatCodeNos},
            method: 'POST',
            async: false,
            success: function (res) {
                if (res.code === 200){
                    layer.closeAll();
                    for (let i=0;i<res.data.length;i++){
                        var templateDom = $("#templatePreview"+templateNo);
                        var className = templateDom.attr("class");
                        if (className === 'template-barcode') {
                            res.data[i]["barcodeUrl"]=baseUrl+"/mac/code/auth?type=1&param="+res.data[i].matnr;
                        } else {
                            res.data[i]["barcodeUrl"]=baseUrl+"/mac/code/auth?type=2&param="+res.data[i].matnr;
                        }
                    }
                    var tpl = templateDom.html();
                    var template = Handlebars.compile(tpl);
                    var html = template(res);
                    let box = $("#box");
                    box.html(html);box.show();
                    box.print({mediaPrint:true});
                    box.hide();
                } else if (res.code === 403){
                    top.location.href = baseUrl+"/";
                }else {
                    layer.msg(res.msg)
                }
            }
        })
    })

    // 数据保存动作
    form.on('submit(save)', function () {
        if (banMsg != null){

 src/main/webapp/views/mat/mat.html

@@ -36,6 +36,25 @@
        .layui-form.layui-border-box.layui-table-view {
            height: 100%;
        }


        /* ------------------------- 打印表格 -----------------------  */
        .layui-btn-danger {
            background-color: lightsalmon;
            color: #333;
        }


        .template-preview {
            height: 200px;
            display: inline-block;
        }
        .contain {
        }
        .contain td {
            border: 1px solid #000;
            /*line-height: 46px;*/
        }
    </style>
</head>
<body>
@@ -99,6 +118,7 @@

<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-danger layui-btn-sm" id="btn-print-batch" lay-event="btnPrintBatch">批量打印</button>
        <button class="layui-btn layui-btn-sm" id="btn-add" lay-event="addData">新增</button>
        <button class="layui-btn layui-btn-sm" id="btn-delete" lay-event="deleteData">删除</button>
        <button class="layui-btn layui-btn-primary layui-btn-sm" id="btn-export" lay-event="exportData">导出</button>
@@ -106,12 +126,15 @@
</script>

<script type="text/html" id="operate">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">详情</a>
<!--    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">详情</a>-->
    <a class="layui-btn layui-btn-xs btn-edit" lay-event="edit">编辑</a>
    <button class="layui-btn layui-btn-danger layui-btn-xs btn-print" lay-event="btnPrint">打印</button>
</script>

<script type="text/javascript" src="../../static/js/jquery/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="../../static/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="../../static/js/jquery/jQuery.print.js"></script>
<script type="text/javascript" src="../../static/js/handlebars/handlebars-v4.5.3.js"></script>
<script type="text/javascript" src="../../static/js/common.js" charset="utf-8"></script>
<script type="text/javascript" src="../../static/js/cool.js" charset="utf-8"></script>
<script type="text/javascript" src="../../static/js/mat/mat.js" charset="utf-8"></script>
@@ -119,6 +142,178 @@

<iframe id="detail-iframe" scrolling="auto" style="display:none;"></iframe>

<!-- 打印操作弹窗 -->
<div id="printDataDiv" style="display: none;padding: 20px">
    <div class="layui-form" style="text-align: center">
        <hr>
        <!--单选框-->
        <div class="layui-form-item" style="display: inline-block; margin-bottom: 10px">
            <input type="radio" name="selectTemplate" value="1" title="模板一"  lay-filter="selectTemplateRadio" checked="">
            <input type="radio" name="selectTemplate" value="2" title="模板二" lay-filter="selectTemplateRadio">
            <input type="radio" name="selectTemplate" value="3" title="模板三" lay-filter="selectTemplateRadio">
        </div>
        <fieldset class="layui-elem-field site-demo-button" style="margin-top: 30px;text-align: left;">
            <legend>打印预览</legend>
            <div id="template-container" style="margin: 20px;text-align: center">

                <!-- 预览图 1 -->
                <div id="template-preview-1" class="template-preview" style="display: inline-block">
                    <table class="contain" width="280" style="overflow: hidden;font-size: xx-small;table-layout: fixed;">
                        <tr style="height: 74px">
                            <td colspan="3" align="center" scope="col">物料编码</td>
                            <td class="barcode" colspan="9" align="center" scope="col">
                                <img class="template-code template-barcode" src="" width="90%;">
                                <div style="letter-spacing: 2px;margin-top: 1px; text-align: center;">
                                    <span>xxxxxx</span>
                                </div>
                            </td>
                        </tr>
                        <tr style="height: 74px">
                            <td align="center" colspan="3">物料名称</td>
                            <td align="center" colspan="5">xxxxxx-xx/xx</td>
                            <td align="center" colspan="2">单位</td>
                            <td align="center" colspan="2">xx</td>
                        </tr>
                    </table>
                </div>

                <!-- 预览图 2 -->
                <div id="template-preview-2" class="template-preview" style="display: none">
                    <table class="contain" width="280" style="overflow: hidden;font-size: xx-small;table-layout: fixed;">
                        <tr style="height: 30px">
                            <td align="center" width="20%">物料名称</td>
                            <td align="center" width="80%" style="overflow:hidden; white-space:nowrap; text-overflow:ellipsis;">xxxxxxx</td>
                        </tr>
                        <tr style="height: 30px">
                            <td align="center" width="20%">物料单位</td>
                            <td align="center" width="80%">xxxxxxxx</td>
                        </tr>
                        <tr style="height: 75px;">
                            <td align="center" colspan="2" width="100%" style="border: none">
                                <img class="template-code template-barcode" src="" width="80%">
                                <div style="letter-spacing: 2px;margin-top: 1px; text-align: center">
                                    <span>xxxxxx</span>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>

                <!-- 预览图 3 -->
                <div id="template-preview-3" class="template-preview" style="display: none">
                    <table class="contain" width="280" style="overflow: hidden;font-size: xx-small;table-layout: fixed;">
                        <tr style="height: 74px">
                            <td align="center" scope="col" colspan="1">物料名称</td>
                            <td align="center" scope="col" colspan="1" style="">xxxxxx-xx/xx</td>
                            <td align="center" scope="col" colspan="2" rowspan="2">
                                <img class="template-code template-qrcode" src="" width="80%">
                                <div style="letter-spacing: 1px;margin-top: 1px; text-align: center">
                                    <span>xxxxxx</span>
                                </div>
                            </td>
                        </tr>
                        <tr style="height: 74px">
                            <td align="center" colspan="1">物料单位</td>
                            <td align="center" colspan="1" style="overflow:hidden; white-space:nowrap; text-overflow:ellipsis;">xxxxxxx</td>
                        </tr>
                    </table>
                </div>
            </div>
        </fieldset>

        <button class="layui-btn layui-btn-danger" id="doPrint" lay-submit lay-filter="doPrint" style="margin-top: 20px">确定</button>
    </div>
</div>

<div id="box" style="display: block"></div>

<!-- 初始化打印模板的条形码 -->
<script type="text/javascript">
    $('.template-barcode').attr("src", baseUrl+"/mac/code/auth?type=1&param=123");
    $('.template-qrcode').attr("src", baseUrl+"/mac/code/auth?type=2&param=123");
</script>

<!-- 模板引擎 -->
<!-- 模板1 -->
<script type="text/template" id="templatePreview1" class="template-barcode">
    {{#each data}}
    <table class="contain" width="280" style="overflow: hidden;font-size: small;table-layout: fixed;">
        <tr style="height: 74px">
            <td align="center" colspan="3" scope="col">物料编码</td>
            <td align="center" class="barcode" colspan="9" scope="col">
                <img class="template-code" src="{{this.barcodeUrl}}" width="90%">
                <div style="letter-spacing: 2px;margin-top: 1px; text-align: center">
                    <span>{{this.matnr}}</span>
                </div>
            </td>
        </tr>
        <tr style="height: 74px">
            <td align="center" colspan="3">物料名称</td>
            <td align="center" colspan="5" style="overflow: hidden; white-space: nowrap;text-overflow: ellipsis;">{{this.maktx}}</td>
            <td align="center" colspan="2">单位</td>
            <td align="center" colspan="2">{{this.unit}}</td>
        </tr>
    </table>
    {{/each}}
</script>
<!-- 模板2 -->
<script type="text/template" id="templatePreview2" class="template-barcode">
    {{#each data}}
    <table class="contain" width="280" style="overflow: hidden;font-size: xx-small;table-layout: fixed;">
        <tr style="height: 35px">
            <td align="center" width="20%">物料名称</td>
            <td align="center" width="80%" style="overflow:hidden; white-space:nowrap; text-overflow:ellipsis;">{{this.maktx}}</td>
        </tr>
        <tr style="height: 35px">
            <td align="center" width="20%">物料单位</td>
            <td align="center" width="80%">{{this.unit}}</td>
        </tr>
        <tr style="height: 79px;">
            <td align="center" colspan="2" width="100%" style="border: none">
                <img class="template-code" src="{{this.barcodeUrl}}" width="80%">
                <div style="letter-spacing: 2px;margin-top: 1px; text-align: center">
                    <span>{{this.matnr}}</span>
                </div>
            </td>
        </tr>
    </table>
    {{/each}}
</script>
<!-- 模板3 -->
<script type="text/template" id="templatePreview3" class="template-qrcode">
    {{#each data}}
    <table class="contain" width="280" style="overflow: hidden;font-size: xx-small;table-layout: fixed;">
        <tr style="height: 74px" >
            <td align="center" scope="col" colspan="1">物料名称</td>
            <td align="center" scope="col" colspan="1" style="
                display: inline-block;
                line-height: 20px;
                vertical-align: middle;
                border: none;
                border-top: 1px solid #000;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
                    ">
                {{this.maktx}}
            </td>
            <td align="center" scope="col" colspan="2" rowspan="2">
                <img class="template-code template-qrcode" src="{{this.barcodeUrl}}" width="80%">
                <div style="letter-spacing: 1px;margin-top: 1px; text-align: center">
                    <span>{{this.matnr}}</span>
                </div>
            </td>
        </tr>
        <tr style="height: 74px">
            <td align="center" colspan="1">物料单位</td>
            <td align="center" colspan="1" style="overflow:hidden; white-space:nowrap; text-overflow:ellipsis;">{{this.unit}}</td>
        </tr>
    </table>
    {{/each}}
</script>

</body>
</html>