tool/application/admin/view/ink_book/detail.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" >工单号:</label>
        <div class="col-xs-12 col-sm-8">
            <input  class="form-control " id="order" type="text" value="{$result['order_number']}" disabled>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2" >产品名称:</label>
        <div class="col-xs-12 col-sm-8">
            <input  class="form-control " id="product" type="text" value="{$result['product_name']}" disabled>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2" >订单数量:</label>
        <div class="col-xs-12 col-sm-8">
            <input  class="form-control " id="number" type="text" value="{$result['number']}" disabled>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2" >配方选择:</label>
        <div class="col-xs-12 col-sm-8">
            <label><input type="radio" name="formula" value="{$result['formula']}" class="color" checked/>{$result['formula']}</label>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2" >本次配置大盒数量:</label>
        <div class="col-xs-12 col-sm-8">
            <input  class="form-control bigBox" id="bigBox" name="" type="text" value="{$result['big_number']}" data-rule="number" disabled>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2" >本次配置小盒数量:</label>
        <div class="col-xs-12 col-sm-8">
            <input  class="form-control smallBox" id="smallBox" name="" type="text" value="{$result['small_number']}" data-rule="number" disabled>
        </div>
    </div>
    <div style="display: none">
        <input type="text" id="id" value="{$result['id']}">
    </div>
    <div class="form-group" >
        <div id="formula" style="margin-left:30px;">

        </div>
    </div>
    <div class="form-group" >
        <div id="consume" style="margin-left:30px;">

        </div>
    </div>
    <div id="print" style="display: none;">
        <div id="print_area">
            <div id="print_base">
                <table border="1" cellspacing="0" style="text-align: center;width: 700px;">
                    <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: 3px;"></div>
                <div id="print_formula">

                </div>
                <div style="height: 3px;"></div>
                <div id="print_consume">

                </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="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>

<script>

    $(document).ready(function () {
        var id =  $('#id').val();
        $.ajax({
            type: "POST",
            url: "{:url('admin/inkBook/doDetail')}",
            data: {id: id},
            dataType: "json",
            success: function (data) {
                if (data.status == 1) {
                    var str = '<table  border="1" cellspacing="0" style="text-align: center;width: 700px;">';
                    str += '<tbody>';
                    $.each(data.data,function (key,value) {
                        str += '<tr>';
                        var rowspan = -1;
                        $.each(data.formulaSpanData,function (k,v) {
                            if (key == v.beginRow){
                                rowspan = v.rowSpan;
                            }
                        })
                        if (rowspan != -1){
                            str += '<td rowspan="'+rowspan+'" style="width: 100px;">'+value[0]+'</td>';
                            str += '<td style="width: 100px;">'+value[1]+'</td>';
                            str += '<td style="width: 60px;">'+value[2]+'</td>';
                            str += '<td style="width: 100px;"></td>';
                            str += '<td rowspan="'+rowspan+'" style="width: 100px;">'+value[4]+'</td>';
                            str += '<td style="width: 60px;">'+value[5]+'</td>';
                        }else {
                            str += '<td style="width: 100px;">'+value[0]+'</td>';
                            str += '<td style="width: 60px;">'+value[1]+'</td>';
                            str += '<td style="width: 100px;"></td>';
                            str += '<td style="width: 60px;">'+value[3]+'</td>';
                        }
                        str += '</tr>';
                    })
                    str += '</tbody>';
                    str += '</table>';
                    $('#formula').empty();
                    $('#formula').append(str);
                    $('#print_formula').empty();
                    $('#print_formula').append(str);
                    var html = '<table  border="1" cellspacing="0" style="text-align: center;width: 700px;">';
                    html += '<tbody class="consume">';
                    $.each(data.consume,function (item,val) {
                        html += '<tr>';
                        if (item == 0){
                            html += '<td rowspan="'+data.consumeSpan+'" style="width: 100px;">'+val[0]+'</td>';
                            html += '<td style="width: 100px;">'+val[1]+'</td>';
                            html += '<td style="width: 60px;">'+val[2]+'</td>';
                            html += '<td rowspan="'+data.consumeSpan+'" style="width: 100px;">'+val[3]+'</td>';
                            html += '<td style="width: 100px;">'+val[4]+'</td>';
                            html += '<td style="width: 60px;">'+val[5]+'</td>';
                        }else{
                            html += '<td style="width: 100px;">'+val[0]+'</td>';
                            html += '<td style="width: 60px;">'+val[1]+'</td>';
                            html += '<td style="width: 100px;">'+val[2]+'</td>';
                            html += '<td style="width: 60px;">'+val[3]+'</td>';
                        }
                        html += '</tr>';
                    })
                    html += '</tbody>';
                    html += '</table>';
                    $('#consume').empty();
                    $('#consume').append(html);
                    $('#print_consume').empty();
                    $('#print_consume').append(html);
                }
            }
        })
    })

</script>
<script type="text/javascript" src="__CDN__/assets/js/jQuery.print.js"></script>
<script type="text/javascript">

    jQuery(function($) { 'use strict';
        $(".print-link").on('click', function() {
            var order = $('#order').val();
            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;
            }
            $('#print_input_formula').html(formula);
            $('#print_input_order').html(order);
            $('#print_input_big').html(bigBoxNumber);
            $('#print_input_small').html(smallBoxNumber);
            console.log(1111)
            $.print("#print_area");
            return false;
        });

        // Fork https://github.com/sathvikp/jQuery.print for the full list of options
    });
</script>