From e1b028d486713eaf55aaf35fbf334aa568059c0d Mon Sep 17 00:00:00 2001
From: wwf <1971391498@qq.com>
Date: 星期二, 14 四月 2026 15:46:54 +0800
Subject: [PATCH] 项目复制
---
src/views/components/FilePreview.vue | 100 ++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 100 insertions(+), 0 deletions(-)
diff --git a/src/views/components/FilePreview.vue b/src/views/components/FilePreview.vue
new file mode 100644
index 0000000..4686efb
--- /dev/null
+++ b/src/views/components/FilePreview.vue
@@ -0,0 +1,100 @@
+<template>
+ <div>
+ <el-row align="middle" justify="center" @click="previewFile(index)" class="cursor-p">
+ <slot>
+ <el-row style="flex-wrap: nowrap;">
+ <Icon class="mr-1" icon="uis:paperclip" width="20" height="18" style="color:#007AFF;flex-shrink: 0;" />
+ <span style="color:#007AFF">{{ name }}</span>
+ </el-row>
+ </slot>
+ </el-row>
+ <div>
+
+ </div>
+ <ElImageViewer
+ v-if="showImageViewer"
+ :url-list="filterPreviewImgList"
+ :initial-index="initialPreviewImgIndex"
+ teleported
+ @close="showImageViewer=false"
+ >
+ </ElImageViewer>
+
+ <el-dialog
+ v-model="pdfPreviewFlag"
+ top="5vh"
+ :append-to-body="true"
+ >
+ <div style="height: 84vh;">
+ <PdfPreview v-if="previewUrl&&pdfPreviewFlag" :url="previewUrl"></PdfPreview>
+ </div>
+ </el-dialog>
+ </div>
+</template>
+
+<script>
+import { getFileUrlType } from '@/utils/tool.js'
+import PdfPreview from '@/views/components/PdfPreview.vue'
+
+export default {
+ components: {
+ PdfPreview
+ },
+ data() {
+ return {
+ initialPreviewImgIndex: 0,
+ showImageViewer: false,
+ pdfPreviewFlag: false,
+ previewUrl: ''
+ }
+ },
+ props: {
+ list: {
+ type: Array,
+ default: () => {
+ return []
+ }
+ },
+ name: {
+ type: String,
+ default: ""
+ },
+ url: {
+ type: String,
+ default: ""
+ },
+ index: {
+ type: Number,
+ default: 0
+ }
+ },
+ computed: {
+ filterPreviewImgList() {
+ let list = this.list.map(ele => ele.url?.includes('http') ? ele.url : this.$qxueyou.qxyRes + ele.url )
+ return list
+ },
+ },
+ methods: {
+ previewFile() {
+ const fileObj = this.list[this.index] || {}
+ const url = fileObj.url || this.url
+ const type = getFileUrlType(url)
+ if (type == 'img') {
+ this.initialPreviewImgIndex = this.index
+ this.showImageViewer = true
+ } else if (type == 'pdf') {
+ this.pdfPreviewFlag = true
+ this.previewUrl = url ?.includes('http') ? url : this.$qxueyou.qxyRes + url
+ } else {
+ this.$messageBox.confirm('璇ョ被鍨嬫枃浠舵殏涓嶆敮鎸佸湪绾块瑙堬紝鏄惁涓嬭浇锛�', '鎻愮ず',
+ { confirmButtonText: '纭畾', cancelButtonText: '鍙栨秷', type: '' }).then(res => {
+ if (res == 'confirm') {
+ window.open(url ?.includes('http') ? url : this.$qxueyou.qxyRes + url)
+ }
+ })
+
+ }
+ },
+ }
+}
+</script>
\ No newline at end of file
--
Gitblit v1.8.0