修复抠图详情页预览索引错误问题；增加多选抠图失败为不能下载

src/views/matting/components/PreviewDialog.vue

 <template>
+  <div>
     <el-dialog
       :visible.sync="visible"
       top="3vh"
@@ -18,7 +19,10 @@
               <el-tag
                 size="mini"
                 :type="
-                $constantsTool.getTagTypeByValue('mattingStatus', detail.status)
+                  $constantsTool.getTagTypeByValue(
+                    'mattingStatus',
+                    detail.status
+                  )
                 "
               >
                 {{
@@ -64,12 +68,27 @@
                 ></el-checkbox>
               </div>
               <div class="more" @click.prevent="toggleItemCheckbox(item)">
+                <el-tag
+                  :type="
+                    $constantsTool.getTagTypeByValue(
+                      'mattingStatus',
+                      item.status
+                    )
+                  "
+                  size="mini"
+                  style="margin-right: 6px"
+                >
+                  {{
+                    $constantsTool.getLabelByValue("mattingStatus", item.status)
+                  }}
+                </el-tag>
                 <el-button
                   title="下载"
-                style="margin-right: 12px"
+                  style="margin-right: 16px"
                   type="text"
                   icon="el-icon-download"
                   @click="handleDownloadRow(item)"
+                  :disabled="isDisabledDownload(item)"
                 ></el-button>
                 <el-dropdown>
                   <i class="el-icon-more" style="color: #409eff"></i>
@@ -81,10 +100,10 @@
                 </el-dropdown>
               </div>
               <el-image
-              style="width: 200px; height: 150px; padding: 10px"
+                style="width: 200px; height: 230px; padding: 10px"
                 :src="item.pressUrl"
                 fit="contain"
-              :preview-src-list="srcList"
+                @click="openElImageViwer(index)"
               ></el-image>
 
               <div class="name">{{ item.name }}</div>
@@ -118,6 +137,13 @@
         </div>
       </div>
     </el-dialog>
+    <el-image-viewer
+      v-if="imgViewerVisible"
+      :on-close="closeImgViewer"
+      :url-list="srcList"
+      :initial-index="initialIndex"
+    />
+  </div>
 </template>
 
 <script>
@@ -130,7 +156,10 @@ import {
 import { Debounce } from "@/utils/index";
 export default {
   name: "PreviewDialog",
-  components: {},
+  components: {
+    "el-image-viewer": () =>
+      import("element-ui/packages/image/src/image-viewer"),
+  },
   props: {
     detail: {
       type: Object,
@@ -150,6 +179,8 @@ export default {
         current: 1,
         total: 0,
       },
+      imgViewerVisible: false,
+      initialIndex: 0,
     };
   },
   computed: {
@@ -193,6 +224,11 @@ export default {
       }
       return this.mattingImagesPage.total > 1;
     },
+    isDisabledDownload(item) {
+      return (item) => {
+        return item.status != 1;
+      };
+    },
   },
   watch: {
     detail(value) {
@@ -321,6 +357,15 @@ export default {
       this.mattingImagesPage.current = current;
       this.loadImgs();
     },
+
+    openElImageViwer(index) {
+      this.imgViewerVisible = true;
+      this.initialIndex = index;
+    },
+
+    closeImgViewer() {
+      this.imgViewerVisible = false;
+    },
   },
 };
 </script>
@@ -363,6 +408,7 @@ export default {
     top: 0;
     color: #409eff;
     cursor: pointer;
+    margin-bottom: 10px;
   }
   .modal {
     position: absolute;

src/views/matting/index.vue

@@ -260,10 +260,17 @@ export default {
     },
 
     handleMultiDownload() {
+      const hasError = this.multiSelection.some((item) => {
+        return item.status == -1;
+      });
+      if (hasError) {
+        this.$message.warning("当前只支持下载抠图成功的图片！");
+      } else {
         const ids = this.multiSelection.map((item) => {
           return item.mattingId;
         });
         this.downloadByRecordId(ids);
+      }
     },
 
     deleteByRecordsId: Debounce(async function (ids) {