tool/application/admin/view/collar_use/back.html

<style>
    .center{
        width: 80%;!important;
        margin-left: 180px;
    }
    .input{
        font-size: 20px;
        height:40px;
        width: 200px;
        border-radius:6px;
    }
    .top{
        margin-left: 50px;
    }
    .middle{
        margin-top: 20px;
        margin-left: 40px;
        width: 60%;
    }
    .button button{
        width: 150px;
        height: 60px;
        font-size: 20px;
    }
    .color{
        display: none;
    }
    #color{
        margin-top: 10px;
        margin-left: 40px;
    }
    #ink{
        margin-top: 10px;
        margin-left: 40px;
    }
    .formula button{
        width: 150px;
        height: 60px;
        background-color: #FF6600;
        color: white;
        font-size: 20px;
    }
    .formula{
        margin-left: 20px;
    }
    .jar{
        margin-left: 30px;
        margin-top: 4px;
    }
    .jar button{
        width: 150px;
        height: 60px;
        color: white;
        font-size: 20px;
    }
    .jar-weight{
        background-color: #00E676;
    }
    .jar-weight-select{
        background-color: #0e9aef;
    }
</style>
<form id="back-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action=""  AUTOCOMPLETE="OFF">

    <div class=" center">
        <div class="input-group top">
            <input type="text" id="bach" class="form-control input" placeholder="请扫描油墨桶标签二维码或工单二维码..." aria-describedby="basic-addon2">
            <!--<span class="input-group-addon single" id="basic-addon2">确认</span>-->
            <span class="input-group-addon single" id="basic-addon3">清空输入框</span>
        </div>
        <div class="form-group" style="margin:5px 0 0 20px;!important;">
            {foreach name="jar" id="vo"}
            <span class="jar">
                {if condition="$vo.id eq 2"}
                    <button type="button" class="btn btn-default jar-default jar-weight-select" data-value="{$vo.weight}" data-select="1" >{$vo.name}</button>
                {else/}
                    <button type="button" class="btn btn-default jar-default jar-weight" data-value="{$vo.weight}" data-select="0">{$vo.name}</button>
                {/if}
            </span>
            {/foreach}
        </div>
        <div class="color" id="color">

        </div>
        <div class="color" id="ink">

        </div>
        <div class="middle">
            <table id="mytable" border="1" cellspacing="0" style="text-align: center;width: 700px;margin-left: 100px;">
                <thead>
                    <th style="text-align: center;" class="color_bach">专色墨批次号</th>
                    <th style="text-align: center;">重量(KG)</th>
                    <th style="text-align: center;">机台号</th>
                </thead>
                <tbody id="data">

                </tbody>
            </table>
            <div style="width: 500px;margin-left: 470px;" class="button">
                <button class="btn btn-success btn-embossed back" style="margin:  20px 0 5px 90px;">一键退库</button>
                <button class="btn btn-danger shut" style="margin:  20px 0 5px 20px;">关闭页面</button>
            </div>
        </div>
    </div>

</form>
<!--<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>-->
<script src="__CDN__/assets/js/jquery.js"></script>
<script>
    window.onload = function () {
        $("#bach").focus();
    }
    $(this).keydown( function(e) {
        var key = window.event?e.keyCode:e.which;
        if(key.toString() == "13"){
            return false;
        }
    });
    $('#basic-addon3').click(function(){
        // $("#bach").val('');
    })
    $("#bach").bind('input propertychange', function() {
        var bach = $(this).val();
        if (bach.length == 7){
            $('#bach').attr('disabled',true);
            $('.color_bach').text('专色墨/原墨名称');
            $.ajax({
                type: "POST",
                url: "{:url('admin/collarUse/getColor')}",
                data: {order:bach},
                dataType: "json",
                success: function (data) {
                    if (data.status == 1){
                        var str = '<div class="form-group">';
                        $.each(data.data,function (k,v) {
                            str += '<span class="formula"><button type="button" class="btn btn-default warehousing" data-value="'+v.id+'">'+v.color+'</button></span>';
                        })
                        str += '</div>';
                        $('#color').append('');
                        $('#color').append(str);
                        $('#color').removeClass('color');
                        var html = '<div class="form-group"> ';
                        $.each(data.ink,function (key,value) {
                            html += '<span class="formula"><button type="button" class="btn btn-default warehousing" data-value="'+value.code+'">'+value.ink+'</button></span>';
                        })
                        html += '</div>';
                        $('#ink').append('');
                        $('#ink').append(html);
                        $('#ink').removeClass('color');
                        $('.warehousing').click(function () {
                            var cid = $(this).attr('data-value');
                            var color = $(this).text();
                            var html = '<tr>';
                            html += '<td data-value="'+cid+'">'+color+'</td>';
                            html += '<td ><input type="text" class="weight" style="border-radius:6px;text-align: center;"></td>';
                            html += '<td >'+data.machine_number+'</td>';
                            html +='</tr>'
                            $('#data').append(html);
                            $('.weight').focus();
                        })

                    }
                }
            })
        }else if (bach.length == 21){
            $('.color_bach').text('专色墨批次号');
            $.ajax({
                type: "POST",
                url: "{:url('admin/collarUse/getWeight')}",
                data: {bach:bach},
                dataType: "json",
                success: function (data) {
                    if (data.status == 1){
                        var html = '<tr>';
                        html += '<td >'+bach+'</td>';
                        html += '<td ><input type="text" class="weight" style="border-radius:6px;text-align: center;"></td>';
                        html += '<td >'+data.data+'</td>';
                        html +='</tr>'
                        $('#data').append(html);
                        $('#bach').val('');
                        $('.weight').focus();
                        $(".weight").bind('input propertychange', function() {
                            $("#bach").focus();
                        })
                    }
                }
            })
        }
    })
    $('.jar-default').click(function () {
        var data_select = $(this).attr('data-select');
        if (data_select == 0){
            $('.jar-default').attr('data-select',0);
            $(this).attr('data-select',1);
            $('.jar-default').removeClass('jar-weight-select');
            $('.jar-default').addClass('jar-weight');
            $(this).removeClass('jar-weight');
            $(this).addClass('jar-weight-select');
        }
    })
    $(document).on('change','.weight',function () {
        var jar_weight = $('.jar-weight-select').attr('data-value');
        var weight = $(this).val();
        weight = weight*1000 - jar_weight;
        weight = weight/1000;
        $(this).val(weight);
    })

    $('.shut').click(function () {
        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
        parent.location.reload();//刷新父页面，注意一定要在关闭当前iframe层之前执行刷新
        parent.layer.close(index); //再执行关闭
    })
    $(document).on('click','.back',function(){
        $('.back').attr('disabled','disabled');
        var message = confirm('是否确认退库?');
        if (message == false){
            return false;
        }
        var bach = $('#bach').val();
        if (bach.length == 7){
            var code = 1;
            var data = getData(code);
        }else{
            var code = 2;
            var data = getData(code);
        }
        console.log(data)
        send(bach,code,data);
    })
    function send(bach,code,data) {
        $.ajax({
            type: "POST",
            url: "{:url('admin/collarUse/back')}",
            data: {data:data,code:code,bach:bach},
            dataType: "json",
            success: function (data) {
                if (data.status == 1){
                    confirm('退库成功');
                    $('.shut').click();
                    small_v3_print(data.data);
                }else{
                    confirm('退库失败,请联系开发人员')
                }
            }
        })
    }
    function getData(code){
        // 遍历 tr
        var VoList = [];
        $('#mytable tbody tr').each(function(){
            var mailPost = {}
            if (code == 1){
                mailPost.cid =$(this).children("td:eq(0)").attr('data-value');
                mailPost.name =$(this).children("td:eq(0)").text();
            } else{
                mailPost.bach =$(this).children("td:eq(0)").text();
            }
            mailPost.weight=$(this).children("td:eq(1)").find("input").val();
            mailPost.machine =$(this).children("td:eq(2)").text();
            VoList.push(mailPost)
        });

        return VoList;
    }
</script>
<script language="javascript" src="__CDN__/assets/js/LodopFuncs.js"></script>
<script language="javascript" src="__CDN__/assets/js/template.js"></script>
<script language="javascript" type="text/javascript">
    var LODOP; //声明为全局变量
    function prn1_print(html,barcode) {
        CreateOneFormPage(html,barcode);
        console.log(html);
        LODOP.PRINT();
    };
    function prn1_preview(html,barcode) {
        LODOP.PREVIEW();
    };
    function CreateOneFormPage(html,barcode){
        LODOP.SET_LICENSES("","152A06E8F6CBD6AC1F213ABFCB0D8604","C94CEE276DB2187AE6B65D56B3FC2848","");
        LODOP=getLodop();
        LODOP.PRINT_INIT("专色墨库存二维码打码");
        //LODOP.SET_PRINT_STYLE("FontSize",8);
        LODOP.SET_PRINT_STYLE("Bold",0);
        LODOP.SET_PRINT_STYLEA(0,"FontName","黑体");
        //LODOP.ADD_PRINT_TEXT(30,40,350,45,"浙江美浓世纪集团有限公司");
        LODOP.ADD_PRINT_HTM(12,10,350,500,html);
        LODOP.SET_PRINT_STYLEA(1,"AngleOfPageInside",270);
        // LODOP.SET_PRINT_STYLEA(0,"QRCodeErrorLevel","L");
        // LODOP.ADD_PRINT_BARCODE(56,18,'180mm','30mm',"QRCode",barcode);
    };

    function small_v3_print(result) {
        var number = 0;
        for(i=0;i<result.length;i++){
            var html = template(document.getElementById('warehousing').innerHTML, {
                order_number:result[i].order_number,
                warehousing:result[i].back,
                weight:result[i].back_weight,
                machine_number:result[i].machine_number,
                product:result[i].product_name,
                color:result[i].color,
            });
            var barcode= '';

            if(false){
                //为测试服务器，预览
                prn1_preview(html,barcode);//预览
            }else if(window.location.host=="tool.7in6.com"){
                number = number + 1;
                //为正式服务器，打印
                prn1_print(html,barcode);//打印
            }else{
                number = number + 1;
                // prn1_preview(html,barcode);//预览
                prn1_print(html,barcode);
            }
        }

    };
</script>
<script id="warehousing" type="text/html">
    <style type="text/css">
        .tg  {width:320px;margin-top:20px;position: absolute;}
        .tg td{text-align:left;font-family:"方正俊黑简体_粗";font-size:12px;padding:5px 2px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:black;}
        .tg th{font-family:"方正俊黑简体_粗";font-size:12px;font-weight:normal;padding:5px 2px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:black;}
        .tg .tg-s6z2{ font-size:13px;width: 68%;}
        .tg .tg-s6z3{ font-size:13px;width: 50%;}
        .tg .tg-s6z1{ font-size:13px;}
        .tg .code{font-size:12px;}
        .tg .tg-031e{text-align:left;}
        .tg .tg-s6z2 img{}
        .tg .font_bold{ font-size: 75px; }
    </style>

    <table class="tg" cellpadding='0' cellspacing="0" width="100%" style="border:1px solid #000000;">
        <tr>
            <td class="tg-s6z3">产品名称:</td>
            <td class="tg-s6z2 " colspan="2" ><%=product%></td>
        </tr>
        <tr>
            <td class="tg-s6z3">专色墨名称:</td>
            <td class="tg-s6z2" colspan="2"><%=color%></td>
        </tr>
        <tr>
            <td class="tg-s6z3">专色墨批次号:</td>
            <td class="tg-s6z2" colspan="2"><%=warehousing%></td>
        </tr>
        <tr>
            <td class="tg-s6z3">重量:</td>
            <td class="tg-s6z2" colspan="2"><%=weight%>g</td>
        </tr>
        <tr>
            <td class="tg-s6z3">机台号:</td>
            <td class="tg-s6z2" colspan="2"><%=machine_number%>#</td>
        </tr>
    </table>
</script>