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

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

import { defineComponent as V, ref as t, 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 i } from "element-plus";
import { a as I, u as P } from "./index-B1s67XDZ.js";
const { t: n } = P(), $ = V({
  props: {
    modelValue: {
      type: Array,
      default: () => []
    }
  },
  emits: ["update:modelValue"],
  setup(v, { emit: m, attrs: u }) {
    const a = t([]), h = j("disabled", { value: !1 }), d = t(""), p = t(!1), c = (e) => {
      p.value = e;
    };
    g(a, (e) => {
      m("update:modelValue", e);
    }), g(
      () => v.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 x = (e, r) => {
      F(() => {
        s ? (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
        ), s = !1) : a.value = r;
      });
    };
    let s = !1;
    const b = (e, r, l) => {
      e.code !== 200 && (i.error(e.msg || n("uploadFailed")), s = !0), console.log(l);
    }, E = (e, r, l) => {
      i.error(n("uploadFailed")), console.error(e);
    }, w = (e, r) => {
      let { limit: l } = u;
      i.warning(`最多只能上传 ${l} 张图片`);
    }, y = (e) => {
    }, f = C(() => ({
      ...u,
      "file-list": a.value,
      "list-type": "picture-card",
      accept: "image/gif,image/jpeg,image/jpg,image/png,image/svg",
      onBeforeUpload: y,
      onChange: x,
      onSuccess: b,
      onError: E,
      onPreview: U,
      onExceed: w
    })), U = (e) => {
      e.url && (d.value = e.url, c(!0));
    };
    return () => o(
      "div",
      {
        class: "epic-upload-image"
      },
      f.value.disabled || h.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 ${I.get("Admin-Token")}` }
            },
            {
              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: () => n("clickToUpload") })
                    ]
                  }
                )
              ]
            }
          ),
          (() => {
            if (p.value)
              return o(A, {
                urlList: [d.value],
                onClose: () => {
                  c(!1);
                }
              });
          })()
        ]
      }
    );
  }
});
export {
  $ as default
};