@dt-frames/ui 2.0.24 → 4.0.1

package/es/components/upload/index.js

@@ -1,655 +0,0 @@
-import { Button, Upload, Image } from "ant-design-vue/es";
-import "ant-design-vue/es/image/style";
-import "ant-design-vue/es/upload/style";
-import "ant-design-vue/es/button/style";
-import { computed, unref, ref, watch, defineComponent, openBlock, createBlock, withCtx, createVNode, createElementVNode, toRefs, createElementBlock, mergeProps, isRef, createSlots, normalizeClass, createTextVNode, toDisplayString, createCommentVNode, normalizeStyle, Fragment, renderList, renderSlot, normalizeProps, guardReactiveProps } from "vue";
-import { takeRight, omit } from "lodash-es";
-import { isString, useAppStore, useMessage, dispatchResize, isFunction, http, HttpContentTypeEnum } from "@dt-frames/core";
-import { useModal, DtModal, useModalOut } from "../modal";
-import { DtIframe } from "../iframe";
-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,
-    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";
-  } else {
-    return size + "B";
-  }
-}
-function useFile({
-  fileListRef = ref([]),
-  acceptRef,
-  helpTextRef,
-  maxCountRef,
-  maxSizeRef,
-  fieldNamesRef
-}) {
-  const { getAppConf } = useAppStore();
-  const { message } = useMessage();
-  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;
-      } else {
-        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${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) => {
-    let _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);
-    if (maxSize && size / 1024 / 1024 >= maxSize) {
-      message.error(`\u53EA\u80FD\u4E0A\u4F20\u4E0D\u8D85\u8FC7${maxSize}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!`);
-      return;
-    }
-  }
-  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 "imgs/fu_ppt.gif";
-    case "docx":
-    case "doc":
-      return "imgs/fu_doc.gif";
-    case "pdf":
-      return "imgs/fu_pdf.gif";
-    case "jpg":
-    case "jpeg":
-    case "png":
-    case "bmp":
-    case "ofd":
-    case "gif":
-      return "imgs/fu_bmp.gif";
-    case "xls":
-    case "xlsx":
-      return "imgs/fu_exl.gif";
-    case "csv":
-      return "imgs/fu_txt.gif";
-    case "txt":
-      return "imgs/fu_txt.gif";
-    case "rar":
-    case "zip":
-    case "7z":
-    case "tar":
-    case "gz":
-      return "imgs/fu_rar.gif";
-    default:
-      return "imgs/fu_blank.gif";
-  }
-};
-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: pdfUrlRef.value,
-            exeReduce: exeReduce.value
-          }, null, 8, ["src", "exeReduce"])
-        ]),
-        _: 1
-      }, 8, ["onRegister"]);
-    };
-  }
-});
-const _export_sfc = (sfc, props) => {
-  const target = sfc.__vccOpts || sfc;
-  for (const [key, val] of props) {
-    target[key] = val;
-  }
-  return target;
-};
-const PdfView = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__file", "D:/dt/dt-frame-front/dt-frames/frames/packages/ui/src/components/upload/src/components/PdfView.vue"]]);
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
-  __name: "WordView",
-  setup(__props) {
-    const ID = `word-view-${Math.ceil(Math.random() * 1e6)}`;
-    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 DocxView = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__file", "D:/dt/dt-frame-front/dt-frames/frames/packages/ui/src/components/upload/src/components/WordView.vue"]]);
-const _hoisted_1 = {
-  key: 0,
-  class: "flex items-center"
-};
-const _hoisted_2 = { class: "pl-3" };
-const _hoisted_3 = { class: "flex items-center flex-1" };
-const _hoisted_4 = ["src"];
-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 { message } = useMessage();
-    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 { getAppConf } = useAppStore();
-      const { uploadUrl = getAppConf.pages.uploadUrl, downloadUrl = getAppConf.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 = {}, fieldNames = unref(fieldNamesRef);
-        for (let key in fieldNames) {
-          let val = fieldNames[key];
-          if (key === "filePath") {
-            field[key] = result?.data?.[val] ?? `${getAppConf.http?.baseUrl}${_downloadUrl}?id=${result?.data?.fileId}`;
-            field["url"] = field["thumbUrl"] = field[key];
-            continue;
-          }
-          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 { getAppConf } = useAppStore();
-        const { downloadUrl = getAppConf.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 ?? `${getAppConf.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;
-        }
-      } catch (err) {
-        console.log(err);
-      }
-    }
-    function download(file) {
-      const { getAppConf } = useAppStore();
-      const { downloadUrl = getAppConf.pages.downloadUrl } = props;
-      http.exportFile(downloadUrl, { id: file.fileId }, file.fileName);
-    }
-    watch(
-      () => unref(fileList),
-      async (v) => {
-        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", null, [
-        unref(getBind).listType === "text" ? (openBlock(), createBlock(_component_AUpload, mergeProps({ key: 0 }, unref(getBind), {
-          fileList: unref(fileList),
-          "onUpdate:fileList": _cache[0] || (_cache[0] = ($event) => isRef(fileList) ? fileList.value = $event : null)
-        }), createSlots({
-          itemRender: withCtx(({ file, actions }) => [
-            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_3, [
-                createElementVNode("img", {
-                  src: unref(getFileThumb)(file.fileType),
-                  class: "w-9 h-9 mr-2 p-1"
-                }, null, 8, _hoisted_4),
-                createElementVNode("div", _hoisted_5, [
-                  createElementVNode("span", null, [
-                    createTextVNode(toDisplayString(file.fileName || file.name) + " ", 1),
-                    createElementVNode("i", _hoisted_6, "(" + toDisplayString(file.fileSize) + ")", 1)
-                  ]),
-                  createCommentVNode(" \u8BBE\u7F6E\u8FDB\u5EA6 "),
-                  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("v-if", 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("v-if", true)
-                  ], 64);
-                }), 64))
-              ])
-            ], 2)
-          ]),
-          default: withCtx(() => [
-            !unref(getBind).disabled ? (openBlock(), createElementBlock("div", _hoisted_1, [
-              createVNode(_component_AButton, null, {
-                default: withCtx(() => [
-                  createElementVNode("i", {
-                    class: normalizeClass(["i mr-1", unref(getBind).preIcon])
-                  }, null, 2),
-                  createElementVNode("span", null, toDisplayString(unref(getBind).buttonText), 1)
-                ]),
-                _: 1
-              }),
-              createElementVNode("p", _hoisted_2, toDisplayString(unref(getHelpText)), 1)
-            ])) : createCommentVNode("v-if", true),
-            createVNode(PdfView, { onRegister: unref(registerPdf) }, null, 8, ["onRegister"]),
-            createVNode(DocxView, { 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("v-if", true),
-        unref(getBind).listType === "picture-card" ? (openBlock(), createBlock(_component_AUpload, mergeProps({ key: 1 }, unref(getBind), {
-          fileList: unref(fileList),
-          "onUpdate:fileList": _cache[1] || (_cache[1] = ($event) => isRef(fileList) ? fileList.value = $event : null),
-          onPreview: handlePreview
-        }), {
-          default: withCtx(() => [
-            !unref(getBind).disabled && (!_ctx.maxCount || !unref(fileList).length || unref(fileList).length < _ctx.maxCount) ? (openBlock(), createElementBlock("div", _hoisted_12, _hoisted_15)) : createCommentVNode("v-if", true)
-          ]),
-          _: 1
-        }, 16, ["fileList"])) : createCommentVNode("v-if", true),
-        unref(bindImg).src ? (openBlock(), createBlock(_component_AImage, mergeProps({ key: 2 }, unref(bindImg), { style: { display: "none" } }), null, 16)) : createCommentVNode("v-if", true)
-      ]);
-    };
-  }
-});
-const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "D:/dt/dt-frame-front/dt-frames/frames/packages/ui/src/components/upload/src/index.vue"]]);
-export {
-  index as DtUpload
-};