Refactor AttachmentList.

src/components/global.less

@@ -715,26 +715,45 @@ body {
 
 .attach-item {
   width: 50%;
+  padding-bottom: 28%;
+  float: left;
+}
+
+.attach-thumb {
+  width: 100%;
+  padding-bottom: 56%;
+}
+
+.attach-item,
+.attach-thumb {
   margin: 0 auto;
   position: relative;
-  padding-bottom: 28%;
   overflow: hidden;
-  float: left;
   cursor: pointer;
 
-  img {
+  img,
+  span {
     width: 100%;
     height: 100%;
     position: absolute;
     top: 0;
     left: 0;
   }
+
+  span {
+    display: flex;
+    font-size: 12px;
+    align-items: center;
+    justify-content: center;
+    color: #9b9ea0;
+  }
 }
 
 .analysis-card-container {
   position: relative;
   overflow: hidden;
   width: 100%;
+
   .meta {
     position: relative;
     overflow: hidden;
@@ -742,6 +761,7 @@ body {
     color: rgba(0, 0, 0, 0.45);
     font-size: 14px;
     line-height: 22px;
+
     .analysis-card-action {
       cursor: pointer;
       position: absolute;
@@ -749,6 +769,7 @@ body {
       right: 0;
     }
   }
+
   .number {
     overflow: hidden;
     text-overflow: ellipsis;

src/views/attachment/AttachmentList.vue

@@ -8,6 +8,7 @@
       <a-col
         :span="24"
         class="search-box"
+        style="padding-bottom: 12px;"
       >
         <a-card
           :bordered="false"
@@ -76,7 +77,7 @@
               </a-row>
             </a-form>
           </div>
-          <div class="table-operator">
+          <div class="table-operator" style="margin-bottom: 0;">
             <a-button
               type="primary"
               icon="plus"
@@ -108,7 +109,7 @@
                   v-show="handleJudgeMediaType(item)"
                 >
               </div>
-              <a-card-meta>
+              <a-card-meta style="padding: 0.8rem;">
                 <ellipsis
                   :length="isMobile()?12:16"
                   tooltip
@@ -277,49 +278,4 @@ export default {
     }
   }
 }
-</script>
+</script>
-
-<style lang="less" scoped>
-.ant-divider-horizontal {
-  margin: 24px 0 12px 0;
-}
-
-.search-box {
-  padding-bottom: 12px;
-}
-
-.attach-thumb {
-  width: 100%;
-  margin: 0 auto;
-  position: relative;
-  padding-bottom: 56%;
-  overflow: hidden;
-  img,
-  span {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-  }
-  span {
-    display: flex;
-    font-size: 12px;
-    align-items: center;
-    justify-content: center;
-    color: #9b9ea0;
-  }
-}
-
-.ant-card-meta {
-  padding: 0.8rem;
-}
-
-.attach-detail-img img {
-  width: 100%;
-}
-
-.table-operator {
-  margin-bottom: 0;
-}
-</style>

src/views/attachment/components/AttachmentDetailDrawer.vue

@@ -19,11 +19,13 @@
         >
           <div class="attach-detail-img">
             <div v-show="nonsupportPreviewVisible">此文件不支持预览</div>
-            <img
+            <a :href="attachment.path" target="_blank">
-              :src="attachment.path"
+              <img
-              v-show="photoPreviewVisible"
+                :src="attachment.path"
-              style="width: 100%;"
+                v-show="photoPreviewVisible"
-            >
+                style="width: 100%;"
+              >
+            </a>
             <video-player
               class="video-player-box"
               v-show="videoPreviewVisible"

src/views/attachment/components/AttachmentDrawer.vue

@@ -36,7 +36,11 @@
               :key="index"
               @click="handleShowDetailDrawer(item)"
             >
-              <img :src="item.thumbPath">
+              <span v-show="!handleJudgeMediaType(item)">当前格式不支持预览</span>
+                <img
+                  :src="item.thumbPath"
+                  v-show="handleJudgeMediaType(item)"
+                >
             </div>
           </a-col>
         </a-skeleton>
@@ -184,6 +188,23 @@ export default {
     handleDelete() {
       this.loadAttachments()
     },
+    handleJudgeMediaType(attachment) {
+      var mediaType = attachment.mediaType
+      // 判断文件类型
+      if (mediaType) {
+        var prefix = mediaType.split('/')[0]
+
+        if (prefix === 'image') {
+          // 是图片
+          return true
+        } else {
+          // 非图片
+          return false
+        }
+      }
+      // 没有获取到文件返回false
+      return false
+    },
     onClose() {
       this.$emit('close', false)
     }