feat(订单): 为图片存储申请添加文件预览功能

src/views/order/image-store-apply/index.vue

@@ -188,6 +188,36 @@
           >
             <el-table-column prop="fileName" label="文件名" />
             <el-table-column prop="attachType" label="附件类型" />
+            <!-- 新增预览列 -->
+            <el-table-column label="预览" width="80" align="center">
+              <template slot-scope="{row}">
+                <div class="file-preview">
+                  <!-- 图片预览 -->
+                  <img
+                    v-if="isImageFile(row.fileType) && row.fileUrl"
+                    :src="row.fileUrl"
+                    style="width: 40px;"
+                    class="thumbnail-image"
+                    @click="handlePreview(row)"
+                    @error="handleImageError"
+                    alt="预览图"
+                  />
+                  <!-- PDF预览 -->
+                  <div
+                    v-else-if="isPdfFile(row.fileType)"
+                    class="pdf-thumbnail"
+                    @click="handlePdfPreview(row)"
+                  >
+                    <i class="el-icon-document"></i>
+                    <span>PDF</span>
+                  </div>
+                  <!-- 其他文件类型 -->
+                  <div v-else class="file-thumbnail">
+                    <i class="el-icon-document"></i>
+                  </div>
+                </div>
+              </template>
+            </el-table-column>
             <el-table-column prop="fileType" label="文件类型" />
             <el-table-column prop="fileSize" label="文件大小">
               <template slot-scope="{row}">
@@ -563,6 +593,46 @@ export default {
 
   methods: {
     /**
+     * 判断是否为PDF文件
+     * @param {string} fileType - 文件类型
+     * @returns {boolean} 是否为PDF
+     */
+    isPdfFile(fileType) {
+      return fileType.toLowerCase() === 'pdf'
+    },
+
+    /**
+     * 处理图片加载错误
+     * @param {Event} event - 错误事件
+     */
+    handleImageError(event) {
+      // 图片加载失败时显示默认图标
+      event.target.style.display = 'none'
+      const parent = event.target.parentNode
+      if (parent && !parent.querySelector('.error-icon')) {
+        const errorIcon = document.createElement('div')
+        errorIcon.className = 'error-icon'
+        errorIcon.innerHTML = '<i class="el-icon-picture-outline"></i>'
+        parent.appendChild(errorIcon)
+      }
+    },
+
+    /**
+     * 预览PDF文件
+     * @param {ApplyAttachmentRecord} row - 附件数据
+     */
+    handlePdfPreview(row) {
+      if (!row.fileUrl) {
+        this.$message.warning('文件链接不存在')
+        return
+      }
+
+      // 在新窗口中打开PDF
+      window.open(row.fileUrl, '_blank')
+    },
+
+
+    /**
      * 处理审核通过操作
      * @param {ImageStoreApplyRecord} row - 行数据
      */
@@ -1006,4 +1076,86 @@ export default {
     font-weight: bold;
   }
 }
+// 附件预览样式
+.file-preview {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 50px;
+
+  .thumbnail-image {
+    max-width: 50px;
+    max-height: 50px;
+    object-fit: cover;
+    border-radius: 4px;
+    cursor: pointer;
+    border: 1px solid #dcdfe6;
+    transition: all 0.3s;
+
+    &:hover {
+      border-color: #409eff;
+      transform: scale(1.1);
+    }
+  }
+
+  .pdf-thumbnail {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 50px;
+    height: 50px;
+    background-color: #f56c6c;
+    color: white;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: all 0.3s;
+
+    &:hover {
+      background-color: #f78989;
+      transform: scale(1.1);
+    }
+
+    i {
+      font-size: 16px;
+      margin-bottom: 2px;
+    }
+
+    span {
+      font-size: 10px;
+      font-weight: bold;
+    }
+  }
+
+  .file-thumbnail {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 50px;
+    height: 50px;
+    background-color: #909399;
+    color: white;
+    border-radius: 4px;
+
+    i {
+      font-size: 20px;
+    }
+  }
+
+  .error-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 50px;
+    height: 50px;
+    background-color: #f5f5f5;
+    color: #c0c4cc;
+    border-radius: 4px;
+    border: 1px solid #dcdfe6;
+
+    i {
+      font-size: 20px;
+    }
+  }
+}
 </style>