From 1ad3fc581f55e0c2c38860002ec6937a4aa16ee4 Mon Sep 17 00:00:00 2001
From: cwchen <1048842385@qq.com>
Date: Thu, 18 Sep 2025 13:20:47 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A1=A3=E6=A1=88=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/viewFile/viewFile.vue | 303 +++++++++++++++++++++++++++++---
 1 file changed, 274 insertions(+), 29 deletions(-)

diff --git a/src/views/viewFile/viewFile.vue b/src/views/viewFile/viewFile.vue
index 1361db3..c8f249c 100644
--- a/src/views/viewFile/viewFile.vue
+++ b/src/views/viewFile/viewFile.vue
@@ -1,11 +1,12 @@
 <template>
   <!-- 预览文件 -->
-    <el-dialog class="l-dialog" :class="lDialog" :title="title" :visible.sync="dialogVisible" :showClose="true"
-        :closeOnClickModal="false" @close="handleClose" :append-to-body="true">
+  <el-dialog class="l-dialog" :class="lDialog" :title="title" :visible.sync="dialogVisible" :showClose="true"
+    :closeOnClickModal="false" @close="handleClose" :append-to-body="true">
     <div style="text-align:center">
       <!-- 图片预览 -->
       <template v-if="isImage">
-        <el-image :src="processedFileUrl" :preview-src-list="previewList" fit="contain" style="max-width:100%;max-height:70vh">
+        <el-image :src="processedFileUrl" :preview-src-list="previewList" fit="contain"
+          style="max-width:100%;max-height:70vh">
           <div slot="error" class="image-slot">
             <i class="el-icon-picture-outline"></i>
           </div>
@@ -14,25 +15,71 @@
 
       <!-- PDF 预览 -->
       <template v-else>
-        <pdf :src="processedFileUrl" style="width:100%;height:70vh" />
-      </template>
+        <div class="pdf-container">
+          <!-- PDF加载状态 -->
+          <div v-if="pdfLoading" class="pdf-loading">
+            <i class="el-icon-loading"></i>
+            <p>PDF加载中...</p>
+          </div>
+
+          <!-- PDF错误状态 -->
+          <div v-else-if="pdfError" class="pdf-error">
+            <i class="el-icon-warning"></i>
+            <p>PDF加载失败</p>
+            <el-button size="small" @click="retryLoadPdf">重试</el-button>
+          </div>
+
+          <!-- PDF内容 -->
+          <div v-else class="pdf-content">
+            <!-- PDF工具栏 -->
+            <div class="pdf-toolbar">
+              <div class="pdf-controls">
+                <el-button size="mini" :disabled="currentPage <= 1" @click="prevPage">
+                  <i class="el-icon-arrow-left"></i> 上一页
+                </el-button>
+                <span class="page-info">
+                  {{ currentPage }} / {{ numPages }}
+                </span>
+                <el-button size="mini" :disabled="currentPage >= numPages" @click="nextPage">
+                  下一页 <i class="el-icon-arrow-right"></i>
+                </el-button>
+              </div>
+
+            </div>
+
+            <!-- PDF显示区域 -->
+            <div class="pdf-viewer" @wheel="handleWheel" ref="pdfViewer">
+              <pdf :src="processedFileUrl" :page="currentPage" @num-pages="numPages = $event" @loaded="onPdfLoaded"
+                @error="onPdfError" style="width:100%;height:70vh" />
+            </div>
+          </div>
         </div>
-    </el-dialog>
+      </template>
+    </div>
+  </el-dialog>
 </template>
 <script>
 import pdf from 'vue-pdf'
 import { getFileAsBase64Api } from '@/api/archivesManagement/fileManager/fileManager'
 export default {
-    name: 'ViewFile',
+  name: 'ViewFile',
   props: ['width', 'hight', 'dataForm', 'title', 'disabled', 'isAdd', 'rowData', 'projectId'],
   components: { pdf },
-    data() {
-        return {
+  data() {
+    return {
       dialogVisible: true,
-            lDialog: this.width > 500 ? "w700" : "w500",
+      lDialog: this.width > 500 ? "w700" : "w500",
       fileUrl: '',           // 实际文件地址
       fileName: '',          // 用于从文件名判断类型
-      previewList: []        // 预览组（可只放当前图片）
+      previewList: [],       // 预览组（可只放当前图片）
+      // PDF相关状态
+      pdfLoading: false,
+      pdfError: false,
+      currentPage: 1,
+      numPages: 0,
+      // 滚轮翻页相关
+      wheelTimeout: null,
+      isWheelScrolling: false
     }
   },
   computed: {
@@ -51,70 +98,188 @@ export default {
       return exts.some(ext => url.endsWith(ext) || name.endsWith(ext))
     },
     processedFileUrl() {
-      // 处理文件URL，为PDF添加data前缀
-      if (this.isPdf && this.fileUrl && !this.fileUrl.startsWith('data:')) {
-        return `data:application/pdf;base64,${this.fileUrl}`
+      // 处理文件URL，为PDF和图片添加data前缀
+      if (this.fileUrl && !this.fileUrl.startsWith('data:')) {
+        if (this.isPdf) {
+          return `data:application/pdf;base64,${this.fileUrl}`
+        } else if (this.isImage) {
+          // 根据图片类型添加相应的MIME类型
+          const imageType = this.getImageMimeType()
+          return `data:${imageType};base64,${this.fileUrl}`
+        }
       }
       return this.fileUrl
     }
   },
   created() {
     this.getFileAsBase64();
-
   },
-    methods: {
-        handleClose() {
+
+  watch: {
+    isPdf(newVal) {
+      if (newVal) {
+        this.resetPdfState();
+      }
+    }
+  },
+  methods: {
+    handleClose() {
       this.dialogVisible = false
       this.$emit('closeDialog')
     },
     /* 获取文件的base64 */
     getFileAsBase64() {
+      if (this.isPdf) {
+        this.pdfLoading = true;
+        this.pdfError = false;
+      }
+
       getFileAsBase64Api({ id: this.rowData.fileId }).then(res => {
-        const obj =res.data;
+        const obj = res.data;
         this.fileUrl = obj?.fileBase64 || ''
         this.fileName = obj?.fileName || ''
+
         // 预览组（如果你有多张，可放数组；没有就放当前一张）
         if (this.isImage && this.fileUrl) {
           this.previewList = [this.processedFileUrl]
         }
+      }).catch(error => {
+        if (this.isPdf) {
+          this.pdfError = true;
+          this.pdfLoading = false;
+        }
+        console.error('获取文件失败:', error);
       })
+    },
+
+    // PDF相关方法
+    resetPdfState() {
+      this.currentPage = 1;
+      this.numPages = 0;
+      this.pdfLoading = false;
+      this.pdfError = false;
+      this.isWheelScrolling = false;
+      if (this.wheelTimeout) {
+        clearTimeout(this.wheelTimeout);
+        this.wheelTimeout = null;
+      }
+    },
+
+    onPdfLoaded() {
+      this.pdfLoading = false;
+      this.pdfError = false;
+    },
+
+    onPdfError(error) {
+      this.pdfLoading = false;
+      this.pdfError = true;
+      console.error('PDF加载失败:', error);
+    },
+
+    retryLoadPdf() {
+      this.resetPdfState();
+      this.getFileAsBase64();
+    },
+
+    prevPage() {
+      if (this.currentPage > 1) {
+        this.currentPage--;
+      }
+    },
+
+    nextPage() {
+      if (this.currentPage < this.numPages) {
+        this.currentPage++;
+      }
+    },
+    
+    // 获取图片MIME类型
+    getImageMimeType() {
+      // 根据文件扩展名返回对应的MIME类型
+      const name = (this.fileName || '').toLowerCase()
+      if (name.endsWith('.jpg') || name.endsWith('.jpeg')) {
+        return 'image/jpeg'
+      } else if (name.endsWith('.png')) {
+        return 'image/png'
+      } else if (name.endsWith('.gif')) {
+        return 'image/gif'
+      } else if (name.endsWith('.bmp')) {
+        return 'image/bmp'
+      } else if (name.endsWith('.webp')) {
+        return 'image/webp'
+      }
+      // 默认返回jpeg
+      return 'image/jpeg'
+    },
+
+    // 处理滚轮事件
+    handleWheel(event) {
+      // 阻止默认滚动行为
+      event.preventDefault();
+
+      // 如果正在滚轮翻页中，忽略新的滚轮事件
+      if (this.isWheelScrolling) {
+        return;
+      }
+
+      // 设置滚轮翻页状态
+      this.isWheelScrolling = true;
+
+      // 清除之前的定时器
+      if (this.wheelTimeout) {
+        clearTimeout(this.wheelTimeout);
+      }
+
+      // 根据滚轮方向翻页
+      if (event.deltaY > 0) {
+        // 向下滚动 - 下一页
+        this.nextPage();
+      } else if (event.deltaY < 0) {
+        // 向上滚动 - 上一页
+        this.prevPage();
+      }
+
+      // 设置定时器，防止滚轮翻页过于频繁
+      this.wheelTimeout = setTimeout(() => {
+        this.isWheelScrolling = false;
+      }, 300);
     }
   },
 }
 </script>
 <style lang="scss">
 .w700 .el-dialog {
-    width: 700px;
+  width: 700px;
 }
 
 .w500 .el-dialog {
-    width: 500px;
+  width: 500px;
 }
 
 .w500 .el-dialog__header,
 .w700 .el-dialog__header {
-    // background: #eeeeee;
+  // background: #eeeeee;
 
-    .el-dialog__title {
-        font-size: 16px;
-    }
+  .el-dialog__title {
+    font-size: 16px;
+  }
 }
 
 .yxq .el-range-separator {
-    margin-right: 7px !important;
+  margin-right: 7px !important;
 }
 
 .el-date-editor--daterange.el-input__inner {
-    width: 260px;
+  width: 260px;
 }
 
 .form-item {
-    width: 100%;
+  width: 100%;
 }
 
 .select-style {
-    display: flex;
-    justify-content: space-between;
+  display: flex;
+  justify-content: space-between;
 }
 
 .image-slot {
@@ -126,4 +291,84 @@ export default {
   color: #909399;
   font-size: 24px;
 }
+
+/* PDF预览样式 */
+.pdf-container {
+  width: 100%;
+  height: 70vh;
+  position: relative;
+}
+
+.pdf-loading,
+.pdf-error {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: #909399;
+  font-size: 16px;
+}
+
+.pdf-loading i {
+  font-size: 32px;
+  margin-bottom: 16px;
+  animation: rotating 2s linear infinite;
+}
+
+.pdf-error i {
+  font-size: 32px;
+  margin-bottom: 16px;
+  color: #F56C6C;
+}
+
+.pdf-content {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.pdf-toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 12px;
+  background: #f5f5f5;
+  border-bottom: 1px solid #e4e7ed;
+  flex-shrink: 0;
+}
+
+.pdf-controls {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.page-info {
+  font-size: 14px;
+  color: #606266;
+  min-width: 60px;
+  text-align: center;
+}
+
+.pdf-viewer {
+  flex: 1;
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  background: #f8f9fa;
+  cursor: pointer;
+}
+
+/* 移除滚动条样式，因为现在使用滚轮翻页 */
+
+@keyframes rotating {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
 </style>
\ No newline at end of file