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

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

import { defineComponent as h, ref as g, watch as o, h as a, nextTick as U } from "vue";
/* empty css                                     */
import "vuedraggable";
import { getFileNameByUrl as x, getUUID as N } from "../../../utils/src/common/string.js";
import "@vueuse/core";
import "../../../hooks/src/store/index.js";
import { NUpload as S, NButton as v } from "naive-ui";
const w = h({
  emits: ["update:modelValue", "change"],
  props: {
    modelValue: {
      default: "",
      type: String
    }
  },
  setup(p, { attrs: s, emit: u }) {
    const l = g([]);
    let i = "";
    o(
      () => l.value,
      (t) => {
        i = t.filter((e) => e.status === "finished").map((e) => e.url).join(","), u("update:modelValue", i), u("change", i);
      }
    ), o(
      () => p.modelValue,
      (t) => {
        if (i !== t) {
          if (t === "") {
            l.value = [];
            return;
          }
          t !== null && l.value !== null && (l.value = t.split(",").map((e) => ({
            id: N(),
            name: x(e),
            status: "finished",
            url: e
          })));
        }
      },
      { immediate: !0 }
    );
    function d(t) {
      U(() => {
        l.value = t;
      });
    }
    const f = () => {
    }, c = ({ event: t, file: e }) => {
      var n;
      const r = t == null ? void 0 : t.target, m = JSON.parse((r == null ? void 0 : r.response) ?? "{}");
      e.url = (n = m.data) == null ? void 0 : n.url;
    };
    return () => a("div", null, {
      default: () => [
        a(
          S,
          {
            ...s,
            "default-upload": !0,
            onError: f,
            onFinish: c,
            "file-list": l.value,
            "onUpdate:file-list": d
          },
          {
            default: () => [
              a(
                v,
                {},
                {
                  default: () => [
                    a("span", {
                      class: "icon--epic icon--epic--cloud-upload-outlined text-lg",
                      style: { "margin-right": "2px" }
                    }),
                    a("span", null, { default: () => "上传文件" })
                  ]
                }
              )
            ]
          }
        )
      ]
    });
  }
});
export {
  w as default
};