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

src/views/matting/components/PreviewDialog.vue

 <template>
-  <el-dialog
-    :visible.sync="visible"
-    top="3vh"
-    :before-close="handleClose"
-    lock-scroll
-    width="65vw"
-    title="抠图详情"
-  >
-    <div class="dialog-content">
-      <el-descriptions title="详细信息" v-if="infoHasValue">
-        <el-descriptions-item
-          :label="item.label"
-          v-for="(item, index) in tableTitle"
-          :key="index"
-        >
-          <span v-if="item.prop == 'status'">
-            <el-tag
-              size="mini"
-              :type="
-                $constantsTool.getTagTypeByValue('mattingStatus', detail.status)
-              "
-            >
-              {{
-                $constantsTool.getLabelByValue("mattingStatus", detail.status)
-              }}
-            </el-tag>
-          </span>
-          <span v-else>{{ detail[item.prop] }}</span>
-        </el-descriptions-item>
-      </el-descriptions>
-      <div class="imgs">
-        <div class="imgs-title">
-          <h3>图片列表</h3>
-          <div class="right" v-if="isImgMultiple">
-            <el-button
-              type="text"
-              style="margin-right: 10px"
-              @click="toggleShowCheckbox"
-              >{{ getText }}</el-button
-            >
-            <el-checkbox
-              label="全选"
-              v-model="isAllChecked"
-              v-if="isShowCheckbox"
-            ></el-checkbox>
-          </div>
-        </div>
-        <div class="container" :gutter="10">
-          <div
-            v-for="(item, index) in mattingImagesPage.records"
+  <div>
+    <el-dialog
+      :visible.sync="visible"
+      top="3vh"
+      :before-close="handleClose"
+      lock-scroll
+      width="65vw"
+      title="抠图详情"
+    >
+      <div class="dialog-content">
+        <el-descriptions title="详细信息" v-if="infoHasValue">
+          <el-descriptions-item
+            :label="item.label"
+            v-for="(item, index) in tableTitle"
             :key="index"
-            class="img-item"
           >
-            <div
-              :class="['modal', item.checked ? 'active' : '']"
-              v-if="isShowCheckbox"
-              @click.prevent="toggleItemCheckbox(item)"
-            >
+            <span v-if="item.prop == 'status'">
+              <el-tag
+                size="mini"
+                :type="
+                  $constantsTool.getTagTypeByValue(
+                    'mattingStatus',
+                    detail.status
+                  )
+                "
+              >
+                {{
+                  $constantsTool.getLabelByValue("mattingStatus", detail.status)
+                }}
+              </el-tag>
+            </span>
+            <span v-else>{{ detail[item.prop] }}</span>
+          </el-descriptions-item>
+        </el-descriptions>
+        <div class="imgs">
+          <div class="imgs-title">
+            <h3>图片列表</h3>
+            <div class="right" v-if="isImgMultiple">
+              <el-button
+                type="text"
+                style="margin-right: 10px"
+                @click="toggleShowCheckbox"
+                >{{ getText }}</el-button
+              >
               <el-checkbox
-                class="checkbox"
+                label="全选"
+                v-model="isAllChecked"
                 v-if="isShowCheckbox"
-                v-model="item.checked"
               ></el-checkbox>
             </div>
-            <div class="more" @click.prevent="toggleItemCheckbox(item)">
-              <el-button
-                title="下载"
-                style="margin-right: 12px"
-                type="text"
-                icon="el-icon-download"
-                @click="handleDownloadRow(item)"
-              ></el-button>
-              <el-dropdown>
-                <i class="el-icon-more" style="color: #409eff"></i>
-                <el-dropdown-menu slot="dropdown">
-                  <el-dropdown-item @click.native="handleDeleteRow(item)"
-                    >删除</el-dropdown-item
-                  >
-                </el-dropdown-menu>
-              </el-dropdown>
-            </div>
-            <el-image
-              style="width: 200px; height: 150px; padding: 10px"
-              :src="item.pressUrl"
-              fit="contain"
-              :preview-src-list="srcList"
-            ></el-image>
+          </div>
+          <div class="container" :gutter="10">
+            <div
+              v-for="(item, index) in mattingImagesPage.records"
+              :key="index"
+              class="img-item"
+            >
+              <div
+                :class="['modal', item.checked ? 'active' : '']"
+                v-if="isShowCheckbox"
+                @click.prevent="toggleItemCheckbox(item)"
+              >
+                <el-checkbox
+                  class="checkbox"
+                  v-if="isShowCheckbox"
+                  v-model="item.checked"
+                ></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: 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>
+                  <el-dropdown-menu slot="dropdown">
+                    <el-dropdown-item @click.native="handleDeleteRow(item)"
+                      >删除</el-dropdown-item
+                    >
+                  </el-dropdown-menu>
+                </el-dropdown>
+              </div>
+              <el-image
+                style="width: 200px; height: 230px; padding: 10px"
+                :src="item.pressUrl"
+                fit="contain"
+                @click="openElImageViwer(index)"
+              ></el-image>
 
-            <div class="name">{{ item.name }}</div>
+              <div class="name">{{ item.name }}</div>
+            </div>
+          </div>
+          <el-pagination
+            v-if="mattingImagesPage.records.length > 0"
+            background
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+            :current-page="Number(mattingImagesPage.current)"
+            :page-sizes="[10, 20, 40, 50]"
+            :page-size="Number(mattingImagesPage.size)"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="Number(mattingImagesPage.total)"
+            class="pagination"
+          />
+          <div class="button">
+            <PermissionButton
+              button
+              perms="bizMattingImages:download"
+              @click="handleDownload"
+              :disabled="disabledButton"
+              plain
+              type="primary"
+              icon="el-icon-download"
+              style="width: 100%"
+              >下载</PermissionButton
+            >
           </div>
-        </div>
-        <el-pagination
-          v-if="mattingImagesPage.records.length > 0"
-          background
-          @size-change="handleSizeChange"
-          @current-change="handleCurrentChange"
-          :current-page="Number(mattingImagesPage.current)"
-          :page-sizes="[10, 20, 40, 50]"
-          :page-size="Number(mattingImagesPage.size)"
-          layout="total, sizes, prev, pager, next, jumper"
-          :total="Number(mattingImagesPage.total)"
-          class="pagination"
-        />
-        <div class="button">
-          <PermissionButton
-            button
-            perms="bizMattingImages:download"
-            @click="handleDownload"
-            :disabled="disabledButton"
-            plain
-            type="primary"
-            icon="el-icon-download"
-            style="width: 100%"
-            >下载</PermissionButton
-          >
         </div>
       </div>
-    </div>
-  </el-dialog>
+    </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 ids = this.multiSelection.map((item) => {
-        return item.mattingId;
+      const hasError = this.multiSelection.some((item) => {
+        return item.status == -1;
       });
-      this.downloadByRecordId(ids);
+      if (hasError) {
+        this.$message.warning("当前只支持下载抠图成功的图片！");
+      } else {
+        const ids = this.multiSelection.map((item) => {
+          return item.mattingId;
+        });
+        this.downloadByRecordId(ids);
+      }
     },
 
     deleteByRecordsId: Debounce(async function (ids) {