完善抠图详情内的逻辑

src/api/matting.js

@@ -49,7 +49,7 @@ export function deleteMattingImage(data) {
 export function getMattingImagesPage(data) {
     return request({
         url: '/bizMattingImages/listByPage',
-        method: 'delete',
+        method: 'post',
         data
     })
 }
@@ -69,7 +69,8 @@ export function downFileByFileIds(data) {
     return request({
         url: '/bizMattingImages/downLoad',
         method: 'post',
-        data
+        data,
+        responseType: 'blob',
     })
 }
 

src/components/PermissionButton/index.vue

 <template>
   <span>
-    <el-button v-bind="$attrs" v-on="$listeners" v-if="hasPer && button">
+    <el-button
+      style="width: 100%"
+      v-bind="$attrs"
+      v-on="$listeners"
+      v-if="hasPer && button"
+    >
       <slot />
     </el-button>
     <el-link v-bind="$attrs" v-on="$listeners" v-else-if="hasPer">

src/components/Table/TablePage.vue

@@ -18,9 +18,9 @@
         <slot name="expand" :scope="scope.$index"></slot>
       </template>
     </el-table-column>
+    <el-table-column v-if="hasMultiSelection" type="selection" width="55" />
     <el-table-column type="index" width="50" label="序号" align="center">
     </el-table-column>
-    <el-table-column v-if="hasMultiSelection" type="selection" width="55" />
     <el-table-column
       v-for="(item, index) in tableTitle"
       :key="index"

src/components/UploadDialog/index.vue

@@ -34,9 +34,8 @@
           ref="upload"
           class="upload-area"
           name="zipFile"
+          action="#"
           :accept="fileType"
-          :action="uploadUrl"
-          :headers="headers"
           :on-success="handleSuccess"
           :on-change="handleChange"
           :auto-upload="false"
@@ -134,12 +133,6 @@ export default {
         return (size / 1024 / 1024).toFixed(2) + "M"; //1M=1024Kb=1024*1024byte
       };
     },
-    uploadUrl() {
-      if (!this.options) {
-        return;
-      }
-      return this.options.uploadUrl;
-    },
     fileType() {
       if (!this.options) {
         return;
@@ -251,8 +244,19 @@ export default {
       formData.append(titleKey, uploadTitle);
       return formData;
     },
+    // 判断文件是否符合规则校验
+    getFileValid(file) {
+      const { name } = file;
+      const suffix = name.split(".")[1].toLowerCase();
+      return suffix && this.fileType.includes(suffix);
+    },
     // 上传函数实现逻辑
     uploadSelf(file, index) {
+      const isValid = this.getFileValid(file);
+      if (!isValid) {
+        this.$message.error(`文件格式错误：请上传${this.fileType}格式的文件！`);
+        return;
+      }
       const loading = this.$loading({
         lock: true,
         text: "正在上传中...文件较大，请耐心等待，请勿刷新页面",
@@ -261,6 +265,7 @@ export default {
       });
       const formData = this.getFormData(file);
       importZip(
+        this.options.uploadUrl,
         formData,
         (progressEvent) => this.uploadUnderWayCallback(progressEvent, index),
         (cancelCallback) => this.cancelCallBack(cancelCallback, index)

src/utils/file.js

@@ -2,6 +2,7 @@ import axios from 'axios'
 import {
   getToken
 } from '@/utils/auth'
+import { Message } from 'element-ui'
 
 var uploadUrl = process.env.VUE_APP_BASE_API + "/sysFiles/upload"
 var uploadV1Url = process.env.VUE_APP_BASE_API + "/sysFiles/v1/upload"
@@ -49,13 +50,14 @@ export function uploadV1(data) {
 
 /**
  * 批量上传文件 
- * @param data   formData类型 * 参数1 type:导入数据类别(biz_cultural_relic、biz_exhibition二选一) 参数2 zipFile:zip压缩文件
- * @param callback  用于获取上传进度
- * @param cancelCallBack  用于取消上传
+ * @param {String} importZipUrl   上传地址
+ * @param {FormData} data   * 参数1 type:导入数据类别(biz_cultural_relic、biz_exhibition二选一) 参数2 zipFile:zip压缩文件
+ * @param {Function} callback  用于获取上传进度
+ * @param {Function} cancelCallBack  用于取消上传
  * @returns {Promise}
  */
 let CancelToken = axios.CancelToken;
-export function importZip(data, callback, cancelCallBack) {
+export function importZip(importZipUrl, data, callback, cancelCallBack) {
   return new Promise((resolve, reject) => {
     axios.post(importZipUrl, data, {
       headers: {
@@ -111,41 +113,61 @@ export function previewFile(href, previewName) {
 }
 
 
+/**
+ * 处理返回的二进制流并触发为下载文件
+ * @param {*} response 下载返回的二进制流
+ * @param {*} fileName  希望展示的文件名称
+ * @param {*} suffix 希望下载展示的文件后缀
+ */
+export function triggrtUrl(response, fileName, suffix) {
+  const blob = new Blob([response.data])
+  const link = document.createElement('a')
+  link.href = URL.createObjectURL(blob)
+  if (suffix) {
+    link.download = fileName + '.' + suffix
+  } else {
+    link.download = fileName
+  }
+  link.click()
+  URL.revokeObjectURL(link.href)
+}
+
 /**
  * 下载文件 
  * @param url 下载地址
  * @param fileName 下载文件用户看到的名称
  * @param typeSuffix 文件后缀
  */
-export function downloadBlob(url, fileName, typeSuffix) {
+export function downloadBlob({ url, method = 'get', fileName, suffix, data }) {
   return new Promise((resolve, reject) => {
-    axios({
+    const startMsg = Message.warning('正在下载...')
+    const options = {
       url,
-      method: 'get',
+      method,
       responseType: 'blob',
       headers: {
         'authorization': getToken()
       }
-    }).
+    }
+    if (data) {
+      options.data = data
+    }
+    axios(options).
       then(response => {
-        const blob = new Blob([response.data])
-        const link = document.createElement('a')
-        link.href = URL.createObjectURL(blob)
-        if (typeSuffix) {
-          link.download = fileName + '.' + typeSuffix
-        } else {
-          link.download = fileName
-        }
-        link.click()
-        URL.revokeObjectURL(link.href)
-        resolve()
+        startMsg.close()
+        Message.success('下载成功！')
+        triggrtUrl(response, fileName, suffix)
+        resolve(response)
       }).catch(err => {
+        startMsg.close()
         console.error(err);
+        Message.error('下载失败：' + err)
         reject(err)
       })
   })
 };
 
+
 // 因为之前的全部都是单独引入，为了不改变以前的代码因此单独用file导出，后期方便$file.uploadFile进行使用
 export const file = {
   uploadFile,
@@ -153,5 +175,6 @@ export const file = {
   importZip,
   downloadFile,
   previewFile,
-  downloadBlob
+  downloadBlob,
+  triggrtUrl
 }
\ No newline at end of file

src/utils/index.js

@@ -175,19 +175,6 @@ export const Throttle = (fn, t) => {
   }
 }
 
-// // 获取完整的url，根据环境进行配置
-// export function getFullUrl(url) {
-//   let fullUrl = ''
-//   if (url && url.indexOf('http') != -1 && url.indexOf('files') != -1) {
-//     let urlArr = url.split('files')
-//     fullUrl = '/files' + urlArr[1]
-//   } else if (url && url.indexOf('http') == -1 && url.indexOf('files') == -1) {
-//     fullUrl = '/files' + url
-//   } else {
-//     fullUrl = url
-//   }
-//   return fullUrl
-// }
 
 // 获取完整的url，根据环境进行配置
 export function getFullUrl(url) {

src/views/literature/index.vue

@@ -224,7 +224,16 @@ export default {
         let msg = this.$message.info("正在准备下载...");
         let url = "/files" + files[0].url.split("files")[1];
         const { name } = row;
-        downloadBlob(url, name, "pdf")
+        const method = "get";
+        const fileName = name;
+        const suffix = "pdf";
+        const options = {
+          url,
+          method,
+          fileName,
+          suffix,
+        };
+        downloadBlob(options)
           .then((res) => {
             msg.close();
             this.$message.success("下载成功！");

src/views/matting/configs/list.js

@@ -29,18 +29,18 @@ export const tableTitle = [{
   label: "创建时间",
   columnAlign: 'center',
 },
-{
-  prop: "createName",
-  label: "创建人",
-  columnAlign: 'center',
-  showOverFlowToolTip: true,
-},
+  // {
+  //   prop: "createName",
+  //   label: "创建人",
+  //   columnAlign: 'center',
+  //   showOverFlowToolTip: true,
+  // },
 
-{
-  prop: "remark",
-  label: "备注",
-  columnAlign: 'center',
-},
+  // {
+  //   prop: "remark",
+  //   label: "备注",
+  //   columnAlign: 'center',
+  // },
 ]
 
 
@@ -52,25 +52,21 @@ export const operates = {
   width: "280px",
 }
 
-export const operations = [
-  {
-    type: 'view',
-    title: '查看详情',
-    perms: 'bizCulturalRelic:list',//暂时使用展览的列表
-  },
-
-  {
-    type: 'download',
-    title: '下载',
-    perms: 'bizCulturalRelic:list',//暂时使用展览的列表
-  },
-  {
-    type: 'delete',
-    title: '删除',
-    perms: 'bizCulturalRelic:delete',//暂时使用展览的列表
-  },
-
-]
+export const viewButton = {
+  type: 'view',
+  title: '查看详情',
+  perms: 'bizMattingImages:detail',
+}
+export const downloadButton = {
+  type: 'download',
+  title: '下载',
+  perms: 'bizMattingImages:download',
+}
+export const deleteButton = {
+  type: 'delete',
+  title: '删除',
+  perms: 'bizMattingImages:delete',
+}
 
 
 // 搜索配置

src/views/matting/index.vue

@@ -11,7 +11,7 @@
         <el-dropdown @command="handleCommand">
           <PermissionButton
             button
-            perms="bizCulturalRelic:add"
+            perms="bizMattingImages:add"
             type="primary"
             size="mini"
             icon="el-icon-upload2"
@@ -24,12 +24,41 @@
           </el-dropdown-menu>
         </el-dropdown>
       </div>
+      <div class="tools-item">
+        <PermissionButton
+          button
+          perms="bizMattingImages:download"
+          type="primary"
+          size="mini"
+          icon="el-icon-download"
+          style="margin-right: 10px"
+          :disabled="multiDisabled"
+          plain
+          @click="handleMultiDownload"
+        >
+          批量下载
+        </PermissionButton>
+        <PermissionButton
+          button
+          perms="bizMattingImages:delete"
+          type="danger"
+          plain
+          size="mini"
+          icon="el-icon-delete"
+          :disabled="multiDisabled"
+          @click="handleMultiDelete"
+        >
+          批量删除
+        </PermissionButton>
+      </div>
     </div>
     <div class="list">
       <TablePage
         :data="list.records"
         :tableTitle="tableTitle"
         :operates="operates"
+        hasMultiSelection
+        @handleSelectionChange="handleSelectionChange"
       >
         <template v-slot:status="{ scope }">
           <el-tag
@@ -42,7 +71,7 @@
         </template>
         <template v-slot:operates="{ scope }">
           <TableOperation
-            :operations="operations"
+            :operations="getOperations(scope.status)"
             :rawData="scope"
             @handleOperation="handleOperation"
           ></TableOperation>
@@ -65,7 +94,7 @@
         @update="loadData"
         :options="uploadOptions"
       />
-      <PreviewDialog ref="PreviewDialog" :detail="currentPreviewItem" />
+      <PreviewDialog ref="PreviewDialog" :detail="previewInfo" />
     </div>
 
     <el-image-viewer
@@ -77,11 +106,24 @@
 </template>
 
 <script>
-import { operates, operations, tableTitle, searchConfig } from "./configs/list";
+import {
+  operates,
+  viewButton,
+  downloadButton,
+  deleteButton,
+  tableTitle,
+  searchConfig,
+} from "./configs/list";
 import { records } from "./mock";
 import UploadDialog from "@/components/UploadDialog";
 import PreviewDialog from "./components/PreviewDialog";
-import { getMattingList } from "@/api/matting";
+import { Debounce } from "@/utils/index";
+import {
+  getMattingList,
+  getMattingDetail,
+  downFileByMattingIds,
+  deleteMattingRecord,
+} from "@/api/matting";
 export default {
   components: {
     UploadDialog,
@@ -101,10 +143,9 @@ export default {
       importRecordVisible: false, //上传记录
       imgList: [],
       operates,
-      operations,
       tableTitle,
       currentUploadType: ".zip", //当前上传的文件类型
-      currentPreviewItem: {}, //当前点击的表格项目
+      previewInfo: {}, //当前点击预览的表格项目
       TYPE_IMG: "0", //单个图片文件
       TYPE_ZIP: "1", //zip文件
       uploadOptions: {
@@ -115,10 +156,33 @@ export default {
         uploadTitleKey: "title",
       },
       searchParams: {},
+      multiSelection: [],
     };
   },
-  async created() {
-    // this.loadData();
+  computed: {
+    multiDisabled() {
+      return this.multiSelection.length == 0;
+    },
+    getOperations(status) {
+      return (status) => {
+        if (status == 1) {
+          return [viewButton, downloadButton, deleteButton];
+        } else {
+          const newViewButton = {
+            ...viewButton,
+            disabled: true,
+          };
+          const newDownloadButton = {
+            ...downloadButton,
+            disabled: true,
+          };
+          return [newViewButton, newDownloadButton, deleteButton];
+        }
+      };
+    },
+  },
+  created() {
+    this.loadData();
   },
   methods: {
     async search(form) {
@@ -126,7 +190,7 @@ export default {
       this.resetPage();
       this.loadData(form);
     },
-    // 清除分页到初始状态
+
     resetPage() {
       this.list.current = 1;
     },
@@ -134,7 +198,7 @@ export default {
       this.searchParams = {};
       this.loadData();
     },
-    // 加载表格数据
+
     async loadData(form) {
       const { current, size } = this.list;
       var params = {
@@ -152,28 +216,82 @@ export default {
     },
     handleCommand(type) {
       this.uploadOptions.compressFlag = type;
-      this.openDialog("UploadDialog");
-    },
-
-    openDialog(refName) {
-      this.$refs[refName].visible = true;
+      this.$appCommon.openDialog(this, "UploadDialog");
     },
 
     async handleOperation(value, row) {
       switch (value.type) {
         case "view":
-          this.currentPreviewItem = row;
-          this.$appCommon.openDialog(this, "PreviewDialog");
+          this.handleView(row);
           break;
         case "download":
-          console.log("download");
+          const { title, mattingId } = row;
+          const ids = [mattingId];
+          this.downloadByRecordId(ids, title);
           break;
         case "delete":
-          console.log("delete");
+          this.handleDeleteRow(row);
           break;
       }
     },
 
+    async handleView(row) {
+      const { mattingId } = row;
+      const params = {
+        mattingId,
+      };
+      const res = await getMattingDetail(params);
+      if (res.code == 0) {
+        this.previewInfo = res.data;
+        this.$appCommon.openDialog(this, "PreviewDialog");
+      }
+    },
+
+    handleDeleteRow(row) {
+      const ids = [row.mattingId];
+      this.deleteByRecordsId(ids);
+    },
+
+    handleMultiDelete() {
+      const ids = this.multiSelection.map((item) => {
+        return item.mattingId;
+      });
+      this.deleteByRecordsId(ids);
+    },
+
+    handleMultiDownload() {
+      const ids = this.multiSelection.map((item) => {
+        return item.mattingId;
+      });
+      this.downloadByRecordId(ids);
+    },
+
+    deleteByRecordsId: Debounce(async function (ids) {
+      const res = await deleteMattingRecord(ids);
+      if (res.code == 0) {
+        this.$message.success("删除成功！");
+        this.loadData();
+      }
+    }, 600),
+
+    downloadByRecordId: Debounce(async function (ids, name = "") {
+      const params = ids;
+      const url =
+        process.env.VUE_APP_BASE_API +
+        "/bizMattingRecords/downFileByMattingIds";
+      const method = "post";
+      const fileName = name + "_智能抠图处理后文件";
+      const suffix = "zip";
+      const opitons = {
+        url,
+        method,
+        fileName,
+        suffix,
+        data: params,
+      };
+      await this.$file.downloadBlob(opitons);
+    }, 600),
+
     // 关闭预览图片
     closeImgViewer() {
       this.imgViewerVisible = false;
@@ -186,7 +304,7 @@ export default {
 
     // 多选
     handleSelectionChange(val) {
-      this.multipleSelection = val;
+      this.multiSelection = val;
     },
 
     // 改变页容量