epic-designer/dist/ui/elementPlus/upload-file/uploadFile.js

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

import { defineComponent as v, ref as U, watch as u, computed as E, h as o } from "vue";
/* empty css                                     */
import "vuedraggable";
import { getFileNameByUrl as S, getUUID as x } from "../../../utils/src/common/string.js";
import "@vueuse/core";
import "../../../hooks/src/store/index.js";
import { ElUpload as y, ElButton as B, ElMessage as C } from "element-plus";
const M = v({
  emits: ["update:modelValue", "change"],
  props: {
    modelValue: {
      default: "",
      type: String
    }
  },
  setup(p, { attrs: i, emit: a }) {
    const t = U([]);
    let r = "";
    u(
      () => t.value,
      (e) => {
        console.log("list", e), r = e.filter((l) => l.status === "success").map((l) => l.url).join(","), a("update:modelValue", r), a("change", r);
      }
    ), u(
      () => p.modelValue,
      (e) => {
        if (r !== e) {
          if (e === "") {
            t.value = [];
            return;
          }
          e !== null && t.value !== null && (t.value = e.split(",").map((l) => ({
            id: x(),
            name: S(l),
            status: "success",
            url: l
          })));
        }
      },
      { immediate: !0 }
    );
    const c = () => {
    }, d = () => {
    }, m = (e, l, h) => {
      t.value = h.map((n) => {
        var s;
        return {
          ...n,
          url: (s = n.response.data) == null ? void 0 : s.url
        };
      });
    }, f = (e) => {
      C.error("上传失败"), console.error(e);
    }, g = E(() => ({
      ...i,
      onBeforeUpload: d,
      onChange: c,
      onError: f,
      onSuccess: m,
      "file-list": t.value
    }));
    return () => o("div", null, {
      default: () => [
        o(y, g.value, {
          default: () => [
            o(
              B,
              {},
              {
                default: () => [
                  o("span", {
                    class: "icon--epic icon--epic--cloud-upload-outlined text-lg",
                    style: { "margin-right": "2px" }
                  }),
                  o("span", null, { default: () => "上传文件" })
                ]
              }
            )
          ]
        })
      ]
    });
  }
});
export {
  M as default
};