tav-ui
Version:
344 lines (341 loc) • 15.2 kB
JavaScript
import { defineComponent, reactive, ref, computed, nextTick, watch, toRefs, createElementVNode, resolveComponent, openBlock, createBlock, withCtx, createCommentVNode, createVNode, createTextVNode, toDisplayString, createElementBlock, Fragment } from 'vue';
import { LeftOutlined, RightOutlined, CloseOutlined } from '@ant-design/icons-vue';
import { Modal, Spin, Button, Image } from 'ant-design-vue';
import { useMessage } from '../../../hooks/web/useMessage2.mjs';
import { download } from '../../../utils/file/_download2.mjs';
import { useGlobalConfig } from '../../../hooks/global/useGlobalConfig2.mjs';
import '../../../locales/index2.mjs';
import { fileViewProps } from './types2.mjs';
import _export_sfc from '../../../../_virtual/plugin-vue_export-helper.mjs';
import { tavI18n } from '../../../locales/transfer2.mjs';
const _sfc_main = defineComponent({
name: "TaFileView",
components: {
Modal,
Spin,
LeftOutlined,
RightOutlined,
Button,
CloseOutlined,
Image
},
props: fileViewProps,
emits: ["update:show"],
setup(props, { emit }) {
const globalConfig = useGlobalConfig("components");
const { createMessage } = useMessage();
const state = reactive({
index: props.index,
filePath: "",
showModal: false,
pageLoading: false,
supportWPS: false
});
const fileViewContentElRef = ref(null);
const loadFileTypes = {
office: ["doc", "docx", "xls", "xlsx", "ppt", "pptx", "pdf"],
pic: ["gif", "jpeg", "jpg", "png"]
};
const ignoreList = [
...["zip", "tar", "7z"],
...["mp3", "mp3", "wav", "rm", "rpm"],
...["mpeg", "mpg", "avi", "movie"],
...["txt"]
];
const currentFile = computed(() => props.list[state.index] || {});
const fileType = computed(() => {
let type = null;
const suffix = currentFile.value?.suffix;
if (suffix) {
for (const item in loadFileTypes) {
if (loadFileTypes[item].some((v) => suffix == v)) {
type = item;
break;
}
}
}
return type;
});
const loadIframeHandle = () => {
const iframeEle = window.document.getElementById("fileIframe");
if (iframeEle) {
}
};
const afterCloseHandle = () => {
emit("update:show", false);
};
const getFile = (cb) => {
if (!globalConfig.value || !globalConfig.value.TaFileView) {
afterCloseHandle();
return;
}
const id = currentFile.value?.fileId || currentFile.value?.id;
if (state.pageLoading || !id || fileType.value == "") {
afterCloseHandle();
return;
}
state.filePath = "";
state.pageLoading = true;
const previewWPSFile = globalConfig.value.TaFileView.previewWPSFile;
console.log(currentFile.value);
previewWPSFile(id, props.AppId).then((res) => {
state.pageLoading = false;
state.supportWPS = !!res?.data?.wps;
cb && cb();
if (state.supportWPS) {
const {
createByName,
createTime,
fileId,
fileName,
fileSize,
officeType,
pageUrl,
suffix,
token,
watermark,
wpsAppId
} = res.data;
const options = {
officeType,
fileId,
appId: wpsAppId,
token,
suffix,
fileName,
fileSize,
userName: createByName,
time: `${new Date(createTime).getTime()}`,
watermarker: watermark,
from: "desktop"
};
state.filePath = `${pageUrl}/wps-file-view/?${encodeURIComponent(new URLSearchParams({ ...options }))}`;
} else {
state.filePath = res.data.onlineUrl;
}
}).catch(() => {
state.pageLoading = false;
setTimeout(afterCloseHandle, 1e3);
});
};
const goPrev = () => {
if (state.index > 0) {
state.index--;
nextTick(() => {
getFile();
});
}
};
const goNext = () => {
if (state.index < props.list.length - 1) {
state.index++;
nextTick(() => {
getFile();
});
}
};
const downloadFile = () => {
download(currentFile.value);
};
watch(() => props.show, (newData) => {
if (newData && ignoreList.includes(currentFile.value.suffix)) {
createMessage.warning(tavI18n("Tav.file.message.1"));
afterCloseHandle();
return;
}
if (newData) {
state.index = props.index;
getFile(() => {
state.showModal = newData;
state.index = props.index;
});
} else {
afterCloseHandle();
state.filePath = "";
}
});
return {
...toRefs(state),
fileViewContentElRef,
tavI18n,
currentFile,
fileType,
downloadFile,
goPrev,
goNext,
afterCloseHandle
};
}
});
const _hoisted_1 = /* @__PURE__ */ createElementVNode("div", { class: "line line--vertical" }, null, -1);
const _hoisted_2 = { class: "file-view-title" };
const _hoisted_3 = {
key: 0,
width: "1em",
height: "1em",
viewBox: "0 0 24 24",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
};
const _hoisted_4 = /* @__PURE__ */ createElementVNode("path", {
d: "M3 3a2 2 0 0 1 2-2h9.586a1 1 0 0 1 .707.293l5.414 5.414a1 1 0 0 1 .293.707V21a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V3Z",
fill: "#FFC60A"
}, null, -1);
const _hoisted_5 = /* @__PURE__ */ createElementVNode("path", {
opacity: "0.8",
d: "M15 1.483a.2.2 0 0 1 .341-.142L20.66 6.66a.2.2 0 0 1-.142.341H17a2 2 0 0 1-2-2V1.483Z",
fill: "#D99904"
}, null, -1);
const _hoisted_6 = /* @__PURE__ */ createElementVNode("path", {
d: "M8.372 10a1 1 0 0 0-1 1v.182a1 1 0 0 0 1 1h.181a1 1 0 0 0 1-1V11a1 1 0 0 0-1-1h-.181Zm8.323 2.76a.6.6 0 0 1 1.04.408V18.5a.5.5 0 0 1-.5.5H7.401a.4.4 0 0 1-.307-.657l2.926-3.49a1 1 0 0 1 1.532 0l1.523 1.816 3.62-3.91Z",
fill: "#fff"
}, null, -1);
const _hoisted_7 = [
_hoisted_4,
_hoisted_5,
_hoisted_6
];
const _hoisted_8 = { class: "file-view-title-content" };
const _hoisted_9 = { class: "ant-row" };
const _hoisted_10 = { class: "file-name main" };
const _hoisted_11 = { class: "ant-row" };
const _hoisted_12 = { class: "file-size other" };
const _hoisted_13 = { class: "user-name other" };
const _hoisted_14 = { class: "time other" };
const _hoisted_15 = { href: "javascript:;" };
const _hoisted_16 = { href: "javascript:;" };
const _hoisted_17 = {
ref: "fileViewContentElRef",
class: "file-view-content"
};
const _hoisted_18 = ["src"];
const _hoisted_19 = {
key: 1,
class: "empty"
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_CloseOutlined = resolveComponent("CloseOutlined");
const _component_Button = resolveComponent("Button");
const _component_LeftOutlined = resolveComponent("LeftOutlined");
const _component_RightOutlined = resolveComponent("RightOutlined");
const _component_Image = resolveComponent("Image");
const _component_Spin = resolveComponent("Spin");
const _component_Modal = resolveComponent("Modal");
return openBlock(), createBlock(_component_Modal, {
visible: _ctx.showModal,
"onUpdate:visible": _cache[3] || (_cache[3] = ($event) => _ctx.showModal = $event),
"destroy-on-close": true,
footer: null,
width: "100%",
"after-close": _ctx.afterCloseHandle,
"wrap-class-name": `file-view-modal ${_ctx.supportWPS ? "hide-modal-header" : ""}`
}, {
title: withCtx(() => [
createCommentVNode(' <div class="file-view-action">\n <Button type="text" @click="downloadFile">\u4E0B\u8F7D</Button>\n </div>\n <span class="file-view-num">{{ index + 1 }}/{{ list.length }}</span> '),
createVNode(_component_Button, {
type: "text",
class: "file-view-close-btn",
onClick: _cache[0] || (_cache[0] = () => _ctx.showModal = !_ctx.showModal)
}, {
icon: withCtx(() => [
createVNode(_component_CloseOutlined)
]),
default: withCtx(() => [
createTextVNode(" " + toDisplayString(_ctx.tavI18n("Tav.common.closeText")), 1)
]),
_: 1
}),
_hoisted_1,
createElementVNode("div", _hoisted_2, [
_ctx.fileType === "pic" ? (openBlock(), createElementBlock("svg", _hoisted_3, _hoisted_7)) : createCommentVNode("v-if", true),
createCommentVNode(` <template v-if="fileType === 'audio'">
<svg width="1em" height="1em" viewBox="0 0 24 24"><defs><path d="M1.5 0h14.086a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V26.5a1.5 1.5 0 01-1.5 1.5h-19A1.5 1.5 0 010 26.5v-25A1.5 1.5 0 011.5 0z" id="icon_file_audio_nor_svg__a"></path><path d="M16.293.293l5.414 5.414A1 1 0 0121.91 6H17.5A1.5 1.5 0 0116 4.5V.09a1 1 0 01.293.203z" id="icon_file_audio_nor_svg__b"></path></defs><g fill="none" fill-rule="evenodd"><g transform="translate(5 2)"><use fill="#34C724" xlink:href="#icon_file_audio_nor_svg__a"></use><use fill="#2EA121" xlink:href="#icon_file_audio_nor_svg__b"></use></g><path d="M7.649 10.703h16.648V27.35H7.65z"></path><path d="M15.566 11.947l.076.01 4.687 1.1c.158.037.275.17.29.332l.193 1.974a.378.378 0 01-.458.406l-3.787-.835a.151.151 0 00-.183.162l.764 8.012a.51.51 0 01-.043.246 3.026 3.026 0 01-6.05-.127 3.027 3.027 0 014.864-2.405l-.74-8.463a.378.378 0 01.463-.402z" fill="#FFF"></path></g></svg>
</template>
<template v-if="fileType === 'video'">
<svg width="1em" height="1em" viewBox="0 0 24 24"><defs><path d="M1.5 0h14.086a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V26.5a1.5 1.5 0 01-1.5 1.5h-19A1.5 1.5 0 010 26.5v-25A1.5 1.5 0 011.5 0z" id="icon_file_video_nor_svg__a"></path><path d="M16.293.293l5.414 5.414A1 1 0 0121.91 6H17.5A1.5 1.5 0 0116 4.5V.09a1 1 0 01.293.203z" id="icon_file_video_nor_svg__b"></path></defs><g fill="none" fill-rule="evenodd"><g transform="translate(5 2)"><use fill="#3370FF" xlink:href="#icon_file_video_nor_svg__a"></use><use fill="#245BDB" xlink:href="#icon_file_video_nor_svg__b"></use></g><path d="M7 11h16.649v16.649H7z"></path><path d="M10.757 15h7.486c.383 0 .7.285.75.654l.007.103v7.486c0 .383-.285.7-.654.75l-.103.007h-7.486a.757.757 0 01-.75-.654L10 23.243v-7.486c0-.383.285-.7.654-.75l.103-.007h7.486zm11.819 1.792a.568.568 0 01.075.282v4.854a.568.568 0 01-.85.493l-1.799-1.028v-3.784l1.8-1.028a.568.568 0 01.774.211zM13.1 16.5h-1.2a.4.4 0 00-.4.4v1.2c0 .22.18.4.4.4h1.2a.4.4 0 00.4-.4v-1.2a.4.4 0 00-.4-.4z" fill="#FFF"></path></g></svg>
</template>
<template v-if="fileType === 'text'">
<svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 3a2 2 0 0 1 2-2h9.586a1 1 0 0 1 .707.293l5.414 5.414a1 1 0 0 1 .293.707V21a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V3Z" fill="#336DF4"></path><path opacity="0.7" d="M15 1.483a.2.2 0 0 1 .341-.142L20.66 6.66a.2.2 0 0 1-.142.341H17a2 2 0 0 1-2-2V1.483Z" fill="#0442D2"></path><path d="M12.546 10.727v7.5a.136.136 0 0 1-.137.136h-.818a.136.136 0 0 1-.136-.136v-7.5h-3.41a.136.136 0 0 1-.136-.136v-.818c0-.076.061-.137.137-.137h7.909c.075 0 .136.061.136.137v.818a.136.136 0 0 1-.136.136h-3.41Z" fill="#fff"></path></svg>
</template> `),
createElementVNode("div", _hoisted_8, [
createElementVNode("div", _hoisted_9, [
createElementVNode("span", _hoisted_10, toDisplayString(_ctx.currentFile?.name + "." + _ctx.currentFile?.suffix), 1)
]),
createElementVNode("div", _hoisted_11, [
createElementVNode("span", _hoisted_12, toDisplayString(_ctx.currentFile?.fileSize), 1),
createElementVNode("span", _hoisted_13, toDisplayString(_ctx.currentFile?.createByName), 1),
createElementVNode("span", _hoisted_14, toDisplayString(_ctx.currentFile?.createTime), 1)
])
])
])
]),
default: withCtx(() => [
_ctx.list.length > 1 ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
createElementVNode("div", {
class: "file-view-modal-prev",
onClick: _cache[1] || (_cache[1] = (...args) => _ctx.goPrev && _ctx.goPrev(...args))
}, [
createElementVNode("a", _hoisted_15, [
createVNode(_component_LeftOutlined)
])
]),
createElementVNode("div", {
class: "file-view-modal-next",
onClick: _cache[2] || (_cache[2] = (...args) => _ctx.goNext && _ctx.goNext(...args))
}, [
createElementVNode("a", _hoisted_16, [
createVNode(_component_RightOutlined)
])
])
], 64)) : createCommentVNode("v-if", true),
createVNode(_component_Spin, {
spinning: _ctx.pageLoading,
size: "default",
tip: _ctx.tavI18n("Tav.common.loadingText")
}, {
default: withCtx(() => [
createElementVNode("div", _hoisted_17, [
_ctx.supportWPS ? (openBlock(), createElementBlock("iframe", {
key: 0,
id: "wps-file-view",
src: _ctx.filePath,
frameborder: "0"
}, null, 8, _hoisted_18)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
createCommentVNode(` <template v-if="fileType === 'office'">
<iframe id="fileIframe" :src="filePath" frameborder="0" />
</template>
<template v-if="fileType === 'audio'">
<audio :src="filePath" />
</template>
<template v-if="fileType === 'video'">
<video :src="filePath" />
</template>
<template v-if="fileType === 'mpeg'">
<iframe id="fileIframe" :src="filePath" frameborder="0" />
</template> `),
_ctx.fileType === "pic" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
createCommentVNode(' <img :src="filePath" alt="" /> '),
createVNode(_component_Image, {
style: { display: "none" },
src: _ctx.filePath,
preview: { visible: true, getContainer: _ctx.fileViewContentElRef }
}, null, 8, ["src", "preview"])
], 2112)) : createCommentVNode("v-if", true),
createCommentVNode(` <template v-if="fileType === 'text'">
<div class="text-page">
<iframe id="fileIframe" :src="filePath" frameborder="0" />
</div>
</template> `),
_ctx.fileType === "" ? (openBlock(), createElementBlock("div", _hoisted_19, toDisplayString(_ctx.tavI18n("Tav.file.message.1")) + " " + toDisplayString(_ctx.fileType), 1)) : createCommentVNode("v-if", true)
], 64))
], 512)
]),
_: 1
}, 8, ["spinning", "tip"])
]),
_: 1
}, 8, ["visible", "after-close", "wrap-class-name"]);
}
var FileView = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/home/runner/work/tav-ui/tav-ui/packages/components/file-view/src/file-view.vue"]]);
export { FileView as default };
//# sourceMappingURL=file-view2.mjs.map