@dt-frames/ui 3.0.1 → 4.0.1

package/es/components/upload/index.js

@@ -1,664 +0,0 @@
-import { Button, Upload, Image } from "ant-design-vue/es";
-import { computed, unref, ref, watch, defineComponent, openBlock, createBlock, withCtx, createVNode, createElementVNode, toRefs, createElementBlock, mergeProps, isRef, createSlots, normalizeClass, createTextVNode, toDisplayString, normalizeStyle, createCommentVNode, Fragment, renderList, renderSlot, normalizeProps, guardReactiveProps } from "vue";
-import { takeRight, omit } from "lodash-es";
-import { isString, useAppStore, message, buildUUID, dispatchResize, isFunction, http, HttpContentTypeEnum } from "@dt-frames/core";
-import { useModal, DtModal, useModalOut } from "../modal";
-import { DtIframe } from "../iframe";
-import { Icon } from "../icons";
-const basicProps = {
-  uploadUrl: {
-    type: Object
-  },
-  downloadUrl: {
-    type: Object
-  },
-  buttonText: {
-    type: String,
-    default: "\u6587\u4EF6\u4E0A\u4F20"
-  },
-  preIcon: {
-    type: String,
-    default: "ic:baseline-file-upload"
-  },
-  data: {
-    type: Object,
-    default: {}
-  },
-  fieldNames: {
-    type: Object,
-    default: {}
-  },
-  fileName: {
-    type: String,
-    default: "file"
-  },
-  accept: {
-    type: Array,
-    default: () => []
-  },
-  beforeUpload: {
-    type: Function
-  },
-  customRequest: {
-    type: Function
-  },
-  disabled: {
-    type: Boolean,
-    default: false
-  },
-  defaultFiles: {
-    type: Object,
-    default: () => []
-  },
-  headers: {
-    type: Object
-  },
-  listType: {
-    type: String,
-    default: "text"
-  },
-  maxCount: {
-    type: Number
-  },
-  maxSize: {
-    type: [Number, String],
-    default: Infinity
-  },
-  helpText: {
-    type: String,
-    default: ""
-  },
-  multiple: {
-    type: Boolean,
-    default: false
-  },
-  onChange: {
-    type: Function
-  },
-  extraParams: {
-    type: Object,
-    default: () => ({})
-  },
-  emitSnippet: {
-    type: Boolean,
-    default: false
-  },
-  showView: {
-    type: Boolean,
-    default: true
-  },
-  showDownload: {
-    type: Boolean,
-    default: true
-  },
-  showDelete: {
-    type: Boolean,
-    default: true
-  }
-};
-function getFileSize(size) {
-  if (!size) {
-    return "\u672A\u77E5\u5927\u5C0F";
-  }
-  if (isString(size)) {
-    return size;
-  }
-  if (size >= 1073741824) {
-    return size % 1073741824 === 0 ? size / 1073741824 + "G" : Math.trunc(size / 1073741824) + "G";
-  } else if (size >= 1048576) {
-    return size % 1048576 === 0 ? size / 1048576 + "MB" : Math.trunc(size / 1048576) + "MB";
-  } else if (size >= 1024) {
-    return size % 1024 === 0 ? size / 1024 + "KB" : Math.trunc(size / 1024) + "KB";
-  }
-  return size + "B";
-}
-function useFile({
-  fileListRef = ref([]),
-  acceptRef,
-  helpTextRef,
-  maxCountRef,
-  maxSizeRef,
-  fieldNamesRef
-}) {
-  const getAppConf = useAppStore().appConf;
-  const getAccept = computed(() => {
-    const accept = unref(acceptRef);
-    return accept && accept.length > 0 ? accept : [];
-  });
-  const getStringAccept = computed(() => {
-    return unref(getAccept).map((item) => {
-      if (item.indexOf("/") > 0 || item.startsWith(".")) {
-        return item;
-      }
-      return `.${item}`;
-    }).join(",");
-  });
-  const getHelpText = computed(() => {
-    const helpText = unref(helpTextRef);
-    if (helpText) {
-      return helpText;
-    }
-    const helpTexts = [];
-    const accept = unref(acceptRef);
-    if (accept.length > 0) {
-      helpTexts.push(`\u652F\u6301${accept.join("\u3001").replaceAll(".", "")}\u683C\u5F0F`);
-    }
-    const maxSize = unref(maxSizeRef);
-    if (maxSize && maxSize !== Infinity) {
-      helpTexts.push(`\u4E0D\u8D85\u8FC7${isString(maxSize) ? maxSize : maxSize + "M"}`);
-    }
-    const maxNumber = unref(maxCountRef);
-    if (maxNumber && maxNumber !== Infinity) {
-      helpTexts.push(`\u6700\u591A\u53EF\u4E0A\u4F20${maxNumber}\u4E2A\u6587\u4EF6`);
-    }
-    return helpTexts.join(", ");
-  });
-  const setFile = (file) => {
-    const _downloadUrl = getAppConf.pages?.downloadUrl;
-    const { fileName, fileType, fileId, filePath, fileSize } = unref(fieldNamesRef);
-    const url = file[filePath] || `${getAppConf.http?.baseUrl}${isString(_downloadUrl) ? _downloadUrl : _downloadUrl.api}?id=${file[fileId]}`;
-    return {
-      ...file,
-      name: file[fileName],
-      fileType: file[fileType] || takeRight(file[fileName].split("."))[0],
-      status: "done",
-      fileSize: getFileSize(file[fileSize]),
-      uid: file[fileId],
-      url,
-      filePath: url
-    };
-  };
-  const fileList = ref(unref(fileListRef).map((it) => setFile(it)));
-  function beforeUpload(file) {
-    const { size } = file;
-    const maxSize = unref(maxSizeRef);
-    let _size = 0;
-    if (isString(maxSize)) {
-      const mSize = parseInt(maxSize);
-      const fileType = maxSize.toUpperCase().replaceAll(/[0-9]/g, "");
-      switch (fileType) {
-        case "KB":
-        case "K":
-          _size = mSize / 1024;
-          break;
-        case "MB":
-        case "M":
-          _size = mSize;
-          break;
-        case "GB":
-        case "G":
-          _size = mSize * 1024;
-          break;
-        default:
-          _size = mSize / 1024 / 1024;
-      }
-    } else {
-      _size = maxSize;
-    }
-    if (maxSize && size / 1024 / 1024 >= _size) {
-      message.error(`\u53EA\u80FD\u4E0A\u4F20\u4E0D\u8D85\u8FC7${isString(maxSize) ? maxSize : _size + "MB"}\u7684\u6587\u4EF6!`);
-      return;
-    }
-    const maxNumber = unref(maxCountRef);
-    if (maxNumber && maxNumber !== Infinity && unref(fileList).length >= maxNumber) {
-      message.error(`\u6700\u591A\u53EF\u4E0A\u4F20${maxNumber}\u4E2A\u6587\u4EF6!`);
-    }
-  }
-  watch(
-    () => unref(fileListRef),
-    (v) => {
-      fileList.value = v.map((it) => setFile(it));
-    }
-  );
-  return {
-    getAccept,
-    getStringAccept,
-    getHelpText,
-    fileList,
-    setFile,
-    beforeUpload
-  };
-}
-const getFileThumb = (fileType) => {
-  switch (fileType) {
-    case "pptx":
-    case "ppt":
-      return "ui-ppt";
-    case "docx":
-    case "doc":
-      return "ui-docx";
-    case "pdf":
-      return "ui-pdf";
-    case "jpg":
-    case "jpeg":
-    case "png":
-    case "bmp":
-    case "ofd":
-    case "gif":
-      return "ui-jpg";
-    case "xls":
-    case "xlsx":
-    case "csv":
-      return "ui-exl";
-    case "txt":
-      return "ui-txt";
-    case "rar":
-    case "zip":
-    case "7z":
-    case "tar":
-    case "gz":
-      return "ui-rar";
-    default:
-      return "ui-blank";
-  }
-};
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
-  __name: "PdfView",
-  setup(__props) {
-    const exeReduce = ref(233);
-    const pdfUrlRef = ref();
-    const [register] = useModal({
-      width: "70%",
-      title: (data) => `\u9644\u4EF6\u9884\u89C8 - ${data.fileName}`,
-      bodyStyle: {
-        padding: 0
-      },
-      wrapClassName: "dt-pdf",
-      maskClosable: false,
-      footer: null
-    }, (data) => {
-      pdfUrlRef.value = data.url;
-    });
-    function toggleFullscreen(isFullscreen) {
-      exeReduce.value = isFullscreen ? 55 : 233;
-    }
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(DtModal), {
-        onRegister: unref(register),
-        onToggleFullscreen: toggleFullscreen
-      }, {
-        default: withCtx(() => [
-          createVNode(unref(DtIframe), {
-            src: unref(pdfUrlRef),
-            exeReduce: unref(exeReduce)
-          }, null, 8, ["src", "exeReduce"])
-        ]),
-        _: 1
-      }, 8, ["onRegister"]);
-    };
-  }
-});
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
-  __name: "WordView",
-  setup(__props) {
-    const ID = `word-view-${buildUUID()}`;
-    const domRef = ref(null);
-    const [register] = useModal({
-      width: "900px",
-      title: (data) => `\u9644\u4EF6\u9884\u89C8 - ${data.fileName}`,
-      bodyStyle: {
-        padding: 0
-      },
-      wrapClassName: "dt-word",
-      maskClosable: false,
-      footer: null
-    }, async (data) => {
-      const fileReader = new FileReader();
-      if (typeof window !== "undefined") {
-        let { renderAsync } = await import("docx-preview");
-        fileReader.addEventListener("load", (event) => {
-          const arrayBuffer = event.target.result;
-          renderAsync(arrayBuffer, unref(domRef), null, {
-            className: "docx",
-            inWrapper: true,
-            ignoreWidth: false,
-            ignoreHeight: false,
-            ignoreFonts: false,
-            breakPages: true,
-            ignoreLastRenderedPageBreak: true,
-            experimental: false,
-            trimXmlDeclaration: true,
-            debug: false
-          }).then((rsp) => {
-            dispatchResize();
-          });
-        });
-        fileReader.readAsArrayBuffer(data.data);
-      }
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(DtModal), { onRegister: unref(register) }, {
-        default: withCtx(() => [
-          createElementVNode("div", {
-            ref_key: "domRef",
-            ref: domRef,
-            id: ID,
-            class: "word-view"
-          }, null, 512)
-        ]),
-        _: 1
-      }, 8, ["onRegister"]);
-    };
-  }
-});
-const _hoisted_1 = { class: "dt-upload-wrap" };
-const _hoisted_2 = {
-  key: 0,
-  class: "flex items-center"
-};
-const _hoisted_3 = { class: "pl-3" };
-const _hoisted_4 = { class: "flex items-center flex-1" };
-const _hoisted_5 = { class: "flex-1 pr-4" };
-const _hoisted_6 = { class: "not-italic text-12 text-gray-400 ml-1" };
-const _hoisted_7 = {
-  key: 0,
-  class: "ant-progress ant-progress-line ant-progress-default ant-progress-status-normal"
-};
-const _hoisted_8 = { class: "ant-progress-outer" };
-const _hoisted_9 = { class: "ant-progress-inner" };
-const _hoisted_10 = { class: "flex items-center" };
-const _hoisted_11 = ["onClick"];
-const _hoisted_12 = { key: 0 };
-const _hoisted_13 = /* @__PURE__ */ createElementVNode("i", { class: "i ic:baseline-file-upload" }, null, -1);
-const _hoisted_14 = /* @__PURE__ */ createElementVNode("div", null, "\u6587\u4EF6\u4E0A\u4F20", -1);
-const _hoisted_15 = [
-  _hoisted_13,
-  _hoisted_14
-];
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "index",
-  props: basicProps,
-  emits: ["change"],
-  setup(__props, { emit: emits }) {
-    const props = __props;
-    const [registerPdf, { openModal: openPdfModal }] = useModalOut();
-    const [registerDocx, { openModal: openDocxModal }] = useModalOut();
-    const {
-      defaultFiles: fileListRef,
-      accept: acceptRef,
-      helpText: helpTextRef,
-      maxCount: maxCountRef,
-      maxSize: maxSizeRef
-    } = toRefs(props);
-    const fieldNamesRef = computed(() => {
-      return {
-        ...{
-          fileId: "id",
-          fileName: "fileName",
-          filePath: "fileUrl",
-          fileSize: "fileSize",
-          fileType: "extendName"
-        },
-        ...unref(props.fieldNames)
-      };
-    });
-    const { getStringAccept, getHelpText, fileList, beforeUpload } = useFile({
-      fileListRef,
-      acceptRef,
-      helpTextRef,
-      maxCountRef,
-      maxSizeRef,
-      fieldNamesRef
-    });
-    const btns = [
-      {
-        class: "ic:baseline-remove-red-eye",
-        show: (file) => props.showView && ["pdf", "jpg", "jpeg", "png", "bmp", "gif", "docx"].includes(file.fileType),
-        click: fileView
-      },
-      {
-        class: "ic:baseline-file-download",
-        show: () => props.showDownload,
-        click: download
-      },
-      {
-        class: "mdi:delete-outline",
-        show: () => !unref(getBind).disabled && props.showDelete,
-        click: (file) => {
-          fileList.value = unref(fileList).filter((f) => f.fileId !== file.fileId);
-        }
-      }
-    ];
-    const getBind = computed(() => {
-      return {
-        maxCount: Infinity,
-        ...omit(unref(props), ["api", "onChange"]),
-        class: "dt-upload",
-        accept: unref(getStringAccept),
-        beforeUpload: props.beforeUpload && isFunction(props.beforeUpload) ? props.beforeUpload : beforeUpload,
-        customRequest: props.customRequest ? props.customRequest : uploadFile
-      };
-    });
-    const imgVisable = ref(false);
-    const imgSrcRef = ref();
-    const bindImg = computed(() => {
-      return {
-        preview: {
-          width: 200,
-          visible: unref(imgVisable),
-          onVisibleChange: (v) => imgVisable.value = v
-        },
-        src: unref(imgSrcRef)
-      };
-    });
-    const handlePreview = async (file) => {
-      imgSrcRef.value = file.filePath;
-      imgVisable.value = true;
-    };
-    const uploadFile = async ({ file, onSuccess, onError, onProgress }) => {
-      const {
-        uploadUrl = useAppStore().appConf.pages.uploadUrl,
-        downloadUrl = useAppStore().appConf.pages.downloadUrl,
-        fileName
-      } = props;
-      let _uploadUrl = isString(uploadUrl) ? uploadUrl : uploadUrl.api;
-      let _downloadUrl = isString(downloadUrl) ? downloadUrl : downloadUrl.api;
-      if (!_uploadUrl) {
-        message.error("\u8BF7\u914D\u7F6E\u4E0A\u4F20\u7684\u6587\u4EF6\u8DEF\u5F84");
-        return;
-      }
-      if (!_downloadUrl) {
-        message.error("\u8BF7\u914D\u7F6E\u4E0B\u8F7D\u7684\u6587\u4EF6\u8DEF\u5F84");
-        return;
-      }
-      try {
-        let result = await http.uploadFile(
-          {
-            url: _uploadUrl + `?t=${new Date().getTime()}`,
-            onUploadProgress({ loaded, total }) {
-              onProgress({ percent: Math.ceil(loaded / total * 100) });
-            }
-          },
-          {
-            ...props.extraParams,
-            [fileName || "file"]: file
-          }
-        );
-        let field = {
-          url: null,
-          thumbUrl: null
-        }, fieldNames = unref(fieldNamesRef);
-        for (let key in fieldNames) {
-          let val = fieldNames[key];
-          if (key === "filePath") {
-            field[key] = result?.data?.[val] ?? `${useAppStore().appConf.http?.baseUrl}${_downloadUrl}?id=${result?.data?.fileId}`;
-            field.url = field.thumbUrl = field[key];
-            continue;
-          }
-          const _file = file;
-          if (key === "fileType") {
-            field[key] = result?.data?.[val] ?? takeRight(_file.name?.split("."))?.[0];
-            continue;
-          }
-          if (key === "fileSize") {
-            field[key] = getFileSize(_file.size);
-            continue;
-          }
-          if (key === "fileName") {
-            field[key] = _file.name;
-            continue;
-          }
-          field[key] = result?.data?.[val] ?? null;
-        }
-        Object.assign(file, field);
-        onSuccess(result);
-      } catch (err) {
-        onError(err);
-      }
-    };
-    async function fileView(file) {
-      try {
-        const { downloadUrl = useAppStore().appConf.pages.downloadUrl } = props;
-        let _downloadUrl = isString(downloadUrl) ? downloadUrl : downloadUrl.api;
-        let _downloadType = isString(downloadUrl) ? "get" : downloadUrl.type;
-        if (["jpg", "jpeg", "png", "bmp", "gif"].includes(file.fileType)) {
-          imgSrcRef.value = file.filePath ?? `${useAppStore().appConf.http?.baseUrl}${_downloadUrl}?id=${file.fileId}`;
-          imgVisable.value = true;
-          return;
-        }
-        let result = await http[_downloadType](
-          _downloadUrl,
-          { id: file.fileId },
-          {
-            onlyData: false,
-            responseType: "blob",
-            isTransformResponse: false,
-            headers: {
-              "Content-Type": HttpContentTypeEnum.FORM_DATA
-            }
-          }
-        );
-        switch (file.fileType) {
-          case "pdf":
-            openPdfModal({
-              fileName: file.fileName,
-              url: URL.createObjectURL(result.data)
-            });
-            break;
-          case "docx":
-            openDocxModal({
-              fileName: file.fileName,
-              data: result.data
-            });
-            break;
-          default:
-        }
-      } catch (err) {
-        console.log(err);
-      }
-    }
-    function download(file) {
-      const { downloadUrl = useAppStore().appConf.pages.downloadUrl } = props;
-      http.exportFile(downloadUrl, { id: file.fileId }, file.fileName);
-    }
-    watch(
-      () => unref(fileList),
-      async () => {
-        let ids = [];
-        unref(fileList).forEach((it) => {
-          ids.push(it.fileId);
-        });
-        if (props.emitSnippet || !props.emitSnippet && !ids.includes(void 0)) {
-          emits("change", ids.join(","), unref(fileList));
-        }
-      }
-    );
-    return (_ctx, _cache) => {
-      const _component_AButton = Button;
-      const _component_AUpload = Upload;
-      const _component_AImage = Image;
-      return openBlock(), createElementBlock("div", _hoisted_1, [
-        getBind.value.listType === "text" ? (openBlock(), createBlock(_component_AUpload, mergeProps({ key: 0 }, getBind.value, {
-          fileList: unref(fileList),
-          "onUpdate:fileList": _cache[0] || (_cache[0] = ($event) => isRef(fileList) ? fileList.value = $event : null)
-        }), createSlots({
-          itemRender: withCtx(({ file }) => [
-            createElementVNode("div", {
-              class: normalizeClass(["flex justify-between border border-solid border-gray-300 p-1 mt-2", file?.status === "error" ? "ant-upload-list-item-error" : ""])
-            }, [
-              createElementVNode("div", _hoisted_4, [
-                createVNode(unref(Icon), {
-                  name: "svg " + unref(getFileThumb)(file.fileType),
-                  size: 30,
-                  className: "mr-2 p-1"
-                }, null, 8, ["name"]),
-                createElementVNode("div", _hoisted_5, [
-                  createElementVNode("span", null, [
-                    createTextVNode(toDisplayString(file.fileName || file.name) + " ", 1),
-                    createElementVNode("i", _hoisted_6, " (" + toDisplayString(file.fileSize) + ") ", 1)
-                  ]),
-                  file.percent < 100 && file.percent > 0 ? (openBlock(), createElementBlock("div", _hoisted_7, [
-                    createElementVNode("div", _hoisted_8, [
-                      createElementVNode("div", _hoisted_9, [
-                        createElementVNode("div", {
-                          class: "ant-progress-bg",
-                          style: normalizeStyle({
-                            width: `${file.percent}%`,
-                            height: "2px"
-                          })
-                        }, null, 4)
-                      ])
-                    ])
-                  ])) : createCommentVNode("", true)
-                ])
-              ]),
-              createElementVNode("div", _hoisted_10, [
-                (openBlock(), createElementBlock(Fragment, null, renderList(btns, (btn) => {
-                  return openBlock(), createElementBlock(Fragment, {
-                    key: btn.class
-                  }, [
-                    btn.show(file) ? (openBlock(), createElementBlock("i", {
-                      key: 0,
-                      class: normalizeClass(["i w-7 h-7 !text-base text-center leading-7 text-gray-600 cursor-pointer hover:bg-gray-200 hover:bg-opacity-50 transition-all duration-300", btn.class]),
-                      onClick: ($event) => btn.click(file)
-                    }, null, 10, _hoisted_11)) : createCommentVNode("", true)
-                  ], 64);
-                }), 64))
-              ])
-            ], 2)
-          ]),
-          default: withCtx(() => [
-            !getBind.value.disabled ? (openBlock(), createElementBlock("div", _hoisted_2, [
-              createVNode(_component_AButton, null, {
-                default: withCtx(() => [
-                  createElementVNode("i", {
-                    class: normalizeClass(["i mr-1", getBind.value.preIcon])
-                  }, null, 2),
-                  createElementVNode("span", null, toDisplayString(getBind.value.buttonText), 1)
-                ]),
-                _: 1
-              }),
-              createElementVNode("p", _hoisted_3, toDisplayString(unref(getHelpText)), 1)
-            ])) : createCommentVNode("", true),
-            createVNode(_sfc_main$2, { onRegister: unref(registerPdf) }, null, 8, ["onRegister"]),
-            createVNode(_sfc_main$1, { onRegister: unref(registerDocx) }, null, 8, ["onRegister"])
-          ]),
-          _: 2
-        }, [
-          renderList(Object.keys(_ctx.$slots), (item) => {
-            return {
-              name: item,
-              fn: withCtx((data) => [
-                renderSlot(_ctx.$slots, item, normalizeProps(guardReactiveProps(data || {})))
-              ])
-            };
-          })
-        ]), 1040, ["fileList"])) : createCommentVNode("", true),
-        getBind.value.listType === "picture-card" ? (openBlock(), createBlock(_component_AUpload, mergeProps({ key: 1 }, getBind.value, {
-          fileList: unref(fileList),
-          "onUpdate:fileList": _cache[1] || (_cache[1] = ($event) => isRef(fileList) ? fileList.value = $event : null),
-          onPreview: handlePreview
-        }), {
-          default: withCtx(() => [
-            !getBind.value.disabled && (!_ctx.maxCount || !unref(fileList).length || unref(fileList).length < _ctx.maxCount) ? (openBlock(), createElementBlock("div", _hoisted_12, _hoisted_15)) : createCommentVNode("", true)
-          ]),
-          _: 1
-        }, 16, ["fileList"])) : createCommentVNode("", true),
-        createVNode(_component_AImage, mergeProps(bindImg.value, { style: { display: "none" } }), null, 16)
-      ]);
-    };
-  }
-});
-export {
-  _sfc_main as DtUpload
-};