pms 瑞都日报 上传附件 预览

src/views/pms/iotrddailyreport/FillDailyReportForm.vue

@@ -301,7 +301,10 @@
                   :key="attachment.id || index"
                   class="attachment-item"
                 >
-                  <span class="attachment-name">{{ attachment.filename }}</span>
+                  <!-- 为附件名称添加点击事件，传递整个附件对象 -->
+                  <a class="attachment-name" @click="inContent(attachment)" style="cursor: pointer; color: #409eff; text-decoration: underline;">
+                    {{ attachment.filename }}
+                  </a>
                   <el-button
                     v-if="!isApprovalMode"
                     type="danger"
@@ -500,7 +503,7 @@ const handleUploadSuccess = (result: any) => {
           type: 'attachment',
           filename: file.name || '未知文件',
           fileType: getFileType(file.name),
-          filePath: file.filePath, // 关键修改：使用正确的 filePath
+          filePath: file.filePath, //使用正确的 filePath
           fileSize: formatFileSize(file.size || 0),
           remark: ''
         }
@@ -530,6 +533,27 @@ const removeAttachment = (index: number) => {
   }
 }
 
+// 附件名称点击事件
+const inContent = async (attachment) => {
+  if (!attachment || !attachment.filePath) {
+    message.error('附件路径不存在')
+    return
+  }
+
+  try {
+    // 直接使用 attachment.filePath
+    const filePath = attachment.filePath
+    // 确保 filePath 是编码后的格式
+    const encodedPath = encodeURIComponent(filePath)
+
+    // 打开预览窗口
+    window.open(`http://doc.deepoil.cc:8012/onlinePreview?url=${encodedPath}`)
+  } catch (error) {
+    console.error('预览附件失败:', error)
+    message.error('预览附件失败')
+  }
+}
+
 // 获取文件类型辅助函数
 const getFileType = (filename: string) => {
   const ext = filename.split('.').pop()?.toLowerCase()
@@ -1165,4 +1189,15 @@ const handleApprove = async (action: 'pass' | 'reject') => {
   font-style: italic;
   margin-top: 10px;
 }
+
+/* 附件名称链接样式 */
+.attachment-name {
+  color: #409eff;
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.attachment-name:hover {
+  color: #66b1ff;
+}
 </style>