病例库bug

src/views/cases/detail.vue

@@ -25,22 +25,22 @@
           >
             <el-table-column align="center">
               <template slot-scope="scope">
-                <el-image
+                <div
-                  :src="
+                  class="img-wrapper"
-                    $store.state.user.netConfig.MINIO_ENDPOINT_HTTPS +
+                  @click="handleImageClick(scope.row)"
-                    scope.row.bucket_compress +
+                  @dblclick="handleAttachmentClick(scope.row)"
-                    '/' +
+                >
-                    scope.row.object_compress
+                  <el-image
-                  "
+                    :src="
-                  fit="cover"
+                      $store.state.user.netConfig.MINIO_ENDPOINT_HTTPS +
-                  :preview-src-list="[
-                    $store.state.user.netConfig.MINIO_ENDPOINT_HTTPS +
                       scope.row.bucket_compress +
                       '/' +
-                      scope.row.object_compress,
+                      scope.row.object_compress
-                  ]"
+                    "
-                  style="width: 100px; height: 80px"
+                    fit="cover"
-                />
+                    style="width: 100px; height: 80px; pointer-events: none"
+                  />
+                </div>
                 <div class="img-status">上传完成</div>
                 <el-button
                   type="text"
@@ -751,6 +751,19 @@
     </el-dialog>
     <!-- 打印预览弹窗 -->
     <UltrasoundReportPrint ref="UltrasoundReportPrintRef" />
+
+    <!-- 图片预览弹窗 -->
+    <el-dialog
+      :visible.sync="imagePreviewVisible"
+      title="影像预览"
+      width="80%"
+      top="3vh"
+      destroy-on-close
+    >
+      <div class="image-preview-body">
+        <img :src="imagePreviewUrl" alt="预览" />
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -872,6 +885,10 @@ export default {
           { required: true, message: "请输入片语内容", trigger: "blur" },
         ],
       },
+      // ====================== 图片预览 ======================
+      imagePreviewVisible: false,
+      imagePreviewUrl: "",
+      imageClickTimer: null,
     };
   },
   created() {
@@ -1000,15 +1017,35 @@ export default {
       }
     },
     handleAttachmentClick(row) {
+      // 双击时取消单击预览定时器
+      if (this.imageClickTimer) {
+        clearTimeout(this.imageClickTimer);
+        this.imageClickTimer = null;
+      }
       row.showInDoc = 1;
     },
+    // 图片单击预览（300ms 内无双击则触发）
+    handleImageClick(row) {
+      if (this.imageClickTimer) {
+        clearTimeout(this.imageClickTimer);
+        this.imageClickTimer = null;
+        return;
+      }
+      this.imageClickTimer = setTimeout(() => {
+        this.imageClickTimer = null;
+        this.imagePreviewUrl =
+          this.$store.state.user.netConfig.MINIO_ENDPOINT_HTTPS +
+          row.bucket_compress +
+          "/" +
+          row.object_compress;
+        this.imagePreviewVisible = true;
+      }, 300);
+    },
     handleDeleteImg(row, index) {
       this.$modal
         .confirm("确定删除该影像？")
-        .then(function () {
-          return this.form.attachment.splice(index, 1);
-        })
         .then(() => {
+          this.form.attachment.splice(index, 1);
           this.$modal.msgSuccess("删除成功");
         })
         .catch(() => {});
@@ -1527,4 +1564,25 @@ export default {
   align-self: center;
   flex-shrink: 0;
 }
+
+// 图片预览
+.image-preview-body {
+  background: #000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 400px;
+
+  img {
+    max-width: 100%;
+    max-height: 75vh;
+    object-fit: contain;
+  }
+}
+
+// 图片卡片
+.img-wrapper {
+  display: inline-block;
+  cursor: pointer;
+}
 </style>