@lemon30_npm/csit-vue3 1.0.43 → 1.0.45
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.dev.md +10 -0
- package/README.md +36 -199
- package/dist/csit-vue3.js +621 -641
- package/dist/favicon.ico +0 -0
- package/dist/index.css +1 -1
- package/dist/lib/ci-common-list/ci-common-list-layout/index.css +1 -1
- package/dist/lib/ci-common-list/ci-common-list-layout/index.vue.js +2 -2
- package/dist/lib/ci-common-list/ci-common-list-layout/index.vue2.js +38 -38
- package/dist/lib/ci-common-list/ci-common-list-query/index.css +1 -1
- package/dist/lib/ci-common-list/ci-common-list-query/index.vue.js +2 -2
- package/dist/lib/ci-common-list/ci-common-list-query/index.vue2.js +25 -22
- package/dist/lib/ci-page-header/assets/btnBack.svg.js +4 -0
- package/dist/lib/ci-page-header/index.css +1 -1
- package/dist/lib/ci-page-header/index.vue.js +2 -2
- package/dist/lib/ci-page-header/index.vue2.js +28 -32
- package/dist/lib/ci-time-line-list/index.css +1 -1
- package/dist/lib/ci-time-line-list/index.vue.js +2 -2
- package/dist/lib/ci-time-line-list/index.vue2.js +11 -12
- package/dist/lib/ci-upload/hooks/useUpload.js +32 -29
- package/dist/lib/ci-upload/hooks/useUploadRetry.js +26 -16
- package/dist/lib/ci-upload/index.css +1 -1
- package/dist/lib/ci-upload/index.vue.js +2 -2
- package/dist/lib/ci-upload/index.vue2.js +78 -69
- package/dist/lib/ci-upload/props/index.js +6 -0
- package/dist/lib/ci-upload/utils/appendFormData.js +9 -0
- package/dist/lib/favicon.ico +0 -0
- package/dist/lib/styles/reset-elementPlus/index.css +1 -1
- package/dist/types/src/components/components-project/ci-upload/index.vue.d.ts +5 -0
- package/dist/types/src/components/components-project/ci-upload/props/index.d.ts +3 -0
- package/dist/types/src/components/components-project/ci-upload/type.d.ts +3 -0
- package/dist/types/src/components/components-project/ci-upload/utils/appendFormData.d.ts +6 -0
- package/package.json +4 -3
- package/dist/lib/ci-time-line-list/model/index.js +0 -56
|
@@ -1,58 +1,61 @@
|
|
|
1
|
-
import { ref as
|
|
1
|
+
import { ref as t } from "vue";
|
|
2
2
|
import "element-plus";
|
|
3
|
-
import
|
|
4
|
-
|
|
5
|
-
|
|
3
|
+
import D from "axios";
|
|
4
|
+
import { appendFormData as P } from "../utils/appendFormData.js";
|
|
5
|
+
function M(g) {
|
|
6
|
+
const a = t(!1), e = t(0), p = t(0), r = t("");
|
|
6
7
|
return {
|
|
7
8
|
uploading: a,
|
|
8
9
|
// 是否上传中
|
|
9
|
-
progress:
|
|
10
|
+
progress: e,
|
|
10
11
|
// 上传进度
|
|
11
|
-
currentFileName:
|
|
12
|
+
currentFileName: r,
|
|
12
13
|
// 当前文件名
|
|
13
|
-
customHttpRequest: async (
|
|
14
|
-
const { file:
|
|
15
|
-
a.value = !0,
|
|
16
|
-
const
|
|
17
|
-
|
|
14
|
+
customHttpRequest: async (h) => {
|
|
15
|
+
const { file: u, onSuccess: s, onError: l, onProgress: v, action: w, headers: i, data: m } = h;
|
|
16
|
+
a.value = !0, e.value = 0, r.value = u.name;
|
|
17
|
+
const n = new FormData();
|
|
18
|
+
n.append("file", u), P(n, m), console.log("version: 1.0.45 - data", m);
|
|
18
19
|
try {
|
|
19
|
-
const
|
|
20
|
-
|
|
20
|
+
const d = g || D;
|
|
21
|
+
console.log("version: 1.0.45 - headers", i);
|
|
22
|
+
const c = await d({
|
|
23
|
+
url: w,
|
|
21
24
|
method: "post",
|
|
22
|
-
data:
|
|
25
|
+
data: n,
|
|
23
26
|
timeout: 0,
|
|
24
27
|
// 设置为0表示永不超时(当是网络不确定的情况下,比如下载大文件时,可以设置为0,不然会报错)
|
|
25
28
|
headers: {
|
|
26
29
|
"Content-Type": "multipart/form-data",
|
|
27
|
-
...
|
|
30
|
+
...i
|
|
28
31
|
// 合并其他调用方自定义 header并显式类型化
|
|
29
32
|
},
|
|
30
33
|
// 上传进度事件：实时更新自定义进度条
|
|
31
|
-
onUploadProgress: (
|
|
32
|
-
if (
|
|
33
|
-
const
|
|
34
|
-
|
|
35
|
-
const
|
|
36
|
-
|
|
34
|
+
onUploadProgress: (o) => {
|
|
35
|
+
if (o.total) {
|
|
36
|
+
const y = Math.round(o.loaded / o.total * 100);
|
|
37
|
+
e.value = y;
|
|
38
|
+
const f = o;
|
|
39
|
+
f.percent = o.total > 0 ? o.loaded / o.total * 100 : 0, v(f);
|
|
37
40
|
}
|
|
38
41
|
},
|
|
39
42
|
// 下载进度事件（已挂载在 axios）
|
|
40
|
-
onDownloadProgress: (
|
|
41
|
-
|
|
43
|
+
onDownloadProgress: (o) => {
|
|
44
|
+
o.total && (p.value = Math.round(o.loaded / o.total * 100));
|
|
42
45
|
}
|
|
43
46
|
});
|
|
44
|
-
|
|
45
|
-
} catch (
|
|
46
|
-
l == null || l(
|
|
47
|
+
s == null || s(c.headers ? c.data : c);
|
|
48
|
+
} catch (d) {
|
|
49
|
+
l == null || l(d);
|
|
47
50
|
} finally {
|
|
48
|
-
a.value = !1,
|
|
51
|
+
a.value = !1, r.value = "";
|
|
49
52
|
}
|
|
50
53
|
},
|
|
51
54
|
// 自定义上传逻辑
|
|
52
|
-
downloadProgress:
|
|
55
|
+
downloadProgress: p
|
|
53
56
|
// 下载进度
|
|
54
57
|
};
|
|
55
58
|
}
|
|
56
59
|
export {
|
|
57
|
-
|
|
60
|
+
M as useUpload
|
|
58
61
|
};
|
|
@@ -1,41 +1,51 @@
|
|
|
1
|
-
import { ElMessage as
|
|
1
|
+
import { ElMessage as n } from "element-plus";
|
|
2
2
|
import { useUpload as c } from "./useUpload.js";
|
|
3
|
-
function h(
|
|
3
|
+
function h(e, a, s) {
|
|
4
4
|
const { customHttpRequest: u } = c();
|
|
5
5
|
return {
|
|
6
6
|
retryUpload: async (r) => {
|
|
7
7
|
try {
|
|
8
|
-
const
|
|
8
|
+
const o = {
|
|
9
9
|
file: r.raw,
|
|
10
10
|
// 原始 File 对象（注意！必须使用 file.raw，不能用包裹后的 file）
|
|
11
11
|
filename: r.name,
|
|
12
12
|
// 字段名，上传时 formData.append 的 key，通常是 'file'
|
|
13
|
-
action:
|
|
13
|
+
action: s.action,
|
|
14
14
|
// 上传接口地址（从 props 中传入）
|
|
15
15
|
// 上传进度回调：实时更新进度条 + 状态
|
|
16
|
-
onProgress: (
|
|
17
|
-
r.status = "uploading", r.percentage = Math.round(
|
|
16
|
+
onProgress: (t) => {
|
|
17
|
+
r.status = "uploading", r.percentage = Math.round(t.loaded / t.total * 100);
|
|
18
18
|
},
|
|
19
19
|
// 上传成功回调：设置状态为成功，补全 response，并通知父组件更新
|
|
20
|
-
onSuccess: (
|
|
21
|
-
r.status = "success", r.response =
|
|
20
|
+
onSuccess: (t) => {
|
|
21
|
+
r.status = "success", r.response = t, r.percentage = 100, a("update:fileList", [...e.value]), a("onSuccess", r, e.value), n.success("重新上传文件成功");
|
|
22
22
|
},
|
|
23
23
|
// 上传失败回调：标记为失败状态，重置进度为 0，并更新 UI
|
|
24
|
-
onError: (
|
|
25
|
-
r.status = "fail", r.percentage = 0,
|
|
24
|
+
onError: (t) => {
|
|
25
|
+
r.status = "fail", r.percentage = 0, a("update:fileList", [...e.value]), a("onError", r, e.value), n.error("重新上传文件失败");
|
|
26
26
|
},
|
|
27
|
-
// 可附带额外参数（你后端若支持可扩展使用）
|
|
28
|
-
data: {},
|
|
29
27
|
// 默认 POST 请求
|
|
30
28
|
method: "post",
|
|
31
29
|
// 是否携带 Cookie（跨域时按需设置）
|
|
32
30
|
withCredentials: !1,
|
|
33
31
|
// 自定义请求头（你也可以使用 props.headers 合并）
|
|
34
|
-
headers: {}
|
|
32
|
+
headers: s.headers || {},
|
|
33
|
+
// 也支持透传 headers
|
|
34
|
+
/**
|
|
35
|
+
* 把 data 携带进去（从 props 中取，开发者传什么就带什么）
|
|
36
|
+
* 可附带额外参数（你后端若支持可扩展使用）
|
|
37
|
+
* 附带参数：合并开发者 props.data，并额外加上 retry 标记: 这样后台就能知道这是首次上传还是重新上传。
|
|
38
|
+
*/
|
|
39
|
+
data: {
|
|
40
|
+
...s.data,
|
|
41
|
+
// 保留开发者自定义的 data
|
|
42
|
+
retry: !0
|
|
43
|
+
// 额外加上“重试”标记
|
|
44
|
+
}
|
|
35
45
|
};
|
|
36
|
-
await u(
|
|
37
|
-
} catch (
|
|
38
|
-
console.error("重新上传文件异常：",
|
|
46
|
+
await u(o);
|
|
47
|
+
} catch (o) {
|
|
48
|
+
console.error("重新上传文件异常：", o);
|
|
39
49
|
}
|
|
40
50
|
}
|
|
41
51
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.CiUpload[data-v-
|
|
1
|
+
.CiUpload[data-v-7aa07b75]{width:680px}.CiUpload .el-link.is-underline[data-v-7aa07b75]:hover:after{border-bottom:none}.CiUpload .el-link.is-hover-underline[data-v-7aa07b75]:hover:after{border-bottom:none}.CiUpload .ci-el-upload-component[data-v-7aa07b75] .el-upload-dragger{height:142px;padding:0;display:flex;flex-direction:column;justify-content:center;align-items:center}.CiUpload .ci-el-upload-component[data-v-7aa07b75] .el-upload-dragger .upload-btn-icon,.CiUpload .ci-el-upload-component[data-v-7aa07b75] .el-upload-dragger .upload-btn-icon-hover,.CiUpload .ci-el-upload-component[data-v-7aa07b75] .el-upload-dragger .upload-btn-icon-disabled{width:20px;height:20px}.CiUpload .ci-el-upload-component[data-v-7aa07b75] .el-upload-dragger .upload-btn-icon-hover,.CiUpload .ci-el-upload-component[data-v-7aa07b75] .el-upload-dragger .upload-btn-icon-disabled{display:none}.CiUpload .ci-el-upload-component[data-v-7aa07b75] .el-upload-dragger:hover{background-color:#fafbfd}.CiUpload .ci-el-upload-component[data-v-7aa07b75] .el-upload-dragger:hover .upload-btn-icon{display:none}.CiUpload .ci-el-upload-component[data-v-7aa07b75] .el-upload-dragger:hover .upload-btn-icon-hover{display:block}.CiUpload .ci-el-upload-component[data-v-7aa07b75] .el-upload-dragger:hover .upload-btn-icon-disabled{display:none}.CiUpload .ci-el-upload-component[data-v-7aa07b75] .el-upload-dragger .drag-text-info{margin-top:20px}.CiUpload .ci-el-upload-component[data-v-7aa07b75] .el-upload-dragger .drag-text-info .drag-text-info-click{color:#3573f3}.CiUpload .ci-el-upload-component[data-v-7aa07b75] .el-upload-dragger .drag-text-info .drag-text-info-black{color:#191919}.CiUpload .ci-el-upload-component .upload-btn[data-v-7aa07b75]{color:#4a4a4a!important;border-color:#dbdbdb!important}.CiUpload .ci-el-upload-component .upload-btn .upload-btn-icon[data-v-7aa07b75],.CiUpload .ci-el-upload-component .upload-btn .upload-btn-icon-hover[data-v-7aa07b75],.CiUpload .ci-el-upload-component .upload-btn .upload-btn-icon-disabled[data-v-7aa07b75]{width:20px;height:20px;margin-right:10px}.CiUpload .ci-el-upload-component .upload-btn .upload-btn-icon-hover[data-v-7aa07b75],.CiUpload .ci-el-upload-component .upload-btn .upload-btn-icon-disabled[data-v-7aa07b75]{display:none}.CiUpload .ci-el-upload-component .upload-btn[data-v-7aa07b75]:hover{color:#3573f3!important;border-color:#3573f3!important}.CiUpload .ci-el-upload-component .upload-btn:hover .upload-btn-icon[data-v-7aa07b75]{display:none}.CiUpload .ci-el-upload-component .upload-btn:hover .upload-btn-icon-hover[data-v-7aa07b75]{display:block}.CiUpload .ci-el-upload-component .upload-btn:hover .upload-btn-icon-disabled[data-v-7aa07b75]{display:none}.CiUpload .ci-el-upload-component .upload-btn.is-disabled[data-v-7aa07b75]{color:#a4a4a4!important;background-color:#f5f5f5!important;border-color:#dbdbdb!important;opacity:1!important}.CiUpload .ci-el-upload-component .upload-btn.is-disabled .upload-btn-icon[data-v-7aa07b75],.CiUpload .ci-el-upload-component .upload-btn.is-disabled .upload-btn-icon-hover[data-v-7aa07b75]{display:none}.CiUpload .ci-el-upload-component .upload-btn.is-disabled .upload-btn-icon-disabled[data-v-7aa07b75]{display:block}.CiUpload .ci-el-upload-component .default-tip-slot-textInfo[data-v-7aa07b75],.CiUpload .ci-el-upload-component .tip-slot-textInfo[data-v-7aa07b75]{color:#a4a4a4;font-size:12px;margin-top:10px}.CiUpload .ci-el-upload-component.is-disabled[data-v-7aa07b75] .el-upload-dragger{background-color:#f5f5f5}.CiUpload .ci-el-upload-component.is-disabled[data-v-7aa07b75] .el-upload-dragger .upload-btn-icon,.CiUpload .ci-el-upload-component.is-disabled[data-v-7aa07b75] .el-upload-dragger .upload-btn-icon-hover{display:none}.CiUpload .ci-el-upload-component.is-disabled[data-v-7aa07b75] .el-upload-dragger .upload-btn-icon-disabled{display:block}.CiUpload .ci-el-upload-component.is-disabled[data-v-7aa07b75] .el-upload-dragger:hover{border:1px dashed #dcdfe6}.CiUpload .ci-el-upload-component.is-disabled[data-v-7aa07b75] .el-upload-dragger .drag-text-info{margin-top:20px}.CiUpload .ci-el-upload-component.is-disabled[data-v-7aa07b75] .el-upload-dragger .drag-text-info .drag-text-info-click,.CiUpload .ci-el-upload-component.is-disabled[data-v-7aa07b75] .el-upload-dragger .drag-text-info .drag-text-info-black{color:#a4a4a4}.CiUpload .custom-file-list-default[data-v-7aa07b75]{margin-top:20px;border:1px solid #dbdbdb;padding:8px 10px;border-radius:4px}.CiUpload .custom-file-list-default.is-readonly[data-v-7aa07b75]{margin-top:0;border:none;padding:0}.CiUpload .custom-file-list-default .file-item-wrapper[data-v-7aa07b75]{padding:5px}.CiUpload .custom-file-list-default .file-item-wrapper[data-v-7aa07b75]:hover{background-color:#f0f2f5}.CiUpload .custom-file-list-default .file-item-wrapper:hover .file-progress-bar[data-v-7aa07b75]{background-color:#e8e5e5}.CiUpload .custom-file-list-default .file-item-wrapper[data-v-7aa07b75]:not(:last-child){margin-bottom:8px}.CiUpload .custom-file-list-default .file-item-wrapper .file-item-top[data-v-7aa07b75]{display:flex;align-items:center;justify-content:space-between}.CiUpload .custom-file-list-default .file-item-wrapper .file-item-top .file-name-file-icon[data-v-7aa07b75]{display:flex;align-items:flex-start}.CiUpload .custom-file-list-default .file-item-wrapper .file-item-top .file-name-file-icon .file-icon[data-v-7aa07b75]{width:22px;height:22px;margin-right:5px}.CiUpload .custom-file-list-default .file-item-wrapper .file-item-top .file-name-file-icon .file-name[data-v-7aa07b75]{max-width:257px;flex-shrink:0}.CiUpload .custom-file-list-default .file-item-wrapper .file-item-top .top-right[data-v-7aa07b75]{display:flex;align-items:center;justify-content:center}.CiUpload .custom-file-list-default .file-item-wrapper .file-item-top .top-right .file-size[data-v-7aa07b75]{color:#a4a4a4;font-size:14px;margin-right:8px}.CiUpload .custom-file-list-default .file-item-wrapper .file-item-top .top-right .file-operate-btn[data-v-7aa07b75]{margin-right:8px}.CiUpload .custom-file-list-default .file-item-wrapper .file-item-top .top-right .file-operate-btn .el-divider--vertical[data-v-7aa07b75]{font-size:14px;border-left-color:#191919}.CiUpload .custom-file-list-default .file-item-wrapper .file-item-top .top-right .file-status-icon-wrapper .uploading[data-v-7aa07b75]{display:flex;align-items:center;color:#3573f3;font-size:14px}.CiUpload .custom-file-list-default .file-item-wrapper .file-item-top .top-right .file-status-icon-wrapper .uploading .uploading-icon[data-v-7aa07b75]{width:14px;height:14px;margin-right:4px;animation:rotate 1.5s linear infinite}.CiUpload .custom-file-list-default .file-item-wrapper .file-item-top .top-right .file-status-icon-wrapper .success .success-icon[data-v-7aa07b75],.CiUpload .custom-file-list-default .file-item-wrapper .file-item-top .top-right .file-status-icon-wrapper .downloading .success-icon[data-v-7aa07b75]{width:19px;height:19px}.CiUpload .custom-file-list-default .file-item-wrapper .file-item-top .top-right .file-status-icon-wrapper .fail.fail-icon-wrapper[data-v-7aa07b75]{display:flex;align-items:center}.CiUpload .custom-file-list-default .file-item-wrapper .file-item-top .top-right .file-status-icon-wrapper .fail.fail-icon-wrapper .fail-icon[data-v-7aa07b75]{width:19px;height:19px}.CiUpload .custom-file-list-default .file-item-wrapper .file-item-top .top-right .file-status-icon-wrapper .fail.fail-icon-wrapper .retry-icon[data-v-7aa07b75]{margin:0 8px;cursor:pointer;width:18px;height:18px}.CiUpload .custom-file-list-default .file-item-wrapper .file-progress-bar[data-v-7aa07b75]{width:100%;height:5px;background-color:#f0f0f0;border-radius:3px;overflow:hidden;margin-top:5px}.CiUpload .custom-file-list-default .file-item-wrapper .file-progress-bar .file-progress-inner[data-v-7aa07b75]{height:100%;background-color:#3573f3;transition:width .3s ease}.CiUpload .custom-file-list-default .file-item-wrapper .download-progress-bar .file-progress-inner[data-v-7aa07b75]{background-color:#2aca96}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import o from "./index.vue2.js";
|
|
2
2
|
/* empty css */
|
|
3
|
-
import
|
|
4
|
-
const _ = /* @__PURE__ */
|
|
3
|
+
import a from "../_virtual/_plugin-vue_export-helper.js";
|
|
4
|
+
const _ = /* @__PURE__ */ a(o, [["__scopeId", "data-v-7aa07b75"]]);
|
|
5
5
|
export {
|
|
6
6
|
_ as default
|
|
7
7
|
};
|
|
@@ -1,33 +1,33 @@
|
|
|
1
1
|
import { ElUpload as se, ElButton as le, ElLink as ae, ElDivider as ne, ElTooltip as ie } from "element-plus/es";
|
|
2
|
-
import { defineComponent as re, mergeDefaults as de, useSlots as ue, ref as
|
|
2
|
+
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";
|
|
3
3
|
import I from "./icons/icon-upload-btn.svg.js";
|
|
4
4
|
import T from "./icons/icon-upload-btn-hover.svg.js";
|
|
5
5
|
import K from "./icons/icon-upload-btn-disabled.svg.js";
|
|
6
6
|
import ye from "./icons/icon-loading-blue.svg.js";
|
|
7
7
|
import ve from "./icons/icon-upload-success.svg.js";
|
|
8
|
-
import
|
|
9
|
-
import
|
|
10
|
-
import { ElMessageBox as he, ElMessage as
|
|
8
|
+
import we from "./icons/icon-upload-retry.svg.js";
|
|
9
|
+
import ke from "./icons/icon-upload-fail.svg.js";
|
|
10
|
+
import { ElMessageBox as he, ElMessage as $ } from "element-plus";
|
|
11
11
|
import { useUpload as be } from "./hooks/useUpload.js";
|
|
12
12
|
import { useUploadRetry as Be } from "./hooks/useUploadRetry.js";
|
|
13
|
-
import { downloadFileWithAxios as
|
|
14
|
-
import { getFileIconByName as
|
|
13
|
+
import { downloadFileWithAxios as Ce } from "./utils/file.js";
|
|
14
|
+
import { getFileIconByName as _e } from "./utils/file-icon-maps.js";
|
|
15
15
|
import { useExposeMethods as Se } from "./expose/index.js";
|
|
16
16
|
import { useCiUploadComputed as ze } from "./computed/index.js";
|
|
17
|
-
import { defaultProps as
|
|
18
|
-
const
|
|
17
|
+
import { defaultProps as De } from "./props/index.js";
|
|
18
|
+
const Le = { class: "CiUpload" }, $e = {
|
|
19
19
|
key: 0,
|
|
20
20
|
class: "tip-slot-textInfo"
|
|
21
|
-
},
|
|
21
|
+
}, Ee = {
|
|
22
22
|
key: 1,
|
|
23
23
|
class: "default-tip-slot-textInfo"
|
|
24
|
-
},
|
|
24
|
+
}, Pe = { class: "upload-btn-text" }, Ue = {
|
|
25
25
|
key: 0,
|
|
26
26
|
class: "tip-slot-textInfo"
|
|
27
|
-
},
|
|
27
|
+
}, Ne = {
|
|
28
28
|
key: 1,
|
|
29
29
|
class: "default-tip-slot-textInfo"
|
|
30
|
-
},
|
|
30
|
+
}, Re = { class: "file-item-top" }, Ie = { class: "file-name-file-icon" }, Te = ["src"], Ke = { class: "top-right" }, Me = {
|
|
31
31
|
key: 0,
|
|
32
32
|
class: "file-size"
|
|
33
33
|
}, Ve = {
|
|
@@ -46,6 +46,8 @@ const $e = { class: "CiUpload" }, Ee = {
|
|
|
46
46
|
props: /* @__PURE__ */ de({
|
|
47
47
|
action: {},
|
|
48
48
|
downloadUrl: {},
|
|
49
|
+
data: {},
|
|
50
|
+
headers: {},
|
|
49
51
|
uploadBtnText: {},
|
|
50
52
|
maxSize: {},
|
|
51
53
|
multiple: { type: Boolean },
|
|
@@ -60,30 +62,35 @@ const $e = { class: "CiUpload" }, Ee = {
|
|
|
60
62
|
showPreviewBtn: { type: Boolean },
|
|
61
63
|
showDownloadBtn: { type: Boolean },
|
|
62
64
|
showDeleteBtn: { type: Boolean },
|
|
65
|
+
customDownload: { type: Boolean },
|
|
63
66
|
drag: { type: Boolean },
|
|
64
67
|
disabled: { type: Boolean },
|
|
65
68
|
readonly: { type: Boolean },
|
|
66
69
|
axiosInstance: {}
|
|
67
|
-
},
|
|
68
|
-
emits: ["update:fileList", "onSuccess", "onRemove", "onChange", "onError"],
|
|
70
|
+
}, De),
|
|
71
|
+
emits: ["update:fileList", "onSuccess", "onRemove", "onChange", "onError", "onCustomDownload"],
|
|
69
72
|
setup(M, { expose: V, emit: q }) {
|
|
70
|
-
const A = ue(),
|
|
73
|
+
const A = ue(), E = D(), b = D(!1), w = D([]), { checkUploadStatus: H } = Se(w), r = M, { customHttpRequest: W } = be(r.axiosInstance), d = q;
|
|
71
74
|
V({
|
|
72
75
|
checkUploadStatus: H
|
|
73
76
|
});
|
|
74
|
-
const { retryUpload: F } = Be(
|
|
77
|
+
const { retryUpload: F } = Be(w, d, r);
|
|
75
78
|
ce(
|
|
76
79
|
() => r.fileList,
|
|
77
80
|
(e) => {
|
|
78
|
-
|
|
81
|
+
w.value = e.map((t) => ({ ...t }));
|
|
79
82
|
},
|
|
80
83
|
{ immediate: !0 }
|
|
81
84
|
);
|
|
82
85
|
const z = (e) => {
|
|
83
86
|
var t;
|
|
84
|
-
(t =
|
|
85
|
-
},
|
|
86
|
-
|
|
87
|
+
(t = E.value) == null || t.handleRemove(e);
|
|
88
|
+
}, P = (e) => {
|
|
89
|
+
if (r.customDownload) {
|
|
90
|
+
d("onCustomDownload", e);
|
|
91
|
+
return;
|
|
92
|
+
}
|
|
93
|
+
e.downloadPercentage = 0, e.status = "downloading", Ce(
|
|
87
94
|
{
|
|
88
95
|
fileKey: e.fileKey || "当前此条数据没有fileKey字段",
|
|
89
96
|
fileName: e.fileName || "当前此条数据没有fileName字段"
|
|
@@ -99,10 +106,10 @@ const $e = { class: "CiUpload" }, Ee = {
|
|
|
99
106
|
);
|
|
100
107
|
}, O = (e) => {
|
|
101
108
|
const t = r.accept.split(",").map((i) => i.trim().toLowerCase()), u = e.type.toLowerCase(), f = e.name.toLowerCase();
|
|
102
|
-
return t.some((i) => u === i || f.endsWith(i)) ? e.size <= r.maxSize ? !0 : (
|
|
109
|
+
return t.some((i) => u === i || f.endsWith(i)) ? e.size <= r.maxSize ? !0 : ($.error(`文件大小超出限制，最大文件大小为${ee.value}`), b.value = !0, L(() => {
|
|
103
110
|
const i = r.fileList.filter((o) => o.uid !== e.uid);
|
|
104
111
|
d("update:fileList", i), b.value = !1;
|
|
105
|
-
}), !1) : (
|
|
112
|
+
}), !1) : ($.error("不支持上传该类型文件"), b.value = !0, L(() => {
|
|
106
113
|
const i = r.fileList.filter((o) => o.uid !== e.uid);
|
|
107
114
|
d("update:fileList", i), b.value = !1;
|
|
108
115
|
}), !1);
|
|
@@ -119,49 +126,51 @@ const $e = { class: "CiUpload" }, Ee = {
|
|
|
119
126
|
// 用户点击“确定”按钮，允许删除
|
|
120
127
|
() => !1
|
|
121
128
|
// 用户点击“取消”按钮，取消删除
|
|
122
|
-
),
|
|
123
|
-
|
|
124
|
-
},
|
|
125
|
-
t.status = "fail", t.percentage = 0,
|
|
129
|
+
), G = (e, t) => {
|
|
130
|
+
$.error(`文件数量超出限制，最大文件数量为${r.limit}个`);
|
|
131
|
+
}, J = (e, t, u) => {
|
|
132
|
+
t.status = "fail", t.percentage = 0, L(() => {
|
|
126
133
|
d("update:fileList", [...u, t]), d("onError", t, u);
|
|
127
134
|
});
|
|
128
|
-
},
|
|
129
|
-
var p,
|
|
135
|
+
}, Q = (e, t, u) => {
|
|
136
|
+
var p, k, i;
|
|
130
137
|
if (!e) return;
|
|
131
138
|
const f = u.find((o) => o.uid === t.uid);
|
|
132
|
-
f && (f.fileName = ((p = e == null ? void 0 : e.data) == null ? void 0 : p.fileName) || t.name, f.fileKey = ((
|
|
133
|
-
}, Q = (e, t) => {
|
|
134
|
-
e.status === "success" && !e.response || (d("update:fileList", t), d("onChange", e, t));
|
|
139
|
+
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);
|
|
135
140
|
}, X = (e, t) => {
|
|
141
|
+
e.status === "success" && !e.response || (d("update:fileList", t), d("onChange", e, t));
|
|
142
|
+
}, Y = (e, t) => {
|
|
136
143
|
d("update:fileList", t), d("onRemove", e, t);
|
|
137
|
-
}, { hasRealDefaultSlot:
|
|
144
|
+
}, { hasRealDefaultSlot: Z, finalBeforeUpload: x, maxSizeInMB: ee, defaultTipSlotTextInfo: U, otherSlots: te } = ze(r, A, O);
|
|
138
145
|
return (e, t) => {
|
|
139
|
-
const u = le, f = se, p = ae,
|
|
140
|
-
return s(), l("div",
|
|
141
|
-
e.readonly ? n("", !0) : (s(),
|
|
146
|
+
const u = le, f = se, p = ae, k = ne, i = ie;
|
|
147
|
+
return s(), l("div", Le, [
|
|
148
|
+
e.readonly ? n("", !0) : (s(), C(f, pe({
|
|
142
149
|
key: 0,
|
|
143
150
|
class: ["ci-el-upload-component", { "is-disabled": e.disabled }],
|
|
144
151
|
ref_key: "uploadRef",
|
|
145
|
-
ref:
|
|
152
|
+
ref: E,
|
|
146
153
|
action: e.action,
|
|
147
|
-
|
|
154
|
+
data: e.data,
|
|
155
|
+
headers: e.headers,
|
|
156
|
+
"file-list": w.value,
|
|
148
157
|
accept: e.accept,
|
|
149
158
|
limit: e.limit,
|
|
150
159
|
multiple: e.multiple,
|
|
151
160
|
drag: e.drag,
|
|
152
161
|
disabled: e.disabled,
|
|
153
|
-
"before-upload": y(
|
|
162
|
+
"before-upload": y(x),
|
|
154
163
|
"before-remove": j,
|
|
155
|
-
"on-success":
|
|
156
|
-
"on-change":
|
|
157
|
-
"on-remove":
|
|
158
|
-
"on-exceed":
|
|
159
|
-
"on-error":
|
|
164
|
+
"on-success": Q,
|
|
165
|
+
"on-change": X,
|
|
166
|
+
"on-remove": Y,
|
|
167
|
+
"on-exceed": G,
|
|
168
|
+
"on-error": J,
|
|
160
169
|
"http-request": y(W),
|
|
161
170
|
"show-file-list": !1
|
|
162
171
|
}, e.$attrs), me({
|
|
163
172
|
default: c(() => [
|
|
164
|
-
y(
|
|
173
|
+
y(Z) ? _(e.$slots, "default", { key: 0 }, void 0, !0) : (s(), l(m, { key: 1 }, [
|
|
165
174
|
e.drag ? (s(), l(m, { key: 0 }, [
|
|
166
175
|
t[0] || (t[0] = a("img", {
|
|
167
176
|
class: "upload-btn-icon",
|
|
@@ -182,10 +191,10 @@ const $e = { class: "CiUpload" }, Ee = {
|
|
|
182
191
|
a("span", { class: "drag-text-info-click" }, "点击上传"),
|
|
183
192
|
a("span", { class: "drag-text-info-black" }, "或将文件拖拽到这里上传")
|
|
184
193
|
], -1)),
|
|
185
|
-
e.$slots.tip ? (s(), l("div",
|
|
186
|
-
|
|
187
|
-
])) : (s(), l("div",
|
|
188
|
-
], 64)) : (s(),
|
|
194
|
+
e.$slots.tip ? (s(), l("div", $e, [
|
|
195
|
+
_(e.$slots, "tip", {}, void 0, !0)
|
|
196
|
+
])) : (s(), l("div", Ee, v(y(U)), 1))
|
|
197
|
+
], 64)) : (s(), C(u, {
|
|
189
198
|
key: 1,
|
|
190
199
|
class: "upload-btn",
|
|
191
200
|
disabled: e.disabled
|
|
@@ -206,7 +215,7 @@ const $e = { class: "CiUpload" }, Ee = {
|
|
|
206
215
|
src: K,
|
|
207
216
|
alt: ""
|
|
208
217
|
}, null, -1)),
|
|
209
|
-
a("span",
|
|
218
|
+
a("span", Pe, v(e.uploadBtnText), 1)
|
|
210
219
|
]),
|
|
211
220
|
_: 1,
|
|
212
221
|
__: [4, 5, 6]
|
|
@@ -218,38 +227,38 @@ const $e = { class: "CiUpload" }, Ee = {
|
|
|
218
227
|
e.drag ? void 0 : {
|
|
219
228
|
name: "tip",
|
|
220
229
|
fn: c(() => [
|
|
221
|
-
e.$slots.tip ? (s(), l("div",
|
|
222
|
-
|
|
223
|
-
])) : (s(), l("div",
|
|
230
|
+
e.$slots.tip ? (s(), l("div", Ue, [
|
|
231
|
+
_(e.$slots, "tip", {}, void 0, !0)
|
|
232
|
+
])) : (s(), l("div", Ne, v(y(U)), 1))
|
|
224
233
|
]),
|
|
225
234
|
key: "0"
|
|
226
235
|
},
|
|
227
|
-
|
|
236
|
+
N(y(te), (o, g) => ({
|
|
228
237
|
name: g,
|
|
229
238
|
fn: c((oe) => [
|
|
230
|
-
|
|
239
|
+
_(e.$slots, g, fe(ge(oe || {})), void 0, !0)
|
|
231
240
|
])
|
|
232
241
|
}))
|
|
233
|
-
]), 1040, ["class", "action", "file-list", "accept", "limit", "multiple", "drag", "disabled", "before-upload", "http-request"])),
|
|
234
|
-
|
|
242
|
+
]), 1040, ["class", "action", "data", "headers", "file-list", "accept", "limit", "multiple", "drag", "disabled", "before-upload", "http-request"])),
|
|
243
|
+
w.value.length ? (s(), l("div", {
|
|
235
244
|
key: 1,
|
|
236
245
|
class: S(["custom-file-list-default", { "is-readonly": e.readonly }])
|
|
237
246
|
}, [
|
|
238
|
-
(s(!0), l(m, null,
|
|
247
|
+
(s(!0), l(m, null, N(w.value, (o) => (s(), l("div", {
|
|
239
248
|
class: "file-item-wrapper",
|
|
240
249
|
key: o.uid
|
|
241
250
|
}, [
|
|
242
|
-
a("div",
|
|
251
|
+
a("div", Re, [
|
|
243
252
|
a("div", Ie, [
|
|
244
253
|
e.showFileExtIcon ? (s(), l("img", {
|
|
245
254
|
key: 0,
|
|
246
255
|
class: "file-icon",
|
|
247
|
-
src: y(
|
|
256
|
+
src: y(_e)(o.fileName || o.name)
|
|
248
257
|
}, null, 8, Te)) : n("", !0),
|
|
249
258
|
h(p, {
|
|
250
259
|
class: "top-left file-name",
|
|
251
260
|
disabled: o.status === "downloading" || o.status === "uploading",
|
|
252
|
-
onClick: (g) =>
|
|
261
|
+
onClick: (g) => P(o)
|
|
253
262
|
}, {
|
|
254
263
|
default: c(() => [
|
|
255
264
|
B(v(o.fileName || o.name), 1)
|
|
@@ -271,24 +280,24 @@ const $e = { class: "CiUpload" }, Ee = {
|
|
|
271
280
|
_: 2,
|
|
272
281
|
__: [7]
|
|
273
282
|
}, 1032, ["onClick"]),
|
|
274
|
-
h(
|
|
283
|
+
h(k, { direction: "vertical" })
|
|
275
284
|
], 64)) : n("", !0),
|
|
276
285
|
e.showDownloadBtn ? (s(), l(m, { key: 1 }, [
|
|
277
286
|
h(p, {
|
|
278
287
|
disabled: o.status === "downloading",
|
|
279
|
-
onClick: (g) =>
|
|
288
|
+
onClick: (g) => P(o)
|
|
280
289
|
}, {
|
|
281
290
|
default: c(() => [
|
|
282
|
-
B(v(o.status === "downloading" ? `下载中...${o.downloadPercentage || 0}%` : "下载"), 1)
|
|
291
|
+
B(v(o.status === "downloading" && e.showDownloadProgress && e.customDownload ? `下载中...${o.downloadPercentage || 0}%` : "下载"), 1)
|
|
283
292
|
]),
|
|
284
293
|
_: 2
|
|
285
294
|
}, 1032, ["disabled", "onClick"]),
|
|
286
|
-
e.showDeleteBtn && !e.readonly ? (s(),
|
|
295
|
+
e.showDeleteBtn && !e.readonly ? (s(), C(k, {
|
|
287
296
|
key: 0,
|
|
288
297
|
direction: "vertical"
|
|
289
298
|
})) : n("", !0)
|
|
290
299
|
], 64)) : n("", !0),
|
|
291
|
-
e.showDeleteBtn && !e.readonly ? (s(),
|
|
300
|
+
e.showDeleteBtn && !e.readonly ? (s(), C(p, {
|
|
292
301
|
key: 2,
|
|
293
302
|
onClick: (g) => z(o)
|
|
294
303
|
}, {
|
|
@@ -343,7 +352,7 @@ const $e = { class: "CiUpload" }, Ee = {
|
|
|
343
352
|
default: c(() => [
|
|
344
353
|
a("img", {
|
|
345
354
|
class: "retry-icon",
|
|
346
|
-
src:
|
|
355
|
+
src: we,
|
|
347
356
|
onClick: (g) => y(F)(o)
|
|
348
357
|
}, null, 8, He)
|
|
349
358
|
]),
|
|
@@ -351,7 +360,7 @@ const $e = { class: "CiUpload" }, Ee = {
|
|
|
351
360
|
}, 1024),
|
|
352
361
|
t[12] || (t[12] = a("img", {
|
|
353
362
|
class: "fail-icon",
|
|
354
|
-
src:
|
|
363
|
+
src: ke
|
|
355
364
|
}, null, -1))
|
|
356
365
|
], 2)) : n("", !0)
|
|
357
366
|
])
|
|
@@ -361,7 +370,7 @@ const $e = { class: "CiUpload" }, Ee = {
|
|
|
361
370
|
o.status === "uploading" ? (s(), l("div", We, [
|
|
362
371
|
a("div", {
|
|
363
372
|
class: "file-progress-inner",
|
|
364
|
-
style:
|
|
373
|
+
style: R({ width: (o.percentage || 0) + "%" })
|
|
365
374
|
}, null, 4)
|
|
366
375
|
])) : n("", !0)
|
|
367
376
|
], 64)) : n("", !0),
|
|
@@ -369,7 +378,7 @@ const $e = { class: "CiUpload" }, Ee = {
|
|
|
369
378
|
o.status === "downloading" ? (s(), l("div", Fe, [
|
|
370
379
|
a("div", {
|
|
371
380
|
class: "file-progress-inner",
|
|
372
|
-
style:
|
|
381
|
+
style: R({ width: (o.downloadPercentage || 0) + "%" })
|
|
373
382
|
}, null, 4)
|
|
374
383
|
])) : n("", !0)
|
|
375
384
|
], 64)) : n("", !0)
|
|
@@ -3,6 +3,10 @@ const o = {
|
|
|
3
3
|
action: "http://localhost:3001/upload",
|
|
4
4
|
// 下载 URL - 默认值: 是我本机本地跑一个 Node 服务, 提供了一个下载接口
|
|
5
5
|
downloadUrl: "http://localhost:3001/download-by-key",
|
|
6
|
+
// 上传时附带的额外参数 - 默认值: {}
|
|
7
|
+
data: () => ({}),
|
|
8
|
+
// 设置上传的请求头部 - 默认值: {}
|
|
9
|
+
headers: () => ({}),
|
|
6
10
|
// 上传按钮文本 - 默认值: 选择附件
|
|
7
11
|
uploadBtnText: "选择附件",
|
|
8
12
|
// 限制上传文件的大小（单位： byte） - 默认值: 100.00MB
|
|
@@ -30,6 +34,8 @@ const o = {
|
|
|
30
34
|
showDownloadBtn: !0,
|
|
31
35
|
// 是否显示删除按钮 - 默认值: true
|
|
32
36
|
showDeleteBtn: !0,
|
|
37
|
+
// 是否由开发者自定义下载逻辑 - 默认值: false
|
|
38
|
+
customDownload: !1,
|
|
33
39
|
// 是否支持拖拽上传 - 默认值: false
|
|
34
40
|
drag: !1,
|
|
35
41
|
// 是否禁用上传 - 默认值: false
|
package/dist/lib/favicon.ico
CHANGED
|
Binary file
|