封装查看视觉盘点图片组件

hwh

2024-07-19 a35607160c054c110edcd6772e5967540a79c489

封装查看视觉盘点图片组件

 HTML/layuiadmin/dragMove/dragMove.css

New file
@@ -0,0 +1,20 @@
/**
 @ 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;}

 HTML/layuiadmin/dragMove/dragMove.js

New file
@@ -0,0 +1,261 @@
/**
 @ 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);
});

 HTML/views/HouseWithinSetting/StockCheck.html

@@ -188,7 +188,20 @@
                        }}
                         
                    </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">
@@ -401,6 +414,7 @@
                    { 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();
@@ -860,7 +874,24 @@
                    });
                }
            });

            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 () {

 HTML/views/HouseWithinSetting/ViewPicture.html

New file
@@ -0,0 +1,104 @@
<!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>

 HTML/views/HouseWithinSetting/images/1920x1080.jpg

 HTML/views/HouseWithinSetting/images/1920x400.jpg

 HTML/views/HouseWithinSetting/images/400x400.jpg

 HTML/views/HouseWithinSetting/images/400x900.jpg

 HTML/views/SystemSettings/PrintModule.html

New file
@@ -0,0 +1,153 @@
<!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>