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