提交

web-admin/src/components/business/outbound-material-form-sections/index.vue

@@ -185,31 +185,58 @@
                   v-for="(att, attIdx) in row.attachments"
                   :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="fullFileUrl(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>
                     <el-icon
                       class="paper-att-card__action paper-att-card__action--danger"
                       title="删除"
-                      @click="removePaperAttachment($index, attIdx)"
+                      @click.stop="removePaperAttachment($index, attIdx)"
                     >
                       <Delete />
                     </el-icon>
@@ -357,7 +384,8 @@
     Search,
     Document,
     Download,
-    View
+    View,
+    VideoPlay
   } from '@element-plus/icons-vue'
   import { fetchUploadAttachment } from '@/api/business'
   import { fetchCellProductList } from '@/api/cell-product'
@@ -874,6 +902,11 @@
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
+
+    :deep(.el-upload) {
+      display: block;
+      line-height: normal;
+    }
   }
 
   .paper-att-card {
@@ -884,17 +917,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 {
@@ -944,6 +1022,10 @@
   }
 
   .paper-att-card--trigger {
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    padding: 6px 4px;
     border: 1px dashed #a7f3d0;
     background: transparent;
     cursor: pointer;
@@ -961,14 +1043,20 @@
   }
 
   .paper-att-card__trigger-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
     font-size: 16px;
     color: #10b981;
-    margin-bottom: 2px;
+    margin: 0;
+    line-height: 1;
   }
 
   .paper-att-card--trigger span {
     font-size: 11px;
     color: #64748b;
+    line-height: 1.2;
+    text-align: center;
   }
 
   .preview-container {