完善在线抠图界面

src/assets/styles/index.scss

@@ -63,4 +63,9 @@ $defaultFontFamily: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
     min-width: 5px;
     border-radius: 5px;
     -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+}
+
+// 描述列表项垂直居中
+.el-descriptions-item__container {
+    align-items: center;
 }
\ No newline at end of file

src/components/CulturalRelicInfo/index.vue

@@ -152,9 +152,6 @@ export default {
 ::v-deep .el-descriptions-item__content {
   flex: 1;
 }
-::v-deep .el-descriptions-item__container {
-  align-items: center;
-}
 
 .image {
   margin-right: 20px;

src/utils/appCommon.js

+// 此文件是一些应用层面的公共方法
+
+const appCommon = {
+    // 打开弹窗
+    openDialog($el, refName) {
+        $el.$refs[refName].visible = true
+    },
+    // 打开弹窗
+    closeDialog($el, refName) {
+        $el.$refs[refName].visible = true
+    },
+}
+export default appCommon
\ No newline at end of file

src/utils/bizUploadFunctions.js

@@ -14,6 +14,7 @@ const fileUploadFuctions = {
     isFileRaw = file.status && file.status == "ready";
     return isFileRaw;
   },
+
   /**
    * 判断formData中是否有数据
    * @param {FormData} formData 文件对象，可能是File可能就是普通对象
@@ -27,6 +28,7 @@ const fileUploadFuctions = {
     }));
     return formDataArr.length > 0;
   },
+
   /**
    * 获取对应媒体下的文件
    * @param {string} mediaKey 媒体key

src/utils/globalFunctions.js

@@ -7,9 +7,11 @@ import { file } from '@/utils/file'
 import * as echarts from 'echarts';
 import constantsTool from '@/contants/index'
 import bizCommon from '@/utils/bizCommon'
+import appCommon from '@/utils/appCommon'
 
 Vue.prototype.$getFullUrl = getFullUrl //获取文件的完整链接
 Vue.prototype.$echarts = echarts //Echarts
 Vue.prototype.$file = file //文件操作
 Vue.prototype.$constantsTool = constantsTool //前端定义的常量操作
-Vue.prototype.$bizCommon = bizCommon //前端定义的常量操作
+Vue.prototype.$bizCommon = bizCommon //业务层面的公共方法
\ No newline at end of file
+Vue.prototype.$appCommon = appCommon //应用层面的公共方法
\ No newline at end of file

src/views/matting/components/PreviewDialog.vue

@@ -10,11 +10,85 @@
       <div class="divider"></div>
       <div class="label">抠图详情</div>
     </div>
-    <div class="dialog-content"></div>
+    <div class="dialog-content">
+      <el-descriptions title="详细信息">
+        <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', info.status)
+              "
+            >
+              {{ $constantsTool.getLabelByValue("mattingStatus", info.status) }}
+            </el-tag>
+          </span>
+          <span v-else>{{ info[item.prop] }}</span>
+        </el-descriptions-item>
+      </el-descriptions>
+      <div class="imgs">
+        <div class="single" v-if="info.type == '单个'">
+          <el-image
+            :src="info.src"
+            fit="contain"
+            style="height: 300px"
+          ></el-image>
+        </div>
+        <div class="multi" v-else>
+          <div class="title">
+            <h3>图片列表</h3>
+            <div class="right">
+              <el-button
+                type="text"
+                style="margin-right: 10px"
+                @click="toggleShowCheckbox"
+                >批量选择</el-button
+              >
+              <el-checkbox label="全选" v-if="isShowCheckbox"></el-checkbox>
+            </div>
+          </div>
+          <el-row class="container">
+            <el-col
+              :span="4"
+              v-for="(item, index) in info.imagesVo"
+              :key="index"
+              class="multi-item"
+            >
+              <div
+                class="modal"
+                v-if="isShowCheckbox"
+                @click="toggleItemCheckbox(item)"
+              >
+                <el-checkbox
+                  class="checkbox"
+                  v-if="isShowCheckbox"
+                  v-model="item.checked"
+                ></el-checkbox>
+                {{ item.checked }}
+              </div>
+              <el-image
+                :src="item.src"
+                fit="contain"
+                style="height: 100px"
+              ></el-image>
+              <div class="name">{{ item.name }}</div>
+            </el-col>
+          </el-row>
+        </div>
+      </div>
+      <div class="button">
+        <el-button plain type="primary" icon="el-icon-download">下载</el-button>
+      </div>
+    </div>
   </el-dialog>
 </template>
 
 <script>
+import { tableTitle } from "../configs/list";
 export default {
   name: "PreviewDialog",
   components: {},
@@ -24,16 +98,47 @@ export default {
       default: () => ({}),
     },
   },
-  computed: {},
+  computed: {
+    info() {
+      if (!(this.detail && this.detail.imagesVo)) {
+        return;
+      }
+      const imagesVo = this.detail.imagesVo.map((item) => {
+        const newObj = {
+          ...item,
+          checked: false,
+        };
+        return newObj;
+      });
+      const newInfo = {
+        ...this.detail,
+        imagesVo,
+      };
+      console.log(123, newInfo);
+      return newInfo;
+    },
+  },
   data() {
     return {
       visible: false,
+      tableTitle,
+      isShowCheckbox: false, //是否展示全选按钮
     };
   },
   methods: {
     handleClose(done) {
       this.visible = false;
     },
+    // 切换展示复选框
+    toggleShowCheckbox() {
+      this.isShowCheckbox = !this.isShowCheckbox;
+    },
+    toggleItemCheckbox(item) {
+      const { checked } = item;
+      item.checked = !checked;
+      console.log(item);
+      // this.$set(item, "checked", !checked);
+    },
   },
 };
 </script>
@@ -43,4 +148,46 @@ export default {
   max-height: 64vh;
   overflow: auto;
 }
+.button {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  .el-button {
+    width: 80%;
+  }
+}
+.single {
+  display: flex;
+  justify-content: center;
+}
+.multi {
+  .title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .multi-item {
+    margin-bottom: 16px;
+    position: relative;
+    .modal {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      background-color: rgba($color: #fff, $alpha: 0.5);
+      width: 100%;
+      height: 100%;
+      z-index: 9;
+    }
+    .name {
+      display: flex;
+      justify-content: center;
+    }
+  }
+  .container {
+    padding: 20px 0;
+    height: 320px;
+    overflow: auto;
+  }
+}
 </style>

src/views/matting/index.vue

@@ -157,8 +157,8 @@ export default {
     async handleOperation(value, row) {
       switch (value.type) {
         case "view":
-          console.log("view");
           this.currentPreviewItem = row;
+          this.$appCommon.openDialog(this, "PreviewDialog");
           break;
         case "download":
           console.log("download");

src/views/matting/mock.js

 // status 0-待处理  1-已处理  2-处理失败
+
+const src = "http://222.85.214.245:9603/files/2023-10-24-2dddc558-d490-4250-a3e8-6aded873aa06/low/DSC_4481.png"
 export const records = [
     {
         title: "图片抠图",
@@ -7,6 +9,8 @@ export const records = [
         status: 0,
         createTime: "2023-10-23 14:13:00",
         createName: "admin",
+        src,
+        type: '单个'
     },
     {
         title: "批量图片抠图",
@@ -15,6 +19,45 @@ export const records = [
         status: 1,
         createTime: "2023-10-23 14:14:00",
         createName: "admin",
+        type: '批量',
+        imagesVo: [
+            {
+                name: '测试图片1',
+                src
+            },
+            {
+                name: '测试图片2',
+                src
+            },
+            {
+                name: '测试图片3',
+                src
+            },
+            {
+                name: '测试图片1',
+                src
+            },
+            {
+                name: '测试图片2',
+                src
+            },
+            {
+                name: '测试图片3',
+                src
+            },
+            {
+                name: '测试图片1',
+                src
+            },
+            {
+                name: '测试图片2',
+                src
+            },
+            {
+                name: '测试图片3',
+                src
+            },
+        ]
     },
     {
         title: "批量图片抠图2",
@@ -23,5 +66,44 @@ export const records = [
         status: -1,
         createTime: "2023-10-23 13:14:00",
         createName: "admin",
+        type: '批量',
+        imagesVo: [
+            {
+                name: '测试图片1',
+                src
+            },
+            {
+                name: '测试图片2',
+                src
+            },
+            {
+                name: '测试图片3',
+                src
+            },
+            {
+                name: '测试图片1',
+                src
+            },
+            {
+                name: '测试图片2',
+                src
+            },
+            {
+                name: '测试图片3',
+                src
+            },
+            {
+                name: '测试图片1',
+                src
+            },
+            {
+                name: '测试图片2',
+                src
+            },
+            {
+                name: '测试图片3',
+                src
+            },
+        ]
     },
 ]
\ No newline at end of file