提交

web-admin/src/components/business/infusion-schedule-outbound-chain-view/index.vue

@@ -102,24 +102,52 @@
                         v-for="(att, attIdx) in parsePaperAttachments(row.attachmentUrl)"
                         :key="attIdx"
                         class="paper-att-card"
+                        :class="{
+                          'paper-att-card--image': isImageFile(att),
+                          'paper-att-card--video': isVideoFile(att)
+                        }"
+                        :title="att.fileName"
                       >
-                        <el-icon class="paper-att-card__icon"><Document /></el-icon>
-                        <span class="paper-att-card__name" :title="att.fileName">{{
-                          att.fileName || '附件'
-                        }}</span>
+                        <div
+                          class="paper-att-card__preview"
+                          :class="{
+                            'is-clickable': isImageFile(att) || isVideoFile(att)
+                          }"
+                          @click="
+                            (isImageFile(att) || isVideoFile(att)) &&
+                              handlePreviewPaperAttachment(att)
+                          "
+                        >
+                          <img
+                            v-if="isImageFile(att)"
+                            :src="attachmentFullUrl(att.attachmentUrl)"
+                            :alt="att.fileName || '附件'"
+                          />
+                          <template v-else-if="isVideoFile(att)">
+                            <div class="paper-att-card__type-icon paper-att-card__type-icon--video">
+                              <el-icon><VideoPlay /></el-icon>
+                            </div>
+                          </template>
+                          <template v-else>
+                            <el-icon class="paper-att-card__type-icon paper-att-card__type-icon--doc">
+                              <Document />
+                            </el-icon>
+                            <span class="paper-att-card__name">{{ att.fileName || '附件' }}</span>
+                          </template>
+                        </div>
                         <div class="paper-att-card__actions">
                           <el-icon
-                            v-if="isImageFile(att)"
+                            v-if="isImageFile(att) || isVideoFile(att)"
                             class="paper-att-card__action"
                             title="预览"
-                            @click="handlePreviewPaperAttachment(att)"
+                            @click.stop="handlePreviewPaperAttachment(att)"
                           >
                             <View />
                           </el-icon>
                           <el-icon
                             class="paper-att-card__action"
                             title="下载"
-                            @click="handleDownloadPaperAttachment(att)"
+                            @click.stop="handleDownloadPaperAttachment(att)"
                           >
                             <Download />
                           </el-icon>
@@ -274,7 +302,7 @@
 
 <script setup lang="ts">
   import { ref, computed, watch } from 'vue'
-  import { Document, Download, View } from '@element-plus/icons-vue'
+  import { Document, Download, View, VideoPlay } from '@element-plus/icons-vue'
   import SampleProductionInfoCards from '@/components/business/sample-production-info-cards/index.vue'
   import SampleQcInfoCards from '@/components/business/sample-qc-info-cards/index.vue'
   import ProtocolAttachmentReadonly from '@/views/cell-storage/protocol/ProtocolAttachmentReadonly.vue'
@@ -621,17 +649,62 @@
     background: #f8fafc;
     display: flex;
     flex-direction: column;
-    align-items: center;
+    align-items: stretch;
     justify-content: center;
-    padding: 6px 4px;
+    padding: 0;
     position: relative;
     overflow: hidden;
   }
 
-  .paper-att-card__icon {
-    color: #0284c7;
-    font-size: 18px;
+  .paper-att-card__preview {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 6px 4px;
+    overflow: hidden;
+
+    &.is-clickable {
+      cursor: pointer;
+    }
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      display: block;
+    }
+  }
+
+  .paper-att-card--image,
+  .paper-att-card--video {
+    .paper-att-card__preview {
+      padding: 0;
+    }
+  }
+
+  .paper-att-card__type-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 22px;
     margin-bottom: 2px;
+
+    &--doc {
+      color: #0284c7;
+    }
+
+    &--video {
+      width: 36px;
+      height: 36px;
+      border-radius: 8px;
+      background: #ede9fe;
+      color: #7c3aed;
+      font-size: 20px;
+      margin-bottom: 4px;
+    }
   }
 
   .paper-att-card__name {