@vunk/form 1.1.70 → 1.1.72

package/components/download-plus/index.css

@@ -0,0 +1,74 @@
+
+
+.vkf-download-plus{
+  --vkf-download-plus-height: 34px;
+}
+.vkf-download-plus-label{
+ position: relative;
+}
+.vkf-download-plus-cube-x,
+.vkf-download-plus-msg-x
+{
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+.vkf-download-plus-msg-x{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--el-color-success);
+  background: var(--el-bg-color);
+  animation-name: hide; /* 指定使用hide关键帧动画 */
+  animation-duration: 1s; /* 动画持续时间为2秒 */
+  animation-delay: 1s; /* 延迟2秒后开始动画 */
+  animation-fill-mode: forwards; /* 动画结束后保持最后一帧的状态 */
+}
+.vkf-download-plus-msg{
+  margin-left: 2px;
+}
+.vkf-download-plus-cube {
+  float: left;
+  height: 100%;
+}
+.vkf-download-plus-cube.error {
+  background: var(--el-color-danger);
+}
+.vkf-download-plus-cube .success{
+  background: var(--el-color-success);
+}
+.vkf-download-plus-cube .uploading{
+  background: var(--el-color-primary);
+}
+.vkf-download-plus-cube .error{
+  background: var(--el-color-danger);
+}
+
+.vkf-download-plus-btng >.el-button:first-child{
+  border-radius: 0;
+}
+.vkf-download-plus-btng >.el-button{
+  height: var(--vkf-download-plus-height);
+}
+.vkf-download-plus-main{
+  display: flex;
+  align-items: center;
+  border: var(--el-border);
+  border-radius: var(--el-border-radius-base);
+}
+
+.vkf-download-plus-label .el-input{
+  --el-input-border-color: transparent;
+  --el-input-focus-border-color: transparent;
+  --el-input-hover-border-color: transparent;
+}
+.vkf-download-plus-label .el-input.is-success .el-icon{
+   color: var(--el-color-success);
+}
+.vkf-download-plus-label .el-input.is-error .el-icon{
+  color: var(--el-color-danger);
+}
+
+

package/components/download-plus/index.d.ts

@@ -0,0 +1,4 @@
+import VkfDownloadPlus from './src/index.vue';
+export * as __VkfDownloadPlus from './src/types';
+export { VkfDownloadPlus, };
+export default VkfDownloadPlus;

package/components/download-plus/index.js

@@ -0,0 +1,384 @@
+import { _VkfFormItemCtx, VkfFormItem } from '@vunk/form/components/form-item';
+import { restFetch as restFetch$1 } from '@skzz/platform/shared/fetch/platform';
+import { defineComponent, ref, watch, onBeforeUnmount, resolveComponent, openBlock, createBlock, mergeProps, withCtx, createElementVNode, createVNode, createElementBlock, Fragment, renderList, normalizeClass, normalizeStyle, createCommentVNode, createTextVNode } from 'vue';
+import { rFile } from '@skzz/platform/api/basic';
+import { ElButtonGroup, ElButton, ElInput } from 'element-plus';
+import { RestFetch } from '@vunk/core/shared/utils-fetch';
+import { useModelComputed } from '@vunk/core/composables';
+
+const props = {
+  ..._VkfFormItemCtx.props,
+  fileId: {
+    type: String,
+    default: ""
+  },
+  url: {
+    type: String,
+    default: restFetch$1.baseURL
+  },
+  /**
+   * @description 分片大小
+   */
+  chunkSize: {
+    type: Number,
+    default: 1024 * 1024 * 10
+  },
+  fileServiceType: {
+    type: String,
+    default: void 0
+  },
+  /**
+     * @description 
+     * v-model:fileStatus 当前文件状态: wait, doPause, pause, doDownload, downloading, error, done
+     */
+  fileStatus: {
+    type: String,
+    default: void 0
+  }
+};
+const emits = {
+  "update:fileStatus": null
+};
+
+var Status = /* @__PURE__ */ ((Status2) => {
+  Status2["wait"] = "wait";
+  Status2["doPause"] = "doPause";
+  Status2["pause"] = "pause";
+  Status2["doDownload"] = "doDownload";
+  Status2["downloading"] = "downloading";
+  Status2["error"] = "error";
+  Status2["done"] = "done";
+  return Status2;
+})(Status || {});
+
+const KeyConfig = {
+  TokenKey: "VUNK_SKZZ_REST_TOKEN",
+  ApplicationKey: "VUNK_SKZZ_REST_APPLICATION",
+  TenantKey: "VUNK_SKZZ_REST_TENANT"
+};
+function getToken() {
+  return localStorage.getItem(KeyConfig.TokenKey) || "";
+}
+
+const restFetch = new RestFetch({
+  baseURL: restFetch$1.baseURL,
+  presetRequestInit: (config) => {
+    const header = config.headers;
+    const token = getToken();
+    if (token) {
+      header.set("Token", token);
+    }
+    return config;
+  }
+});
+const downChunk = (params, init) => {
+  return new Promise((resolve, reject) => {
+    const xhr = new XMLHttpRequest();
+    let url = `${restFetch.baseURL}/file/downloadByRange?fileId=${params.fileId}`;
+    if (params.fileServiceType) {
+      url += `&fileServiceType=${params.fileServiceType}`;
+      xhr.setRequestHeader("fileServiceType", params.fileServiceType);
+    }
+    if (init?.onprogress) {
+      xhr.onprogress = init?.onprogress;
+    }
+    xhr.open("GET", url, true);
+    xhr.responseType = "blob";
+    xhr.setRequestHeader("Token", getToken());
+    xhr.setRequestHeader("tenant", "default");
+    xhr.setRequestHeader("application", "platform");
+    xhr.setRequestHeader("Content-Range", `bytes=${params.start}-${params.end}`);
+    xhr.setRequestHeader("Accept-Ranges", "bytes");
+    xhr.onreadystatechange = (e) => {
+      const target = e.target;
+      if (xhr.readyState === 4) {
+        if (xhr.status === 200 || xhr.status === 206) {
+          if (init?.xhrs) {
+            const i = init.xhrs.findIndex((req) => req === xhr);
+            init.xhrs.splice(i, 1);
+          }
+          resolve({
+            data: target.response
+          });
+        } else if (xhr.status === 500) {
+          reject(target.response);
+        }
+      }
+    };
+    xhr.onerror = () => {
+      reject(xhr.response);
+    };
+    xhr.send();
+    init?.xhrs?.push(xhr);
+  });
+};
+
+var script = defineComponent({
+  name: "VkfDownloadPlus",
+  components: {
+    VkfFormItem,
+    ElButtonGroup,
+    ElButton,
+    ElInput
+  },
+  props,
+  emits,
+  setup(props2, {
+    emit
+  }) {
+    const formItemBindProps = _VkfFormItemCtx.createBindProps(props2);
+    const fileInfo = ref();
+    rFileInfo();
+    watch(() => props2.fileId, rFileInfo);
+    function rFileInfo() {
+      if (!props2.fileId) {
+        return;
+      }
+      rFile({
+        fileId: props2.fileId
+      }).then((res) => {
+        fileInfo.value = res;
+      });
+    }
+    const chunks = ref([]);
+    const downloadingXhrs = ref([]);
+    const fileStatus = useModelComputed({
+      default: Status.wait,
+      key: "fileStatus"
+    }, props2, emit);
+    const handleDownload = () => {
+      if (!fileInfo.value) {
+        return;
+      }
+      const fileSize = fileInfo.value.size;
+      const fileId = fileInfo.value.id;
+      const chunksLength = Math.ceil(fileSize / props2.chunkSize);
+      chunks.value = Array.from({
+        length: chunksLength
+      }, (_, i) => {
+        const start = i * props2.chunkSize;
+        const end = Math.min(start + props2.chunkSize, fileSize) - 1;
+        let downloadedChunk = {};
+        if (chunks.value[i] && chunks.value[i].start === start && chunks.value[i].end === end && chunks.value[i].status === Status.done) {
+          downloadedChunk = chunks.value[i];
+        }
+        return {
+          start,
+          end,
+          index: i,
+          status: Status.wait,
+          fileId,
+          fileServiceType: props2.fileServiceType,
+          progress: 0,
+          ...downloadedChunk
+        };
+      });
+      fileStatus.value = Status.downloading;
+      const needDownloadChunks = chunks.value.filter((v) => v.status === Status.wait || v.status === Status.error);
+      rChunkFiles(needDownloadChunks).then(() => {
+        const blobs = chunks.value.map((item) => {
+          return item.data;
+        });
+        return new Blob(blobs, {
+          type: "application/octet-stream"
+        });
+      }).then((blob) => {
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement("a");
+        a.href = url;
+        a.download = fileInfo.value?.realName || "\u672A\u77E5\u6587\u4EF6";
+        a.click();
+        URL.revokeObjectURL(url);
+      }).then(() => {
+        fileStatus.value = Status.done;
+      }).catch(() => {
+        fileStatus.value = Status.error;
+      });
+    };
+    watch(() => fileStatus.value, (newVal) => {
+      if (newVal === Status.doDownload) {
+        handleDownload();
+      }
+    });
+    function rChunkFiles(chunks2, max = 4, retrys = 10) {
+      return new Promise((resolve, reject) => {
+        const len = chunks2.length;
+        let counter = 0;
+        if (len === 0) {
+          return resolve(void 0);
+        }
+        const retryArr = [];
+        const start = async () => {
+          while (counter < len && max > 0) {
+            max--;
+            const i = chunks2.findIndex((v) => v.status === Status.wait || v.status === Status.error);
+            const currentChunk = chunks2[i];
+            if (currentChunk) {
+              currentChunk.status = Status.downloading;
+              downChunk(currentChunk, {
+                onprogress(ev) {
+                  currentChunk.progress = parseInt(ev.loaded / ev.total * 100 + "");
+                },
+                xhrs: downloadingXhrs.value
+              }).then((res) => {
+                currentChunk.status = Status.done;
+                currentChunk.data = res.data;
+                max++;
+                counter++;
+              }).then(() => {
+                if (counter === len) {
+                  resolve(void 0);
+                } else {
+                  start();
+                }
+              }).catch(() => {
+                currentChunk.status = Status.error;
+                const index = currentChunk.index;
+                if (typeof retryArr[index] !== "number") {
+                  retryArr[index] = 0;
+                }
+                retryArr[index]++;
+                console.warn(index, currentChunk, retryArr[index], "\u6B21\u62A5\u9519");
+                currentChunk.progress = -1;
+                if (retryArr[index] >= retrys) {
+                  return reject();
+                }
+                max++;
+                start();
+              });
+            }
+          }
+        };
+        start();
+      });
+    }
+    const handlePause = () => {
+      downloadingXhrs.value.forEach((xhr) => {
+        xhr.abort();
+      });
+      downloadingXhrs.value = [];
+      fileStatus.value = Status.pause;
+    };
+    watch(() => fileStatus.value, (newVal) => {
+      if (newVal === Status.doPause) {
+        handlePause();
+      }
+    });
+    onBeforeUnmount(() => {
+      handlePause();
+    });
+    return {
+      formItemBindProps,
+      fileInfo,
+      handleDownload,
+      handlePause,
+      Status,
+      chunks,
+      fileStatus
+    };
+  }
+});
+
+const _hoisted_1 = {
+  class: "vkf-download-plus-main"
+};
+const _hoisted_2 = {
+  class: "vkf-download-plus-label"
+};
+const _hoisted_3 = {
+  key: 0,
+  class: "vkf-download-plus-cube-x"
+};
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_ElInput = resolveComponent("ElInput");
+  const _component_el_button = resolveComponent("el-button");
+  const _component_el_button_group = resolveComponent("el-button-group");
+  const _component_VkfFormItem = resolveComponent("VkfFormItem");
+  return openBlock(), createBlock(
+    _component_VkfFormItem,
+    mergeProps(_ctx.formItemBindProps, {
+      class: "vkf-download-plus"
+    }),
+    {
+      default: withCtx(() => [createElementVNode("div", _hoisted_1, [createElementVNode("label", _hoisted_2, [createVNode(_component_ElInput, {
+        "model-value": _ctx.fileInfo?.realName,
+        readonly: ""
+      }, null, 8, ["model-value"]), _ctx.fileStatus === _ctx.Status.downloading || _ctx.fileStatus === _ctx.Status.pause ? (openBlock(), createElementBlock("div", _hoisted_3, [(openBlock(true), createElementBlock(
+        Fragment,
+        null,
+        renderList(_ctx.chunks, (chunk) => {
+          return openBlock(), createElementBlock(
+            "div",
+            {
+              key: chunk.fileId + "-" + chunk.index,
+              class: normalizeClass(["vkf-download-plus-cube", {
+                "error": chunk.status == _ctx.Status.error
+              }]),
+              style: normalizeStyle({
+                width: 100 / _ctx.chunks.length + "%"
+              })
+            },
+            [createElementVNode(
+              "div",
+              {
+                class: normalizeClass({
+                  "uploading": chunk.progress > 0 && chunk.progress < 100,
+                  "success": chunk.progress == 100
+                }),
+                style: normalizeStyle({
+                  height: chunk.progress + "%"
+                })
+              },
+              null,
+              6
+              /* CLASS, STYLE */
+            )],
+            6
+            /* CLASS, STYLE */
+          );
+        }),
+        128
+        /* KEYED_FRAGMENT */
+      ))])) : createCommentVNode("v-if", true)]), createVNode(_component_el_button_group, {
+        class: "vkf-download-plus-btng"
+      }, {
+        default: withCtx(() => [_ctx.fileStatus === _ctx.Status.downloading ? (openBlock(), createBlock(_component_el_button, {
+          key: 0,
+          type: "danger",
+          onClick: _ctx.handlePause
+        }, {
+          default: withCtx(() => [createTextVNode(" \u6682\u505C ")]),
+          _: 1
+          /* STABLE */
+        }, 8, ["onClick"])) : (openBlock(), createBlock(_component_el_button, {
+          key: 1,
+          type: "primary",
+          onClick: _ctx.handleDownload
+        }, {
+          default: withCtx(() => [createTextVNode(" \u4E0B\u8F7D ")]),
+          _: 1
+          /* STABLE */
+        }, 8, ["onClick"]))]),
+        _: 1
+        /* STABLE */
+      })])]),
+      _: 1
+      /* STABLE */
+    },
+    16
+    /* FULL_PROPS */
+  );
+}
+
+script.render = render;
+script.__file = "download-plus/src/index.vue";
+
+var types = /*#__PURE__*/Object.freeze({
+  __proto__: null
+});
+
+script.install = (app) => {
+  app.component(script.name || "VkfDownloadPlus", script);
+};
+
+export { script as VkfDownloadPlus, types as __VkfDownloadPlus, script as default };

package/components/download-plus/src/api.d.ts

@@ -0,0 +1,13 @@
+import { RestFetch } from '@vunk/core/shared/utils-fetch';
+export declare const restFetch: RestFetch;
+export declare const downChunk: (params: {
+    fileId: string;
+    start: number;
+    end: number;
+    fileServiceType?: string;
+}, init?: {
+    onprogress?: XMLHttpRequestEventTarget['onprogress'];
+    xhrs?: XMLHttpRequest[];
+}) => Promise<{
+    data: Blob;
+}>;

package/components/download-plus/src/api.js

@@ -0,0 +1 @@
+import{RestFetch as l}from"@vunk/core/shared/utils-fetch";import{restFetch as u}from"@skzz/platform/shared/fetch/platform";const T={TokenKey:"VUNK_SKZZ_REST_TOKEN",ApplicationKey:"VUNK_SKZZ_REST_APPLICATION",TenantKey:"VUNK_SKZZ_REST_TENANT"};function c(){return localStorage.getItem(T.TokenKey)||""}const i=new l({baseURL:u.baseURL,presetRequestInit:t=>{const s=t.headers,r=c();return r&&s.set("Token",r),t}}),R=(t,s)=>new Promise((r,n)=>{const e=new XMLHttpRequest;let o=`${i.baseURL}/file/downloadByRange?fileId=${t.fileId}`;t.fileServiceType&&(o+=`&fileServiceType=${t.fileServiceType}`,e.setRequestHeader("fileServiceType",t.fileServiceType)),s?.onprogress&&(e.onprogress=s?.onprogress),e.open("GET",o,!0),e.responseType="blob",e.setRequestHeader("Token",c()),e.setRequestHeader("tenant","default"),e.setRequestHeader("application","platform"),e.setRequestHeader("Content-Range",`bytes=${t.start}-${t.end}`),e.setRequestHeader("Accept-Ranges","bytes"),e.onreadystatechange=p=>{const a=p.target;if(e.readyState===4)if(e.status===200||e.status===206){if(s?.xhrs){const d=s.xhrs.findIndex(f=>f===e);s.xhrs.splice(d,1)}r({data:a.response})}else e.status===500&&n(a.response)},e.onerror=()=>{n(e.response)},e.send(),s?.xhrs?.push(e)});export{R as downChunk,i as restFetch};

package/components/download-plus/src/const.d.ts

@@ -0,0 +1,9 @@
+export declare enum Status {
+    wait = "wait",
+    doPause = "doPause",
+    pause = "pause",
+    doDownload = "doDownload",
+    downloading = "downloading",
+    error = "error",
+    done = "done"
+}

package/components/download-plus/src/const.js

@@ -0,0 +1 @@
+var d=(o=>(o.wait="wait",o.doPause="doPause",o.pause="pause",o.doDownload="doDownload",o.downloading="downloading",o.error="error",o.done="done",o))(d||{});export{d as Status};

package/components/download-plus/src/ctx.d.ts

@@ -0,0 +1,83 @@
+import { PropType } from 'vue';
+import { Status } from './const';
+export declare const props: {
+    fileId: {
+        type: StringConstructor;
+        default: string;
+    };
+    url: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * @description 分片大小
+     */
+    chunkSize: {
+        type: NumberConstructor;
+        default: number;
+    };
+    fileServiceType: {
+        type: PropType<import("../../upload-plus/src/types").FileServiceType>;
+        default: any;
+    };
+    /**
+       * @description
+       * v-model:fileStatus 当前文件状态: wait, doPause, pause, doDownload, downloading, error, done
+       */
+    fileStatus: {
+        type: PropType<Status>;
+        default: any;
+    };
+    label: StringConstructor;
+    labelWidth: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, NumberConstructor], unknown, unknown, "", boolean>;
+    prop: {
+        readonly type: PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | string[]) | (() => import("element-plus").FormItemProp) | ((new (...args: any[]) => string | string[]) | (() => import("element-plus").FormItemProp))[], unknown, unknown>>;
+        readonly required: false;
+        readonly validator: (val: unknown) => boolean;
+        __epPropKey: true;
+    };
+    required: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
+    rules: {
+        readonly type: PropType<unknown>;
+        readonly required: false;
+        readonly validator: (val: unknown) => boolean;
+        __epPropKey: true;
+    };
+    error: StringConstructor;
+    validateStatus: {
+        readonly type: PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "error" | "success" | "validating", unknown>>;
+        readonly required: false;
+        readonly validator: (val: unknown) => boolean;
+        __epPropKey: true;
+    };
+    for: StringConstructor;
+    inlineMessage: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, BooleanConstructor], unknown, unknown, "", boolean>;
+    showMessage: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+    formItemSize: {
+        type: PropType<"default" | "small" | "large">;
+        default: "default" | "small" | "large";
+    };
+    formItemSlots: {
+        type: PropType<import("../../form-item/src/types").FormItemSlots>;
+        default: any;
+    };
+    elRef: {
+        type: PropType<any>;
+        required: boolean;
+    };
+    inline: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: any;
+    };
+    labelPosition: {
+        type: PropType<"right">;
+        default: string;
+    };
+};
+export declare const emits: {
+    'update:fileStatus': any;
+};

package/components/download-plus/src/ctx.js

@@ -0,0 +1 @@
+import{_VkfFormItemCtx as t}from"@vunk/form/components/form-item";import{restFetch as e}from"@skzz/platform/shared/fetch/platform";const r={...t.props,fileId:{type:String,default:""},url:{type:String,default:e.baseURL},chunkSize:{type:Number,default:1024*1024*10},fileServiceType:{type:String,default:void 0},fileStatus:{type:String,default:void 0}},i={"update:fileStatus":null};export{i as emits,r as props};

package/components/download-plus/src/index.css

@@ -0,0 +1 @@
+