tool/application/admin/view/order/add.html

<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2" style="width:8%;!important;">工单号:</label>
        <div class="col-xs-12 col-sm-8" style="width:22.23%;!important;">
            <input  class="form-control " id="order" type="text" value="{$result['gd_gdbh']}" disabled>
        </div>
        <label class="control-label col-xs-12 col-sm-2" style="width:9%;!important;">产品名称:</label>
        <div class="col-xs-12 col-sm-8" style="width:22.23%;!important;">
            <input  class="form-control " id="product" type="text" value="{$result['成品名称']}" disabled>
        </div>
        <label class="control-label col-xs-12 col-sm-2" style="width:12%;!important;">订单数量(万张):</label>
        <div class="col-xs-12 col-sm-8" style="width:22.23%;!important;">
            <input  class="form-control " id="number" type="text" value="{$result['订单数量']}" disabled>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2" style="width:9.5%;!important;">配方选择:</label>
        <div class="col-xs-12 col-sm-8" style="width:22.23%;!important;">
            {foreach name="formulaData" item="vo"}
                <label style="margin-top: 2px;"><input type="radio" name="formula" value="{$vo}" class="color"/>{$vo}</label>
            {/foreach}
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2" style="width:15%;!important;">本次配置大盒数量:</label>
        <div class="col-xs-12 col-sm-8" style="width:20%;!important;">
            <input  class="form-control bigBox" id="bigBox" name="" type="text" value="" data-rule="number">
        </div>
        <label class="control-label col-xs-12 col-sm-2" style="width:15%;!important;">本次配置小盒数量:</label>
        <div class="col-xs-12 col-sm-8" style="width:20%;!important;">
            <input  class="form-control smallBox" id="smallBox" name="" type="text" value="" data-rule="number">
        </div>
    </div>
    <div class="form-group" >
        <div class="control-label col-xs-12 col-sm-2" style="width:50%;!important;">
            <div id="formula" style="margin-left:15px;">

            </div>
        </div>
       <div class="control-label col-xs-12 col-sm-2" style="width:50%;!important;">
           <div id="consume" >

           </div>
       </div>

    </div>

    <div id="print" style="display: none;">
        <div id="print_area">
            <div id="qrcode" style="margin-left: 80px;">
                <img src="" id="myImage" alt=""/>
            </div>
            <div id="time" style="margin-left: 450px;margin-top: -25px;"></div>
            <div style="height: 2px;"></div>

            <div id="print_base">
                <table border="1" cellspacing="0" style="text-align: center;width: 550px;margin-left: 80px;">
                    <tr>
                        <td colspan="7" id="print_input_formula"></td>
                    </tr>
                    <tr>
                        <td style="width: 135px;">生产批次号</td>
                        <td colspan="2" id="print_input_order" style="width: 100px;"></td>
                        <td style="width: 100px;">数量</td>
                        <td id="print_input_big" style="width: 100px;"></td>
                        <td id="print_input_small" style="width: 100px;"></td>
                    </tr>
                </table>
                <div style="height: 1px;"></div>
                <div id="print_formula" style="margin-left: 80px;">

                </div>
                <div style="height: 1px;"></div>
                <div id="print_consume" style="margin-left: 80px;">

                </div>
            </div>
        </div>

    </div>
    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8" style="margin-left:100px;">
            <button  class="btn btn-default btn-embossed print-link">打印</button>
            <button  class="btn btn-success btn-embossed print">保存</button>
        </div>
    </div>
</form>
<script src="__CDN__/assets/js/jquery3.4.1.js"></script>

<script>
    //获取专色墨配方
    $('.color').click(function () {
        var formula =  $('input[name="formula"]:checked').val();
        $.ajax({
            type: "POST",
            url: "{:url('admin/Order/getFormula')}",
            data: {formula: formula},
            dataType: "json",
            success: function (data) {
                if (data.status == 1) {
                    var str = '<table  border="1" cellspacing="0" style="text-align: center;width: 550px;">';
                    str += '<tbody>';
                    $.each(data.data,function (key,value) {
                        str += '<tr>';
                        var rowspan = -1;
                        $.each(data.colorNumber,function (k,v) {
                            if (key == v.beginRow){
                                rowspan = v.rowSpan;
                            }
                        })
                        if (rowspan != -1){
                            str += '<td rowspan="'+rowspan+'" style="width: 100px;">'+value.color+'</td>';
                            str += '<td style="width: 100px;">'+value.ink+'</td>';
                            str += '<td style="width: 60px;">'+value.ink_number+'</td>';
                            str += '<td style="width: 100px;"></td>';
                            str += '<td rowspan="'+rowspan+'" style="width: 100px;">'+value.number+'</td>';
                            str += '<td style="width: 80px;">'+value.total+'</td>';
                        }else {
                            str += '<td style="width: 100px;">'+value.ink+'</td>';
                            str += '<td style="width: 60px;">'+value.ink_number+'</td>';
                            str += '<td style="width: 100px;"></td>';
                            str += '<td style="width: 80px;">'+value.total+'</td>';
                        }
                        str += '</tr>';
                    })
                    str += '</tbody>';
                    str += '</table>';
                    $('#formula').empty();
                    $('#formula').append(str);
                    getConsume(formula,0,0,0);
                }else {
                    alert(data.msg)
                }
            }
        })
    })
    //获取大小盒计划消耗，formula->配方名称,number->数量（万张），boxModel->盒型（1.大盒,2.小盒）
    function getConsume(formula,bigNumber,smallNumber,boxModel){
        if (bigNumber == 0  && smallNumber == 0){
            $.ajax({
                type: "POST",
                url: "{:url('admin/Order/getConsume')}",
                data: {formula: formula,bigNumber:bigNumber,smallNumber:smallNumber,boxModel:boxModel},
                dataType: "json",
                success: function (data) {
                    if (data.status == 1) {
                        var str = '<table  border="1" cellspacing="0" style="text-align: center;width: 550px;">';
                        str += '<tbody class="consume">';
                        $.each(data.data,function (key,value) {
                            str += '<tr>';
                            if (key == 0){
                                str += '<td rowspan="'+data.rowSpan+'" style="width: 100px;">大盒计划消耗</td>';
                                str += '<td style="width: 100px;">'+value.big_ink+'</td>';
                                str += '<td style="width: 60px;">'+value.big_num+'</td>';
                                str += '<td rowspan="'+data.rowSpan+'" style="width: 100px;">小盒计划消耗</td>';
                                str += '<td style="width: 100px;">'+value.small_ink+'</td>';
                                str += '<td style="width: 60px;">'+value.small_num+'</td>';
                            }else{
                                str += '<td style="width: 100px;">'+value.big_ink+'</td>';
                                str += '<td style="width: 60px;">'+value.big_num+'</td>';
                                str += '<td style="width: 100px;">'+value.small_ink+'</td>';
                                str += '<td style="width: 60px;">'+value.small_num+'</td>';
                            }
                            str += '</tr>';
                        })
                        str += '</tbody>';
                        str += '</table>';
                        $('#consume').empty();
                        $('#consume').append(str);
                    }
                }
            })
        }else{
            $.ajax({
                type: "POST",
                url: "{:url('admin/Order/getConsume')}",
                data: {formula: formula,bigNumber:bigNumber,smallNumber:smallNumber,boxModel:boxModel},
                dataType: "json",
                success: function (data) {
                    if (data.status == 1) {
                        var str = '<table  border="1" cellspacing="0" style="text-align: center;width: 550px;">';
                        str += '<tbody class="consume">';
                        $.each(data.data,function (key,value) {
                            str += '<tr>';
                            if (key == 0){
                                str += '<td rowspan="'+data.rowSpan+'" style="width: 100px;">大盒计划消耗</td>';
                                str += '<td style="width: 60px;">'+value.big_ink+'</td>';
                                str += '<td style="width: 60px;">'+value.big_num+'</td>';
                                str += '<td rowspan="'+data.rowSpan+'" style="width: 100px;">小盒计划消耗</td>';
                                str += '<td style="width: 60px;">'+value.small_ink+'</td>';
                                str += '<td style="width: 60px;">'+value.small_num+'</td>';
                            }else{
                                str += '<td style="width: 60px;">'+value.big_ink+'</td>';
                                str += '<td style="width: 60px;">'+value.big_num+'</td>';
                                str += '<td style="width: 60px;">'+value.small_ink+'</td>';
                                str += '<td style="width: 60px;">'+value.small_num+'</td>';
                            }
                            str += '</tr>';
                        })
                        str += '</tbody>';
                        str += '</table>';
                        $('#consume').empty();
                        $('#consume').append(str);
                        $('#print_consume').empty();
                        $('#print_consume').append(str);
                        var html = '<table  border="1" cellspacing="0" style="text-align: center;width: 550px;">';
                        html += '<tbody>';
                        $.each(data.formulaData,function (k1,val) {
                            html += '<tr>';
                            var rowspan = -1;
                            $.each(data.colorNumber,function (k,v) {
                                if (k1 == v.beginRow){
                                    rowspan = v.rowSpan;
                                }
                            })
                            if (rowspan != -1){
                                html += '<td rowspan="'+rowspan+'" style="width: 100px;">'+val.color+'</td>';
                                html += '<td style="width: 100px;">'+val.ink+'</td>';
                                html += '<td style="width: 60px;">'+val.ink_number+'</td>';
                                html += '<td style="width: 50px;"></td>';
                                html += '<td rowspan="'+rowspan+'" style="width: 50px;">'+val.number+'</td>';
                                html += '<td style="width: 60px;">'+val.total+'</td>';
                            }else {
                                html += '<td style="width: 100px;">'+val.ink+'</td>';
                                html += '<td style="width: 60px;">'+val.ink_number+'</td>';
                                html += '<td style="width: 50px;"></td>';
                                html += '<td style="width: 60px;">'+val.total+'</td>';
                            }
                            html += '</tr>';
                        })
                        html += '</tbody>';
                        html += '</table>';
                        $('#formula').empty();
                        $('#formula').append(html);
                        $('#print_formula').empty();
                        $('#print_formula').append(html);
                    }
                }
            })
        }

    }
    $('.bigBox').blur(function () {
        var bigNumber = $(this).val();
        var formula =  $('input[name="formula"]:checked').val();
        var smallNumber = $('.smallBox').val();
        console.log(smallNumber)
        if (formula != '') {
            if (smallNumber == ''){
                getConsume(formula,bigNumber,0,1);
            }else{
                getConsume(formula,bigNumber,smallNumber,0);
            }
        }

    })
    $('.smallBox').blur(function () {
        var smallNumber = $(this).val();
        // var formula = $(".color").val();
        var formula =  $('input[name="formula"]:checked').val();
        var bigNumber = $('.bigBox').val();
        console.log(bigNumber)
        if (formula != '') {
            if (bigNumber == ''){
                getConsume(formula,0,smallNumber,2);
            }else {
                getConsume(formula,bigNumber,smallNumber,0);
            }
        }
    })

</script>
<!--<script type='text/javascript' src='http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js'></script>-->
<script type='text/javascript' src='__CDN__/assets/js/jquery2.1.1.min.js'></script>
<!--<script type="text/javascript" src="http://cdn.staticfile.org/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>-->
<script type="text/javascript" src="__CDN__/assets/js/jquery.qrcode.min.js"></script>
<script type="text/javascript" src="__CDN__/assets/js/jQuery.print.js"></script>
<script type="text/javascript" src="__CDN__/assets/js/jQuery.print.js"></script>
<script >

    jQuery(function($) { 'use strict';
        var order = $('#order').val();
        $.ajax({
            type: "POST",
            url: "{:url('admin/Order/getBach')}",
            data: {order: order},
            dataType: "json",
            success: function (data) {
                if(data.status == 1){
                    createQrcode(data.bach,100,100);
                }
            }
        })
        $(".print-link").on('click', function() {
            var formula =  $('input[name="formula"]:checked').val();
            var bigBoxNumber = $('#bigBox').val();
            var smallBoxNumber = $('#smallBox').val();
            if (order == '' || formula == ''){
                return false;
            }
            if (bigBoxNumber == '' && smallBoxNumber == ''){
                return false;
            }
            var mydate = new Date();
            var year = mydate.getFullYear();
            var mouth = mydate.getMonth() + 1;
            if (parseInt(mouth)<10){
                mouth = '0'+mouth;
            }
            var date = mydate.getDate();
            if (parseInt(date)<10){
                date = '0'+date;
            }
            var hours = mydate.getHours();
            if (parseInt(hours)<10){
                hours = '0'+hours;
            }
            var minutes = mydate.getMinutes();
            if (parseInt(minutes)<10){
                minutes = '0'+minutes;
            }
            var seconds = mydate.getSeconds();
            if (parseInt(seconds)<10){
                seconds = '0'+seconds;
            }
            var now_time = year+'-'+mouth+'-'+date+' '+hours+':'+minutes+':'+seconds;
            var img = document.getElementById("myImage"); /// get image element
            var canvas = document.getElementsByTagName('canvas')[0];
            img.src = canvas.toDataURL();                     /// update image
            $('#time').html(now_time);
            $('#print_input_formula').html(formula);
            $('#print_input_order').html(order);
            $('#print_input_big').html(bigBoxNumber);
            $('#print_input_small').html(smallBoxNumber);
            $.print("#print_area");
            return false;
        });
        function createQrcode(txt,width,height) {
            $("#qrcode").qrcode({
                render: "canvas",//canvas和table两种渲染方式
                width: width,
                height: height,
                correctLevel:2,//二维码纠错级别
                background:"#ffffff",//背景颜色
                foreground:"#000000", //二维码颜色
                text:txt
            });
        }
    });
</script>