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