epic-designer-dev/dist/ui/elementPlus/upload-image/uploadImage.js

基于vue3的设计器,可视化开发页面表单。在epic-designer的基础上新增了字典选择器

import { defineComponent as w, ref as o, watch as m, computed as S, h as a } from "vue";
/* empty css                                     */
import "vuedraggable";
import { getUUID as j } from "../../../utils/src/common/string.js";
import "@vueuse/core";
import "../../../hooks/src/store/index.js";
import "../../../utils/src/manager/pluginManager.js";
import { ElUpload as y, ElImageViewer as I, ElMessage as P } from "element-plus";
const _ = w({
  emits: ["update:modelValue", "change"],
  props: {
    modelValue: {
      default: "",
      type: String
    }
  },
  setup(d, { attrs: f, emit: s }) {
    const r = o([]);
    let l = "";
    const u = o(""), i = o(!1), n = (e) => {
      i.value = e;
    };
    m(
      () => r.value,
      (e) => {
        l = e.filter((t) => t.status === "success").map((t) => t.url).join(","), s("update:modelValue", l), s("change", l);
      }
    ), m(
      () => d.modelValue,
      (e) => {
        if (l !== e) {
          if (e === "") {
            r.value = [];
            return;
          }
          e && r.value && (r.value = e.split(",").map((t) => ({
            name: t,
            status: "success",
            uid: Number(j(10, "number")),
            url: t
          })));
        }
      },
      { deep: !0, immediate: !0 }
    );
    const g = (e, t) => {
      r.value = t;
    }, v = (e) => {
      e.url && (u.value = e.url, n(!0));
    }, h = (e, t, E) => {
      r.value = E.map((p) => {
        var c;
        return {
          ...p,
          url: (c = p.response.data) == null ? void 0 : c.url
        };
      });
    }, U = (e) => {
      P.error("上传失败"), console.error(e);
    }, b = () => {
    }, x = S(() => ({
      ...f,
      accept: "image/gif,image/jpeg,image/jpg,image/png,image/svg",
      onBeforeUpload: b,
      onError: U,
      onPreview: v,
      onRemove: g,
      onSuccess: h,
      "file-list": r.value,
      "list-type": "picture-card"
    }));
    return () => a(
      "div",
      {
        class: "epic-upload-image"
      },
      {
        default: () => [
          a(y, x.value, {
            default: () => [
              a(
                "div",
                { style: { "text-align": "center" } },
                {
                  default: () => [
                    a("span", {
                      class: "icon--epic icon--epic--cloud-upload-outlined mr-2px text-lg"
                    }),
                    a(
                      "div",
                      { class: "ant-upload-text" },
                      { default: () => "点击上传" }
                    )
                  ]
                }
              )
            ]
          }),
          (() => {
            if (i.value)
              return a(I, {
                onClose: () => {
                  n(!1);
                },
                urlList: [u.value]
              });
          })()
        ]
      }
    );
  }
});
export {
  _ as default
};