gds-plus-design-vue 1.2.6 → 1.2.7

package/lib/components.imgpreview.5546e541.mjs

@@ -0,0 +1,213 @@
+import { m as o, n as r } from "./components.chartbi.470b96af.mjs";
+import "./utils.echarts.js.d1bb8ac6.mjs";
+import "./utils.util.js.885de913.mjs";
+const a = {
+  name: "GdImgPreview",
+  props: {
+    imgList: {
+      type: Array,
+      required: !0,
+      default: function() {
+        return [];
+      }
+    },
+    currentImg: {
+      type: String,
+      required: !1,
+      default: ""
+    },
+    currentIndex: {
+      type: Number,
+      required: !1,
+      default: 0
+    },
+    download: {
+      type: Boolean,
+      default: !1
+    },
+    fileName: {
+      type: String,
+      default: "xx.png"
+    }
+  },
+  data() {
+    return {
+      imgListShow: !1,
+      num: 0,
+      furl: "",
+      changeColor: -1,
+      currentRotate: 0,
+      currentScale: 1,
+      canDrag: !1,
+      offset_x: 0,
+      offset_y: 0,
+      mouse_x: 0,
+      mouse_y: 0,
+      downUrl: "",
+      fullScreen: !1,
+      confirmLoading: !1,
+      filePreviewShow: !1,
+      sysViewButtons: [
+        {
+          displayName: "\u4E0B\u8F7D",
+          functionName: "downloadImg",
+          show: !0,
+          transKey: "gd.btn.download",
+          icon: "el-icon-download"
+        }
+      ]
+    };
+  },
+  computed: {
+    getButtons() {
+      return this.download ? this.sysViewButtons : [];
+    },
+    moduleCenter() {
+      let t = this.screenHeight - 210;
+      return {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        textAlign: "center",
+        height: this.fullScreen ? `${t}px` : "500px",
+        width: "100%"
+      };
+    },
+    ...o(["screenHeight"])
+  },
+  watch: {
+    filePreviewShow(t) {
+      t ? this.open() : (this.$refs.imgbox.scrollLeft = 0, window.removeEventListener("mousewheel", this.handleScroll, !0) || window.removeEventListener("DOMMouseScroll", this.handleScroll, !0));
+    },
+    imgList(t) {
+      t.length > 0 ? this.furl = t[0] : this.furl = "";
+    }
+  },
+  methods: {
+    open() {
+      this.filePreviewShow = !0, this.imgListShow = !0, this.$nextTick(() => {
+        setTimeout(() => {
+          this.imgList = this.trimSpace(this.imgList), this.imgList.length === 0 ? (this.furl = "", this.changeColor = -1) : (this.changeColor = this.currentIndex, this.currentImg && (this.changeColor = this.imgList.findIndex((t) => t === this.currentImg)), setTimeout(() => {
+            this.scrollImg(this.changeColor - 5, this.changeColor < 5);
+          }, 500), this.furl = this.imgList[this.changeColor], this.$nextTick(() => {
+            setTimeout(() => {
+              this.handlerImg(this.furl, this.changeColor);
+            }, 0);
+          }));
+        }, 0);
+      });
+    },
+    toggleFullscreen() {
+      this.fullScreen = !this.fullScreen;
+    },
+    closed() {
+      this.fullScreen = !1, this.imgListShow = !1, this.currentRotate = 0, this.currentScale = 1, this.rotateScale(), this.$refs.singleImg && (this.$refs.singleImg.style.left = 0, this.$refs.singleImg.style.top = 0), this.filePreviewShow = !1, this.$emit("close");
+    },
+    trimSpace(t) {
+      for (var e = 0; e < t.length; e++)
+        (t[e] == " " || t[e] == null || typeof t[e] > "u") && (t.splice(e, 1), e = e - 1);
+      return t;
+    },
+    handleScroll(t) {
+      this.scale(-t.deltaY);
+    },
+    handlerImg(t, e) {
+      this.currentRotate = 0, this.currentScale = 1, this.rotateScale(), this.$refs.singleImg && (this.$refs.singleImg.style.left = 0, this.$refs.singleImg.style.top = 0), this.furl = t, this.changeColor = e, document.getElementsByClassName("origin-style") && document.getElementsByClassName("origin-style")[0] && document.getElementsByClassName("origin-style")[0].style && (document.getElementsByClassName("origin-style")[0].style.position = "relative");
+    },
+    handleCurrentChange(t) {
+      const e = this.changeColor + t;
+      if (e === this.imgList.length || e === -1)
+        return;
+      this.currentRotate = 0, this.currentScale = 1, this.rotateScale(), this.$refs.singleImg.style.left = 0, this.$refs.singleImg.style.top = 0, this.furl = this.imgList[e], this.changeColor = e;
+      const s = t > 0 && e <= 5 || t < 0 && e + 1 >= this.imgList.length - 5;
+      this.scrollImg(t, s);
+    },
+    scrollImg(t, e) {
+      e || !this.$refs.imgbox || (this.$refs.imgbox.scrollLeft += 60 * t);
+    },
+    start(t) {
+      t.preventDefault && t.preventDefault(), t.button == 0 && (this.canDrag = !0, this.offset_x = document.getElementsByClassName("origin-style")[0].offsetLeft, this.offset_y = document.getElementsByClassName("origin-style")[0].offsetTop, this.mouse_x = t.pageX, this.mouse_y = t.pageY);
+    },
+    move(t) {
+      if (t.preventDefault && t.preventDefault(), window.addEventListener("mousewheel", this.handleScroll, !0) || window.addEventListener("DOMMouseScroll", this.handleScroll, !1), this.canDrag == !0) {
+        let e = t.pageX - this.mouse_x, s = t.pageY - this.mouse_y, i = this.offset_x + e + "px", l = this.offset_y + s + "px";
+        document.getElementsByClassName("origin-style")[0].style.position = "absolute", document.getElementsByClassName("origin-style")[0].style.top = l, document.getElementsByClassName("origin-style")[0].style.left = i;
+      }
+    },
+    mouseLeave(t) {
+      this.canDrag = !1, window.removeEventListener("mousewheel", this.handleScroll, !0) || window.removeEventListener("DOMMouseScroll", this.handleScroll, !0);
+    },
+    stop(t) {
+      this.canDrag = !1;
+    },
+    rotateScale() {
+      !this.$refs.singleImg || (this.$refs.singleImg.style.Transform = "rotate(" + this.currentRotate + "deg)scale(" + this.currentScale + ")", this.$refs.singleImg.style.webkitTransform = "rotate(" + this.currentRotate + "deg)scale(" + this.currentScale + ")", this.$refs.singleImg.style.MozTransform = "rotate(" + this.currentRotate + "deg)scale(" + this.currentScale + ")", this.$refs.singleImg.style.msTransform = "rotate(" + this.currentRotate + "deg)scale(" + this.currentScale + ")", this.$refs.singleImg.style.transform = "rotate(" + this.currentRotate + "deg)scale(" + this.currentScale + ")");
+    },
+    rotateL() {
+      this.currentRotate += 90, this.rotateScale();
+    },
+    rotateR() {
+      this.currentRotate -= 90, this.rotateScale();
+    },
+    scale(t) {
+      t >= 0 ? (this.currentScale += 0.1, this.rotateScale()) : (this.currentScale -= 0.1, this.currentScale <= 0.1 ? (this.currentScale = 0.1, this.rotateScale()) : this.rotateScale());
+    },
+    async downloadImg() {
+      if (this.confirmLoading)
+        return;
+      this.confirmLoading = !0;
+      const t = this.$message({
+        message: this.$i18nt("gd.https.downloading", "\u6B63\u5728\u4E0B\u8F7D\u4E2D..."),
+        duration: 0,
+        iconClass: "el-icon-loading"
+      });
+      let e = document.createElement("a");
+      e.style.display = "none", e.href = this.currentImg, e.download = this.fileName, e.click(), setTimeout(() => {
+        t.close(), this.confirmLoading = !1;
+      }, 1e3);
+    },
+    doEvent(t) {
+      const e = t.item.functionName;
+      this[e] && this[e]();
+    }
+  },
+  mounted() {
+    setTimeout(() => {
+      this.scrollImg(this.changeColor - 5, this.changeColor < 5);
+    }, 500);
+  }
+};
+var c = function() {
+  var e = this, s = e._self._c;
+  return s("el-dialog", { directives: [{ name: "drag", rawName: "v-drag" }], ref: "dialog", class: e.fullScreen ? "pic-preview gd-dialog gd-dialog-fangda" : "pic-preview gd-dialog", attrs: { fullscreen: e.fullScreen, visible: e.imgListShow, width: "900px", center: !0, "close-on-click-modal": !1, "append-to-body": !0, "modal-append-to-body": !1, top: "80px", "show-close": !1, "destroy-on-close": !0 }, on: { "update:visible": function(i) {
+    e.imgListShow = i;
+  }, closed: e.closed } }, [s("gd-modal-title", { attrs: { slot: "title", title: e.$i18nt("gd.btn.previewPictures", "\u9884\u89C8\u56FE\u7247"), fullscreen: e.fullScreen, buttons: e.getButtons, confirmLoading: e.confirmLoading, showClose: !0 }, on: { toggleFullscreen: e.toggleFullscreen, changeEvent: e.doEvent }, slot: "title" }), s("div", { staticClass: "module-center" }, [s("div", { style: e.moduleCenter }, [s("div", { attrs: { id: "test_3" }, on: { mousemove: e.move, mouseup: e.stop, mouseleave: e.mouseLeave } }, [s("img", { ref: "singleImg", staticClass: "origin-style", attrs: { src: e.furl }, on: { mousedown: e.start } })])]), s("div", { staticClass: "module-center-footer" }, [s("div", { staticClass: "allImg" }, [s("el-button", { staticClass: "changeImg", on: { click: function(i) {
+    return e.handleCurrentChange(-1);
+  } } }, [s("i", { staticClass: "el-icon-arrow-left" })]), s("div", { ref: "imgbox", staticClass: "imgbox", class: e.imgList.length > 6 ? "" : "min" }, e._l(e.imgList, function(i, l) {
+    return s("img", { key: i, class: { changeColor: e.changeColor == l }, attrs: { src: i }, on: { click: function(u) {
+      return e.handlerImg(i, l);
+    } } });
+  }), 0), s("el-button", { staticClass: "changeImg right", on: { click: function(i) {
+    return e.handleCurrentChange(1);
+  } } }, [s("i", { staticClass: "el-icon-arrow-right" })])], 1), s("div", { staticClass: "ctr-box" }, [s("el-button", { attrs: { title: e.$i18nt("gd.table.leftRotation", "\u5DE6\u65CB\u8F6C") }, on: { click: e.rotateL } }, [s("i", { staticClass: "el-icon-refresh-left" })]), s("el-button", { attrs: { title: e.$i18nt("gd.table.rightRotation", "\u53F3\u65CB\u8F6C") }, on: { click: e.rotateR } }, [s("i", { staticClass: "el-icon-refresh-right" })]), s("el-button", { attrs: { title: e.$i18nt("gd.table.reduce", "\u7F29\u5C0F") }, on: { click: function(i) {
+    return e.scale(-1);
+  } } }, [s("i", { staticClass: "el-icon-zoom-out" })]), s("el-button", { attrs: { title: e.$i18nt("gd.table.amplify", "\u653E\u5927") }, on: { click: function(i) {
+    return e.scale(1);
+  } } }, [s("i", { staticClass: "el-icon-zoom-in" })])], 1)])])], 1);
+}, h = [], g = /* @__PURE__ */ r(
+  a,
+  c,
+  h,
+  !1,
+  null,
+  "fce88893",
+  null,
+  null
+);
+const n = g.exports;
+n.install = function(t) {
+  t.component(n.name, n);
+};
+export {
+  n as default
+};

package/lib/components.imgpreview.706a89f0.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./components.chartbi.e9459775.js");require("./utils.echarts.js.461a74e7.js");require("./utils.util.js.c0ba699b.js");const r={name:"GdImgPreview",props:{imgList:{type:Array,required:!0,default:function(){return[]}},currentImg:{type:String,required:!1,default:""},currentIndex:{type:Number,required:!1,default:0},download:{type:Boolean,default:!1},fileName:{type:String,default:"xx.png"}},data(){return{imgListShow:!1,num:0,furl:"",changeColor:-1,currentRotate:0,currentScale:1,canDrag:!1,offset_x:0,offset_y:0,mouse_x:0,mouse_y:0,downUrl:"",fullScreen:!1,confirmLoading:!1,filePreviewShow:!1,sysViewButtons:[{displayName:"\u4E0B\u8F7D",functionName:"downloadImg",show:!0,transKey:"gd.btn.download",icon:"el-icon-download"}]}},computed:{getButtons(){return this.download?this.sysViewButtons:[]},moduleCenter(){let t=this.screenHeight-210;return{display:"flex",alignItems:"center",justifyContent:"center",textAlign:"center",height:this.fullScreen?`${t}px`:"500px",width:"100%"}},...o.mapGetters(["screenHeight"])},watch:{filePreviewShow(t){t?this.open():(this.$refs.imgbox.scrollLeft=0,window.removeEventListener("mousewheel",this.handleScroll,!0)||window.removeEventListener("DOMMouseScroll",this.handleScroll,!0))},imgList(t){t.length>0?this.furl=t[0]:this.furl=""}},methods:{open(){this.filePreviewShow=!0,this.imgListShow=!0,this.$nextTick(()=>{setTimeout(()=>{this.imgList=this.trimSpace(this.imgList),this.imgList.length===0?(this.furl="",this.changeColor=-1):(this.changeColor=this.currentIndex,this.currentImg&&(this.changeColor=this.imgList.findIndex(t=>t===this.currentImg)),setTimeout(()=>{this.scrollImg(this.changeColor-5,this.changeColor<5)},500),this.furl=this.imgList[this.changeColor],this.$nextTick(()=>{setTimeout(()=>{this.handlerImg(this.furl,this.changeColor)},0)}))},0)})},toggleFullscreen(){this.fullScreen=!this.fullScreen},closed(){this.fullScreen=!1,this.imgListShow=!1,this.currentRotate=0,this.currentScale=1,this.rotateScale(),this.$refs.singleImg&&(this.$refs.singleImg.style.left=0,this.$refs.singleImg.style.top=0),this.filePreviewShow=!1,this.$emit("close")},trimSpace(t){for(var e=0;e<t.length;e++)(t[e]==" "||t[e]==null||typeof t[e]>"u")&&(t.splice(e,1),e=e-1);return t},handleScroll(t){this.scale(-t.deltaY)},handlerImg(t,e){this.currentRotate=0,this.currentScale=1,this.rotateScale(),this.$refs.singleImg&&(this.$refs.singleImg.style.left=0,this.$refs.singleImg.style.top=0),this.furl=t,this.changeColor=e,document.getElementsByClassName("origin-style")&&document.getElementsByClassName("origin-style")[0]&&document.getElementsByClassName("origin-style")[0].style&&(document.getElementsByClassName("origin-style")[0].style.position="relative")},handleCurrentChange(t){const e=this.changeColor+t;if(e===this.imgList.length||e===-1)return;this.currentRotate=0,this.currentScale=1,this.rotateScale(),this.$refs.singleImg.style.left=0,this.$refs.singleImg.style.top=0,this.furl=this.imgList[e],this.changeColor=e;const s=t>0&&e<=5||t<0&&e+1>=this.imgList.length-5;this.scrollImg(t,s)},scrollImg(t,e){e||!this.$refs.imgbox||(this.$refs.imgbox.scrollLeft+=60*t)},start(t){t.preventDefault&&t.preventDefault(),t.button==0&&(this.canDrag=!0,this.offset_x=document.getElementsByClassName("origin-style")[0].offsetLeft,this.offset_y=document.getElementsByClassName("origin-style")[0].offsetTop,this.mouse_x=t.pageX,this.mouse_y=t.pageY)},move(t){if(t.preventDefault&&t.preventDefault(),window.addEventListener("mousewheel",this.handleScroll,!0)||window.addEventListener("DOMMouseScroll",this.handleScroll,!1),this.canDrag==!0){let e=t.pageX-this.mouse_x,s=t.pageY-this.mouse_y,i=this.offset_x+e+"px",l=this.offset_y+s+"px";document.getElementsByClassName("origin-style")[0].style.position="absolute",document.getElementsByClassName("origin-style")[0].style.top=l,document.getElementsByClassName("origin-style")[0].style.left=i}},mouseLeave(t){this.canDrag=!1,window.removeEventListener("mousewheel",this.handleScroll,!0)||window.removeEventListener("DOMMouseScroll",this.handleScroll,!0)},stop(t){this.canDrag=!1},rotateScale(){!this.$refs.singleImg||(this.$refs.singleImg.style.Transform="rotate("+this.currentRotate+"deg)scale("+this.currentScale+")",this.$refs.singleImg.style.webkitTransform="rotate("+this.currentRotate+"deg)scale("+this.currentScale+")",this.$refs.singleImg.style.MozTransform="rotate("+this.currentRotate+"deg)scale("+this.currentScale+")",this.$refs.singleImg.style.msTransform="rotate("+this.currentRotate+"deg)scale("+this.currentScale+")",this.$refs.singleImg.style.transform="rotate("+this.currentRotate+"deg)scale("+this.currentScale+")")},rotateL(){this.currentRotate+=90,this.rotateScale()},rotateR(){this.currentRotate-=90,this.rotateScale()},scale(t){t>=0?(this.currentScale+=.1,this.rotateScale()):(this.currentScale-=.1,this.currentScale<=.1?(this.currentScale=.1,this.rotateScale()):this.rotateScale())},async downloadImg(){if(this.confirmLoading)return;this.confirmLoading=!0;const t=this.$message({message:this.$i18nt("gd.https.downloading","\u6B63\u5728\u4E0B\u8F7D\u4E2D..."),duration:0,iconClass:"el-icon-loading"});let e=document.createElement("a");e.style.display="none",e.href=this.currentImg,e.download=this.fileName,e.click(),setTimeout(()=>{t.close(),this.confirmLoading=!1},1e3)},doEvent(t){const e=t.item.functionName;this[e]&&this[e]()}},mounted(){setTimeout(()=>{this.scrollImg(this.changeColor-5,this.changeColor<5)},500)}};var a=function(){var e=this,s=e._self._c;return s("el-dialog",{directives:[{name:"drag",rawName:"v-drag"}],ref:"dialog",class:e.fullScreen?"pic-preview gd-dialog gd-dialog-fangda":"pic-preview gd-dialog",attrs:{fullscreen:e.fullScreen,visible:e.imgListShow,width:"900px",center:!0,"close-on-click-modal":!1,"append-to-body":!0,"modal-append-to-body":!1,top:"80px","show-close":!1,"destroy-on-close":!0},on:{"update:visible":function(i){e.imgListShow=i},closed:e.closed}},[s("gd-modal-title",{attrs:{slot:"title",title:e.$i18nt("gd.btn.previewPictures","\u9884\u89C8\u56FE\u7247"),fullscreen:e.fullScreen,buttons:e.getButtons,confirmLoading:e.confirmLoading,showClose:!0},on:{toggleFullscreen:e.toggleFullscreen,changeEvent:e.doEvent},slot:"title"}),s("div",{staticClass:"module-center"},[s("div",{style:e.moduleCenter},[s("div",{attrs:{id:"test_3"},on:{mousemove:e.move,mouseup:e.stop,mouseleave:e.mouseLeave}},[s("img",{ref:"singleImg",staticClass:"origin-style",attrs:{src:e.furl},on:{mousedown:e.start}})])]),s("div",{staticClass:"module-center-footer"},[s("div",{staticClass:"allImg"},[s("el-button",{staticClass:"changeImg",on:{click:function(i){return e.handleCurrentChange(-1)}}},[s("i",{staticClass:"el-icon-arrow-left"})]),s("div",{ref:"imgbox",staticClass:"imgbox",class:e.imgList.length>6?"":"min"},e._l(e.imgList,function(i,l){return s("img",{key:i,class:{changeColor:e.changeColor==l},attrs:{src:i},on:{click:function(u){return e.handlerImg(i,l)}}})}),0),s("el-button",{staticClass:"changeImg right",on:{click:function(i){return e.handleCurrentChange(1)}}},[s("i",{staticClass:"el-icon-arrow-right"})])],1),s("div",{staticClass:"ctr-box"},[s("el-button",{attrs:{title:e.$i18nt("gd.table.leftRotation","\u5DE6\u65CB\u8F6C")},on:{click:e.rotateL}},[s("i",{staticClass:"el-icon-refresh-left"})]),s("el-button",{attrs:{title:e.$i18nt("gd.table.rightRotation","\u53F3\u65CB\u8F6C")},on:{click:e.rotateR}},[s("i",{staticClass:"el-icon-refresh-right"})]),s("el-button",{attrs:{title:e.$i18nt("gd.table.reduce","\u7F29\u5C0F")},on:{click:function(i){return e.scale(-1)}}},[s("i",{staticClass:"el-icon-zoom-out"})]),s("el-button",{attrs:{title:e.$i18nt("gd.table.amplify","\u653E\u5927")},on:{click:function(i){return e.scale(1)}}},[s("i",{staticClass:"el-icon-zoom-in"})])],1)])])],1)},c=[],h=o.normalizeComponent(r,a,c,!1,null,"fce88893",null,null);const n=h.exports;n.install=function(t){t.component(n.name,n)};exports.default=n;