@web-utils/component 2.7.35 → 2.7.37

package/dist/components/fy-upload/index.mjs

@@ -0,0 +1,591 @@
+import { p as I, e as N } from "../../chunks/event.e4e57889.mjs";
+import { z as B, i as k, g as K } from "../../chunks/util.eca708b6.mjs";
+import { p as F } from "../../chunks/packages.1fc9ccba.mjs";
+import { isBlank as w } from "@web-utils/core";
+import { n as L } from "../../chunks/vueComponentNormalizer.446f5dc4.mjs";
+let d, g;
+const S = {
+  width: 200,
+  height: 200
+}, n = {
+  text: "avueJS",
+  // 文字
+  fontFamily: "microsoft yahei",
+  // 字体
+  color: "#999",
+  // 颜色
+  fontSize: 16,
+  // 大小
+  opacity: 100,
+  // 透明度
+  bottom: 10,
+  // 下边位置
+  right: 10,
+  // 右边位置
+  ratio: 1
+  // 压缩比
+};
+function P(t, e) {
+  const i = new FileReader();
+  i.readAsDataURL(t), i.onload = function(s) {
+    e(s.target.result);
+  };
+}
+function D(t, e = {}, i) {
+  const { text: s, fontFamily: o, color: a, fontSize: r, opacity: p, bottom: b, right: f, ratio: x } = e;
+  v(), P(t, C);
+  function v() {
+    n.text = s || n.text, n.fontFamily = o || n.fontFamily, n.color = a || n.color, n.fontSize = r || n.fontSize, n.opacity = p || n.opacity, n.bottom = b || n.bottom, n.right = f || n.right, n.ratio = x || n.ratio;
+  }
+  function C(y) {
+    const u = new Image();
+    u.src = y, u.onload = function() {
+      const m = u.width, l = u.height;
+      c(m, l), g.drawImage(u, 0, 0, m, l), E(m, l);
+      const _ = document.getElementById("canvas").toDataURL(t.type, n.ratio), O = B(_, t.name);
+      i && i(O);
+    };
+  }
+  function c(y, u) {
+    d = document.getElementById("canvas"), d === null && (d = document.createElement("canvas"), d.id = "canvas", d.className = "avue-canvas", document.body.appendChild(d)), g = d.getContext("2d"), d.width = y, d.height = u;
+  }
+  function E(y, u) {
+    const m = n.text, l = U(m, y, u);
+    g.font = `${l.fontSize}px ${n.fontFamily}`, g.fillStyle = n.color, g.globalAlpha = n.opacity / 100, g.fillText(m, l.x, l.y);
+  }
+  function U(y, u, m) {
+    let l, _;
+    const $ = n.fontSize / S.width * u;
+    n.bottom ? _ = S.height - n.bottom : _ = n.top, n.right ? l = S.width - n.right : l = n.left, g.font = `${n.fontSize}px ${n.fontFamily}`;
+    const z = Number(g.measureText(y).width);
+    l = l - z;
+    const j = l / S.width, R = _ / S.height;
+    return l = j * u, _ = R * m, {
+      x: l,
+      y: _,
+      fontSize: $
+    };
+  }
+}
+const M = (t, e, i) => {
+  const s = JSON.stringify(i);
+  window.__ENV__ === "development" && console && console.log("put_policy = ", s);
+  const o = V(q(s));
+  window.__ENV__ === "development" && console && console.log("encoded = ", o);
+  const r = CryptoJS.HmacSHA1(o, e).toString(CryptoJS.enc.Base64);
+  window.__ENV__ === "development" && console && console.log("encoded_signed=", r);
+  const p = `${t}:${J(r)}:${o}`;
+  return window.__ENV__ === "development" && console && console.log("upload_token=", p), p;
+};
+function q(t) {
+  let e, i, s;
+  e = "";
+  const o = t.length;
+  for (i = 0; i < o; i++)
+    s = t.charCodeAt(i), s >= 1 && s <= 127 ? e += t.charAt(i) : s > 2047 ? (e += String.fromCharCode(224 | s >> 12 & 15), e += String.fromCharCode(128 | s >> 6 & 63), e += String.fromCharCode(128 | s >> 0 & 63)) : (e += String.fromCharCode(192 | s >> 6 & 31), e += String.fromCharCode(128 | s >> 0 & 63));
+  return e;
+}
+const h = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_";
+function V(t) {
+  let e, i, s, o, a, r;
+  for (s = t.length, i = 0, e = ""; i < s; ) {
+    if (o = t.charCodeAt(i++) & 255, i == s) {
+      e += h.charAt(o >> 2), e += h.charAt((o & 3) << 4), e += "==";
+      break;
+    }
+    if (a = t.charCodeAt(i++), i == s) {
+      e += h.charAt(o >> 2), e += h.charAt((o & 3) << 4 | (a & 240) >> 4), e += h.charAt((a & 15) << 2), e += "=";
+      break;
+    }
+    r = t.charCodeAt(i++), e += h.charAt(o >> 2), e += h.charAt((o & 3) << 4 | (a & 240) >> 4), e += h.charAt((a & 15) << 2 | (r & 192) >> 6), e += h.charAt(r & 63);
+  }
+  return e;
+}
+const J = function(t) {
+  return t = t.replace(/\+/g, "-"), t = t.replace(/\//g, "_"), t;
+}, H = (t) => new OSS(t);
+var Q = function() {
+  var t = this, e = t.$createElement, i = t._self._c || e;
+  return i("div", {
+    directives: [{
+      name: "loading",
+      rawName: "v-loading.lock",
+      value: t.loading,
+      expression: "loading",
+      modifiers: {
+        lock: !0
+      }
+    }],
+    staticClass: "avue-upload",
+    attrs: {
+      "element-loading-text": t.loadText
+    }
+  }, [i("ElUpload", {
+    key: t.reload,
+    class: {
+      "avue-upload--list": t.listType === "picture-img",
+      "avue-upload--upload": t.disabled
+    },
+    attrs: {
+      action: t.action,
+      "on-remove": t.handleRemove,
+      accept: t.acceptList,
+      "before-remove": t.beforeRemove,
+      multiple: t.multiple,
+      "on-preview": t.handlePreview,
+      limit: t.limit,
+      "http-request": t.httpUpload,
+      readonly: t.readonly,
+      drag: t.dragFile,
+      "show-file-list": t.isPictureImg ? !1 : t.showFileList,
+      "list-type": t.listType,
+      "on-change": t.handleFileChange,
+      "on-exceed": t.handleExceed,
+      disabled: t.disabled,
+      "file-list": t.fileList
+    },
+    nativeOn: {
+      click: function(s) {
+        return t.handleClick.apply(null, arguments);
+      }
+    },
+    scopedSlots: t._u([{
+      key: "tip",
+      fn: function() {
+        return [i("div", {
+          staticClass: "el-upload__tip",
+          domProps: {
+            innerHTML: t._s(t.tip)
+          }
+        })];
+      },
+      proxy: !0
+    }, {
+      key: "file",
+      fn: function(s) {
+        var o = s.file;
+        return [t.$scopedSlots.default ? t._t("default", null, {
+          file: o
+        }) : t.listType === "picture-card" ? i("span", [t.isMediaType(o.url) ? i(o.type, {
+          tag: "Component",
+          staticClass: "el-upload-list__item-thumbnail",
+          attrs: {
+            src: o.url
+          }
+        }) : i("i", {
+          staticClass: "avue-upload__avatar el-icon-document"
+        }), i("span", {
+          staticClass: "el-upload-list__item-actions"
+        }, [i("span", {
+          staticClass: "el-upload-list__item-preview"
+        }, [i("i", {
+          staticClass: "el-icon-zoom-in",
+          on: {
+            click: function(a) {
+              return a.stopPropagation(), t.handlePreview(o);
+            }
+          }
+        })]), i("span", {
+          staticClass: "el-upload-list__item-delete"
+        }, [t.disabled ? t._e() : i("i", {
+          staticClass: "el-icon-delete",
+          on: {
+            click: function(a) {
+              return a.stopPropagation(), t.handleRemove(o);
+            }
+          }
+        })])])], 1) : t.listType === "picture" ? i("span", {
+          on: {
+            click: function(a) {
+              return a.stopPropagation(), t.handlePreview(o);
+            }
+          }
+        }, [i(o.type, {
+          tag: "Component",
+          staticClass: "el-upload-list__item-thumbnail",
+          attrs: {
+            src: o.url
+          }
+        }), i("a", {
+          staticClass: "el-upload-list__item-name"
+        }, [i("i", {
+          staticClass: "el-icon-document"
+        }), t._v(" " + t._s(o.name) + " ")]), i("i", {
+          staticClass: "el-icon-close",
+          on: {
+            click: function(a) {
+              return a.stopPropagation(), t.handleRemove(o);
+            }
+          }
+        })], 1) : i("span", {
+          on: {
+            click: function(a) {
+              return a.stopPropagation(), t.handlePreview(o);
+            }
+          }
+        }, [i("a", {
+          staticClass: "el-upload-list__item-name"
+        }, [i("i", {
+          staticClass: "el-icon-document"
+        }), t._v(" " + t._s(o.name) + " ")]), t.disabled ? t._e() : i("i", {
+          staticClass: "el-icon-close",
+          on: {
+            click: function(a) {
+              return a.stopPropagation(), t.handleRemove(o);
+            }
+          }
+        })])];
+      }
+    }], null, !0)
+  }, [t.listType === "picture-card" ? [i("i", {
+    staticClass: "el-icon-plus"
+  })] : t.listType === "picture-img" ? [t.$scopedSlots.default ? t._t("default", null, {
+    file: {
+      url: t.imgUrl
+    }
+  }) : [t.isMediaType(t.imgUrl) ? i(t.isMediaType(t.imgUrl), {
+    tag: "Component",
+    staticClass: "avue-upload__avatar",
+    attrs: {
+      src: t.imgUrl
+    },
+    on: {
+      mouseover: function(s) {
+        t.menu = !0;
+      }
+    }
+  }) : t.imgUrl ? i("i", {
+    staticClass: "avue-upload__avatar el-icon-document",
+    on: {
+      mouseover: function(s) {
+        t.menu = !0;
+      }
+    }
+  }) : i("i", {
+    staticClass: "el-icon-plus avue-upload__avatar"
+  }), t.menu ? i("div", {
+    staticClass: "el-upload-list__item-actions avue-upload__menu",
+    on: {
+      mouseover: function(s) {
+        t.menu = !0;
+      },
+      mouseout: function(s) {
+        t.menu = !1;
+      },
+      click: function(s) {
+        s.stopPropagation();
+      }
+    }
+  }, [i("i", {
+    staticClass: "el-icon-zoom-in",
+    on: {
+      click: function(s) {
+        return s.stopPropagation(), t.handlePreview({
+          url: t.imgUrl
+        });
+      }
+    }
+  }), t.disabled ? t._e() : i("i", {
+    staticClass: "el-icon-delete",
+    on: {
+      click: function(s) {
+        return s.stopPropagation(), t.handleDelete(t.imgUrl);
+      }
+    }
+  })]) : t._e()]] : t.dragFile ? [i("i", {
+    staticClass: "el-icon-upload"
+  }), i("div", {
+    staticClass: "el-upload__text"
+  }, [i("em", [t._v(t._s(t.fileText || "上传"))])])] : [i("ElButton", {
+    attrs: {
+      icon: "el-icon-upload",
+      size: t.size,
+      type: "primary"
+    }
+  }, [t._v(" " + t._s(t.fileText || "上传") + " ")])]], 2)], 1);
+}, W = [];
+function A(t, e = "") {
+  return e.match(/(^http:\/\/|^https:\/\/|^\/\/|data:image\/)/) ? e : t + e;
+}
+const X = {
+  name: "FyUpload",
+  mixins: [I, N],
+  props: {
+    qiniu: Object,
+    ali: Object,
+    data: {
+      type: Object,
+      default: () => ({})
+    },
+    showFileList: {
+      type: Boolean,
+      default: !0
+    },
+    fileText: String,
+    fileType: {
+      type: String
+    },
+    oss: {
+      type: String
+    },
+    limit: {
+      type: Number
+    },
+    headers: {
+      type: Object,
+      default: () => ({})
+    },
+    accept: {
+      type: [String, Array],
+      default: ""
+    },
+    canvasOption: {
+      type: Object,
+      default: () => ({})
+    },
+    cropperOption: {
+      type: Object,
+      default: () => ({})
+    },
+    fileSize: {
+      type: Number
+    },
+    dragFile: {
+      type: Boolean,
+      default: !1
+    },
+    drag: {
+      type: Boolean,
+      default: !1
+    },
+    loadText: {
+      type: String,
+      default: "Loading..."
+    },
+    action: {
+      type: String,
+      default: ""
+    },
+    uploadBefore: Function,
+    uploadAfter: Function,
+    uploadDelete: Function,
+    uploadPreview: Function,
+    uploadError: Function,
+    uploadExceed: Function,
+    httpRequest: Function
+  },
+  data() {
+    return {
+      res: "",
+      loading: !1,
+      menu: !1,
+      reload: Math.random()
+    };
+  },
+  computed: {
+    isObject() {
+      return typeof this.text[0] == "object";
+    },
+    acceptList() {
+      return Array.isArray(this.accept) ? this.accept.join(",") : this.accept;
+    },
+    homeUrl() {
+      return this.propsHttp.home || "";
+    },
+    fileName() {
+      return this.propsHttp.fileName || "file";
+    },
+    isAliOss() {
+      return this.oss === "ali";
+    },
+    isQiniuOss() {
+      return this.oss === "qiniu";
+    },
+    isPictureImg() {
+      return this.listType === "picture-img";
+    },
+    // 单个头像图片
+    imgUrl() {
+      return w(this.text) ? null : A(this.homeUrl, this.text[0]);
+    },
+    fileList() {
+      const t = [];
+      return (this.text || []).forEach((e, i) => {
+        if (e) {
+          const s = this.isObject ? e[this.labelKey] : e.substring(e.lastIndexOf("/") + 1);
+          let o = this.isObject ? e[this.valueKey] : e;
+          o = A(this.homeUrl, o), t.push({
+            uid: `${i}`,
+            status: "done",
+            type: this.isMediaType(o),
+            name: s,
+            url: o
+          });
+        }
+      }), t;
+    }
+  },
+  mounted() {
+    this.drag && this.setSort();
+  },
+  methods: {
+    isMediaType(t) {
+      return k(t, this.fileType);
+    },
+    setSort() {
+      if (!window.Sortable) {
+        F.logs("Sortable");
+        return;
+      }
+      const t = this.$el.querySelectorAll(".avue-upload > ul")[0];
+      window.Sortable.create(t, {
+        animation: 100,
+        onEnd: (e) => {
+          const i = this.text.splice(e.oldIndex, 1)[0];
+          this.text.splice(e.newIndex, 0, i), this.reload = Math.random(), this.$nextTick(() => this.setSort());
+        }
+      });
+    },
+    handleSuccess(t) {
+      if (this.isPictureImg)
+        this.text.splice(0, 1, t[this.urlKey]);
+      else if (this.isObject) {
+        const e = {};
+        e[this.labelKey] = t[this.nameKey], e[this.valueKey] = t[this.urlKey], this.text.push(e);
+      } else
+        this.text.push(t[this.urlKey]);
+    },
+    handleRemove(t) {
+      this.beforeRemove(t).then(() => {
+        this.delete(t);
+      });
+    },
+    handleError(t) {
+      this.uploadError && this.uploadError(t, this.column);
+    },
+    delete(t) {
+      (this.text || []).forEach((e, i) => {
+        const s = this.isObject ? e[this.valueKey] : e;
+        A(this.homeUrl, s) === t.url && this.text.splice(i, 1);
+      });
+    },
+    show(t) {
+      this.loading = !1, this.res = t || this.res, this.handleSuccess(this.res);
+    },
+    hide(t) {
+      this.loading = !1, t && this.handleError(t);
+    },
+    handleFileChange(t, e) {
+      e.splice(e.length - 1, 1);
+    },
+    httpUpload(t) {
+      if (typeof this.httpRequest == "function") {
+        this.httpRequest(t);
+        return;
+      }
+      this.loading = !0;
+      let e = t.file;
+      const i = e.size / 1024;
+      if (!w(i) && i > this.fileSize) {
+        this.hide("文件太大不符合");
+        return;
+      }
+      const s = Object.assign(this.headers, { "Content-Type": "multipart/form-data" });
+      let o = {}, a = {};
+      const r = new FormData(), p = () => {
+        const f = (x) => {
+          let v = this.action;
+          for (const c in this.data)
+            r.append(c, this.data[c]);
+          const C = x || e;
+          if (r.append(this.fileName, C), this.isQiniuOss) {
+            if (!window.CryptoJS) {
+              F.logs("CryptoJS"), this.hide();
+              return;
+            }
+            o = this.qiniu || this.$AVUE.qiniu;
+            const c = M(o.AK, o.SK, {
+              scope: o.scope,
+              deadline: new Date().getTime() + o.deadline * 3600
+            });
+            r.append("token", c), v = o.bucket;
+          } else if (this.isAliOss) {
+            if (!window.OSS) {
+              F.logs("AliOSS"), this.hide();
+              return;
+            }
+            o = this.ali || this.$AVUE.ali, a = H(o);
+          }
+          (() => this.isAliOss ? a.put(C.name, C, {
+            headers: this.headers
+          }) : this.$axios.post(v, r, { headers: s }))().then((c) => {
+            this.res = {}, this.isQiniuOss && (c.data.key = o.url + c.data.key), this.res = K(this.isAliOss ? c : c.data, this.resKey), typeof this.uploadAfter == "function" ? this.uploadAfter(this.res, this.show, this.hide, this.column) : this.show();
+          }).catch((c) => {
+            this.hide(c);
+          });
+        };
+        typeof this.uploadBefore == "function" ? this.uploadBefore(e, f, this.hide, this.column) : f();
+      };
+      if (k(e.name) !== "img") {
+        p();
+        return;
+      }
+      const b = () => {
+        w(this.canvasOption) ? p() : D(e, this.canvasOption, (f) => {
+          e = f, p();
+        });
+      };
+      w(this.cropperOption) ? b() : P(e, (f) => {
+        const x = Object.assign(this.cropperOption, {
+          img: f,
+          type: "file",
+          callback: (v) => {
+            e = v, b();
+          },
+          cancel: () => {
+            this.loading = !1;
+          }
+        });
+        this.$ImageCropper(x);
+      });
+    },
+    handleExceed(t, e) {
+      this.uploadExceed && this.uploadExceed(this.limit, t, e, this.column);
+    },
+    handlePreview(t) {
+      const e = () => {
+        const i = this.fileList.findIndex((s) => s.url === t.url);
+        this.$ImagePreview(this.fileList, i);
+      };
+      typeof this.uploadPreview == "function" ? this.uploadPreview(t, this.column, e) : e();
+    },
+    handleDelete(t) {
+      this.beforeRemove(t).then(() => {
+        this.text = [], this.menu = !1;
+      });
+    },
+    beforeRemove(t) {
+      return typeof this.uploadDelete == "function" ? this.uploadDelete(t, this.column) : Promise.resolve();
+    }
+  }
+}, T = {};
+var Y = /* @__PURE__ */ L(
+  X,
+  Q,
+  W,
+  !1,
+  G,
+  null,
+  null,
+  null
+);
+function G(t) {
+  for (let e in T)
+    this[e] = T[e];
+}
+const st = /* @__PURE__ */ function() {
+  return Y.exports;
+}();
+export {
+  st as default
+};

package/dist/components/fy-upload/style.css

@@ -1,60 +1 @@
-/* 全局公共颜色配置 */ /* 全局公共尺寸配置 */
-/* 应用头部高度 */
-/* 页面宽度 */
-/* 侧栏宽度 */
-/* 标签高度 */
-/* 页面头部工具条高度 */
-.avue-upload--upload .el-upload, .avue-upload--upload .el-upload__tip {
-  display: none;
-}
-.avue-upload--upload .el-upload--picture-img {
-  display: inline-block;
-}
-.avue-upload--upload .el-upload-list {
-  margin-top: -6px;
-}
-.avue-upload--list .el-upload {
-  background-color: #fbfdff;
-  border: 1px dashed #c0ccda;
-  border-radius: 6px;
-  cursor: pointer;
-  position: relative;
-  overflow: hidden;
-}
-.avue-upload--list .el-upload:hover {
-  border-color: #409eff;
-}
-.avue-upload__dialog .el-dialog__header {
-  display: none;
-}
-.avue-upload__dialog .el-dialog__body {
-  padding: 10px;
-  display: flex;
-  justify-content: center;
-}
-.avue-upload__menu {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1024;
-}
-.avue-upload__menu i {
-  color: #fff;
-  margin: 0 8px;
-  font-size: 20px;
-}
-.avue-upload__avatar {
-  font-size: 28px;
-  color: #8c939d;
-  width: 148px;
-  height: 148px;
-  line-height: 148px;
-  text-align: center;
-  display: block;
-}
+.avue-upload--upload .el-upload,.avue-upload--upload .el-upload__tip{display:none}.avue-upload--upload .el-upload--picture-img{display:inline-block}.avue-upload--upload .el-upload-list{margin-top:-6px}.avue-upload--list .el-upload{background-color:#fbfdff;border:1px dashed #c0ccda;border-radius:6px;cursor:pointer;position:relative;overflow:hidden}.avue-upload--list .el-upload:hover{border-color:#409eff}.avue-upload__dialog .el-dialog__header{display:none}.avue-upload__dialog .el-dialog__body{padding:10px;display:flex;justify-content:center}.avue-upload__menu{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1024}.avue-upload__menu i{color:#fff;margin:0 8px;font-size:20px}.avue-upload__avatar{font-size:28px;color:#8c939d;width:148px;height:148px;line-height:148px;text-align:center;display:block}