| <!DOCTYPE html> | 
| <html lang="en"> | 
| <head> | 
|     <meta charset="utf-8"> | 
|     <title></title> | 
|     <meta name="renderer" content="webkit"> | 
|     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | 
|     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> | 
|     <link rel="stylesheet" href="../../static/layui/css/layui.css" media="all"> | 
|     <link rel="stylesheet" href="../../static/css/cool.css" media="all"> | 
|     <link rel="stylesheet" href="../../static/css/common.css" media="all"> | 
|     <link rel="stylesheet" href="../../static/css/tree.css" media="all"> | 
|     <style> | 
|         body { | 
|             color: #595959; | 
|             background-color: #f5f7f9; | 
|         } | 
|         .layui-fluid { | 
|             padding: 15px; | 
|         } | 
|         .layui-form.layui-border-box.layui-table-view { | 
|             /*margin: 15px 0 35px 0;*/ | 
|             width: 100%; | 
|             border-width: 1px; | 
|         } | 
|         .layui-form.layui-border-box.layui-table-view { | 
|             height: calc(100vh - 160px); | 
|         } | 
|         .layui-form.layui-border-box.layui-table-view { | 
|             margin: 0; | 
|         } | 
|         #search-box { | 
|             padding: 30px 30px 10px 0px; | 
|             margin-left: 0px; | 
|         } | 
|         .layui-form.layui-border-box.layui-table-view { | 
|             height: 100%; | 
|         } | 
|   | 
|   | 
|         /* ------------------------- 打印表格 -----------------------  */ | 
|         .layui-btn-danger { | 
|             background-color: #eeda7c; | 
|             color: #24292e; | 
|         } | 
|   | 
|   | 
|         .template-preview { | 
|             height: 200px; | 
|             display: inline-block; | 
|         } | 
|         .contain { | 
|         } | 
|         .contain td { | 
|             border: 1px solid #000; | 
|             /*line-height: 46px;*/ | 
|         } | 
|     </style> | 
| </head> | 
| <body> | 
|   | 
| <div class="layui-fluid" style="padding-bottom: 0;margin-bottom: 30px"> | 
|     <!-- 左 --> | 
|     <div class="layui-row layui-col-space15"> | 
|         <div class="layui-col-md3"> | 
|             <div class="layui-card"> | 
|                 <div class="layui-card-body" style="padding: 10px;"> | 
|                     <!-- 树工具栏 --> | 
|                     <div class="layui-form toolbar" id="organizationTreeBar"> | 
|                         <div class="layui-inline" style="max-width: 200px;"> | 
|                             <input id="condition" onkeyup="findData(this)" type="text" class="layui-input" placeholder="请输入关键字" autocomplete="off"> | 
|                         </div> | 
|                         <div class="layui-inline"> | 
|                             <button class="layui-btn icon-btn" id="treeReset"> | 
|                                 <i class="layui-icon layui-icon-close"></i> | 
|                             </button> | 
|                         </div> | 
|                     </div> | 
|                     <!-- 树 --> | 
|                     <div class="layui-form toolbar" id="organizationTree"></div> | 
|                 </div> | 
|             </div> | 
|         </div> | 
|         <!-- 右 --> | 
|         <div class="layui-col-md9"> | 
|             <div class="layui-card"> | 
|                 <div class="layui-card-body" style="padding: 10px;"> | 
|                     <!-- 表格工具栏2 --> | 
|                     <div id="search-box" class="layui-form toolbar"  style="padding-top: 5px"> | 
|                         <div class="layui-inline"> | 
|                             <label class="layui-form-label" style="padding: 8px 15px 8px 15px">商品编号:</label> | 
|                             <div class="layui-input-inline"> | 
|                                 <input name="matnr" class="layui-input" placeholder="输入商品编号"/> | 
|                             </div> | 
|                         </div> | 
|                         <div class="layui-inline"> | 
|                             <label class="layui-form-label" style="padding: 8px 15px 8px 15px">商品名称:</label> | 
|                             <div class="layui-input-inline"> | 
|                                 <input name="maktx" class="layui-input" placeholder="输入商品名称"/> | 
|                             </div> | 
|                         </div> | 
|                         <div class="layui-inline">  | 
|                             <button class="layui-btn icon-btn" lay-filter="search" lay-submit> | 
|                                 <i class="layui-icon"></i>搜索 | 
|                             </button> | 
|                         </div> | 
|                     </div> | 
|                     <table class="layui-hide" id="mat" lay-filter="mat"></table> | 
|                 </div> | 
|             </div> | 
|         </div> | 
|     </div> | 
| </div> | 
|   | 
| <script type="text/html" id="tagTpl"> | 
|     <span name="tagId" class="layui-badge layui-badge-gray">{{d.tagId$}}</span> | 
| </script> | 
|   | 
| <script type="text/html" id="toolbar"> | 
|     <div class="layui-btn-container"> | 
|         <button class="layui-btn layui-btn-sm" id="btn-print-batch" lay-event="btnPrintBatch">批量打印</button> | 
|         <button class="layui-btn layui-btn-sm" id="btn-add" lay-event="addData">新增</button> | 
|         <button class="layui-btn layui-btn-sm" id="btn-delete" lay-event="deleteData">删除</button> | 
|         <button class="layui-btn layui-btn-primary layui-btn-sm" id="btn-export" lay-event="exportData">导出</button> | 
|     </div> | 
| </script> | 
|   | 
| <script type="text/html" id="operate"> | 
|     <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">详情</a> | 
| <!--    <a class="layui-btn layui-btn-xs btn-edit" lay-event="edit">编辑</a>--> | 
|     <button class="layui-btn layui-btn-xs btn-print" lay-event="btnPrint">打印</button> | 
| </script> | 
|   | 
| <script type="text/javascript" src="../../static/js/jquery/jquery-3.3.1.min.js"></script> | 
| <script type="text/javascript" src="../../static/layui/layui.js" charset="utf-8"></script> | 
| <script type="text/javascript" src="../../static/js/jquery/jQuery.print.js"></script> | 
| <script type="text/javascript" src="../../static/js/handlebars/handlebars-v4.5.3.js"></script> | 
| <script type="text/javascript" src="../../static/js/common.js" charset="utf-8"></script> | 
| <script type="text/javascript" src="../../static/js/cool.js" charset="utf-8"></script> | 
| <script type="text/javascript" src="../../static/js/mat/mat.js" charset="utf-8"></script> | 
| <script type="text/javascript" src="../../static/js/tagTree.js" charset="utf-8"></script> | 
|   | 
| <iframe id="detail-iframe" scrolling="auto" style="display:none;"></iframe> | 
|   | 
| <!-- 打印操作弹窗 --> | 
| <div id="printDataDiv" style="display: none;padding: 20px"> | 
|     <div class="layui-form" style="text-align: center"> | 
|         <hr> | 
|         <!--单选框--> | 
|         <div class="layui-form-item" style="display: inline-block; margin-bottom: 10px"> | 
|             <input type="radio" name="selectTemplate" value="1" title="模板一"  lay-filter="selectTemplateRadio" checked=""> | 
|             <input type="radio" name="selectTemplate" value="2" title="模板二" lay-filter="selectTemplateRadio"> | 
|             <input type="radio" name="selectTemplate" value="3" title="模板三" lay-filter="selectTemplateRadio"> | 
|         </div> | 
|         <fieldset class="layui-elem-field site-demo-button" style="margin-top: 30px;text-align: left;"> | 
|             <legend>打印预览</legend> | 
|             <div id="template-container" style="margin: 20px;text-align: center"> | 
|   | 
|                 <!-- 预览图 1 --> | 
|                 <div id="template-preview-1" class="template-preview" style="display: inline-block"> | 
|                     <table class="contain" width="280" style="overflow: hidden;font-size: xx-small;table-layout: fixed;"> | 
|                         <tr style="height: 74px"> | 
|                             <td colspan="3" align="center" scope="col">物料编码</td> | 
|                             <td class="barcode" colspan="9" align="center" scope="col"> | 
|                                 <img class="template-code template-barcode" src="" width="90%;"> | 
|                                 <div style="letter-spacing: 2px;margin-top: 1px; text-align: center;"> | 
|                                     <span>xxxxxx</span> | 
|                                 </div> | 
|                             </td> | 
|                         </tr> | 
|                         <tr style="height: 74px"> | 
|                             <td align="center" colspan="3">物料名称</td> | 
|                             <td align="center" colspan="5">xxxxxx-xx/xx</td> | 
|                             <td align="center" colspan="2">单位</td> | 
|                             <td align="center" colspan="2">xx</td> | 
|                         </tr> | 
|                     </table> | 
|                 </div> | 
|   | 
|                 <!-- 预览图 2 --> | 
|                 <div id="template-preview-2" class="template-preview" style="display: none"> | 
|                     <table class="contain" width="280" style="overflow: hidden;font-size: xx-small;table-layout: fixed;"> | 
|                         <tr style="height: 30px"> | 
|                             <td align="center" width="20%">物料名称</td> | 
|                             <td align="center" width="80%" style="overflow:hidden; white-space:nowrap; text-overflow:ellipsis;">xxxxxxx</td> | 
|                         </tr> | 
|                         <tr style="height: 30px"> | 
|                             <td align="center" width="20%">物料单位</td> | 
|                             <td align="center" width="80%">xxxxxxxx</td> | 
|                         </tr> | 
|                         <tr style="height: 75px;"> | 
|                             <td align="center" colspan="2" width="100%" style="border: none"> | 
|                                 <img class="template-code template-barcode" src="" width="80%"> | 
|                                 <div style="letter-spacing: 2px;margin-top: 1px; text-align: center"> | 
|                                     <span>xxxxxx</span> | 
|                                 </div> | 
|                             </td> | 
|                         </tr> | 
|                     </table> | 
|                 </div> | 
|   | 
|                 <!-- 预览图 3 --> | 
|                 <div id="template-preview-3" class="template-preview" style="display: none"> | 
|                     <table class="contain" width="280" style="overflow: hidden;font-size: xx-small;table-layout: fixed;"> | 
|                         <tr style="height: 74px"> | 
|                             <td align="center" scope="col" colspan="1">物料名称</td> | 
|                             <td align="center" scope="col" colspan="1" style="">xxxxxx-xx/xx</td> | 
|                             <td align="center" scope="col" colspan="2" rowspan="2"> | 
|                                 <img class="template-code template-qrcode" src="" width="80%"> | 
|                                 <div style="letter-spacing: 1px;margin-top: 1px; text-align: center"> | 
|                                     <span>xxxxxx</span> | 
|                                 </div> | 
|                             </td> | 
|                         </tr> | 
|                         <tr style="height: 74px"> | 
|                             <td align="center" colspan="1">物料单位</td> | 
|                             <td align="center" colspan="1" style="overflow:hidden; white-space:nowrap; text-overflow:ellipsis;">xxxxxxx</td> | 
|                         </tr> | 
|                     </table> | 
|                 </div> | 
|             </div> | 
|         </fieldset> | 
|   | 
|         <button class="layui-btn" id="doPrint" lay-submit lay-filter="doPrint" style="margin-top: 20px">确定</button> | 
|     </div> | 
| </div> | 
|   | 
| <div id="box" style="display: block"></div> | 
|   | 
| <!-- 初始化打印模板的条形码 --> | 
| <script type="text/javascript"> | 
|     $('.template-barcode').attr("src", baseUrl+"/mac/code/auth?type=1¶m=123"); | 
|     $('.template-qrcode').attr("src", baseUrl+"/mac/code/auth?type=2¶m=123"); | 
| </script> | 
|   | 
| <!-- 模板引擎 --> | 
| <!-- 模板1 --> | 
| <script type="text/template" id="templatePreview1" class="template-barcode"> | 
|     {{#each data}} | 
|     <table class="contain" width="280" style="overflow: hidden;font-size: small;table-layout: fixed;"> | 
|         <tr style="height: 74px"> | 
|             <td align="center" colspan="3" scope="col">物料编码</td> | 
|             <td align="center" class="barcode" colspan="9" scope="col"> | 
|                 <img class="template-code" src="{{this.barcodeUrl}}" width="90%"> | 
|                 <div style="letter-spacing: 2px;margin-top: 1px; text-align: center"> | 
|                     <span>{{this.matnr}}</span> | 
|                 </div> | 
|             </td> | 
|         </tr> | 
|         <tr style="height: 74px"> | 
|             <td align="center" colspan="3">物料名称</td> | 
|             <td align="center" colspan="5" style="overflow: hidden; white-space: nowrap;text-overflow: ellipsis;">{{this.maktx}}</td> | 
|             <td align="center" colspan="2">单位</td> | 
|             <td align="center" colspan="2">{{this.unit}}</td> | 
|         </tr> | 
|     </table> | 
|     {{/each}} | 
| </script> | 
| <!-- 模板2 --> | 
| <script type="text/template" id="templatePreview2" class="template-barcode"> | 
|     {{#each data}} | 
|     <table class="contain" width="280" style="overflow: hidden;font-size: xx-small;table-layout: fixed;"> | 
|         <tr style="height: 35px"> | 
|             <td align="center" width="20%">物料名称</td> | 
|             <td align="center" width="80%" style="overflow:hidden; white-space:nowrap; text-overflow:ellipsis;">{{this.maktx}}</td> | 
|         </tr> | 
|         <tr style="height: 35px"> | 
|             <td align="center" width="20%">物料单位</td> | 
|             <td align="center" width="80%">{{this.unit}}</td> | 
|         </tr> | 
|         <tr style="height: 79px;"> | 
|             <td align="center" colspan="2" width="100%" style="border: none"> | 
|                 <img class="template-code" src="{{this.barcodeUrl}}" width="80%"> | 
|                 <div style="letter-spacing: 2px;margin-top: 1px; text-align: center"> | 
|                     <span>{{this.matnr}}</span> | 
|                 </div> | 
|             </td> | 
|         </tr> | 
|     </table> | 
|     {{/each}} | 
| </script> | 
| <!-- 模板3 --> | 
| <script type="text/template" id="templatePreview3" class="template-qrcode"> | 
|     {{#each data}} | 
|     <table class="contain" width="280" style="overflow: hidden;font-size: xx-small;table-layout: fixed;"> | 
|         <tr style="height: 74px" > | 
|             <td align="center" scope="col" colspan="1">物料名称</td> | 
|             <td align="center" scope="col" colspan="1" style=" | 
|                 display: inline-block; | 
|                 line-height: 20px; | 
|                 vertical-align: middle; | 
|                 border: none; | 
|                 border-top: 1px solid #000; | 
|                 overflow: hidden; | 
|                 text-overflow: ellipsis; | 
|                 display: -webkit-box; | 
|                 -webkit-line-clamp: 3; | 
|                 -webkit-box-orient: vertical; | 
|                     "> | 
|                 {{this.maktx}} | 
|             </td> | 
|             <td align="center" scope="col" colspan="2" rowspan="2"> | 
|                 <img class="template-code template-qrcode" src="{{this.barcodeUrl}}" width="80%"> | 
|                 <div style="letter-spacing: 1px;margin-top: 1px; text-align: center"> | 
|                     <span>{{this.matnr}}</span> | 
|                 </div> | 
|             </td> | 
|         </tr> | 
|         <tr style="height: 74px"> | 
|             <td align="center" colspan="1">物料单位</td> | 
|             <td align="center" colspan="1" style="overflow:hidden; white-space:nowrap; text-overflow:ellipsis;">{{this.unit}}</td> | 
|         </tr> | 
|     </table> | 
|     {{/each}} | 
| </script> | 
|   | 
| </body> | 
| </html> |