minongyun.com/application/admin/view/formula/edit.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:22px;font-weight:bold;text-align:center;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">
        <span id="ids" data-value="{$ids}"></span>
        <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" value="{$row['name']}">
        </div>
        <label class="control-label col-xs-12 col-sm-1">编号:</label>
        <div class="col-xs-12 col-sm-3">
            <input id="c-formula_no" class="form-control" name="row[formula_no]" type="text" value="{$row['formula_no']}">
        </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" value="{$row['charge_name']}">
        </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" value="{$row['examine_name']}">
        </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-7">
            <input id="c-remark" class="form-control" name="row[remark]" type="text" value="{$row['remark']}">
        </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="{$row['version']}" 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="{$row['date']}">
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-1">可用性:</label>
        <div class="col-xs-12 col-sm-7">
            <input id="c-usability"  data-source="formula/getCustomer"
                   data-params='{"custom[type]":"bm","isTree":1}' data-multiple="true" data-field="customer_name"  class="form-control selectpage" name="usability"
                   type="text" value="{$row['usability']|htmlentities}" placeholder="请选择配方对应客户,不选默认全部客户可用">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-1">工艺信息:</label>
        <button type="button" id="add" class="btn btn-success">添加原材料</button>
    </div>
    <div class="form-group">
        <table class="table table-striped table-bordered table-hover table-nowrap" id="gy">
            <tr>
                <th class="col-xs-12 col-sm-1">原材料</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-1">操作</th>
            </tr>
            {foreach name='row["gyinfo"]' id='vo'}
            <tr>
                <td><input  class="form-control material" type="text" value="{$vo.material}"></td>
                <td><input  class="form-control percentage" type="text" value="{$vo.percentage}"></td>
                <td><input  class="form-control gy_name" type="text" value="{$vo.gy_name}"></td>
                <td><input  class="form-control gy_num" type="text" value="{$vo.gy_num}"></td>
                <td><button type="button"  class="btn btn-danger  del">删除</button></td>
            </tr>
            {/foreach}
        </table>
    </div>
    <div style="display: none">
        <div class="form-group" id="print_area" >
            <div id="head">
                <table class="tg"  style="width: 800px;">
                    <thead>
                    <tr>
                        <th class="tg-v8dz" colspan="6" style="border: none"><p id="no">MN/****</p>
                            <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"  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: 800px;" 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">保存</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-formula_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 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"></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;
        });
        function createQrcode(txt,width,height) {
            $("#qrcode").qrcode({
                render: "canvas",//canvas和table两种渲染方式
                width: width,
                height: height,
                correctLevel:2,//二维码纠错级别
                background:"#ffffff",//背景颜色
                foreground:"#000000", //二维码颜色
                text:txt
            });
        }
    });
</script>