tool/application/admin/view/order/addone.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>

            <label class="radio-inline">
                <input type="radio" name="box" id="small" value="2" checked>
                <label for="small">小盒</label>

            </label>
            <label class="radio-inline">
                <input type="radio" name="box" id="big" value="1">
                <label for="big">大盒</label>
            </label>
        </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" readonly>
        </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" readonly>
        </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="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>-->
<script src="__CDN__/assets/js/jquery.js"></script>
<script>
    var num = 1;
    //获取专色墨配方
    $('.color').click(function () {
        var formula =  $('input[name="formula"]:checked').val();
        var order = $('#order').val();
        $.ajax({
            type: "POST",
            url: "{:url('admin/Order/getFormula')}",
            data: {formula: formula,order:order},
            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: 120px;">'+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;"><p class="editWeight" contenteditable="true" style="width: 100px;" data-num="" data-value=""> '+value.number+'</p></td>';
                            str += '<td style="width: 80px;">'+value.total+'</td>';
                        }else {
                            str += '<td style="width: 120px;">'+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);

                    var htm = '<table id="print_table"  border="1" cellspacing="0" style="text-align: center;width: 550px;">';
                    htm += '<tbody>';
                    $.each(data.data,function (key,value) {
                        htm += '<tr>';
                        var rowspan = -1;
                        $.each(data.colorNumber,function (k,v) {
                            if (key == v.beginRow){
                                rowspan = v.rowSpan;
                            }
                        })
                        if (rowspan != -1){
                            htm += '<td rowspan="'+rowspan+'" style="width: 100px;">'+value.color+'</td>';
                            htm += '<td style="width: 120px;">'+value.ink+'</td>';
                            htm += '<td style="width: 60px;">'+value.ink_number+'</td>';
                            htm += '<td style="width: 100px;"></td>';
                            htm += '<td rowspan="'+rowspan+'" style="width: 100px;">'+value.number+'</td>';
                            htm += '<td style="width: 80px;">'+value.total+'</td>';
                        }else {
                            htm += '<td style="width: 120px;">'+value.ink+'</td>';
                            htm += '<td style="width: 60px;">'+value.ink_number+'</td>';
                            htm += '<td style="width: 100px;"></td>';
                            htm += '<td style="width: 80px;">'+value.total+'</td>';
                        }
                        htm += '</tr>';
                    })
                    htm += '</tbody>';
                    htm += '</table>';
                    $('#print_formula').empty();
                    $('#print_formula').append(htm);
                    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();
                        $('#print_consume').empty();
                        $('#consume').append(str);
                        $('#print_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);
        //             }
        //         }
        //     })
        // }

    }
    $(document).on('blur','.editWeight',function (){

        var formula = $("input[name='formula']:checked").val();
        var box = $("input[name='box']:checked").val();
        var color = $(this).parent().prev().prev().prev().prev().text();
        var weight = $(this).text();

        if (formula == '' || formula == 'undefined'){
            confirm('配方不能为空');return false;
        }
        if (box == '' || box == 'undefined'){
            confirm('请选择大小盒');return false;
        }
        if (color == '' || color == 'undefined'){
            confirm('未获取到配方颜色');return false;
        }
        //修改配方总数
        var rowspan = $(this).parent().prev().prev().prev().prev().attr('rowspan');
        //次数，第几次修改次重量
        var getNum = $(this).attr('data-num');
        //修改后的值是多少
        var getValue = $(this).attr('data-value');
        if (getNum == '' || getValue == ''){
            var code =  1;
        }else{
            var code = Number(getNum) + 1;
        }
        $(this).attr('data-num',code);
        $(this).attr('data-value',Number(weight));
        // console.log(code)

        for (var i=0;i<rowspan;i++){

            if (i == 0){
                var totalText = $(this).parent().next()[0];
                var total = $(this).parent().next().text();
                if (code > 1){
                    total = Math.trunc(total/getValue*5);
                }
                // console.log(totalText)
                totalText.innerText = Math.trunc(Number(weight)/5*total);
            }
            if (i == 1){
                var totalText = $(this).parent().parent().next().children().eq(3)[0];
                var total = $(this).parent().parent().next().children().eq(3).text();
                if (code > 1){
                    total = Math.trunc(total/getValue*5);
                }
                totalText.innerText = Math.trunc(Number(weight)/5*total);
            }
            if (i == 2){
                var totalText = $(this).parent().parent().next().next().children().eq(3)[0];
                var total = $(this).parent().parent().next().next().children().eq(3).text();
                if (code > 1){
                    total = Math.trunc(total/getValue*5);
                }
                totalText.innerText = Math.trunc(Number(weight)/5*total);
            }
            if (i == 3){
                var totalText = $(this).parent().parent().next().next().next().children().eq(3)[0];
                var total = $(this).parent().parent().next().next().next().children().eq(3).text();
                if (code > 1){
                    total = Math.trunc(total/getValue*5);
                }
                totalText.innerText = Math.trunc(Number(weight)/5*total);
            }
            if (i == 4){
                var totalText = $(this).parent().parent().next().next().next().next().children().eq(3)[0];
                var total = $(this).parent().parent().next().next().next().next().children().eq(3).text();
                if (code > 1){
                    total = Math.trunc(total/getValue*5);
                }
                totalText.innerText = Math.trunc(Number(weight)/5*total);
            }
            if (i == 5){
                var totalText = $(this).parent().parent().next().next().next().next().next().children().eq(3)[0];
                var total = $(this).parent().parent().next().next().next().next().next().children().eq(3).text();
                if (code > 1){
                    total = Math.trunc(total/getValue*5);
                }
                totalText.innerText = Math.trunc(Number(weight)/5*total);
            }

        }

        $('#print_table').find('tr').each(function (){
            var tdArr = $(this).children();
            // console.log(tdArr)
            //第一行第一列的专色墨
            var printColor = tdArr.eq(0).text();
           //改变打印的重量//如果点击专色墨和循环的专色墨相同,修改其油墨总数
            if (color == printColor){
                var text = $(this).children().eq(4)[0];
                //修改需要调配的专墨重量
                text.innerText = weight;
                var printRow =  tdArr.eq(0).attr('rowspan');
                // console.log(tdArr)
                for (var i=0;i<printRow;i++){
                    if (i == 0){
                        var totalTextPrint =$(this).children().eq(5)[0];
                        var totalPrint = $(this).children().eq(5).text();
                        if (code > 1){
                            totalPrint = Math.trunc(totalPrint/getValue*5);
                        }
                        totalTextPrint.innerText = Math.trunc(Number(weight)/5*totalPrint);
                    }
                    if (i == 1){
                        var totalTextPrint =$(this).next().children().eq(3)[0];
                        var totalPrint = $(this).next().children().eq(3).text();
                        if (code > 1){
                            totalPrint = Math.trunc(totalPrint/getValue*5);
                        }
                        totalTextPrint.innerText = Math.trunc(Number(weight)/5*totalPrint);
                    }
                    if (i == 2){
                        var totalTextPrint =$(this).next().next().children().eq(3)[0];
                        var totalPrint = $(this).next().next().children().eq(3).text();
                        if (code > 1){
                            totalPrint = Math.trunc(totalPrint/getValue*5);
                        }
                        totalTextPrint.innerText = Math.trunc(Number(weight)/5*totalPrint);
                    }
                    if (i == 3){
                        var totalTextPrint =$(this).next().next().next().children().eq(3)[0];
                        var totalPrint = $(this).next().next().next().children().eq(3).text();
                        if (code > 1){
                            totalPrint = Math.trunc(totalPrint/getValue*5);
                        }
                        totalTextPrint.innerText = Math.trunc(Number(weight)/5*totalPrint);
                    }
                    if (i == 4){
                        var totalTextPrint =$(this).next().next().next().next().children().eq(3)[0];
                        var totalPrint = $(this).next().next().next().next().children().eq(3).text();
                        if (code > 1){
                            totalPrint = Math.trunc(totalPrint/getValue*5);
                        }
                        totalTextPrint.innerText = Math.trunc(Number(weight)/5*totalPrint);
                    }
                    if (i == 5){
                        var totalTextPrint =$(this).next().next().next().next().next().children().eq(3)[0];
                        var totalPrint = $(this).next().next().next().next().next().children().eq(3).text();
                        if (code > 1){
                            totalPrint = Math.trunc(totalPrint/getValue*5);
                        }
                        totalTextPrint.innerText = Math.trunc(Number(weight)/5*totalPrint);
                    }
                }
            }

        })
        $.ajax({
            type: "POST",
            url: "{:url('admin/Order/sumPaper')}",
            data: {formula_name:formula,box:box,ink:color,weight:weight},
            dataType: "json",
            success: function (data) {
                if (data.status == 1){
                    if (box == 1){
                        $('#smallBox').val('');
                        $('#bigBox').val(data.data);
                        // getConsume(formula,0,1,1);
                    }else{
                        $('#bigBox').val('');
                        $('#smallBox').val(data.data);
                        // getConsume(formula,0,1,2);
                    }
                }else{
                    confirm(data.msg);
                }
            }
        })
    })
    // $('.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 >

    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>