New file |
| | |
| | | /** |
| | | @ Name:layui.dragMove 图片查看器 |
| | | @ Author:FQSong |
| | | @ License:MIT |
| | | */ |
| | | |
| | | /* 样式加载完毕的标识 */ |
| | | html #layuicss-dragMove{display: none; position: absolute; width: 1989px;} |
| | | |
| | | |
| | | /* 组件样式 */ |
| | | .dragMove-skin .layui-layer-content {overflow: hidden !important;} |
| | | .layui-dragMove {position: relative; width: 100%; height: 100%; display: -webkit-flex; display: flex; flex-direction:column;} |
| | | .layui-dragMove .dragMove-img {position: relative; width: 100%; height: 100%; overflow: hidden; -webkit-flex: 1; flex: 1; background-color:#eee;} |
| | | .layui-dragMove .dragMove-img img {position: absolute; left: 0; top: 0; user-select:none; cursor: grab;} |
| | | .layui-dragMove .dragMove-btn {width:100%; padding: 10px 0; text-align:center; -webkit-flex: none; flex: none;} |
| | | .layui-dragMove .dragMove-btn .layui-btn {height: 28px; line-height: 28px;} |
| | | .layui-icon-loading {position: absolute; left: 50%; top: 50%; display: block; width: 36px; height: 36px; font-size: 36px; line-height: 36px; } |
| | | |
| | | .transitioning {-webkit-transition: -webkit-transform .24s ease-out; transition: transform .24s ease-out;} |
New file |
| | |
| | | /** |
| | | @ Name:layui.dragMove 图片查看器 |
| | | @ Author:FQSong |
| | | @ License:MIT |
| | | */ |
| | | |
| | | layui.define('layer', function(exports){ |
| | | var $ = layui.$ |
| | | ,layer = layui.layer |
| | | |
| | | //字符常量 |
| | | ,MOD_NAME = 'dragMove', ELEM = '.layui-dragMove' |
| | | |
| | | //外部接口 |
| | | ,dragMove = { |
| | | index: layui.dragMove ? (layui.dragMove.index + 10000) : 0 |
| | | |
| | | //设置全局项 |
| | | ,set: function(options){ |
| | | var that = this; |
| | | that.config = $.extend({}, that.config, options); |
| | | return that; |
| | | } |
| | | |
| | | //事件监听 |
| | | ,on: function(events, callback){ |
| | | return layui.onevent.call(this, MOD_NAME, events, callback); |
| | | } |
| | | } |
| | | |
| | | //构造器 |
| | | ,Class = function(options){ |
| | | var that = this; |
| | | that.index = ++dragMove.index; |
| | | that.config = $.extend({}, that.config, dragMove.config, options); |
| | | that.render(); |
| | | }; |
| | | |
| | | //默认配置 |
| | | Class.prototype.config = { |
| | | layerArea: ["960px","720px"], |
| | | layerShade: 0.6, |
| | | layerMove: 0, |
| | | maxZoom: 1 |
| | | }; |
| | | |
| | | //渲染视图 |
| | | Class.prototype.render = function(){ |
| | | var that = this |
| | | ,options = that.config |
| | | ,dragMoveView = "<div class='layui-dragMove'>" |
| | | + "<div class='dragMove-img'>" |
| | | + "<span class='layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop'></span>" |
| | | + "</div>" |
| | | + "<div class='dragMove-btn'>" |
| | | + "<button type='button' class='layui-btn layui-btn-sm' data-method='default'>默认大小</button>" |
| | | + "<button type='button' class='layui-btn layui-btn-sm' data-method='real'>实际大小</button>" |
| | | + "<button type='button' class='layui-btn layui-btn-sm' data-method='zoomin'>放大</button>" |
| | | + "<button type='button' class='layui-btn layui-btn-sm' data-method='zoomout'>缩小</button>" |
| | | + "</div>" |
| | | + "</div>"; |
| | | |
| | | options.elem = $(options.elem); |
| | | |
| | | options.elem.on("click","img",function(e){ |
| | | let imgObj = $(this), |
| | | imgSrc = imgObj.attr("src"), |
| | | imgTitle = imgObj.attr("alt") || imgSrc.replace(/(.*\/)*([^.]+).*/ig,"$2"); |
| | | |
| | | layer.open({ |
| | | type: 1, |
| | | resize: 0, |
| | | btn: 0, |
| | | skin: "dragMove-skin", |
| | | move: options.layerMove, |
| | | area: options.layerArea, |
| | | shade: options.layerShade, |
| | | title: imgTitle, |
| | | content: dragMoveView, |
| | | success: function(layero){ |
| | | var imgbox = layero.find(".dragMove-img"); |
| | | options.imgboxWidth = imgbox.innerWidth(); |
| | | options.imgboxHeight = imgbox.innerHeight(); |
| | | |
| | | var nImg = new Image(); |
| | | nImg.src = imgSrc; |
| | | if (nImg.complete) { |
| | | imgbox.empty().append(nImg); |
| | | that.init(nImg) |
| | | } else { |
| | | nImg.onload = function () { |
| | | imgbox.empty().append(nImg); |
| | | that.init(nImg) |
| | | } |
| | | } |
| | | } |
| | | }); |
| | | }); |
| | | } |
| | | |
| | | // |
| | | Class.prototype.init = function(img){ |
| | | var that = this |
| | | ,options = that.config; |
| | | |
| | | let $img = $(img), |
| | | parent = $img.closest(".layui-dragMove"), |
| | | zoomData = {}; |
| | | |
| | | zoomData.img = img; |
| | | zoomData.imgWidth = img.width; |
| | | zoomData.imgHeight = img.height; |
| | | |
| | | zoomData.zoomSize = Math.min(Math.min(options.imgboxWidth / zoomData.imgWidth, options.imgboxHeight / zoomData.imgHeight), 1); |
| | | zoomData.left = (options.imgboxWidth - zoomData.imgWidth * zoomData.zoomSize) / 2; |
| | | zoomData.top = (options.imgboxHeight - zoomData.imgHeight * zoomData.zoomSize) / 2; |
| | | zoomData.defaultZoom = zoomData.zoomSize; |
| | | |
| | | that.zoomData = zoomData; |
| | | $img.css({ "transform-origin": "0 0", "transform": "matrix(" + zoomData.zoomSize + ",0,0," + zoomData.zoomSize + "," + zoomData.left + "," + zoomData.top + ")" }); |
| | | |
| | | $img.on("mousedown", function (e) { |
| | | e.preventDefault(); |
| | | let currentX = e.clientX, |
| | | currentY = e.clientY; |
| | | $img.removeClass("transitioning").css({"cursor": "grabbing"}); |
| | | |
| | | $(document).on("mousemove", function (even) { |
| | | let moveX = even.clientX - currentX, |
| | | moveY = even.clientY - currentY; |
| | | $img.css({ "transform": "matrix(" + zoomData.zoomSize + ",0,0," + zoomData.zoomSize + "," + (zoomData.left + moveX) + "," + (zoomData.top + moveY) + ")" }); |
| | | }); |
| | | $(document).on("mouseup", function (even) { |
| | | var matrix = $img.css("transform").slice(7, -1).split(','), |
| | | center = that.getCenter(parseFloat(matrix[4]), parseFloat(matrix[5]), zoomData); |
| | | |
| | | zoomData.left = center.left; |
| | | zoomData.top = center.top; |
| | | |
| | | $img.addClass("transitioning").css({ |
| | | "transform": "matrix(" + zoomData.zoomSize + ",0,0," + zoomData.zoomSize + "," + zoomData.left + "," + zoomData.top + ")", |
| | | "cursor": "grab" |
| | | }); |
| | | |
| | | $(document).off("mousemove"); |
| | | $(document).off("mouseup"); |
| | | }); |
| | | }); |
| | | |
| | | parent.on("click", "button", function (e) { |
| | | e.preventDefault(); |
| | | var method = $(this).attr("data-method"), |
| | | scaleSize = 0; |
| | | switch (method) { |
| | | case "default": |
| | | scaleSize = zoomData.defaultZoom; |
| | | break; |
| | | case "real": |
| | | scaleSize = 1; |
| | | break; |
| | | case "zoomin": |
| | | scaleSize = zoomData.zoomSize * 1.2; |
| | | scaleSize = scaleSize > options.maxZoom ? options.maxZoom : scaleSize; |
| | | break; |
| | | case "zoomout": |
| | | scaleSize = zoomData.zoomSize / 1.2; |
| | | scaleSize = scaleSize < zoomData.defaultZoom ? zoomData.defaultZoom : scaleSize; |
| | | break; |
| | | |
| | | default: |
| | | break; |
| | | } |
| | | scaleSize && that.scaleZoom(scaleSize); |
| | | }); |
| | | |
| | | //鼠标滚轮 |
| | | parent.on("mousewheel", function (e) { |
| | | e.preventDefault(); |
| | | let scaleSize = 0; |
| | | if (e.originalEvent.wheelDelta > 0) { |
| | | scaleSize = zoomData.zoomSize * 1.2; |
| | | } else { |
| | | scaleSize = zoomData.zoomSize / 1.2; |
| | | } |
| | | scaleSize = Math.min(Math.max(scaleSize, zoomData.defaultZoom),options.maxZoom); |
| | | that.scaleZoom(scaleSize); |
| | | }); |
| | | |
| | | $img.on("transitionend webkitTransitionend", function () { |
| | | $(this).removeClass("transitioning") |
| | | }); |
| | | |
| | | }; |
| | | |
| | | Class.prototype.scaleZoom = function(index){ |
| | | var that = this |
| | | ,options = that.config |
| | | ,zoomData = that.zoomData; |
| | | |
| | | zoomData.left = zoomData.left - zoomData.imgWidth * (index - zoomData.zoomSize) / 2; |
| | | zoomData.top = zoomData.top - zoomData.imgHeight * (index - zoomData.zoomSize) / 2; |
| | | zoomData.zoomSize = index; |
| | | |
| | | var center = that.getCenter(zoomData.left,zoomData.top,zoomData); |
| | | zoomData.left = center.left; |
| | | zoomData.top = center.top; |
| | | |
| | | $(zoomData.img).addClass("transitioning").css({ |
| | | "transform":"matrix("+ zoomData.zoomSize +",0,0," + zoomData.zoomSize +","+zoomData.left+","+zoomData.top+")" |
| | | }); |
| | | }; |
| | | |
| | | Class.prototype.getCenter = function(x,y,zoomData){ |
| | | var that = this |
| | | ,options = that.config |
| | | ,zoomData = that.zoomData; |
| | | |
| | | let newleft,newtop; |
| | | newleft = (function(){ |
| | | var left; |
| | | if(zoomData.imgWidth * zoomData.zoomSize < options.imgboxWidth){ |
| | | left = (options.imgboxWidth - zoomData.imgWidth * zoomData.zoomSize) / 2; |
| | | }else{ |
| | | left = Math.max(Math.min(0,x), options.imgboxWidth - zoomData.imgWidth * zoomData.zoomSize); |
| | | } |
| | | return left; |
| | | })(); |
| | | newtop = (function(){ |
| | | var top; |
| | | if(zoomData.imgHeight * zoomData.zoomSize < options.imgboxHeight){ |
| | | top = (options.imgboxHeight - zoomData.imgHeight * zoomData.zoomSize) / 2; |
| | | }else{ |
| | | top = Math.max(Math.min(0, y), options.imgboxHeight - zoomData.imgHeight * zoomData.zoomSize); |
| | | } |
| | | return top; |
| | | })(); |
| | | return {left:newleft,top:newtop} |
| | | }; |
| | | |
| | | Class.prototype.decimal = function(num){ |
| | | var result = parseFloat(num); |
| | | if (isNaN(result)) { |
| | | return false; |
| | | } |
| | | result = Math.round(num * 100) / 100; |
| | | return result; |
| | | }; |
| | | |
| | | //核心入口 |
| | | dragMove.render = function(options){ |
| | | var ins = new Class(options); |
| | | return ins; |
| | | }; |
| | | |
| | | //加载组件所需样式 |
| | | layui.link(layui.cache.base + 'dragMove/dragMove.css', function(){ |
| | | //样式加载完毕的回调 |
| | | }, MOD_NAME); |
| | | |
| | | exports(MOD_NAME, dragMove); |
| | | }); |
| | |
| | | }} |
| | | |
| | | </script> |
| | | |
| | | <script type="text/html" id="table-content-list2"> |
| | | {{# |
| | | var html = ''; |
| | | |
| | | if(d.Status >= 1){ |
| | | html += `<a class="layui-btn layui-btn-danger layui-btn-xs delClass" lay-event="viewPicture"> |
| | | <i class="layui-icon layui-icon-ok"></i>查看图片 |
| | | </a>`; |
| | | } |
| | | return html; |
| | | |
| | | }} |
| | | |
| | | </script> |
| | | <script type="text/html" id="toolbarDemo"> |
| | | |
| | | <button class="layui-btn layuiadmin-btn-list layui-btn-sm addClass" lay-event="add"> |
| | |
| | | { field: 'CreateTime', title: '创建时间', align: 'center', width: 160, templet: '#CreateTimeButton', }, |
| | | { field: 'UpdateUserName', title: '修改人', align: 'center', width: 120, hide: true }, |
| | | { field: 'UpdateTime', title: '修改时间', align: 'center', width: 160, hide: true, templet: '#UpdateTimeButton', }, |
| | | { field: 'caozuo', title: '操作', fixed: 'right', align: 'center', toolbar: '#table-content-list2', width: 100 } |
| | | ]]; |
| | | var TotalColsSysArrm = encodeURIComponent(encodeURIComponent(JSON.stringify(TotalColsArrm)))//将表头数据进行url编码 |
| | | refreshTable(); |
| | |
| | | } |
| | | }); |
| | | } else if (obj.event === 'vision') { |
| | | |
| | | |
| | | layer.confirm('确定视觉盘点', function () { |
| | | if (isChongFu == true) { |
| | | isChongFu = false; |
| | |
| | | }); |
| | | } |
| | | }); |
| | | |
| | | table.on('tool(LAY-app-content-list2)', function (obj) { |
| | | var data = obj.data; |
| | | if (obj.event === 'viewPicture') {//查看图片 |
| | | debugger; |
| | | layer.open({ |
| | | type: 2, |
| | | title: '查看图片', |
| | | content: 'ViewPicture.html', |
| | | maxmin: true, |
| | | area: ['100%', '100%'], |
| | | success: function (layero, index) { |
| | | var body = layer.getChildFrame('body', index); |
| | | body.find('#CrNo').val(data.CrNo); |
| | | body.find('#PalletNo').val(data.PalletNo); |
| | | } |
| | | }); |
| | | } |
| | | }); |
| | | var $ = layui.$, |
| | | active = { |
| | | customCols: function () { |
New file |
| | |
| | | <!DOCTYPE html> |
| | | <html> |
| | | |
| | | <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.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"> |
| | | <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all"> |
| | | </head> |
| | | |
| | | <body> |
| | | <input type="hidden" id="CrNo" name="CrNo"> |
| | | <input type="hidden" id="PalletNo" name="PalletNo"> |
| | | <div class="layui-bg-gray" style="padding: 16px;" id="imgDragmove"> |
| | | <div class="layui-row layui-col-space15"> |
| | | <div class="layui-col-md2"> |
| | | <div class="layui-card"> |
| | | <div class="layui-card-header">0100101箱</div> |
| | | <div class="layui-card-body"> |
| | | <img src="images/1920x1080.jpg" height="200" width="100%" alt="0100101箱"> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="layui-col-md2"> |
| | | <div class="layui-card"> |
| | | <div class="layui-card-header">0100102箱</div> |
| | | <div class="layui-card-body"> |
| | | <img src="images/1920x400.jpg" height="200" width="100%" alt="0100102箱"> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="layui-col-md2"> |
| | | <div class="layui-card"> |
| | | <div class="layui-card-header">0100103箱</div> |
| | | <div class="layui-card-body"> |
| | | <img src="images/400x400.jpg" height="200" width="100%" alt="0100103箱"> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="layui-col-md2"> |
| | | <div class="layui-card"> |
| | | <div class="layui-card-header">0100104箱</div> |
| | | <div class="layui-card-body"> |
| | | <img src="images/400x400.jpg" height="200" width="100%" alt="0100104箱"> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="layui-col-md2"> |
| | | <div class="layui-card"> |
| | | <div class="layui-card-header">0100105箱</div> |
| | | <div class="layui-card-body"> |
| | | <img src="images/400x400.jpg" height="200" width="100%" alt="0100105箱"> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="layui-col-md2"> |
| | | <div class="layui-card"> |
| | | <div class="layui-card-header">0100106箱</div> |
| | | <div class="layui-card-body"> |
| | | <img src="images/400x400.jpg" height="200" width="100%" alt="0100106箱"> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="layui-col-md2"> |
| | | <div class="layui-card"> |
| | | <div class="layui-card-header">0100107箱</div> |
| | | <div class="layui-card-body"> |
| | | <img src="images/400x400.jpg" height="200" width="100%" alt="0100107箱"> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | |
| | | <script src="../../layuiadmin/layui/layui.js"></script> |
| | | <script src="../../js/jquery-3.5.1.min.js"></script> |
| | | <script src="../../js/jquery.cookie.js"></script> |
| | | <script src="../../js/public.js"></script> |
| | | <script> |
| | | layui.config({ |
| | | base: '../../layuiadmin/' //静态资源所在路径 |
| | | }).extend({ |
| | | index: 'lib/index', //主入口模块 |
| | | dragMove: 'dragMove/dragMove' |
| | | }).use(['dragMove'], function () { |
| | | var $ = layui.$; |
| | | var dragMove = layui.dragMove; |
| | | //执行示例 |
| | | dragMove.render({ |
| | | elem: "#imgDragmove", //指向图片的父容器 |
| | | layerArea: ["960px", "720px"], //弹窗的宽高,同layer的area,默认["960px","720px"] |
| | | layerShade: 0.6, //遮罩的透明度,同layer的shade,默认0.6 |
| | | layerMove: false, //触发拖动的元素,同layer的move,这里默认禁止,可设置为'.layui-layer-title' |
| | | maxZoom: 1 //图片能放大的最大倍数,默认1倍 |
| | | }); |
| | | }) |
| | | </script> |
| | | </body> |
| | | |
| | | </html> |
New file |
| | |
| | | <!DOCTYPE html> |
| | | <html> |
| | | |
| | | <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.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"> |
| | | <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all"> |
| | | <link rel="stylesheet" type="text/css" href="../../js/HiPrint/css/hiprint.css?t=' + Math.random() + '" /> |
| | | <link rel="stylesheet" type="text/css" href="../../js/HiPrint/css/print-lock.css" /> |
| | | <link rel="stylesheet" media="print" href="../../js/HiPrint/css/print-lock.css" /> |
| | | <!-- <link rel="stylesheet" type="text/css" href="../../js/HiPrint/css/bootstrap.min.css" > --> |
| | | <style> |
| | | .layui-form-label { |
| | | padding: 5px 1px; |
| | | text-align: center; |
| | | } |
| | | |
| | | div { |
| | | font-size: inherit; |
| | | } |
| | | </style> |
| | | </head> |
| | | |
| | | <body> |
| | | <div class="layui-card"> |
| | | <input type="hidden" id="printData" name="printData"> |
| | | <input type="hidden" id="printType" name="printType"> |
| | | <div class="row"> |
| | | |
| | | <!--左侧div--> |
| | | <div class="layui-col-xs2" style="padding-right:0px;max-height:250mm;"> |
| | | <div class="small-printElement-types hiprintEpContainer"> |
| | | </div> |
| | | </div> |
| | | <!--打印部分--> |
| | | <div class="layui-col-xs6" style="margin-right: 50px;margin-left: 30px;"> |
| | | <!--打印头部分--> |
| | | <div class="hiprint-toolbar" style="margin-top:15px;"> |
| | | <ul> |
| | | <li><a class="hiprint-toolbar-item"><input type="number" id="customWidth" |
| | | style="width: 50px;height: 19px;border: 0px;" placeholder="宽/mm" /></a></li> |
| | | <li><a class="hiprint-toolbar-item"><input type="number" id="customHeight" |
| | | style="width: 50px;height: 19px;border: 0px;" placeholder="高/mm" /></a></li> |
| | | <li><a class="hiprint-tizee-btn" onclick="clearTemplate()">清空</a></li> |
| | | <!-- <li> <a class="btn hiprint-toolbar-item " |
| | | style="color: #fff;background-color: #d9534f;border-color: #d43f3a;" |
| | | id="preview">快速预览</a> </li> --> |
| | | <li> <a id="directPrint" class="btn hiprint-toolbar-item " |
| | | style="color: #fff;background-color: #d9534f; border-color: #d43f3a;">打印</a> |
| | | </li> |
| | | <!-- <li> |
| | | <a class="btn hiprint-toolbar-item" |
| | | style="color: #fff;background-color: #d9534f; border-color: #d43f3a;" |
| | | id="A4_getJson_toTextarea" onclick="BtnSubmit_Click()">保存</a> |
| | | </li> --> |
| | | </ul> |
| | | <div style="clear:both;"></div> |
| | | </div> |
| | | <!--打印主体部分--> |
| | | <div id="hiprint-printTemplate" class="hiprint-printTemplate" style="margin-top:20px;"> |
| | | |
| | | </div> |
| | | <textarea class="form-control" rows="10" id="A4_textarea_json" style="display: none;"></textarea> |
| | | </div> |
| | | <!--右侧div--> |
| | | <div class="layui-col-xs2" style="margin-left: 6%;max-height:260mm; overflow-y: scroll;"> |
| | | <div id="PrintElementOptionSetting" style="margin-top: 10px;"></div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | <script src="../../js/jquery-3.5.1.min.js"></script> |
| | | <script src="../../js/jquery.cookie.js"></script> |
| | | <script src="../../js/hiprint/content/bootstrap.min.js"></script> |
| | | <script src="../../js/HiPrint/polyfill.min.js"></script> |
| | | <script src="../../js/HiPrint/plugins/jquery.minicolors.min.js"></script> |
| | | <script src="../../js/HiPrint/plugins/JsBarcode.all.min.js"></script> |
| | | <script src="../../js/HiPrint/plugins/qrcode.js"></script> |
| | | <script src="../../js/HiPrint/hiprint.bundle.js"></script> |
| | | <script src="../../js/HiPrint/plugins/jquery.hiwprint.js"></script> |
| | | <!-- <script src="../../js/HiPrint/plugins/socket.io.js"></script> --> |
| | | <script src="../../js/HiPrint/plugins/config-etype-provider.js"></script> |
| | | <script src="../../js/HiPrint/plugins/jspdf/canvas2image.js"></script> |
| | | <script src="../../js/HiPrint/plugins/jspdf/canvg.min.js"></script> |
| | | <script src="../../js/HiPrint/plugins/jspdf/html2canvas.min.js"></script> |
| | | <script src="../../js/HiPrint/plugins/jspdf/jspdf.min.js"></script> |
| | | <script src="../../js/HiPrint/plugins/print-data-list.js"></script> |
| | | <script src="../../js/HiPrint/hiprint.config.js"></script> |
| | | <script src="../../layuiadmin/layui/layui.js"></script> |
| | | <script src="../../js/public.js"></script> |
| | | <script> |
| | | var configPrintJson; |
| | | var datalist = []; |
| | | //初始化打印插件渲染 |
| | | $(".hiprintEpContainer").html(""); //清除div内容 |
| | | |
| | | |
| | | |
| | | var hiprintTemplate; |
| | | // var JsonData = JSON.parse('{"panels":[{"index":0,"height":50,"width":50,"paperHeader":0,"paperFooter":141.73228346456693,"printElements":[{"tid":"configModule.SkuName","options":{"left":9,"top":12,"height":9.75,"width":120}},{"tid":"configModule.SkuNo","options":{"left":9,"top":37.5,"height":78,"width":120,"textType":"qrcode"}}],"paperNumberLeft":178.5,"paperNumberTop":123}]}') |
| | | var JsonData = {}; |
| | | setTimeout(function () { |
| | | var printType = $("#printType").val(); |
| | | datalist = getPrintDataList()(printType); |
| | | synData(IP + "/sys/GetDefaultPrintTemplate?Type=" + printType, {}, 'get', function (res) { |
| | | if (res.code == 0) { //成功 |
| | | hiprint.init({ |
| | | providers: [new configElementTypeProvider()] |
| | | }); |
| | | //设置左侧拖拽事件 |
| | | hiprint.PrintElementTypeManager.build('.hiprintEpContainer', 'testModule'); |
| | | JsonData = JSON.parse(res.data.PositionJson); |
| | | $("#customWidth").val(JsonData.panels[0].width); |
| | | $("#customHeight").val(JsonData.panels[0].height); |
| | | hiprintTemplate = new hiprint.PrintTemplate({ |
| | | template: JsonData,//模板JSON |
| | | settingContainer: '#PrintElementOptionSetting', |
| | | paginationContainer: '.hiprint-printPagination' |
| | | }); |
| | | |
| | | //打印设计 |
| | | hiprintTemplate.design('#hiprint-printTemplate'); |
| | | |
| | | //打印 |
| | | //这里获取上级页面的printData数据打印 |
| | | // var printData = deepClone(parent.printData); |
| | | var printData = JSON.parse($("#printData").val()); |
| | | hiprintTemplate.print(printData, '打印'); |
| | | parent.layer.closeAll(); |
| | | } |
| | | else //不成功 |
| | | { |
| | | layer.msg(res.msg, { |
| | | icon: 2, |
| | | time: 2000 //2秒关闭(如果不配置,默认是3秒) |
| | | }, function () { parent.layer.closeAll(); }); |
| | | } |
| | | }); |
| | | }, 100); |
| | | |
| | | |
| | | |
| | | $('#directPrint').click(function () { |
| | | hiprintTemplate.print(printData); |
| | | }); |
| | | </script> |
| | | </body> |
| | | |
| | | </html> |