@aplus-frontend/ui
Version:
232 lines (231 loc) • 7.95 kB
JavaScript
import { defineComponent as re, inject as o, ref as h, watch as ce, computed as ie, createElementBlock as S, openBlock as k, normalizeClass as ue, unref as a, createElementVNode as r, createCommentVNode as E, toDisplayString as x, normalizeStyle as pe, createBlock as de, withModifiers as ve, createVNode as fe } from "vue";
import { DeleteOutlined as me } from "@ant-design/icons-vue";
import { message as p, Progress as ge } from "@aplus-frontend/antdv";
import "../../../config-provider/index.mjs";
import { useToken as he } from "../../../config-provider/hooks/use-token.mjs";
import j from "../assets/single-file-icon.png.mjs";
import { useOss as ke, getOssInstance as _e } from "../hooks/useOss.mjs";
import ye from "../style/index.mjs";
import { fileMatchesAccept as we, getAcceptText as Ue } from "../utils/accept.mjs";
import { getName as De, getReturnData as G } from "../utils/returnData.mjs";
import { useLocale as Ce } from "../../../config-provider/hooks/use-locale.mjs";
import { useNamespace as be } from "../../../config-provider/hooks/use-namespace.mjs";
const Fe = ["accept"], Ne = {
key: 0,
class: "state-un"
}, Se = ["src"], Ee = { class: "state-un-title" }, xe = { class: "state-un-subtitle" }, ze = {
key: 1,
class: "state-ing"
}, Ae = { class: "left" }, Re = ["src"], Be = { class: "center" }, Me = { class: "center-progress" }, Ke = /* @__PURE__ */ re({
__name: "SingleFile",
setup(Pe, { expose: W }) {
const { t: s } = Ce(), { b: z } = be("ap-upload-single-file"), H = ye("ap-upload"), { put: J } = ke(), K = o("dirName"), Q = o("baseDirName"), _ = o("accept") || "*", y = o("maxSize") ?? 500, X = o("title") || s("ap.apUpload.clickOrDragUpload"), w = o("subTitle"), { token: A } = he(), c = o("value"), U = o("needName"), d = o("uploadingCount"), R = o("beforeUpload"), B = o("customRequest"), M = o("getOssAccess"), Y = o("maxSizeErrorMsg"), Z = o("acceptErrorMsg"), P = o("onRemove"), D = o("showUploadErrorMsg"), T = o("bucket"), n = h(null);
let O;
ce(
() => c?.value,
function(e) {
n.value === null && e && L(e);
},
{ immediate: !0 }
);
function L(e) {
e ? setTimeout(() => {
const t = De(U, e);
l.value = 3, n.value = new File([e], t, {}), c.value = e;
}) : (l.value = 1, n.value = null, c.value = void 0);
}
W({ setValue: L });
const l = h(1), f = h(0), m = h(null), V = ie(() => n.value && c?.value);
function ee() {
l.value === 1 && m.value?.click();
}
function I(e) {
e.preventDefault(), e.stopPropagation();
}
function te(e) {
e.dataTransfer.dropEffect = "copy", e.preventDefault(), e.stopPropagation();
}
function ae(e) {
$(e);
}
function oe(e) {
if (e.preventDefault(), e.stopPropagation(), l.value !== 1)
return;
var t = e.dataTransfer, u = [], i = 0, q = t.files.length;
function v() {
i === q - 1 && ae(u), i++;
}
if (t.items !== void 0)
for (var C = 0; C < t.items.length; C++) {
var b = t.items[C];
if (b.kind === "file" && b.webkitGetAsEntry().isFile) {
var se = b.getAsFile();
u.push(se), v();
}
}
else
for (let N = 0; N < q; N++) {
var g = t.files[N];
if (g.type)
u.push(g), v();
else
try {
var F = new FileReader();
F.readAsDataURL(g.slice(0, 3)), F.addEventListener(
"load",
function() {
u.push(g), v();
},
!1
), F.addEventListener(
"error",
function() {
p.warning(s("ap.apUpload.foldersNotSupported")), v();
},
!1
);
} catch {
p.warning(s("ap.apUpload.foldersNotSupported")), v();
}
}
}
async function ne(e) {
const t = e.target;
await $(t?.files), m.value && (m.value.value = "");
}
async function $(e) {
if (e?.length) {
if (e[0].size > y * 1024 * 1024) {
p.warning(
Y || s("ap.apUpload.maxUploadFileSize", {
maxSize: y
})
);
return;
}
if (!we(e[0], _)) {
p.warning(
Z || s("ap.apUpload.fileFormatNotSupported")
);
return;
}
if (typeof R == "function" && await R(e[0]) === !1)
return;
if (n.value = e[0], l.value = 2, f.value = 0, d.value++, typeof B == "function") {
B({
onProgress: (t) => {
f.value = t;
},
onError: (t) => {
D && p.warning(t || s("ap.apUpload.networkAnomaly")), l.value = 1, n.value = null, d.value--;
},
onSuccess: (t) => {
c.value = G(
U,
t,
n.value.name
), l.value = 3, d.value--;
},
file: e[0]
});
return;
}
try {
const t = await (T ? M(T) : M()), u = await _e(async () => t);
O = u, J({
file: n.value,
dirName: K,
oss: u,
successCallBack(i) {
c.value = G(
U,
i,
n.value.name
), l.value = 3, d.value--;
},
errorCallBack(i) {
D && p.warning(i || s("ap.apUpload.networkAnomaly")), l.value = 1, n.value = null, d.value--;
},
progressCallBack(i) {
f.value = i;
},
baseDirName: Q,
bucket: t?.bucket
});
} catch (t) {
D && p.warning(
typeof t?.message == "string" ? t.message : s("ap.apUpload.networkAnomaly")
), l.value = 1, n.value = null, d.value--;
}
}
}
function le() {
P && P?.(n.value), n.value && !c?.value && O?.pauseUpload?.(), l.value = 1, n.value = null, c.value = void 0;
}
return (e, t) => (k(), S("div", {
class: ue({
[a(z)()]: !0,
[a(z)("un")]: l.value === 1,
[a(H) ?? ""]: !0
}),
onClick: ee,
onDragenter: I,
onDragover: te,
onDragleave: I,
onDrop: oe
}, [
r("input", {
ref_key: "fileRef",
ref: m,
style: { display: "none" },
type: "file",
accept: a(_),
onChange: ne
}, null, 40, Fe),
l.value === 1 ? (k(), S("div", Ne, [
r("img", {
class: "state-un-icon",
src: a(j)
}, null, 8, Se),
r("div", Ee, x(a(X)), 1),
r("div", xe, x(typeof a(w) == "string" && a(w).length > 0 ? a(w) : `${a(s)("ap.apUpload.supportExtension")}：${a(Ue)(
a(_)
)}，${a(s)("ap.apUpload.maxWarnUploadFileSize", {
maxSize: a(y)
})}`), 1)
])) : E("", !0),
[2, 3].includes(l.value) ? (k(), S("div", ze, [
r("div", Ae, [
r("img", { src: a(j) }, null, 8, Re)
]),
r("div", Be, [
r("div", {
class: "center-title",
style: pe({
color: V.value ? "#0070FF" : "#182948"
})
}, x(n.value?.name), 5),
r("div", Me, [
V.value ? E("", !0) : (k(), de(a(ge), {
key: 0,
percent: f.value,
size: 4,
"show-info": !1,
"trail-color": a(A).borderColorBase,
"stroke-color": a(A).colorPrimary
}, null, 8, ["percent", "trail-color", "stroke-color"]))
])
]),
r("div", {
class: "right",
onClick: ve(le, ["stop"])
}, [
fe(a(me))
])
])) : E("", !0)
], 34));
}
});
export {
Ke as default
};