@aplus-frontend/ui
Version:
267 lines (266 loc) • 9.07 kB
JavaScript
import { defineComponent as Z, inject as r, ref as $, watch as F, nextTick as ee, createElementBlock as g, openBlock as h, normalizeClass as te, unref as o, createElementVNode as d, renderSlot as ae, createCommentVNode as I, Fragment as ne, renderList as oe, withDirectives as se, createVNode as k, vShow as ie, toDisplayString as C } from "vue";
import "../../config-provider/index.mjs";
import { getPath as re, getName as ce, getReturnData as V } from "../utils/returnData.mjs";
import { CloseOutlined as ue, PlusOutlined as le } from "@ant-design/icons-vue";
import { useOss as pe, getOssInstance as T } from "../hooks/useOss.mjs";
import { fileMatchesAccept as de, getAcceptText as me } from "../utils/accept.mjs";
import { message as m, Progress as fe } from "@aplus-frontend/antdv";
import { omit as ge } from "lodash-unified";
import { useLocale as he } from "../../config-provider/hooks/use-locale.mjs";
import { useNamespace as ve } from "../../config-provider/hooks/use-namespace.mjs";
const xe = ["accept"], we = { class: "picture-context" }, ye = { class: "picture-item-box" }, _e = ["src"], Ue = { class: "picture-item-shadow" }, ke = ["onClick"], Ce = {
key: 0,
class: "picture-item-uploading"
}, Ee = { class: "picture-title" }, Re = { key: 0 }, Se = { key: 1 }, Le = /* @__PURE__ */ Z({
__name: "Picture",
setup(Me, { expose: D }) {
const { t: u } = he(), { b: E } = ve("ap-upload-picture"), { put: L } = pe(), O = r("theme"), B = r("dirName"), y = r("accept") || "image/*", _ = r("maxSize") ?? 5, R = r("title"), l = r("maxCount") ?? 10, v = r("uploadingCount"), S = r("beforeUpload"), M = r("customRequest"), b = r("getOssAccess"), q = r("maxSizeErrorMsg"), j = r("maxCountErrorMsg"), G = r("acceptErrorMsg"), x = $(null), c = r("value"), w = r("needName"), z = r("onRemove"), U = r("showUploadErrorMsg");
let s = $([]);
const f = [];
F(
() => c?.value,
async function(t) {
!s?.value?.length && t && A(t);
},
{ immediate: !0 }
);
function A(t) {
if (!t) {
c.value = void 0, f.splice(0, f.length), s.value = [];
return;
}
ee(async () => {
const n = [];
for (let e of t) {
const a = re(w, e), i = ce(w, e), p = await T(b), X = await p.getSignatureUrl(a), Y = {
...typeof e == "string" ? {} : e,
...new File([e], i, {}),
uid: `${(/* @__PURE__ */ new Date()).getTime()}-${Math.random()}`,
thumbUrl: X,
status: "success",
percent: 100,
path: a
};
n.push(Y), p.destroy();
}
if (l && n.length > l) {
m.warning(
u("ap.apUpload.fileInitializationException", {
maxCount: l
})
);
return;
}
n.forEach((e) => {
s.value.push(e), f.push({
uid: e.uid,
path: e.path
});
}), c.value = t;
});
}
D({ setValue: A });
function H() {
x.value?.click();
}
function J(t) {
const n = t.target;
K(n?.files);
}
function K(t) {
if (t?.length)
for (let n = 0; n < t.length; n++)
Q(t[n]);
x.value && (x.value.value = "");
}
let N;
async function Q(t) {
if (l && l > 1 && s.value.length >= l)
return clearTimeout(N), N = setTimeout(() => {
m.warning(
j || u("ap.apUpload.maxUploadPicture", { maxCount: l })
);
}), !1;
if (t.size > _ * 1024 * 1024)
return m.warning(
q || u("ap.apUpload.maxUploadFileSize", { maxSize: _ })
), !1;
if (!/image\/\w+/.test(t.type) || !de(t, y))
return m.warning(
G || u("ap.apUpload.pictureFormatNotSupported")
), !1;
if (typeof S == "function" && await S(t) === !1)
return !1;
const n = new FileReader();
n.readAsDataURL(t), n.onload = function() {
const e = {
...t,
uid: `${(/* @__PURE__ */ new Date()).getTime()}-${Math.random()}`,
thumbUrl: this.result,
status: "uploading",
percent: 0
};
W(e, t);
}, n.onerror = function() {
m.warning(u("ap.apUpload.imageParsingFailed"));
};
}
async function W(t, n) {
if (v.value++, typeof M == "function") {
M({
onProgress: (e) => {
const a = s.value.find((i) => i.uid === t.uid);
a && (a.percent = e);
},
onError: (e) => {
U && m.warning(e || u("ap.apUpload.networkAnomaly"));
const a = s.value.findIndex(
(i) => i.uid === t.uid
);
a > -1 && s.value.splice(a, 1), v.value--;
},
onSuccess: (e) => {
const a = s.value.find((i) => i.uid === t.uid);
a && (a.status = "success", a.path = e), c.value = [
...c.value || [],
V(w, e, n.name)
], f.push({
uid: t.uid,
path: e
}), v.value--;
},
file: n
});
return;
}
try {
const e = await T(b);
t.oss = e, s.value.push(t), L({
file: n,
dirName: B,
oss: e,
successCallBack(a) {
const i = s.value.find((p) => p.uid === t.uid);
i && (i.status = "success", i.path = a), c.value = [
...c.value || [],
V(w, a, n.name)
], f.push({
uid: t.uid,
path: a
}), v.value--;
},
errorCallBack(a) {
U && m.warning(a || u("ap.apUpload.networkAnomaly"));
const i = s.value.findIndex(
(p) => p.uid === t.uid
);
i > -1 && s.value.splice(i, 1), v.value--;
},
progressCallBack(a) {
const i = s.value.find((p) => p.uid === t.uid);
i && (i.percent = a);
}
});
} catch (e) {
U && m.warning(
typeof e?.message == "string" ? e.message : u("ap.apUpload.networkAnomaly")
);
const a = s.value.findIndex((i) => i.uid === t.uid);
a > -1 && s.value.splice(a, 1), v.value--;
}
}
function P(t) {
if (z && z?.(t), t.path && c) {
if (Array.isArray(c.value)) {
const e = f.findIndex(
(a) => a.uid === t.uid
);
if (e >= 0) {
const a = c?.value?.slice() ?? [];
a?.splice(e, 1), c.value = a, f.splice(e, 1);
}
c.value.length === 0 && (c.value = void 0);
}
} else
t?.oss?.pauseUpload();
const n = s.value.findIndex(
(e) => e.uid === t.uid
);
return s.value.splice(n, 1), Promise.resolve(!0);
}
return (t, n) => (h(), g("div", {
class: te({
[o(E)()]: !0,
[o(E)("admin")]: o(O) === "admin"
})
}, [
d("input", {
ref_key: "fileRef",
ref: x,
style: { display: "none" },
type: "file",
accept: o(y),
onChange: J
}, null, 40, xe),
d("div", we, [
ae(t.$slots, "pictureContext", {
fileList: o(s).map((e) => ({
...o(ge)(e, "oss"),
oss: {
pauseUpload: e?.oss?.pauseUpload
}
})),
remove: P
}, () => [
(h(!0), g(ne, null, oe(o(s), (e) => (h(), g("div", {
key: e.uid,
class: "picture-item"
}, [
d("div", ye, [
d("img", {
src: e.thumbUrl,
alt: ""
}, null, 8, _e),
se(d("div", Ue, [
d("div", {
class: "picture-item-close",
onClick: (a) => P(e)
}, [
k(o(ue))
], 8, ke),
e.status === "uploading" ? (h(), g("div", Ce, [
k(o(fe), {
percent: e.percent,
"stroke-color": "#ffffff",
"trail-color": "rgba(255, 255, 255, 0.3)",
size: 4,
"show-info": !1
}, null, 8, ["percent"])
])) : I("", !0)
], 512), [
[ie, e.status === "uploading"]
])
])
]))), 128))
]),
o(l) === void 0 || o(s).length < o(l) ? (h(), g("div", {
key: 0,
class: "picture-upload",
onClick: H
}, [
k(o(le)),
d("div", null, C(o(u)("ap.apUpload.update")), 1)
])) : I("", !0)
]),
d("div", Ee, [
o(R) ? (h(), g("div", Re, C(o(R)), 1)) : (h(), g("div", Se, C(`${o(u)("ap.apUpload.supportExtension")}：${o(me)(o(y))}，${o(u)(
"ap.apUpload.maxUploadPictureSize",
{ maxSize: o(_) }
)}`), 1))
])
], 2));
}
});
export {
Le as default
};