sapit-ui-plus/lib/js/SFileUpload.js

import { ref as c, watch as j, onMounted as z, resolveComponent as w, openBlock as s, createElementBlock as u, withModifiers as L, toDisplayString as r, createCommentVNode as p, createVNode as o, withCtx as C, createTextVNode as D, createElementVNode as m } from "vue";
import { l as E, W as I, U as M } from "./index2.js";
import { a as H, d as V, p as G } from "./upload.js";
import { _ as K } from "./index4.js";
const W = { class: "s-file-upload-common" }, X = {
  key: 0,
  class: "head"
}, J = {
  key: 0,
  class: "head"
}, Q = { key: 1 }, Y = { class: "preview-content" }, Z = ["src"], _ = {
  __name: "SFileUpload",
  props: {
    /**
     * 文件列表
     * @list
     */
    list: {
      type: Array,
      default: () => []
    },
    /**
     * 标题
     * @label
     */
    label: {
      type: String,
      default: ""
    },
    /**
     * 只读
     * @readonly
     */
    readonly: {
      type: Boolean,
      default: !1
    },
    /**
     * 是否显示删除
     * @delete
     */
    showRemoveIcon: {
      type: Boolean,
      default: !1
    },
    /**
     * 是否显示新增
     * @isAdd
     */
    isAdd: {
      type: Boolean,
      default: !0
    },
    /**
     * 文件类型
     * @accept
     */
    accept: {
      type: String,
      default: ""
    },
    // 展示类型 picture | picture-card 注：规范内不设定text上传类型
    listType: {
      type: String,
      default: "picture"
    },
    maxFileCount: {
      type: Number,
      default: 3
    },
    sizeLimit: {
      type: Number,
      default: 50
    },
    businessTableName: {
      type: String,
      default: "sapit-ui-plus-components-upload"
    },
    businessKey: {
      type: String,
      default: void 0
    },
    showUploadList: {
      type: Boolean,
      default: !0
    }
  },
  emits: ["handChange"],
  setup(l, { emit: U }) {
    const k = U, v = l, n = c([]), f = c(!1), y = c(""), h = c(""), a = c(0);
    j(
      () => v.list,
      (e) => {
        e && e.length && (n.value = e);
      },
      { immediate: !0 }
    );
    const T = (e) => {
      const t = e.size / 1024 / 1024 < v.sizeLimit;
      return t || I.warn({
        key: "only-you",
        message: window.$l("提醒"),
        description: `${window.$l("文件不能大于")}${v.sizeLimit}MB！`
      }), t;
    }, $ = (e) => {
      n.value = e.fileList, k("handChange", n.value);
    }, R = ({ onSuccess: e, onError: t, file: i }) => {
      H(i, v.businessTableName, i.uid).then((d) => {
        e(d);
      }).catch(() => {
        n.value.splice(n.value.length - 1, 1), t();
      });
    }, B = (e) => {
      const t = document.createElement("a");
      t.href = V(e.uid), t.download = "test", t.click();
    }, F = (e) => {
      a.value = n.value.findIndex((t) => t.uid === e.uid), f.value = !0, h.value = e.name || window.$l("预览"), y.value = e.url || e.thumbUrl;
    }, N = () => {
      f.value = !1;
    }, x = (e) => {
      var t;
      a.value = a.value + e < 0 ? 0 : a.value + e > n.value.length - 1 ? n.value.length - 1 : a.value + e, (t = n.value[a.value]) != null && t.thumbUrl ? (h.value = n.value[a.value].name || window.$l("预览"), y.value = n.value[a.value].thumbUrl) : O(n.value[a.value]);
    }, O = (e) => {
      if (e.type.includes("office")) {
        const t = window.open("", "");
        t.location = G(e.uid + "/" + e.name);
      } else if (e.type.includes("text"))
        S(e.url);
      else if (e.type.includes("pdf") || e.type.includes("png") || e.type.includes("gif") || e.type.includes("jpeg") || e.type.includes("bmp") || e.type.includes("ico") || e.type.includes("webp")) {
        const t = window.open("", "");
        t.location = e.url;
      } else
        this.$notification.warning({
          message: window.$l("不支持此文件类型")
        });
    }, S = (e) => {
      const t = new XMLHttpRequest();
      t.open("GET", e, !0), t.responseType = "blob", t.setRequestHeader("Content-Type", "application/json"), t.onload = function() {
        const i = new Blob([t.response], { type: "application/json;charset=utf-8" }), d = window.URL.createObjectURL(i), b = window.open("", "");
        b.location = d;
      }, t.send();
    };
    return z(() => {
    }), (e, t) => {
      const i = w("PlusOutlined"), d = M, b = K, A = w("LeftOutlined"), q = w("RightOutlined"), P = w("s-modal");
      return s(), u("div", W, [
        l.isAdd && l.listType === "picture-card" && n.value.length <= l.maxFileCount ? (s(), u("div", X, [
          l.label ? (s(), u("div", {
            key: 0,
            class: "label",
            onClick: t[0] || (t[0] = L(() => {
            }, ["stop"]))
          }, r(l.label), 1)) : p("", !0)
        ])) : p("", !0),
        o(b, {
          accept: l.accept,
          "list-type": l.listType,
          "file-list": n.value,
          disabled: l.readonly,
          maxCount: l.maxFileCount,
          multiple: l.maxFileCount > 1,
          "before-upload": T,
          "custom-request": R,
          onChange: $,
          onPreview: F,
          onDownload: B,
          showUploadList: l.showUploadList
        }, {
          default: C(() => [
            l.isAdd && l.listType === "picture" && n.value.length <= l.maxFileCount ? (s(), u("div", J, [
              l.label ? (s(), u("div", {
                key: 0,
                class: "label",
                onClick: t[1] || (t[1] = L(() => {
                }, ["stop"]))
              }, r(l.label), 1)) : p("", !0),
              o(d, null, {
                default: C(() => [
                  o(i),
                  D(" " + r(e.$l("点击上传")), 1)
                ]),
                _: 1
              })
            ])) : p("", !0),
            l.isAdd && l.listType === "picture-card" && n.value.length <= l.maxFileCount ? (s(), u("span", Q, [
              o(i),
              m("div", null, r(e.$l("点击上传")), 1)
            ])) : p("", !0)
          ]),
          _: 1
        }, 8, ["accept", "list-type", "file-list", "disabled", "maxCount", "multiple", "showUploadList"]),
        o(P, {
          value: f.value,
          "onUpdate:value": t[4] || (t[4] = (g) => f.value = g),
          title: h.value,
          onHandCancel: N,
          width: "800px"
        }, {
          default: C(() => [
            m("div", Y, [
              m("div", {
                class: "prev",
                onClick: t[2] || (t[2] = (g) => x(-1))
              }, [
                o(A)
              ]),
              m("img", {
                alt: "example",
                class: "view",
                src: y.value
              }, null, 8, Z),
              m("div", {
                class: "next",
                onClick: t[3] || (t[3] = (g) => x(1))
              }, [
                o(q)
              ])
            ])
          ]),
          _: 1
        }, 8, ["value", "title"])
      ]);
    };
  }
}, ae = /* @__PURE__ */ E(_, [["__scopeId", "data-v-bc90ac97"]]);
export {
  ae as default
};