minongyun.com/application/admin/view/formula/add.html

<style type="text/css">
    .tg  {border-collapse:collapse;border-spacing:0;}
    .tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
        overflow:hidden;padding:10px 5px;word-break:normal;}
    .tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
        font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}
    .tg .tg-ub5w{font-size:36px;text-align:center;vertical-align:middle}
    .tg .tg-x1hj{font-size:22px;text-align:left;vertical-align:top}
    .tg .tg-kghl{font-size:22px;text-align:left;vertical-align:middle}
    .tg .tg-z7m5{font-size:22px;text-align:left;text-decoration:underline;vertical-align:top}
    .tg .tg-s5vw{font-size:22px;font-weight:bold;text-align:center;vertical-align:bottom}
    .tg .tg-v8dz{font-size:24px;text-align:left;vertical-align:top}
    .tg .tg-svyg{font-size:22px;font-weight:bold;text-align:left;text-decoration:underline;vertical-align:bottom}
    .tg .tg-4qqe{font-size:18px;font-weight:bold;text-align:left;vertical-align:top}
    .tg .tg-9d8n{font-size:22px;text-align:left;vertical-align:top}
    .tg .tg-0pky{text-align:left;vertical-align:top;border: none;}
</style>
<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-1">{:__('Name')}:</label>
        <div class="col-xs-12 col-sm-3">
            <input id="c-name" data-rule="required" class="form-control" name="row[name]" type="text">
        </div>
        <label class="control-label col-xs-12 col-sm-1">编号:</label>
        <div class="col-xs-12 col-sm-3">
            <input id="c-no" class="form-control" name="row[no]" type="text">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-1">{:__('Charge_name')}:</label>
        <div class="col-xs-12 col-sm-3">
            <input id="c-charge_name" data-rule="required" class="form-control" name="row[charge_name]" type="text">
        </div>
        <label class="control-label col-xs-12 col-sm-1">{:__('Examine_name')}:</label>
        <div class="col-xs-12 col-sm-3">
            <input id="c-examine_name" data-rule="required" class="form-control" name="row[examine_name]" type="text">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-1">{:__('Remark')}:</label>
        <div class="col-xs-12 col-sm-3">
            <input id="c-remark" class="form-control" name="row[remark]" type="text">
        </div>
        <label class="control-label col-xs-12 col-sm-1">型号:</label>
        <div class="col-xs-12 col-sm-3">
            <input id="c-model" class="form-control" name="row[model]" type="text">
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-1">{:__('Version')}:</label>
        <div class="col-xs-12 col-sm-3">
            <input id="c-version" data-rule="required" class="form-control" name="row[version]" type="text" value="v1.0" readonly>
        </div>
        <label class="control-label col-xs-12 col-sm-1">{:__('Date')}:</label>
        <div class="col-xs-12 col-sm-3">
            <input id="c-date" class="form-control datetimepicker" name="row[date]" type="text" data-date-format="YYYY-MM-DD" data-use-current="true" value="{:date('Y-m-d')}">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-1">可用性:</label>
        <div class="col-xs-12 col-sm-3">
          <input id="c-usability" class="form-control selectpage"  data-multiple="true"  data-source="formula/getCustomer" data-field="customer_name" name="row[usability]" type="text" value="" placeholder="请选择配方对应客户,不选默认全部客户可用">
        </div>
        <label class="control-label col-xs-12 col-sm-1"></label>
        <div class="col-xs-12 col-sm-3">
            <label><input name="controlled" type="checkbox" value="voc标准" id="controlled_one">voc标准</label>
            <label><input name="controlled" type="checkbox" value="受控" checked  id="controlled_two">受控</label>
            <label><input name="controlled" type="checkbox" value="ROHS" checked id="controlled_thr">ROHS</label>
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-1">工艺信息:</label>
        <div id="nav" class="col-xs-12 col-sm-3">
            <input id="add_material" class="form-control"  type="text" value="" placeholder="请输入原材料">
        </div>
        <div class="col-xs-12 col-sm-3">
            <input id="add_percentage" class="form-control"  type="text" value="" placeholder="请输入百分比(%)">
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-1"></label>
        <div class="col-xs-12 col-sm-6">
            <input type="text" id="add_gy_name" placeholder="请输入操作工艺说明" data-source="formula/gyName" data-field="gy_name" data-pagination="true" data-page-size="10"  name="row[gy_name]" class="form-control selectpage" >
        </div>
        <button type="button" id="add" class="btn btn-success">添加原材料</button>
        <div id="show">
            <div></div>
        </div>
    </div>
    <div class="form-group">
        <table class="table table-striped table-bordered table-hover table-nowrap" id="gy" style="table-layout:fixed;">
            <tr>
                <th class="col-xs-12 col-sm-2">原材料</th>
                <th class="col-xs-12 col-sm-1">百分比(%)</th>
                <th class="col-xs-12 col-sm-8">操作工艺说明</th>
                <th class="col-xs-12 col-sm-1">工序号(必填)</th>
                <th class="col-xs-12 col-sm-2">操作</th>
            </tr>
        </table>
    </div>

    <div style="display: none">
        <div class="form-group" id="print_area" >

            <div id="head">
                <table class="tg"  style="width: 850px;">
                    <thead>
                    <tr>
                        <th class="tg-v8dz" colspan="6" style="border: none">
                            <hr style="border: 1px solid;margin-top: -5px"></th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td class="tg-s5vw"  style="border: none"></td>
                        <td class="tg-svyg"  style="border: none"></td>
                        <td class="tg-ub5w" colspan="2" rowspan="2"  style="border: none">配方单</td>
                        <td class="tg-4qqe" colspan="3" style="border: none;" id="str">

                           </td>
<!--                        <td class="tg-4qqe"  style="border: none"></td>-->
<!--                        <td class="tg-s5vw"  style="border: none"></td>-->
                    </tr>
                    <tr>
                        <td class="tg-9d8n"  style="border: none">日期：</td>
                        <td class="tg-z7m5" id="date" style="border: none"></td>
                        <td class="tg-9d8n">担当人</td>
                        <td class="tg-9d8n">审核人</td>
                    </tr>
                    <tr>
                        <td class="tg-x1hj"  style="border: none">编号：</td>
                        <td class="tg-z7m5" id="formula_no" style="border: none"></td>
                        <td class="tg-kghl"  style="border: none"><input id="formula" value="" style="width: 400px;text-align: center"></td>
                        <td class="tg-0pky" style="border: none" ></td>
                        <td class="tg-x1hj" id="charge_name"></td>
                        <td class="tg-x1hj" id="examine_name"></td>
                    </tr>

                    </tbody>
                </table>

            </div>

            <div style="height: 20px;"></div>
            <div id="body">
                <table class="tg" style="width: 850px;" id="print_gy">


                </table>
            </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">
            <button type="submit" class="btn btn-primary btn-embossed disabled submit">{:__('OK')}</button>
            <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
            <button type="button" class="btn btn-default btn-embossed  print-link">打印预览</button>
        </div>
    </div>
</form>
<script type='text/javascript' src='__CDN__/assets/js/jquery2.1.1.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';

        $(".print-link").on('click', function() {
            //给打印界面赋值
            var remark = $('#c-remark').val();
            remark = '备注：'+remark;
            $('.remark').text(remark);
            //给打印表头赋值
            var formula = $('#c-name').val();
            $('#formula').val(formula);
            var formula_no = $('#c-no').val();
            $('#formula_no').text(formula_no);
            var charge_name = $('#c-charge_name').val();
            $('#charge_name').text(charge_name);
            var examine_name = $('#c-examine_name').val();
            $('#examine_name').text(examine_name);
            var date = $('#c-date').val();
            $('#date').text(date);
            var str = '';
            if ($('#controlled_one').prop("checked") == true){
                var print_controlled_one = $('#controlled_one').val();
                str += '<span style="border:2px solid;" id="print_controlled_one">'+print_controlled_one+'</span>';
            }
            if ($('#controlled_two').prop("checked") == true){
                var print_controlled_two = $('#controlled_two').val();
                str += ' <span  style="border:2px solid;" id="print_controlled_two">'+print_controlled_two+'</span>&nbsp;';
            }
            if ($('#controlled_thr').prop("checked") == true){
                var print_controlled_thr = $('#controlled_thr').val();
                str += '<span style="border:2px solid;" id="print_controlled_thr">'+print_controlled_thr+'</span>';
            }
            $('#str').html(str);
            var html = '';
            html += '<tr><td style="width: 100px;text-align: center">原材料</td><td  style="width: 100px;text-align: center">百分比</td><td style="width: 400px;text-align: center">操作工艺说明</td></tr>';
            var sum = 0;
            var formulaTrList = $("#gy").find("tr");//行数
            for (var i = 1; i < formulaTrList.length; i++) {
                var formulaTrArr=formulaTrList.eq(i);
                var tdOne = formulaTrArr.children("td").eq(0).find("input").val();
                var tdTwo = formulaTrArr.children("td").eq(1).find("input").val();
                var tdThr = formulaTrArr.children("td").eq(2).find("input").val();
                html += '<tr ><td style="width: 100px;text-align: center">'+tdOne+'</td>';
                html += '<td style="width: 50px;text-align: center">'+tdTwo+'</td>';
                html += '<td style="width: 400px;">'+tdThr+'</td>';
                sum = sum + tdTwo * 1000;
            }
            sum = sum / 1000;
            html += '<tr><td style="width: 100px;text-align: center">总计</td><td class="total" style="width: 100px;text-align: center">'+sum+'</td><td class="remark">'+remark+'</td></tr>';

            $('#print_gy').html(html)
            // createQrcode(bach,80,80);
            // var img = document.getElementById("myImage"); /// get image element
            // var canvas = document.getElementsByTagName('canvas')[0];
            // img.src = canvas.toDataURL();                     /// update image
            $.print('#print_area');
            return false;
        });
    });
</script>