forked from integrated_whb/integrated_whb_vue
138 lines
3.1 KiB
Vue
138 lines
3.1 KiB
Vue
<template>
|
|
<div style="display: inline-block">
|
|
<el-button
|
|
v-if="interceptTheSuffix(filePath, '.txt')"
|
|
link
|
|
type="primary"
|
|
@click="fnPreviewTxt(filePath)"
|
|
>
|
|
[预览]
|
|
</el-button>
|
|
<el-button
|
|
v-if="interceptTheSuffix(filePath, '.pdf')"
|
|
text
|
|
link
|
|
type="primary"
|
|
@click="fnPreviewPdf(filePath)"
|
|
>
|
|
[预览]
|
|
</el-button>
|
|
<el-button
|
|
v-if="interceptTheSuffix(filePath, '.mp4')"
|
|
link
|
|
type="primary"
|
|
@click="fnPreviewVideo(filePath)"
|
|
>
|
|
[预览]
|
|
</el-button>
|
|
<el-button
|
|
v-if="
|
|
interceptTheSuffix(filePath, '.jpg') ||
|
|
interceptTheSuffix(filePath, '.png') ||
|
|
interceptTheSuffix(filePath, '.jpeg')
|
|
"
|
|
link
|
|
type="primary"
|
|
@click="fnPreviewImage(filePath)"
|
|
>
|
|
[预览]
|
|
</el-button>
|
|
<a
|
|
v-if="
|
|
interceptTheSuffix(filePath, '.doc') ||
|
|
interceptTheSuffix(filePath, '.xls') ||
|
|
interceptTheSuffix(filePath, '.ppt') ||
|
|
interceptTheSuffix(filePath, '.docx') ||
|
|
interceptTheSuffix(filePath, '.xlsx') ||
|
|
interceptTheSuffix(filePath, '.pptx')
|
|
"
|
|
:href="
|
|
'http://view.officeapps.live.com/op/view.aspx?src=' +
|
|
VITE_FILE_URL +
|
|
filePath
|
|
"
|
|
target="_blank"
|
|
>
|
|
[预览]
|
|
</a>
|
|
<layout-pdf
|
|
v-model:visible="data.pdfDialog.visible"
|
|
:src="data.pdfDialog.src"
|
|
append-to-body
|
|
/>
|
|
<layout-txt
|
|
v-model:visible="data.txtDialog.visible"
|
|
:src="data.txtDialog.src"
|
|
append-to-body
|
|
/>
|
|
<layout-video
|
|
v-model:visible="data.videoDialog.visible"
|
|
:src="data.videoDialog.src"
|
|
append-to-body
|
|
/>
|
|
<el-dialog v-model="data.imageDialog.visible" title="图片" append-to-body>
|
|
<img
|
|
:src="data.imageDialog.src"
|
|
alt="Preview Image"
|
|
style="width: 100%; object-fit: scale-down"
|
|
/>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { interceptTheSuffix } from "@/assets/js/utils.js";
|
|
import { reactive } from "vue";
|
|
import LayoutVideo from "@/components/video/index.vue";
|
|
import LayoutTxt from "@/components/txt/index.vue";
|
|
import LayoutPdf from "@/components/pdf/index.vue";
|
|
|
|
defineOptions({
|
|
name: "LayoutMultipleAttachmentPreviews",
|
|
});
|
|
defineProps({
|
|
filePath: {
|
|
type: String,
|
|
required: true,
|
|
default: "",
|
|
},
|
|
});
|
|
const VITE_FILE_URL = import.meta.env.VITE_FILE_URL;
|
|
const data = reactive({
|
|
pdfDialog: {
|
|
visible: false,
|
|
src: "",
|
|
},
|
|
videoDialog: {
|
|
visible: false,
|
|
src: "",
|
|
},
|
|
txtDialog: {
|
|
visible: false,
|
|
src: "",
|
|
},
|
|
imageDialog: {
|
|
visible: false,
|
|
src: "",
|
|
},
|
|
});
|
|
const fnPreviewTxt = async (FILEPATH) => {
|
|
data.txtDialog.visible = true;
|
|
data.txtDialog.src = FILEPATH;
|
|
};
|
|
const fnPreviewPdf = (FILEPATH) => {
|
|
data.pdfDialog.visible = true;
|
|
data.pdfDialog.src = FILEPATH;
|
|
};
|
|
const fnPreviewVideo = (FILEPATH) => {
|
|
data.videoDialog.visible = true;
|
|
data.videoDialog.src = FILEPATH;
|
|
};
|
|
const fnPreviewImage = (FILEPATH) => {
|
|
data.imageDialog.visible = true;
|
|
data.imageDialog.src = VITE_FILE_URL + FILEPATH;
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss"></style>
|