@lemon30_npm/csit-vue3 1.0.44 → 1.0.45

package/dist/lib/ci-upload/index.vue2.js

@@ -1,33 +1,33 @@
 import { ElUpload as se, ElButton as le, ElLink as ae, ElDivider as ne, ElTooltip as ie } from "element-plus/es";
-import { defineComponent as re, mergeDefaults as de, useSlots as ue, ref as L, watch as ce, createElementBlock as l, openBlock as s, createBlock as _, createCommentVNode as n, mergeProps as pe, unref as y, createSlots as me, withCtx as c, renderSlot as C, Fragment as m, createElementVNode as a, toDisplayString as v, renderList as R, normalizeProps as fe, guardReactiveProps as ge, normalizeClass as S, createVNode as h, createTextVNode as B, normalizeStyle as D, nextTick as $ } from "vue";
+import { defineComponent as re, mergeDefaults as de, useSlots as ue, ref as D, watch as ce, createElementBlock as l, openBlock as s, createBlock as C, createCommentVNode as n, mergeProps as pe, unref as y, createSlots as me, withCtx as c, renderSlot as _, Fragment as m, createElementVNode as a, toDisplayString as v, renderList as N, normalizeProps as fe, guardReactiveProps as ge, normalizeClass as S, createVNode as h, createTextVNode as B, normalizeStyle as R, nextTick as L } from "vue";
 import I from "./icons/icon-upload-btn.svg.js";
 import T from "./icons/icon-upload-btn-hover.svg.js";
 import K from "./icons/icon-upload-btn-disabled.svg.js";
 import ye from "./icons/icon-loading-blue.svg.js";
 import ve from "./icons/icon-upload-success.svg.js";
-import ke from "./icons/icon-upload-retry.svg.js";
-import we from "./icons/icon-upload-fail.svg.js";
-import { ElMessageBox as he, ElMessage as E } from "element-plus";
+import we from "./icons/icon-upload-retry.svg.js";
+import ke from "./icons/icon-upload-fail.svg.js";
+import { ElMessageBox as he, ElMessage as $ } from "element-plus";
 import { useUpload as be } from "./hooks/useUpload.js";
 import { useUploadRetry as Be } from "./hooks/useUploadRetry.js";
-import { downloadFileWithAxios as _e } from "./utils/file.js";
-import { getFileIconByName as Ce } from "./utils/file-icon-maps.js";
+import { downloadFileWithAxios as Ce } from "./utils/file.js";
+import { getFileIconByName as _e } from "./utils/file-icon-maps.js";
 import { useExposeMethods as Se } from "./expose/index.js";
 import { useCiUploadComputed as ze } from "./computed/index.js";
-import { defaultProps as Le } from "./props/index.js";
-const $e = { class: "CiUpload" }, Ee = {
+import { defaultProps as De } from "./props/index.js";
+const Le = { class: "CiUpload" }, $e = {
   key: 0,
   class: "tip-slot-textInfo"
-}, Ue = {
+}, Ee = {
   key: 1,
   class: "default-tip-slot-textInfo"
-}, Ne = { class: "upload-btn-text" }, Pe = {
+}, Pe = { class: "upload-btn-text" }, Ue = {
   key: 0,
   class: "tip-slot-textInfo"
-}, Re = {
+}, Ne = {
   key: 1,
   class: "default-tip-slot-textInfo"
-}, De = { class: "file-item-top" }, Ie = { class: "file-name-file-icon" }, Te = ["src"], Ke = { class: "top-right" }, Me = {
+}, Re = { class: "file-item-top" }, Ie = { class: "file-name-file-icon" }, Te = ["src"], Ke = { class: "top-right" }, Me = {
   key: 0,
   class: "file-size"
 }, Ve = {
@@ -46,6 +46,8 @@ const $e = { class: "CiUpload" }, Ee = {
   props: /* @__PURE__ */ de({
     action: {},
     downloadUrl: {},
+    data: {},
+    headers: {},
     uploadBtnText: {},
     maxSize: {},
     multiple: { type: Boolean },
@@ -60,30 +62,35 @@ const $e = { class: "CiUpload" }, Ee = {
     showPreviewBtn: { type: Boolean },
     showDownloadBtn: { type: Boolean },
     showDeleteBtn: { type: Boolean },
+    customDownload: { type: Boolean },
     drag: { type: Boolean },
     disabled: { type: Boolean },
     readonly: { type: Boolean },
     axiosInstance: {}
-  }, Le),
-  emits: ["update:fileList", "onSuccess", "onRemove", "onChange", "onError"],
+  }, De),
+  emits: ["update:fileList", "onSuccess", "onRemove", "onChange", "onError", "onCustomDownload"],
   setup(M, { expose: V, emit: q }) {
-    const A = ue(), U = L(), b = L(!1), k = L([]), { checkUploadStatus: H } = Se(k), r = M, { customHttpRequest: W } = be(r.axiosInstance), d = q;
+    const A = ue(), E = D(), b = D(!1), w = D([]), { checkUploadStatus: H } = Se(w), r = M, { customHttpRequest: W } = be(r.axiosInstance), d = q;
     V({
       checkUploadStatus: H
     });
-    const { retryUpload: F } = Be(k, d, r);
+    const { retryUpload: F } = Be(w, d, r);
     ce(
       () => r.fileList,
       (e) => {
-        k.value = e.map((t) => ({ ...t }));
+        w.value = e.map((t) => ({ ...t }));
       },
       { immediate: !0 }
     );
     const z = (e) => {
       var t;
-      (t = U.value) == null || t.handleRemove(e);
-    }, N = (e) => {
-      e.downloadPercentage = 0, e.status = "downloading", _e(
+      (t = E.value) == null || t.handleRemove(e);
+    }, P = (e) => {
+      if (r.customDownload) {
+        d("onCustomDownload", e);
+        return;
+      }
+      e.downloadPercentage = 0, e.status = "downloading", Ce(
         {
           fileKey: e.fileKey || "当前此条数据没有fileKey字段",
           fileName: e.fileName || "当前此条数据没有fileName字段"
@@ -99,10 +106,10 @@ const $e = { class: "CiUpload" }, Ee = {
       );
     }, O = (e) => {
       const t = r.accept.split(",").map((i) => i.trim().toLowerCase()), u = e.type.toLowerCase(), f = e.name.toLowerCase();
-      return t.some((i) => u === i || f.endsWith(i)) ? e.size <= r.maxSize ? !0 : (E.error(`文件大小超出限制，最大文件大小为${ee.value}`), b.value = !0, $(() => {
+      return t.some((i) => u === i || f.endsWith(i)) ? e.size <= r.maxSize ? !0 : ($.error(`文件大小超出限制，最大文件大小为${ee.value}`), b.value = !0, L(() => {
         const i = r.fileList.filter((o) => o.uid !== e.uid);
         d("update:fileList", i), b.value = !1;
-      }), !1) : (E.error("不支持上传该类型文件"), b.value = !0, $(() => {
+      }), !1) : ($.error("不支持上传该类型文件"), b.value = !0, L(() => {
         const i = r.fileList.filter((o) => o.uid !== e.uid);
         d("update:fileList", i), b.value = !1;
       }), !1);
@@ -119,49 +126,51 @@ const $e = { class: "CiUpload" }, Ee = {
       // 用户点击“确定”按钮，允许删除
       () => !1
       // 用户点击“取消”按钮，取消删除
-    ), x = (e, t) => {
-      E.error(`文件数量超出限制，最大文件数量为${r.limit}个`);
-    }, G = (e, t, u) => {
-      t.status = "fail", t.percentage = 0, $(() => {
+    ), G = (e, t) => {
+      $.error(`文件数量超出限制，最大文件数量为${r.limit}个`);
+    }, J = (e, t, u) => {
+      t.status = "fail", t.percentage = 0, L(() => {
         d("update:fileList", [...u, t]), d("onError", t, u);
       });
-    }, J = (e, t, u) => {
-      var p, w, i;
+    }, Q = (e, t, u) => {
+      var p, k, i;
       if (!e) return;
       const f = u.find((o) => o.uid === t.uid);
-      f && (f.fileName = ((p = e == null ? void 0 : e.data) == null ? void 0 : p.fileName) || t.name, f.fileKey = ((w = e == null ? void 0 : e.data) == null ? void 0 : w.fileKey) || "当前接口没有返回fileKey字段", f.fileSize = ((i = e == null ? void 0 : e.data) == null ? void 0 : i.fileSize) || t.size), d("update:fileList", u), d("onSuccess", t, u);
-    }, Q = (e, t) => {
-      e.status === "success" && !e.response || (d("update:fileList", t), d("onChange", e, t));
+      f && (f.fileName = ((p = e == null ? void 0 : e.data) == null ? void 0 : p.fileName) || t.name, f.fileKey = ((k = e == null ? void 0 : e.data) == null ? void 0 : k.fileKey) || "当前接口没有返回fileKey字段", f.fileSize = ((i = e == null ? void 0 : e.data) == null ? void 0 : i.fileSize) || t.size), d("update:fileList", u), d("onSuccess", t, u);
     }, X = (e, t) => {
+      e.status === "success" && !e.response || (d("update:fileList", t), d("onChange", e, t));
+    }, Y = (e, t) => {
       d("update:fileList", t), d("onRemove", e, t);
-    }, { hasRealDefaultSlot: Y, finalBeforeUpload: Z, maxSizeInMB: ee, defaultTipSlotTextInfo: P, otherSlots: te } = ze(r, A, O);
+    }, { hasRealDefaultSlot: Z, finalBeforeUpload: x, maxSizeInMB: ee, defaultTipSlotTextInfo: U, otherSlots: te } = ze(r, A, O);
     return (e, t) => {
-      const u = le, f = se, p = ae, w = ne, i = ie;
-      return s(), l("div", $e, [
-        e.readonly ? n("", !0) : (s(), _(f, pe({
+      const u = le, f = se, p = ae, k = ne, i = ie;
+      return s(), l("div", Le, [
+        e.readonly ? n("", !0) : (s(), C(f, pe({
           key: 0,
           class: ["ci-el-upload-component", { "is-disabled": e.disabled }],
           ref_key: "uploadRef",
-          ref: U,
+          ref: E,
           action: e.action,
-          "file-list": k.value,
+          data: e.data,
+          headers: e.headers,
+          "file-list": w.value,
           accept: e.accept,
           limit: e.limit,
           multiple: e.multiple,
           drag: e.drag,
           disabled: e.disabled,
-          "before-upload": y(Z),
+          "before-upload": y(x),
           "before-remove": j,
-          "on-success": J,
-          "on-change": Q,
-          "on-remove": X,
-          "on-exceed": x,
-          "on-error": G,
+          "on-success": Q,
+          "on-change": X,
+          "on-remove": Y,
+          "on-exceed": G,
+          "on-error": J,
           "http-request": y(W),
           "show-file-list": !1
         }, e.$attrs), me({
           default: c(() => [
-            y(Y) ? C(e.$slots, "default", { key: 0 }, void 0, !0) : (s(), l(m, { key: 1 }, [
+            y(Z) ? _(e.$slots, "default", { key: 0 }, void 0, !0) : (s(), l(m, { key: 1 }, [
               e.drag ? (s(), l(m, { key: 0 }, [
                 t[0] || (t[0] = a("img", {
                   class: "upload-btn-icon",
@@ -182,10 +191,10 @@ const $e = { class: "CiUpload" }, Ee = {
                   a("span", { class: "drag-text-info-click" }, "点击上传"),
                   a("span", { class: "drag-text-info-black" }, "或将文件拖拽到这里上传")
                 ], -1)),
-                e.$slots.tip ? (s(), l("div", Ee, [
-                  C(e.$slots, "tip", {}, void 0, !0)
-                ])) : (s(), l("div", Ue, v(y(P)), 1))
-              ], 64)) : (s(), _(u, {
+                e.$slots.tip ? (s(), l("div", $e, [
+                  _(e.$slots, "tip", {}, void 0, !0)
+                ])) : (s(), l("div", Ee, v(y(U)), 1))
+              ], 64)) : (s(), C(u, {
                 key: 1,
                 class: "upload-btn",
                 disabled: e.disabled
@@ -206,7 +215,7 @@ const $e = { class: "CiUpload" }, Ee = {
                     src: K,
                     alt: ""
                   }, null, -1)),
-                  a("span", Ne, v(e.uploadBtnText), 1)
+                  a("span", Pe, v(e.uploadBtnText), 1)
                 ]),
                 _: 1,
                 __: [4, 5, 6]
@@ -218,38 +227,38 @@ const $e = { class: "CiUpload" }, Ee = {
           e.drag ? void 0 : {
             name: "tip",
             fn: c(() => [
-              e.$slots.tip ? (s(), l("div", Pe, [
-                C(e.$slots, "tip", {}, void 0, !0)
-              ])) : (s(), l("div", Re, v(y(P)), 1))
+              e.$slots.tip ? (s(), l("div", Ue, [
+                _(e.$slots, "tip", {}, void 0, !0)
+              ])) : (s(), l("div", Ne, v(y(U)), 1))
             ]),
             key: "0"
           },
-          R(y(te), (o, g) => ({
+          N(y(te), (o, g) => ({
             name: g,
             fn: c((oe) => [
-              C(e.$slots, g, fe(ge(oe || {})), void 0, !0)
+              _(e.$slots, g, fe(ge(oe || {})), void 0, !0)
             ])
           }))
-        ]), 1040, ["class", "action", "file-list", "accept", "limit", "multiple", "drag", "disabled", "before-upload", "http-request"])),
-        k.value.length ? (s(), l("div", {
+        ]), 1040, ["class", "action", "data", "headers", "file-list", "accept", "limit", "multiple", "drag", "disabled", "before-upload", "http-request"])),
+        w.value.length ? (s(), l("div", {
           key: 1,
           class: S(["custom-file-list-default", { "is-readonly": e.readonly }])
         }, [
-          (s(!0), l(m, null, R(k.value, (o) => (s(), l("div", {
+          (s(!0), l(m, null, N(w.value, (o) => (s(), l("div", {
             class: "file-item-wrapper",
             key: o.uid
           }, [
-            a("div", De, [
+            a("div", Re, [
               a("div", Ie, [
                 e.showFileExtIcon ? (s(), l("img", {
                   key: 0,
                   class: "file-icon",
-                  src: y(Ce)(o.fileName || o.name)
+                  src: y(_e)(o.fileName || o.name)
                 }, null, 8, Te)) : n("", !0),
                 h(p, {
                   class: "top-left file-name",
                   disabled: o.status === "downloading" || o.status === "uploading",
-                  onClick: (g) => N(o)
+                  onClick: (g) => P(o)
                 }, {
                   default: c(() => [
                     B(v(o.fileName || o.name), 1)
@@ -271,24 +280,24 @@ const $e = { class: "CiUpload" }, Ee = {
                         _: 2,
                         __: [7]
                       }, 1032, ["onClick"]),
-                      h(w, { direction: "vertical" })
+                      h(k, { direction: "vertical" })
                     ], 64)) : n("", !0),
                     e.showDownloadBtn ? (s(), l(m, { key: 1 }, [
                       h(p, {
                         disabled: o.status === "downloading",
-                        onClick: (g) => N(o)
+                        onClick: (g) => P(o)
                       }, {
                         default: c(() => [
-                          B(v(o.status === "downloading" ? `下载中...${o.downloadPercentage || 0}%` : "下载"), 1)
+                          B(v(o.status === "downloading" && e.showDownloadProgress && e.customDownload ? `下载中...${o.downloadPercentage || 0}%` : "下载"), 1)
                         ]),
                         _: 2
                       }, 1032, ["disabled", "onClick"]),
-                      e.showDeleteBtn && !e.readonly ? (s(), _(w, {
+                      e.showDeleteBtn && !e.readonly ? (s(), C(k, {
                         key: 0,
                         direction: "vertical"
                       })) : n("", !0)
                     ], 64)) : n("", !0),
-                    e.showDeleteBtn && !e.readonly ? (s(), _(p, {
+                    e.showDeleteBtn && !e.readonly ? (s(), C(p, {
                       key: 2,
                       onClick: (g) => z(o)
                     }, {
@@ -343,7 +352,7 @@ const $e = { class: "CiUpload" }, Ee = {
                       default: c(() => [
                         a("img", {
                           class: "retry-icon",
-                          src: ke,
+                          src: we,
                           onClick: (g) => y(F)(o)
                         }, null, 8, He)
                       ]),
@@ -351,7 +360,7 @@ const $e = { class: "CiUpload" }, Ee = {
                     }, 1024),
                     t[12] || (t[12] = a("img", {
                       class: "fail-icon",
-                      src: we
+                      src: ke
                     }, null, -1))
                   ], 2)) : n("", !0)
                 ])
@@ -361,7 +370,7 @@ const $e = { class: "CiUpload" }, Ee = {
               o.status === "uploading" ? (s(), l("div", We, [
                 a("div", {
                   class: "file-progress-inner",
-                  style: D({ width: (o.percentage || 0) + "%" })
+                  style: R({ width: (o.percentage || 0) + "%" })
                 }, null, 4)
               ])) : n("", !0)
             ], 64)) : n("", !0),
@@ -369,7 +378,7 @@ const $e = { class: "CiUpload" }, Ee = {
               o.status === "downloading" ? (s(), l("div", Fe, [
                 a("div", {
                   class: "file-progress-inner",
-                  style: D({ width: (o.downloadPercentage || 0) + "%" })
+                  style: R({ width: (o.downloadPercentage || 0) + "%" })
                 }, null, 4)
               ])) : n("", !0)
             ], 64)) : n("", !0)

package/dist/lib/ci-upload/props/index.js

@@ -3,6 +3,10 @@ const o = {
   action: "http://localhost:3001/upload",
   // 下载 URL - 默认值: 是我本机本地跑一个 Node 服务, 提供了一个下载接口
   downloadUrl: "http://localhost:3001/download-by-key",
+  // 上传时附带的额外参数 - 默认值: {}
+  data: () => ({}),
+  // 设置上传的请求头部 - 默认值: {}
+  headers: () => ({}),
   // 上传按钮文本 - 默认值: 选择附件
   uploadBtnText: "选择附件",
   // 限制上传文件的大小（单位： byte） - 默认值: 100.00MB
@@ -30,6 +34,8 @@ const o = {
   showDownloadBtn: !0,
   // 是否显示删除按钮 - 默认值: true
   showDeleteBtn: !0,
+  // 是否由开发者自定义下载逻辑 - 默认值: false
+  customDownload: !1,
   // 是否支持拖拽上传 - 默认值: false
   drag: !1,
   // 是否禁用上传 - 默认值: false

package/dist/lib/ci-upload/utils/appendFormData.js

@@ -0,0 +1,9 @@
+function c(p, e) {
+  !e || typeof e != "object" || Object.keys(e).forEach((n) => {
+    const o = e[n];
+    o instanceof Blob ? p.append(n, o) : p.append(n, String(o));
+  });
+}
+export {
+  c as appendFormData
+};

package/dist/types/src/components/components-project/ci-upload/index.vue.d.ts

@@ -15,14 +15,18 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<Ci
     onRemove: (file: CiUploadFile, fileList: CiUploadUserFile[]) => any;
     onSuccess: (file: CiUploadFile, fileList: CiUploadUserFile[]) => any;
     "update:fileList": (list: CiUploadUserFile[]) => any;
+    onCustomDownload: (file: UploadUserFile) => any;
 }, string, import('vue').PublicProps, Readonly<CiUploadProps> & Readonly<{
     onOnChange?: (file: CiUploadFile, fileList: CiUploadUserFile[]) => any;
     onOnError?: (file: CiUploadFile, fileList: CiUploadUserFile[]) => any;
     onOnRemove?: (file: CiUploadFile, fileList: CiUploadUserFile[]) => any;
     onOnSuccess?: (file: CiUploadFile, fileList: CiUploadUserFile[]) => any;
     "onUpdate:fileList"?: (list: CiUploadUserFile[]) => any;
+    onOnCustomDownload?: (file: UploadUserFile) => any;
 }>, {
     drag: boolean;
+    data: Record<string, any>;
+    headers: Headers | Record<string, any>;
     multiple: boolean;
     action: string;
     accept: string;
@@ -39,6 +43,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<Ci
     showPreviewBtn: boolean;
     showDownloadBtn: boolean;
     showDeleteBtn: boolean;
+    customDownload: boolean;
     readonly: boolean;
     axiosInstance: any;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {

package/dist/types/src/components/components-project/ci-upload/props/index.d.ts

@@ -2,6 +2,8 @@ import { UploadUserFile } from 'element-plus';
 export declare const defaultProps: {
     action: string;
     downloadUrl: string;
+    data: () => Record<string, any>;
+    headers: () => Headers | Record<string, any>;
     uploadBtnText: string;
     maxSize: number;
     multiple: boolean;
@@ -15,6 +17,7 @@ export declare const defaultProps: {
     showPreviewBtn: boolean;
     showDownloadBtn: boolean;
     showDeleteBtn: boolean;
+    customDownload: boolean;
     drag: boolean;
     disabled: boolean;
     readonly: boolean;

package/dist/types/src/components/components-project/ci-upload/type.d.ts

@@ -2,6 +2,8 @@ import { UploadFile, UploadProps, UploadUserFile } from 'element-plus';
 export interface CiUploadProps {
     action?: string;
     downloadUrl?: string;
+    data?: Record<string, any>;
+    headers?: Headers | Record<string, any>;
     uploadBtnText?: string;
     maxSize?: number;
     multiple?: boolean;
@@ -16,6 +18,7 @@ export interface CiUploadProps {
     showPreviewBtn?: boolean;
     showDownloadBtn?: boolean;
     showDeleteBtn?: boolean;
+    customDownload?: boolean;
     drag?: boolean;
     disabled?: boolean;
     readonly?: boolean;

package/dist/types/src/components/components-project/ci-upload/utils/appendFormData.d.ts

@@ -0,0 +1,6 @@
+/**
+ * 将一个普通对象的数据追加到 FormData 中
+ * - 支持 string/number 自动转 string
+ * - 支持 Blob 直接追加
+ */
+export declare function appendFormData(formData: FormData, data: Record<string, any>): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lemon30_npm/csit-vue3",
-  "version": "1.0.44",
+  "version": "1.0.45",
   "type": "module",
   "author": "cuiwq",
   "license": "MIT",