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

<style>
    .machine{
        /*display: none;*/
    }
    .number{
        width: 80px;
        font-size: 32px;
        margin-left: 20px;
    }
    .color{
        margin-left: 20px;
        margin-top: 4px;
    }
    .color button{
        width: 150px;
        height: 60px;
        background-color: #FF6600;
        color: white;
        font-size: 18px;
    }
    .out{
        width: 150px;
        height: 60px;
        font-size: 20px;
    }
    .shut{
        width: 150px;
        height: 60px;
        font-size: 20px;
    }
    .checked{
        background-color: #1e9fff;
    }
    .jar{
        margin-left: 20px;
        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="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action=""  AUTOCOMPLETE="OFF">

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Order_number')}:</label>
        <div class="col-xs-12 col-sm-8" style="width: 15%;margin-top: 4px;">
            <input id="order_number" data-rule="required" class="form-control" value="{$params}" type="text" readonly >
        </div>
        <label class="control-label col-xs-12 col-sm-2">产品名称:</label>
        <div class="col-xs-12 col-sm-8" style="width: 20%;margin-top: 4px;">
            <input id="product_name" data-rule="required" class="form-control" value="{$product_name}" type="text" readonly >
        </div>
    </div>
    <div class="form-group machine" id="hidden">
        <label class="control-label col-xs-12 col-sm-2" style="margin-top: -6px;margin-left:10px;">
            <a  class="btn btn-danger" id="machine" style="font-size: large"  data-value="">
                请选择机台号:
            </a>
        </label>
        <button type="button" class="btn btn-default number" data-value="1">1</button>
        <button type="button" class="btn btn-default number" data-value="2">2</button>
        <button type="button" class="btn btn-default number" data-value="3">3</button>
        <button type="button" class="btn btn-default number" data-value="4">4</button>
        <button type="button" class="btn btn-default number" data-value="5">5</button>
        <button type="button" class="btn btn-default number" data-value="6">6</button>
        <button type="button" class="btn btn-default number" data-value="7">7</button>
        <button type="button" class="btn btn-default number" data-value="8">8</button>
        <button type="button" class="btn btn-default number" data-value="9">9</button>
        <button type="button" class="btn btn-default number" data-value="10">10</button>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2" >
            桶重量:
        </label>
        {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="form-group">
        <label class="control-label col-xs-12 col-sm-2" >
            专色墨:
        </label>
        {foreach name="colorResult" id="vo"}
            <span class="color"><button type="button" class="btn btn-default warehousing" data-value="{$vo.id}">{$vo.color}</button>
            </span>
        {/foreach}
    </div >
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">
            原墨:
        </label>
        {foreach name="inkData" id="vo"}
        <span class="color"><button type="button" class="btn btn-default ink" data-value="{$vo.code}">{$vo.ink}</button>
            </span>
        {/foreach}
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">
           去皮重量:
        </label>
        <input type="text" id="weight" style= "text-align: center" />&nbsp;&nbsp;KG
    </div>
    <div style="width: 500px;margin-left: 470px;">
        <button class="btn btn-success btn-embossed out" style="margin:  20px 0 5px 90px;">一键出库</button>
        <button class="btn btn-danger shut" style="margin:  20px 0 5px 20px;">关闭页面</button>
    </div>
    <div class="form-group">
        <table id="mytable" border="1" cellspacing="0" style="text-align: center;width: 700px;margin-left: 100px;">
            <thead>
                <tr>
                    <th style="text-align: center; width:200px;">专色墨名称</th>
                    <th style="text-align: center;">库存数量(KG)</th>
                    <th style="text-align: center;">领墨数量(KG)</th>
                </tr>
            </thead>
            <tbody>
            {foreach name="colorResult" id="vo" key="key"}
            <tr>
                <td style="height: 50px;width:200px;">{$vo.color}</td>
                <td>{$vo.weight}</td>
                <td><input type="text" class="input-{$vo.id} weight" name="weight" data-value="{$vo.id}" data-number="0" style= "background-color:transparent;border:0;text-align: center" readonly></td>
                <td style="display: none">{$vo.id}</td>
            </tr>
            {/foreach}
            </tbody>
        </table>
        <!--<div style="width: 500px;margin-left: 470px;">-->
            <!--<button class="btn btn-success btn-embossed out" style="margin:  20px 0 5px 90px;">一键出库</button>-->
            <!--<button class="btn btn-danger shut" style="margin:  20px 0 5px 20px;">关闭页面</button>-->
        <!--</div>-->
        <div style="height:1px;"></div>
        <table id="inktable" border="1" cellspacing="0" style="text-align: center;width: 700px;margin-left: 100px;">
            <thead>
            <tr>
                <th style="text-align: center;width:200px;">原墨名称</th>
                <th style="text-align: center;">库存数量(KG)</th>
                <th style="text-align: center;">领墨数量(KG)</th>
            </tr>
            </thead>
            <tbody>
            {foreach name="inkData" id="vo" key="key"}
            <tr>
                <td style="height: 50px;width:200px;">{$vo.ink}</td>
                <td></td>
                <td><input type="text" class="input-{$vo.code}" name="weight" data-value="{$vo.code}"  style= "background-color:transparent;border:0;text-align: center" readonly></td>
                <td style="display: none">{$vo.code}</td>
            </tr>
            {/foreach}
            </tbody>
        </table>
    </div>


</form>
<!--<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>-->
<script src="__CDN__/assets/js/jquery.js"></script>
<script>
    $(this).keydown( function(e) {
        var key = window.event?e.keyCode:e.which;
        if(key.toString() == "13"){
            return false;
        }
    });
    $('#machine').click(function () {
        $('#hidden').removeClass('machine');
    })

    $('.number').click(function () {
        $('.number').removeClass('checked');
        $(this).addClass('checked');
        var number = $(this).attr('data-value');
        var text = '已选择:  '+number+'#机';
        $('#machine').text(text)
        $('#machine').attr('data-value',number)

    })
    $('.warehousing').click(function () {
        $('.warehousing').css('background-color','#FF6600');
        $('.ink').css('background-color','#FF6600');
        $(this).css('background-color','#0e9aef');
        $('.warehousing').removeClass('selected');
        $('.ink').removeClass('selected');
        $(this).addClass('selected');
        $('#weight').val('');
        $('#weight').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');
        }
    })
    $('.ink').click(function () {
        $('.ink').css('background-color','#FF6600');
        $('.warehousing').css('background-color','#FF6600');
        $(this).css('background-color','#0e9aef');
        $('.ink').removeClass('selected');
        $('.warehousing').removeClass('selected');
        $(this).addClass('selected');
        $('#weight').val('');
        $('#weight').focus();
    })
    $('.shut').click(function () {
            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
            parent.location.reload();//刷新父页面，注意一定要在关闭当前iframe层之前执行刷新
            parent.layer.close(index); //再执行关闭
    })
    // $("#weight").bind('input propertychange', function() {
    //     var jar_weight = $('.jar-weight-select').attr('data-value');
    //     var weight = $(this).val();
    //     console.log(weight);
    //     weight = weight*1000 - jar_weight;
    //     weight = weight/1000;
    //     $(this).val(weight);
    //     var id = $('.selected').attr('data-value');
    //     console.log(weight);
    //     $('.input-'+id).val(weight);
    // })
    $(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);
        var id = $('.selected').attr('data-value');
        console.log('input-'+id);
        $('.input-'+id).val(weight);
    })

    $(document).on('click','.out',function(){

        var message = confirm('是否确认出库?');
        if (message == false){
            return false;
        }
        var machine_number = $('#machine').attr('data-value');
        if(machine_number == ''){
            confirm('请选择机台号');
            return false;
        }
        var order = $('#order_number').val();
        var data = getData();
        var inkdata = getInkData();
        if (data == '' && inkdata == ''){
            confirm('专墨原墨重量不能同时为空')
        }else{
            $.ajax({
                type: "POST",
                url: "{:url('admin/collarUse/out')}",
                data: {data:data,ink:inkdata},
                dataType: "json",
                success: function (data) {
                    if (data.status == 1){
                        getCollarData(order);
                        confirm(data.msg);
                        $('.shut').click();
                    }else{
                        confirm(data.msg)
                    }
                }
            })
        }
    })

    function getData(){
        // 遍历 tr
        var VoList = [];
        $('#mytable tbody tr').each(function(){
            var mailPost = {}
            var weight=$(this).children("td:eq(2)").find("input").val();
            if (weight != ''){
                mailPost.color =$(this).children("td:eq(0)").text();
                mailPost.weight=weight;
                mailPost.cid =$(this).children("td:eq(3)").text();
                mailPost.order_number = $('#order_number').val(); //工单编号
                mailPost.machine_number = $('#machine').attr('data-value');
                VoList.push(mailPost)
            }
        });
        return VoList;
    }
    function getInkData() {
        // 遍历 tr
        var VoList = [];
        $('#inktable tbody tr').each(function(){
            var mailPost = {}
            var weight=$(this).children("td:eq(2)").find("input").val();
            if (weight != ''){
                mailPost.ink =$(this).children("td:eq(0)").text();
                mailPost.weight=weight;
                mailPost.code =$(this).children("td:eq(3)").text();
                mailPost.order_number = $('#order_number').val(); //工单编号
                mailPost.machine_number = $('#machine').attr('data-value');
                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(48,13,'180mm','30mm',"QRCode",barcode);
    };

    function getCollarData(order) {
        $.ajax({
            type: "POST",
            url: "{:url('admin/collarUse/getOrder')}",
            data: {order_number:order},
            dataType: "json",
            success: function (data) {
                if (data.status == 1){
                    small_v3_print(data.data);
                }else{
                    confirm(data.msg)
                }
            }
        })

    }


    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].warehousing,
                weight:result[i].weight,
                machine_number:result[i].machine_number,
                // create:result[i].create,
                product:result[i].product_name,
                color:result[i].color,
            });
            var barcode= result[i].warehousing;

            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-s6z1" rowspan="5" colspan="2">

            </td>
            <td class="tg-s6z2 " colspan="2" ><%=product%></td>
        </tr>
        <tr>

            <td class="tg-s6z2" colspan="2"><%=color%></td>
        </tr>
        <tr>

            <td class="tg-s6z2" colspan="2"><%=warehousing%></td>
        </tr>
        <tr>

            <td class="tg-s6z2" colspan="2"><%=weight%>g</td>
        </tr>
        <tr>

            <td class="tg-s6z2" colspan="2"><%=machine_number%>#</td>
        </tr>
    </table>
</script>