461 lines
19 KiB
Vue
461 lines
19 KiB
Vue
<script>
|
|
// 工单附件列表提供图片预览与下载，受保护附件通过鉴权下载接口获取。
|
|
import "~/assets/styles/TicketAttachments.DtbJGLkE.css";
|
|
import { toDisplayString } from "vue";
|
|
import { renderList } from "vue";
|
|
import { normalizeClass } from "vue";
|
|
import { createBlock } from "vue";
|
|
import { ref } from "vue";
|
|
import { withCtx } from "vue";
|
|
import { createCommentVNode } from "vue";
|
|
import { isRef } from "vue";
|
|
import { createElementBlock } from "vue";
|
|
import { Fragment } from "vue";
|
|
import { createElementVNode } from "vue";
|
|
import { createTextVNode } from "vue";
|
|
import { unref } from "vue";
|
|
import { defineComponent } from "vue";
|
|
import { createVNode } from "vue";
|
|
import { openBlock } from "vue";
|
|
import { useApi } from "~/lib/auth.js";
|
|
import dialog from "primevue/dialog";
|
|
import button from "primevue/button";
|
|
import { t as _plugin_vue_export_helper_t } from "~/lib/_plugin-vue_export-helper.js";
|
|
import message from "primevue/message";
|
|
import { t as ticketAttachments_t } from "~/lib/ticketAttachments.js";
|
|
var S = {
|
|
key: 1,
|
|
class: `message-attachments`,
|
|
"aria-label": `消息附件`,
|
|
},
|
|
C = [`aria-label`, `onClick`],
|
|
w = {
|
|
class: `thumbnail`,
|
|
},
|
|
T = [`src`, `alt`, `onError`],
|
|
E = {
|
|
key: 1,
|
|
class: `pi pi-image`,
|
|
"aria-hidden": `true`,
|
|
},
|
|
D = {
|
|
class: `image-caption`,
|
|
},
|
|
O = {
|
|
class: `attachment-name`,
|
|
},
|
|
k = {
|
|
key: 1,
|
|
class: `file-attachment`,
|
|
},
|
|
A = [`href`, `download`, `aria-label`],
|
|
j = {
|
|
key: 2,
|
|
class: `attachment-unavailable`,
|
|
},
|
|
M = {
|
|
key: 0,
|
|
class: `preview-status`,
|
|
role: `status`,
|
|
},
|
|
N = {
|
|
key: 1,
|
|
class: `preview-error`,
|
|
role: `alert`,
|
|
},
|
|
P = [`aria-busy`],
|
|
F = [`src`, `alt`],
|
|
I = {
|
|
class: `preview-actions`,
|
|
},
|
|
L = [`href`, `download`],
|
|
R = Object.assign(
|
|
_plugin_vue_export_helper_t(
|
|
defineComponent({
|
|
__name: `TicketAttachments`,
|
|
props: {
|
|
files: {},
|
|
},
|
|
setup(p) {
|
|
let y = ref(null),
|
|
R = ref(!1),
|
|
z = ref(!1),
|
|
B = ref(!1),
|
|
V = ref(!1),
|
|
H = ref({}),
|
|
U = null,
|
|
W = ref({}),
|
|
G = ref(``);
|
|
// 已有直接链接的附件不重复请求；按文件名锁定下载状态，防止连续重复点击。
|
|
async function K(e) {
|
|
if (
|
|
!(e.href || !e.storageName || W.value[e.name]) &&
|
|
(!U && typeof useApi == `function` && (U = useApi()), U)
|
|
) {
|
|
((W.value[e.name] = !0), (G.value = ``));
|
|
try {
|
|
await U.download(
|
|
`/ticket/download`,
|
|
{
|
|
name: e.storageName,
|
|
},
|
|
e.name,
|
|
{
|
|
method: `POST`,
|
|
},
|
|
);
|
|
} catch (e) {
|
|
G.value =
|
|
e instanceof Error ? e.message : `附件下载失败，请重试`;
|
|
} finally {
|
|
W.value[e.name] = !1;
|
|
}
|
|
}
|
|
}
|
|
// 只有附件工具判定可预览的项目才打开弹窗，并重置上一张图片的加载状态。
|
|
function q(e) {
|
|
ticketAttachments_t(e) &&
|
|
((y.value = e),
|
|
(z.value = !0),
|
|
(B.value = !1),
|
|
(V.value = !1),
|
|
(R.value = !0));
|
|
}
|
|
function J() {
|
|
((z.value = !1), (B.value = !0));
|
|
}
|
|
return (i, g) => {
|
|
let U = message,
|
|
Y = button,
|
|
X = dialog;
|
|
return (
|
|
openBlock(),
|
|
createElementBlock(
|
|
Fragment,
|
|
null,
|
|
[
|
|
unref(G)
|
|
? (openBlock(),
|
|
createBlock(
|
|
U,
|
|
{
|
|
key: 0,
|
|
severity: `error`,
|
|
closable: !1,
|
|
},
|
|
{
|
|
default: withCtx(() => [
|
|
createTextVNode(toDisplayString(unref(G)), 1),
|
|
]),
|
|
_: 1,
|
|
},
|
|
))
|
|
: createCommentVNode(``, !0),
|
|
p.files.length
|
|
? (openBlock(),
|
|
createElementBlock(`ul`, S, [
|
|
(openBlock(!0),
|
|
createElementBlock(
|
|
Fragment,
|
|
null,
|
|
renderList(
|
|
p.files,
|
|
(t, n) => (
|
|
openBlock(),
|
|
createElementBlock(
|
|
`li`,
|
|
{
|
|
key: `${n}-${t.href || t.name}`,
|
|
},
|
|
[
|
|
unref(ticketAttachments_t)(t)
|
|
? (openBlock(),
|
|
createElementBlock(
|
|
`button`,
|
|
{
|
|
key: 0,
|
|
type: `button`,
|
|
class: `image-attachment`,
|
|
"aria-label": `预览图片 ${t.name}`,
|
|
onClick: (e) => q(t),
|
|
},
|
|
[
|
|
createElementVNode(`span`, w, [
|
|
t.href && !unref(H)[t.href]
|
|
? (openBlock(),
|
|
createElementBlock(
|
|
`img`,
|
|
{
|
|
key: 0,
|
|
src: t.href,
|
|
alt: t.name,
|
|
loading: `lazy`,
|
|
referrerpolicy: `no-referrer`,
|
|
onError: (e) =>
|
|
(unref(H)[t.href] = !0),
|
|
},
|
|
null,
|
|
40,
|
|
T,
|
|
))
|
|
: (openBlock(),
|
|
createElementBlock(`i`, E)),
|
|
]),
|
|
createElementVNode(`span`, D, [
|
|
createElementVNode(
|
|
`span`,
|
|
O,
|
|
toDisplayString(t.name),
|
|
1,
|
|
),
|
|
(g[4] ||= createElementVNode(
|
|
`span`,
|
|
{
|
|
class: `image-hint`,
|
|
},
|
|
`点击查看大图`,
|
|
-1,
|
|
)),
|
|
]),
|
|
],
|
|
8,
|
|
C,
|
|
))
|
|
: (openBlock(),
|
|
createElementBlock(`span`, k, [
|
|
(g[6] ||= createElementVNode(
|
|
`i`,
|
|
{
|
|
class: `pi pi-paperclip`,
|
|
"aria-hidden": `true`,
|
|
},
|
|
null,
|
|
-1,
|
|
)),
|
|
t.href
|
|
? (openBlock(),
|
|
createElementBlock(
|
|
`a`,
|
|
{
|
|
key: 0,
|
|
href: t.href,
|
|
download: t.name,
|
|
target: `_blank`,
|
|
rel: `noopener noreferrer`,
|
|
"aria-label": `下载附件 ${t.name}`,
|
|
},
|
|
[
|
|
createTextVNode(
|
|
toDisplayString(t.name) + ` `,
|
|
1,
|
|
),
|
|
(g[5] ||= createElementVNode(
|
|
`i`,
|
|
{
|
|
class: `pi pi-download`,
|
|
"aria-hidden": `true`,
|
|
},
|
|
null,
|
|
-1,
|
|
)),
|
|
],
|
|
8,
|
|
A,
|
|
))
|
|
: t.storageName
|
|
? (openBlock(),
|
|
createBlock(
|
|
Y,
|
|
{
|
|
key: 1,
|
|
label: t.name,
|
|
icon: `pi pi-download`,
|
|
text: ``,
|
|
size: `small`,
|
|
loading: unref(W)[t.name],
|
|
disabled: unref(W)[t.name],
|
|
onClick: (e) => K(t),
|
|
},
|
|
null,
|
|
8,
|
|
[
|
|
`label`,
|
|
`loading`,
|
|
`disabled`,
|
|
`onClick`,
|
|
],
|
|
))
|
|
: (openBlock(),
|
|
createElementBlock(
|
|
`span`,
|
|
j,
|
|
toDisplayString(t.name),
|
|
1,
|
|
)),
|
|
])),
|
|
],
|
|
)
|
|
),
|
|
),
|
|
128,
|
|
)),
|
|
]))
|
|
: createCommentVNode(``, !0),
|
|
createVNode(
|
|
X,
|
|
{
|
|
visible: unref(R),
|
|
"onUpdate:visible": (g[3] ||= (e) =>
|
|
isRef(R) ? (R.value = e) : null),
|
|
header: unref(y)?.name || `图片预览`,
|
|
modal: ``,
|
|
"dismissable-mask": ``,
|
|
draggable: !1,
|
|
style: {
|
|
width: `min(1100px, calc(100vw - 32px))`,
|
|
},
|
|
},
|
|
{
|
|
footer: withCtx(() => [
|
|
createElementVNode(`div`, I, [
|
|
unref(B)
|
|
? createCommentVNode(``, !0)
|
|
: (openBlock(),
|
|
createBlock(
|
|
Y,
|
|
{
|
|
key: 0,
|
|
label: unref(V) ? `适应窗口` : `原始尺寸`,
|
|
icon: unref(V)
|
|
? `pi pi-window-minimize`
|
|
: `pi pi-search-plus`,
|
|
severity: `secondary`,
|
|
outlined: ``,
|
|
disabled: unref(z),
|
|
"aria-pressed": unref(V),
|
|
onClick: (g[1] ||= (e) =>
|
|
(V.value = !unref(V))),
|
|
},
|
|
null,
|
|
8,
|
|
[`label`, `icon`, `disabled`, `aria-pressed`],
|
|
)),
|
|
unref(y)?.href
|
|
? (openBlock(),
|
|
createElementBlock(
|
|
`a`,
|
|
{
|
|
key: 1,
|
|
class: `download-image`,
|
|
href: unref(y).href,
|
|
download: unref(y).name,
|
|
target: `_blank`,
|
|
rel: `noopener noreferrer`,
|
|
},
|
|
[
|
|
...(g[7] ||= [
|
|
createElementVNode(
|
|
`i`,
|
|
{
|
|
class: `pi pi-download`,
|
|
"aria-hidden": `true`,
|
|
},
|
|
null,
|
|
-1,
|
|
),
|
|
createTextVNode(`下载原图 `, -1),
|
|
]),
|
|
],
|
|
8,
|
|
L,
|
|
))
|
|
: createCommentVNode(``, !0),
|
|
createVNode(Y, {
|
|
label: `关闭`,
|
|
severity: `secondary`,
|
|
text: ``,
|
|
onClick: (g[2] ||= (e) => (R.value = !1)),
|
|
}),
|
|
]),
|
|
]),
|
|
default: withCtx(() => [
|
|
unref(y)?.href
|
|
? (openBlock(),
|
|
createElementBlock(
|
|
Fragment,
|
|
{
|
|
key: 0,
|
|
},
|
|
[
|
|
unref(z)
|
|
? (openBlock(),
|
|
createElementBlock(`p`, M, `正在加载图片…`))
|
|
: createCommentVNode(``, !0),
|
|
unref(B)
|
|
? (openBlock(),
|
|
createElementBlock(
|
|
`p`,
|
|
N,
|
|
`图片加载失败，链接可能已过期。请刷新工单后重试，或下载原图查看。`,
|
|
))
|
|
: (openBlock(),
|
|
createElementBlock(
|
|
`div`,
|
|
{
|
|
key: 2,
|
|
class: normalizeClass([
|
|
`image-preview`,
|
|
{
|
|
"original-size": unref(V),
|
|
},
|
|
]),
|
|
"aria-busy": unref(z),
|
|
},
|
|
[
|
|
(openBlock(),
|
|
createElementBlock(
|
|
`img`,
|
|
{
|
|
key: unref(y).href,
|
|
src: unref(y).href,
|
|
alt: unref(y).name,
|
|
referrerpolicy: `no-referrer`,
|
|
onLoad: (g[0] ||= (e) =>
|
|
(z.value = !1)),
|
|
onError: J,
|
|
},
|
|
null,
|
|
40,
|
|
F,
|
|
)),
|
|
],
|
|
10,
|
|
P,
|
|
)),
|
|
],
|
|
64,
|
|
))
|
|
: createCommentVNode(``, !0),
|
|
]),
|
|
_: 1,
|
|
},
|
|
8,
|
|
[`visible`, `header`],
|
|
),
|
|
],
|
|
64,
|
|
)
|
|
);
|
|
};
|
|
},
|
|
}),
|
|
[[`__scopeId`, `data-v-77cd676b`]],
|
|
),
|
|
{
|
|
__name: `TicketAttachments`,
|
|
},
|
|
);
|
|
export {};
|
|
export default R;
|
|
</script>
|