cnhis-design-vue 3.1.14-beta.2 → 3.1.14-beta.5

package/es/packages/chunk-upload/src/chunk-upload-new.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,473 @@
+import { defineComponent, ref, reactive, onMounted, nextTick, onUnmounted, resolveComponent, openBlock, createElementBlock, createCommentVNode, createVNode, unref, withCtx, createElementVNode, Fragment, renderList, withDirectives, normalizeClass, toDisplayString, vShow, createTextVNode } from 'vue';
+import SparkMD5 from 'spark-md5';
+import axios from 'axios';
+import { useMessage, NIcon, NProgress, NButton } from 'naive-ui';
+import { UploadProps, getUploadData, statusSet } from './hooks/upload-data.js';
+import { UploadComputed } from './hooks/upload-computed.js';
+import { FolderOutline, DocumentAttachOutline, Close } from '@vicons/ionicons5';
+
+const _hoisted_1 = { class: "c-chunk-upload-container" };
+const _hoisted_2 = /* @__PURE__ */ createElementVNode("p", null, "\u70B9\u51FB\u6216\u5C06\u6587\u4EF6\u62D6\u62FD\u5230\u8FD9\u91CC\u4E0A\u4F20", -1);
+const _hoisted_3 = { class: "c-file-list-conatiner" };
+const _hoisted_4 = { class: "file-list" };
+const _hoisted_5 = { class: "c-f-item" };
+const _hoisted_6 = { class: "c-f-item-icon" };
+const _hoisted_7 = { class: "c-f-item-info" };
+const _hoisted_8 = { class: "c-f-item-info-title" };
+const _hoisted_9 = { class: "title" };
+const _hoisted_10 = { class: "size" };
+const _hoisted_11 = { class: "c-f-item-info-time" };
+const _hoisted_12 = { class: "c-f-item-btn" };
+const _hoisted_13 = { class: "upload-btn" };
+const _hoisted_14 = /* @__PURE__ */ createElementVNode("span", null, "\u4E0A\u4F20\u65B0\u6587\u4EF6", -1);
+const _hoisted_15 = /* @__PURE__ */ createTextVNode("\u5F00\u59CB\u4E0A\u4F20");
+var script = /* @__PURE__ */ defineComponent({
+  __name: "chunk-upload-new",
+  props: { ...UploadProps },
+  emits: ["getSumbitList", "closeUpload"],
+  setup(__props, { expose, emit }) {
+    const props = __props;
+    const { UploadState } = getUploadData();
+    var instance = axios.create({});
+    const uploaderDom = ref(null);
+    const uploadBtnDom = ref(null);
+    const state = reactive(UploadState);
+    const message = useMessage();
+    const { initState, uploadArguments, autoStart, btnAttrs } = UploadComputed(props, state);
+    initState();
+    const setAxios = () => {
+      for (const i in state.headers) {
+        instance.defaults.headers.common[i] = state.headers[i];
+      }
+      instance.defaults.withCredentials = state.withCredentials;
+    };
+    const init = () => {
+      try {
+        console.log(props.getChunkUploadConfig);
+        props.getChunkUploadConfig().then((res) => {
+          console.log(res);
+          state.uploadConfig = { ...res };
+          state.headers = {
+            Authorization: "bearer " + state.uploadConfig.token
+          };
+          setAxios();
+        });
+      } catch (error) {
+        console.log(error);
+      }
+    };
+    const curMaxSize = (curMax) => {
+      let useMax;
+      if (curMax) {
+        useMax = +(+curMax).toFixed(2);
+      } else {
+        return useMax;
+      }
+      if (useMax < 1024) {
+        return useMax + "KB";
+      } else if (useMax < 1024 * 1024) {
+        return (useMax / 1024).toFixed(2) + "MB";
+      } else if (useMax < 1024 * 1024 * 1024) {
+        return (useMax / (1024 * 1024)).toFixed(2) + "GB";
+      }
+    };
+    const checkSize = (file) => {
+      const max_size = (props == null ? void 0 : props.max_size) || "";
+      if (!max_size)
+        return false;
+      let isLt = file.size / 1024 < +max_size;
+      if (!isLt) {
+        message.error(`\u9644\u4EF6\u5927\u5C0F\u8D85\u8FC7\u4E86${curMaxSize(max_size)}`);
+      }
+      return !isLt;
+    };
+    const handleCheckExt = (map, file) => {
+      let flag = false;
+      if (map) {
+        if (map.includes("*")) {
+          return false;
+        }
+        let ext = file.getExtension();
+        if (!map.includes(ext)) {
+          message.error(`\u4E0D\u652F\u6301${ext}\u683C\u5F0F`);
+          flag = true;
+        }
+      }
+      return flag;
+    };
+    const checkMaxLength = () => {
+      var _a, _b;
+      if (props.maxLength > 0) {
+        let defLen = ((_a = props.defaultList) == null ? void 0 : _a.length) || 0;
+        let len = ((_b = state.configList) == null ? void 0 : _b.length) || 0;
+        if (props.maxLength <= defLen + len) {
+          message.error(`\u6700\u591A\u53EA\u80FD\u4E0A\u4F20${props.maxLength}\u4E2A`);
+          return true;
+        }
+      }
+      return false;
+    };
+    const computeMD5 = (file) => {
+      let fileReader = new FileReader();
+      new Date().getTime();
+      let blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice;
+      let currentChunk = 0;
+      const chunkSize = 10 * 1024 * 1e3;
+      let chunks = Math.ceil(file.size / chunkSize);
+      let spark = new SparkMD5.ArrayBuffer();
+      statusSet(file, "md5");
+      file.pause();
+      loadNext();
+      fileReader.onload = (e) => {
+        spark.append(e.target.result);
+        if (currentChunk < chunks) {
+          currentChunk++;
+          loadNext();
+        } else {
+          let md5 = spark.end();
+          computeMD5Success(md5, file);
+        }
+      };
+      fileReader.onerror = function() {
+        console.warn(`\u6587\u4EF6${file.name}\u8BFB\u53D6\u51FA\u9519\uFF0C\u8BF7\u68C0\u67E5\u8BE5\u6587\u4EF6`);
+        file.cancel();
+      };
+      function loadNext() {
+        let start = currentChunk * chunkSize;
+        let end = start + chunkSize >= file.size ? file.size : start + chunkSize;
+        fileReader.readAsArrayBuffer(blobSlice.call(file.file, start, end));
+      }
+    };
+    const onFileAdded = (file) => {
+      let sizeFlag = checkSize(file);
+      if (handleCheckExt(props.propsCategoryMap, file) || checkMaxLength() || sizeFlag) {
+        file.ignored = true;
+        return;
+      }
+      file.file_upload_status = "";
+      statusSet(file, "init");
+      file.crm_upload_config = { ...file };
+      state.configList.push(file);
+      statusSet(file, "ready");
+      if (autoStart.value) {
+        file.pause();
+        computeMD5(file);
+      }
+    };
+    const verifyUpload = (fileName, fileHash, file) => {
+      let url = state.uploadConfig.checkFileMd5Exist;
+      return new Promise((resolve, reject) => {
+        const obj = {
+          md5: fileHash,
+          fileName,
+          ...uploadArguments.value
+        };
+        instance.get(url, { params: obj }).then((res) => {
+          resolve(res.data);
+        }).catch((err) => {
+          statusSet(file, "failed");
+          console.log("verifyUpload -> err", err);
+        });
+      });
+    };
+    const computeMD5Success = async (md5, file) => {
+      try {
+        const verifyData = await verifyUpload(file.name, md5, file);
+        if (verifyData.code == "00000") {
+          const { data } = verifyData || {};
+          if (data.presence) {
+            statusSet(file, "complete");
+            file.crm_chkuns_complete_status = "complete";
+            file.crm_uploade_resInfo = { url: data.path, name: file.name, size: file.size };
+            return;
+          }
+        }
+        file.uniqueIdentifier = md5;
+        statusSet(file, "uploading");
+        file.resume();
+      } catch (error) {
+        console.log(error, "chunk-upload-computeMD5Success");
+      }
+    };
+    const onFileProgress = () => {
+    };
+    const mergeRequest = (data, file) => {
+      return new Promise((resolve, reject) => {
+        const obj = {
+          ...data,
+          ...uploadArguments.value
+        };
+        instance.post(state.uploadConfig.partFileMerge, obj, {
+          timeout: 0
+        }).then(({ data: data2 }) => {
+          if (data2.code === "00000") {
+            statusSet(file, "complete");
+            if (uploaderDom) {
+              let resData = (data2 == null ? void 0 : data2.data) || {};
+              let fileList = uploaderDom.value.fileList;
+              fileList.forEach((v) => {
+                if (v.uniqueIdentifier == file.uniqueIdentifier) {
+                  v.crm_chkuns_complete_status = "complete";
+                  v.crm_uploade_resInfo = {
+                    url: resData.path || resData.url,
+                    name: file.name,
+                    size: file.size,
+                    ...resData
+                  };
+                }
+              });
+            }
+            resolve();
+          } else {
+            message.error("\u4E0A\u4F20\u5931\u8D25");
+            resolve();
+          }
+        }).catch((err) => {
+          console.log("mergeRequest -> err", err);
+          reject();
+        });
+      });
+    };
+    const onFileSuccess = (rootFile, file, response) => {
+      let res = JSON.parse(response);
+      if (!res.success) {
+        statusSet(file, "failed");
+        return;
+      }
+      statusSet(file, "merging");
+      mergeRequest({
+        md5: file.uniqueIdentifier,
+        fileName: file.name,
+        fileChunkNum: file.chunks.length
+      }, file);
+      if (res.needMerge) {
+        statusSet(file, "merging");
+      }
+    };
+    const hanldeDraggerBtnClick = () => {
+      var _a, _b;
+      let input = ((_b = (_a = uploadBtnDom == null ? void 0 : uploadBtnDom.value) == null ? void 0 : _a.$el) == null ? void 0 : _b.querySelector("input")) || false;
+      if (input) {
+        input.click();
+      }
+    };
+    const getUploadShowStatus = (file, key = "text") => {
+      let status = (file == null ? void 0 : file.file_upload_status) || {};
+      return status[key];
+    };
+    const fileClass = (file) => {
+      return ["complete", "failed"].includes(getUploadShowStatus(file, "status"));
+    };
+    const handleRemove = (file) => {
+      if (file.cancel) {
+        file.cancel();
+      } else if (file.remove) {
+        file.remove();
+      }
+      let id = file.id;
+      state.configList = state.configList.filter((c) => c.id !== id);
+    };
+    const onFileError = (rootFile, file) => {
+      statusSet(file, "failed");
+    };
+    const formatedProgress = (v, file) => {
+      if (file.crm_chkuns_complete_status == "complete") {
+        return 100;
+      }
+      let tempV = v * 100 + "";
+      return parseInt(tempV, 10);
+    };
+    const handleStartUpload = () => {
+      var _a;
+      let len = ((_a = state.configList) == null ? void 0 : _a.length) || 0;
+      if (len == 0) {
+        message.info("\u8BF7\u9009\u62E9\u6587\u4EF6");
+        return;
+      }
+      nextTick(() => {
+        state.configList.forEach((f) => {
+          let o = f.file_upload_status || {};
+          if (o.status) {
+            statusSet(f, "uploading");
+            computeMD5(f);
+          }
+        });
+      });
+    };
+    const close = () => {
+      var _a, _b;
+      (_b = (_a = uploaderDom.value) == null ? void 0 : _a.uploader) == null ? void 0 : _b.cancel();
+    };
+    const handleGetSumbitList = () => {
+      var _a;
+      let len = ((_a = state == null ? void 0 : state.configList) == null ? void 0 : _a.length) || 0;
+      let list = [];
+      if (len > 0) {
+        state.configList.forEach((file) => {
+          if (file.crm_chkuns_complete_status == "complete")
+            list.push({ size: file.size, ...file.crm_uploade_resInfo });
+        });
+      }
+      emit("getSumbitList", list);
+    };
+    const confirm = () => {
+      console.log("ininini");
+      const { configList } = state;
+      let len = (configList == null ? void 0 : configList.length) || 0;
+      if (len === 0) {
+        message.info("\u8BF7\u9009\u62E9\u6587\u4EF6\u4E0A\u4F20");
+        return;
+      }
+      let list = configList.filter((v) => !["complete", "failed"].includes(v.file_upload_status.status));
+      if (list.length > 0) {
+        message.info("\u8BF7\u4E0A\u4F20\u6587\u4EF6\u6216\u8005\u7B49\u5F85\u6587\u4EF6\u4E0A\u4F20\u5B8C\u6210\uFF01");
+        return;
+      }
+      handleGetSumbitList();
+      cancel();
+    };
+    const cancel = () => {
+      console.log("cancelcancelcancel");
+      close();
+      state.configList = [];
+      emit("closeUpload", false);
+    };
+    init();
+    onMounted(() => {
+      nextTick(() => {
+      });
+    });
+    onUnmounted(() => {
+    });
+    expose({
+      cancel,
+      confirm
+    });
+    return (_ctx, _cache) => {
+      const _component_uploader_unsupport = resolveComponent("uploader-unsupport");
+      const _component_uploader_drop = resolveComponent("uploader-drop");
+      const _component_uploader_file = resolveComponent("uploader-file");
+      const _component_uploader_list = resolveComponent("uploader-list");
+      const _component_uploader_btn = resolveComponent("uploader-btn");
+      const _component_uploader = resolveComponent("uploader");
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createCommentVNode(" \u4E0A\u4F20 "),
+        createVNode(_component_uploader, {
+          ref_key: "uploaderDom",
+          ref: uploaderDom,
+          options: state.options,
+          autoStart: unref(autoStart),
+          onFileAdded,
+          onFileSuccess,
+          onFileProgress,
+          onFileError,
+          class: "uploader-app"
+        }, {
+          default: withCtx(() => [
+            createVNode(_component_uploader_unsupport),
+            createVNode(_component_uploader_drop, null, {
+              default: withCtx(() => [
+                createElementVNode("div", {
+                  class: "c-drap-container dragger-btn",
+                  onClick: hanldeDraggerBtnClick
+                }, [
+                  createVNode(unref(NIcon), { component: unref(FolderOutline) }, null, 8, ["component"]),
+                  _hoisted_2
+                ])
+              ]),
+              _: 1
+            }),
+            createVNode(_component_uploader_list, null, {
+              default: withCtx((scope) => [
+                createElementVNode("div", _hoisted_3, [
+                  createElementVNode("ul", _hoisted_4, [
+                    (openBlock(true), createElementBlock(Fragment, null, renderList(scope.fileList, (file) => {
+                      return openBlock(), createElementBlock("li", {
+                        key: file.id
+                      }, [
+                        withDirectives(createVNode(_component_uploader_file, {
+                          class: normalizeClass("file_" + file.id),
+                          ref_for: true,
+                          ref: "files",
+                          file,
+                          list: true
+                        }, {
+                          default: withCtx((scope2) => [
+                            createElementVNode("div", {
+                              class: normalizeClass(["c-file-container", { "c-file-boder-bottom": fileClass(file) }])
+                            }, [
+                              createElementVNode("div", _hoisted_5, [
+                                createElementVNode("div", _hoisted_6, [
+                                  createVNode(unref(NIcon), {
+                                    component: unref(DocumentAttachOutline),
+                                    style: { "color": "#5585f5" }
+                                  }, null, 8, ["component"])
+                                ]),
+                                createElementVNode("div", _hoisted_7, [
+                                  createElementVNode("div", _hoisted_8, [
+                                    createElementVNode("span", _hoisted_9, toDisplayString(file.name), 1),
+                                    createElementVNode("span", _hoisted_10, "(" + toDisplayString(scope2.formatedSize) + ")", 1)
+                                  ]),
+                                  createElementVNode("div", _hoisted_11, [
+                                    createElementVNode("span", null, toDisplayString(scope2.formatedTimeRemaining), 1),
+                                    createElementVNode("span", null, toDisplayString(getUploadShowStatus(file, "text")), 1)
+                                  ])
+                                ]),
+                                createElementVNode("div", _hoisted_12, [
+                                  createVNode(unref(NIcon), {
+                                    component: unref(Close),
+                                    onClick: ($event) => handleRemove(file)
+                                  }, null, 8, ["component", "onClick"])
+                                ])
+                              ]),
+                              createVNode(unref(NProgress), {
+                                percentage: formatedProgress(state.progress, file),
+                                type: "line",
+                                "show-indicator": false
+                              }, null, 8, ["percentage"])
+                            ], 2)
+                          ]),
+                          _: 2
+                        }, 1032, ["class", "file"]), [
+                          [vShow, !file.ignored]
+                        ])
+                      ]);
+                    }), 128))
+                  ])
+                ])
+              ]),
+              _: 1
+            }),
+            createElementVNode("div", _hoisted_13, [
+              withDirectives(createVNode(_component_uploader_btn, {
+                attrs: unref(btnAttrs),
+                ref_key: "uploadBtnDom",
+                ref: uploadBtnDom
+              }, {
+                default: withCtx(() => [
+                  _hoisted_14
+                ]),
+                _: 1
+              }, 8, ["attrs"]), [
+                [vShow, false]
+              ]),
+              createVNode(unref(NButton), {
+                type: "primary",
+                class: "mgl-10",
+                onClick: handleStartUpload
+              }, {
+                default: withCtx(() => [
+                  _hoisted_15
+                ]),
+                _: 1
+              })
+            ])
+          ]),
+          _: 1
+        }, 8, ["options", "autoStart"])
+      ]);
+    };
+  }
+});
+
+export { script as default };

package/es/packages/chunk-upload/src/hooks/upload-computed.d.ts

@@ -0,0 +1,11 @@
+export declare const UploadComputed: (props: any, state: any, config: any) => {
+    initState: () => void;
+    uploadArguments: import("vue").ComputedRef<{
+        type: any;
+        channel: any;
+    }>;
+    autoStart: import("vue").ComputedRef<boolean>;
+    btnAttrs: import("vue").ComputedRef<{
+        accept: any;
+    }>;
+};

package/es/packages/chunk-upload/src/hooks/upload-computed.js

@@ -0,0 +1,70 @@
+import { computed } from 'vue';
+
+const UploadComputed = (props, state, config) => {
+  const handleProcessHeaders = () => {
+    return {
+      Authorization: "bearer " + state.uploadConfig.token
+    };
+  };
+  const handleGetTargetUrl = (file) => {
+    var _a;
+    return ((_a = state == null ? void 0 : state.uploadConfig) == null ? void 0 : _a.partFileUpload) || "";
+  };
+  const handleProcessParams = (params, file) => {
+    let res = {
+      channel: channel.value,
+      md5: file.uniqueIdentifier,
+      name: params.filename,
+      chunk: params.chunkNumber - 1,
+      chunks: params.totalChunks,
+      chunkSize: params.currentChunkSize
+    };
+    return res || params;
+  };
+  const processResponse = (response, cb, file, Chunk) => {
+    cb(null, response);
+  };
+  const parseTimeRemaining = (timeRemaining, parsedTimeRemaining) => {
+    return parsedTimeRemaining.replace(/\syears?/, "\u5E74").replace(/\days?/, "\u5929").replace(/\shours?/, "\u5C0F\u65F6").replace(/\sminutes?/, "\u5206\u949F").replace(/\sseconds?/, "\u79D2");
+  };
+  const initState = () => {
+    state.options.target = handleGetTargetUrl;
+    state.options.headers = handleProcessHeaders;
+    state.options.processParams = handleProcessParams;
+    state.options.parseTimeRemaining = parseTimeRemaining;
+    state.options.processResponse = processResponse;
+  };
+  const autoStart = computed(() => {
+    return false;
+  });
+  const btnAttrs = computed(() => {
+    return {
+      accept: props.propsCategoryMap
+    };
+  });
+  const channel = computed(() => {
+    let obj = state.uploadConfig;
+    if (Object.keys(obj || {}).length === 0) {
+      return void 0;
+    }
+    let res = props.uploaderType === "file" ? obj.fileChannel : obj.channel;
+    return res || obj.fileChannel;
+  });
+  const uploadArguments = computed(() => {
+    return {
+      type: props.uploaderType,
+      channel: channel.value
+    };
+  });
+  computed(() => {
+    return { ...uploadArguments.value, share: state.share };
+  });
+  return {
+    initState,
+    uploadArguments,
+    autoStart,
+    btnAttrs
+  };
+};
+
+export { UploadComputed };

package/es/packages/chunk-upload/src/hooks/upload-data.d.ts

@@ -0,0 +1,63 @@
+export declare const getUploadData: () => {
+    UploadState: {
+        spinning: boolean;
+        uploadConfig: {};
+        progress: number;
+        options: {
+            target: {};
+            chunkSize: number;
+            fileParameterName: string;
+            maxChunkRetries: number;
+            simultaneousUploads: number;
+            prioritizeFirstAndLastChunk: boolean;
+            forceChunkSize: boolean;
+            testChunks: boolean;
+            headers: {};
+            query(): void;
+            processParams: {};
+            parseTimeRemaining: {};
+            processResponse: {};
+        };
+        attrs: {};
+        collapse: boolean;
+        configList: never[];
+        share: number;
+        baseUrl: string;
+        headers: {
+            Authorization: string;
+        };
+        withCredentials: boolean;
+    };
+};
+export declare const UploadProps: {
+    propsCategoryMap: {
+        type: StringConstructor;
+        default: string;
+    };
+    max_size: {
+        type: StringConstructor;
+        default: string;
+    };
+    maxLength: {
+        type: NumberConstructor;
+        default: number;
+    };
+    defaultList: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+    uploaderType: {
+        type: StringConstructor;
+        default: string;
+    };
+    getChunkUploadConfig: {
+        type: FunctionConstructor;
+        default: () => Promise<{}>;
+    };
+};
+/**
+ * 自定义的状态
+ * @param file
+ * @param status
+ */
+export declare const statusSet: (file: any, status: string) => void;