|  |  |  | 
|---|
|  |  |  | .ew-tree-table-box { | 
|---|
|  |  |  | height: 100%; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | /* ------------------------- 打印表格 -----------------------  */ | 
|---|
|  |  |  | .template-preview { | 
|---|
|  |  |  | height: 200px; | 
|---|
|  |  |  | display: inline-block; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .contain td { | 
|---|
|  |  |  | border: 1px solid #000; | 
|---|
|  |  |  | /*font-family: 黑体;*/ | 
|---|
|  |  |  | /*font-weight: bold;*/ | 
|---|
|  |  |  | /*color: #000000;*/ | 
|---|
|  |  |  | } | 
|---|
|  |  |  | </style> | 
|---|
|  |  |  | </head> | 
|---|
|  |  |  | <body> | 
|---|
|  |  |  | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <!-- 打印操作弹窗 --> | 
|---|
|  |  |  | <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="checked"> | 
|---|
|  |  |  | <input type="radio" name="selectTemplate" value="2" 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; border: none"> | 
|---|
|  |  |  | <td class="barcode" colspan="12" align="center" scope="col" style=" border: none"> | 
|---|
|  |  |  | <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> | 
|---|
|  |  |  | </table> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <!-- 预览图 2 --> | 
|---|
|  |  |  | <div id="template-preview-2" class="template-preview" style="display: none"> | 
|---|
|  |  |  | <table class="contain" width="280" style="overflow: hidden;table-layout: fixed; border: none; font-size: xx-large"> | 
|---|
|  |  |  | <tr style="height: 74px"> | 
|---|
|  |  |  | <td class="barcode" colspan="9" align="center" scope="col" style="border: none"> | 
|---|
|  |  |  | <img class="template-code template-barcode" src="" width="90%;"> ↓ | 
|---|
|  |  |  | <div style="letter-spacing: 2px;margin-top: 1px; text-align: center; font-size: xx-small"> | 
|---|
|  |  |  | <span>xxxxxx</span> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </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="400px" style="overflow: hidden;font-size: xx-small;table-layout: fixed;"> | 
|---|
|  |  |  | <tr style="height: 150px; border: none"> | 
|---|
|  |  |  | <td class="barcode" colspan="12" align="center" scope="col" style=" border: none"> | 
|---|
|  |  |  | <img class="template-code template-barcode" src="{{this.barcodeUrl}}" width="90%;"> | 
|---|
|  |  |  | <div style="letter-spacing: 2px;margin-top: 1px; text-align: center;"> | 
|---|
|  |  |  | <span>{{this.item}}</span> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </td> | 
|---|
|  |  |  | </tr> | 
|---|
|  |  |  | </table> | 
|---|
|  |  |  | {{/each}} | 
|---|
|  |  |  | </script> | 
|---|
|  |  |  | <!-- 模板2 --> | 
|---|
|  |  |  | <script type="text/template" id="templatePreview2" class="template-barcode"> | 
|---|
|  |  |  | {{#each data}} | 
|---|
|  |  |  | <table class="contain" width="400px" style="overflow: hidden;table-layout: fixed; border: none; font-size: xx-large"> | 
|---|
|  |  |  | <tr style="height: 150px"> | 
|---|
|  |  |  | <td class="barcode" colspan="9" align="center" scope="col" style="border: none"> | 
|---|
|  |  |  | <img class="template-code template-barcode" src="{{this.barcodeUrl}}" width="90%;"> ↓ | 
|---|
|  |  |  | <div style="letter-spacing: 2px;margin-top: 1px; text-align: center; font-size: xx-small"> | 
|---|
|  |  |  | <span>{{this.item}}</span> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </td> | 
|---|
|  |  |  | </tr> | 
|---|
|  |  |  | </table> | 
|---|
|  |  |  | {{/each}} | 
|---|
|  |  |  | </script> | 
|---|
|  |  |  | </body> | 
|---|
|  |  |  | </html> | 
|---|
|  |  |  |  | 
|---|