bug

src/views/cases/detail.vue

@@ -206,26 +206,37 @@
                 <!-- 影像区域 -->
                 <el-row :gutter="20" class="imaging-row">
                   <el-row :span="24" style="display: flex;justify-content: center;">
-                    <el-form-item class="imaging-item" v-for="(item, idx) in form.attachment"
-                      v-show="item.showInDoc == 1" :key="idx">
-                      <el-image v-if="!isVideoFile(item)" :src="$store.state.user.netConfig.MINIO_ENDPOINT_HTTPS +
+                    <div
+                      v-for="(item, idx) in form.attachment"
+                      v-show="item.showInDoc == 1"
+                      :key="idx"
+                      class="imaging-item-wrapper"
+                      @dblclick="handleImagingItemClick(item)"
+                      :title="form.status == 1 || form.status == 5 || form.status == 15 ? '双击移出影像区域' : ''"
+                    >
+                      <el-image
+                        v-if="!isVideoFile(item)"
+                        :src="$store.state.user.netConfig.MINIO_ENDPOINT_HTTPS +
                           item.bucket_compress +
                           '/' +
                           item.object_compress
-                        " fit="cover" :preview-src-list="[
-                          $store.state.user.netConfig.MINIO_ENDPOINT_HTTPS +
-                          item.bucket_compress +
-                          '/' +
-                          item.object_compress,
-                        ]" style="width: 100px; height: 80px" />
+                        "
+                        fit="cover"
+                        style="width: 100px; height: 80px"
+                      />
                       <div v-else class="video-thumb-wrapper">
-                        <video :src="$store.state.user.netConfig.MINIO_ENDPOINT_HTTPS +
+                        <video
+                          :src="$store.state.user.netConfig.MINIO_ENDPOINT_HTTPS +
                             item.bucket_compress +
                             '/' +
                             item.object_compress
-                          " preload="metadata" controls style="width: 100px; height: 80px; object-fit: cover" />
+                          "
+                          preload="metadata"
+                          style="width: 100px; height: 80px; object-fit: cover; pointer-events: none"
+                        />
+                        <i class="el-icon-video-play video-play-icon"></i>
+                      </div>
                     </div>
-                    </el-form-item>
                   </el-row>
                   <!-- <el-col :span="6">
 
@@ -818,6 +829,17 @@ export default {
       // 图片：双击插入影像区域
       row.showInDoc = 1;
     },
+    // 影像区域双击：移出（仅在可编辑状态生效）
+    handleImagingItemClick(item) {
+      if (
+        this.form.status != 1 &&
+        this.form.status != 5 &&
+        this.form.status != 15
+      )
+        return;
+      item.showInDoc = 0;
+      this.$modal.msgSuccess("已移出影像区域");
+    },
     // 判断文件是否为视频类型
     isVideoFile(row) {
       const videoExts = ["mp4", "avi", "mov", "wmv", "flv", "mkv", "webm"];
@@ -1539,11 +1561,12 @@ export default {
   justify-content: center;
 }
 
-.imaging-item {
-  ::v-deep .el-form-item__content {
-    display: flex;
+.imaging-item-wrapper {
+  display: inline-flex;
   justify-content: center;
-    margin: 0 20px !important;
-  }
+  cursor: pointer;
+  margin: 0 10px;
+  border-radius: 4px;
+  overflow: hidden;
 }
 </style>