epic-designer-gold/dist/uploadImage-H1uFRqnM.js

基于vue3的设计器,可视化开发页面表单

import { defineComponent as T, ref as s, inject as j, watch as g, computed as C, h as o, nextTick as F } from "vue";
import { ElImage as L, ElUpload as k, ElImageViewer as A, ElMessage as n } from "element-plus";
import { a as v, u as I } from "./index-B1s67XDZ.js";
const { t: i } = I(), S = T({
  props: {
    modelValue: {
      type: Array,
      default: () => []
    }
  },
  emits: ["update:modelValue"],
  setup(m, { emit: h, attrs: u }) {
    const a = s([]), x = j("disabled", { value: !1 }), d = s(""), p = s(!1), c = (e) => {
      p.value = e;
    };
    g(a, (e) => {
      h("update:modelValue", e);
    }), g(
      () => m.modelValue,
      (e) => {
        if (e != null && e.length > 0 && a.value != null) {
          if (a.value === e) return;
          a.value.length = 0, a.value.push(...e);
        }
      },
      { deep: !0, immediate: !0 }
    );
    const b = (e, r) => {
      F(() => {
        t ? (a.value = r.filter(
          (l) => (l == null ? void 0 : l.response) && typeof l.response == "object" && "code" in l.response && l.response.code === 200 || l.response.code === 201
        ), t = !1) : a.value = r;
      });
    };
    let t = !1;
    const E = (e, r, l) => {
      e.code !== 200 && (n.error(e.msg || i("uploadFailed")), t = !0), console.log(l);
    }, w = (e, r, l) => {
      n.error(i("uploadFailed")), console.error(e);
    }, y = (e, r) => {
      let { limit: l } = u;
      n.warning(`最多只能上传 ${l} 张图片`);
    }, U = (e) => {
    }, f = C(() => ({
      ...u,
      "file-list": a.value,
      "list-type": "picture-card",
      accept: "image/gif,image/jpeg,image/jpg,image/png,image/svg",
      onBeforeUpload: U,
      onChange: b,
      onSuccess: E,
      onError: w,
      onPreview: V,
      onExceed: y
    })), V = (e) => {
      e.url && (d.value = e.url, c(!0));
    };
    return () => o(
      "div",
      {
        class: "epic-upload-image"
      },
      f.value.disabled || x.value ? {
        default: () => [
          a.value.map(
            (e) => o(L, {
              src: e.url,
              fit: "contain",
              "preview-src-list": [e.url],
              style: {
                width: "156px",
                margin: "0 8px 8px 0",
                height: "156px",
                border: "1px solid #eee",
                "border-radius": "6px"
              }
            })
          )
        ]
      } : {
        default: () => [
          o(
            k,
            {
              ...f.value,
              headers: {
                Authorization: `Bearer ${v.get("Admin-Token")}`,
                "X-Tenant-Gray": v.get("X-Tenant-Gray")
              }
            },
            {
              default: () => [
                o(
                  "div",
                  { style: { "text-align": "center" } },
                  {
                    default: () => [
                      o("span", {
                        class: "icon--epic icon--epic--cloud-upload-outlined mr-2px text-lg"
                      }),
                      o(
                        "div",
                        { class: "ant-upload-text" },
                        { default: () => i("clickToUpload") }
                      )
                    ]
                  }
                )
              ]
            }
          ),
          (() => {
            if (p.value)
              return o(A, {
                urlList: [d.value],
                onClose: () => {
                  c(!1);
                }
              });
          })()
        ]
      }
    );
  }
});
export {
  S as default
};