新增查看批量上传记录、取消上传

src/api/culturalRelic.js

@@ -39,30 +39,3 @@ export function deleteCultralRelic(data) {
     data
   })
 }
-
-// // 导入文件
-// export function importZip(data) {
-//   return request({
-//     url: '/bizImport/importZip',
-//     method: 'post',
-//     data
-//   })
-// }
-
-// 查询导入批次分页
-export function getImportListPage(data) {
-  return request({
-    url: '/bizImport/listByPage',
-    method: 'post',
-    data
-  })
-}
-
-// 查询导入批次
-export function getImportNum(data) {
-  return request({
-    url: '/bizImport/batchNum',
-    method: 'post',
-    data
-  })
-}
\ No newline at end of file

src/api/file.js

 import request from '@/utils/request'
 
-// 根据id查询博物馆详情
+// 删除文件
 export function deleteFiles(data) {
   return request({
     url: '/sysFiles/delete',
@@ -8,3 +8,41 @@ export function deleteFiles(data) {
     data
   })
 }
+
+
+
+// // 导入文件
+// export function importZip(data) {
+//   return request({
+//     url: '/bizImport/importZip',
+//     method: 'post',
+//     data
+//   })
+// }
+
+// 查询导入批次分页
+export function getImportListPage(data) {
+  return request({
+    url: '/bizImport/listByPage',
+    method: 'post',
+    data
+  })
+}
+
+// 查询导入批次
+export function getImportNum(data) {
+  return request({
+    url: '/bizImport/batchNum',
+    method: 'post',
+    data
+  })
+}
+
+// 根据导入批次删除
+export function deleteByBatchNum(data) {
+  return request({
+    url: '/bizImport/deleteByBatchNum',
+    method: 'delete',
+    data
+  })
+}

src/components/SearchBar/index.vue

@@ -9,11 +9,16 @@
         v-if="item.type == 'input'"
         v-model="searchData[item.prop]"
         :placeholder="`请输入${item.placeholder || item.label}`"
+        @keyup.enter.native="handleSearch"
+        clearable
+        @input="handleInputChange"
       ></el-input>
       <el-select
         v-if="item.type == 'select'"
         v-model="searchData[item.prop]"
         :placeholder="`请选择${item.placeholder || item.label}`"
+        @change="handleSelectChange"
+        clearable
       >
         <el-option
           :label="option.label"
@@ -43,6 +48,7 @@
 </template>
 
 <script>
+import { Debounce } from "@/utils/index";
 export default {
   name: "SearchBar",
   props: {
@@ -112,6 +118,12 @@ export default {
       this.searchData = {};
       this.$emit("reset");
     },
+    handleSelectChange() {
+      this.handleSearch();
+    },
+    handleInputChange: Debounce(function(e) {
+      this.handleSearch();
+    }, 500),
   },
 };
 </script>

src/components/Table/TablePage.vue

@@ -56,6 +56,9 @@
         <template v-else-if="item.isDisplayType">
           <slot name="displayType" :scope="scope.row"></slot>
         </template>
+        <template v-else-if="item.prop == 'fileSize'">
+          <slot name="fileSize" :scope="scope.row"></slot>
+        </template>
         <span v-else>{{ scope.row[item.prop] }}</span>
       </template>
     </el-table-column>
@@ -77,6 +80,7 @@
 
 <script>
 export default {
+  name: "TablePage",
   props: {
     data: {
       type: Array,
@@ -99,6 +103,12 @@ export default {
       default: false,
     },
   },
+  watch: {
+    data(value) {
+      // debugger
+      // console.log(123, value);
+    },
+  },
   methods: {
     handleSelectionChange(val) {
       if (this.hasMultiSelection) {

src/components/Uploader/AutoUploader.vue

@@ -29,7 +29,6 @@
 </template>
 <script>
 import { getToken } from "@/utils/auth";
-import { upload } from "@/utils/file";
 import { deleteFiles } from "@/api/file";
 export default {
   name: "AutoUploader",

src/icons/svg/file.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1659578745526" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1482" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M506 894.2a33 32.9 0 1 0 66 0 33 32.9 0 1 0-66 0Z" p-id="1483"></path><path d="M864 388.7v-4.4c0-70.7-57.3-128-128-128H511.8l-82.5-110.9c-7.4-12.9-18-16.2-27.3-16l-0.1-0.1H192.1c-70.7 0-128 57.3-128 128v542.1c0 70.7 57.3 128 128 128H407v-0.4c18.2 0 33-14.7 33-32.9s-14.8-32.9-33-32.9c-1 0-2.1 0.1-3.1 0.1h-181c-35.3 0-64-28.7-64-64 0-5.5 0.7-10.9 2-16L234 498.9l0.2-0.1c6.7-28.1 31.9-49 62.1-49.1l0.2-0.1h532.2c1.3-0.1 2.5-0.1 3.8-0.1 35.3 0 64 28.7 64 64 0 6.7-1.1 13.3-3 19.4v0.1L821 812.8c-0.1 0.6-0.3 1.1-0.4 1.7l-1.5 5.8-0.5 0.4c-1.5 3.9-3.4 7.5-5.5 11h-1.3c-2.6 4.7-5.8 9.1-9.5 12.9-11.4 10.6-26.7 17.1-43.4 17.1-1.3 0-2.6 0-3.8-0.1h-80.8c-1-0.1-2.1-0.1-3.1-0.1-18.2 0-33 14.7-33 32.9s14.8 32.9 33 32.9v0.2H763l0.5-0.4c59.1-0.2 108.7-40.4 123.2-95l0.2-0.2 67.8-285.5c2.9-10.8 4.5-22.1 4.5-33.8-0.1-59.5-40.5-109.5-95.2-123.9z m-571.5-4.9c-62 0-113.7 44.2-125.5 102.7l-0.5 0.4-38 160.3V257c0-35.3 28.7-64 64-64H383l82.7 111.3c6.6 11.4 19.2 17.2 31.5 15.8h238.5c35.2 0 63.8 28.5 64 63.7H292.5z" p-id="1484"></path></svg>
\ No newline at end of file

src/router/index.js

@@ -92,7 +92,7 @@ export const constantRoutes = [{
       meta: {
         title: '文物管理',
         icon: 'culturalRelic'
-      }
+      },
     }]
   },
   {
@@ -147,7 +147,20 @@ export const constantRoutes = [{
       }
     }]
   },
-  
+  {
+    path: '/importExport',
+    component: Layout,
+    children: [{
+      path: 'importExport',
+      name: 'ImportExport',
+      component: () => import('@/views/importExport/index'),
+      meta: {
+        title: '导入记录',
+        icon: 'file'
+      }
+    }]
+  },
+
 
   // {
   //   path: '/example',

src/views/culturalRelic/components/InfoEditDialog.vue

@@ -273,12 +273,6 @@ export default {
   },
   computed: {
     ...mapGetters(["userInfo", "dicts"]),
-    // dialogVisible: {
-    //   get: function () {
-    //     return this.visible;
-    //   },
-    //   set: function () {},
-    // },
     title() {
       if (this.dialogForm.crId) {
         return "修改信息";
@@ -311,30 +305,22 @@ export default {
             },
           ];
         }
-        if (this.dialogForm.imagesVo) {
-          this.images = this.dialogForm.imagesVo;
-        }
-        if (this.dialogForm.videosVo) {
-          this.videos = this.dialogForm.videosVo;
-        }
-        if (this.dialogForm.audiosVo) {
-          this.audios = this.dialogForm.audiosVo;
-        }
+
+        this.images = this.dialogForm.imagesVo || [];
+        this.videos = this.dialogForm.videosVo || [];
+        this.audios = this.dialogForm.audiosVo || [];
+
         // 回填文献
         if (
           this.dialogForm.literatureVo &&
           this.dialogForm.literatureVo.length > 0
         ) {
-          this.literatureList = [...this.dicts.literature];
-          this.literatureNames = [];
+          this.literatureList = this.dialogForm.literatureVo;
           this.literatureValues = [];
           this.dialogForm.literatureVo.forEach((lt) => {
             if (this.literatureValues) {
               this.literatureValues.push(lt.literatureId);
             }
-            if (this.literatureNames) {
-              this.literatureNames.push(lt.name);
-            }
           });
         }
       },

src/views/culturalRelic/components/UploadListDialog.vue

@@ -21,16 +21,21 @@
         </el-table-column>
         <el-table-column prop="progress" label="进度" width="300">
           <template slot-scope="scope">
-            <el-progress :percentage="scope.row.percent"></el-progress>
+            <el-progress
+              :percentage="scope.row.percent"
+              :status="scope.row.status"
+            ></el-progress>
           </template>
         </el-table-column>
         <el-table-column prop="operation" label="操作" width="100">
-          <el-button
-            type="text"
-            size="48"
-            icon="el-icon-circle-close"
-            @click.native="handleClick(scope.row)"
-          ></el-button>
+          <template slot-scope="scope">
+            <el-button
+              type="text"
+              size="48"
+              icon="el-icon-circle-close"
+              @click.native="handleCancel(scope.$index)"
+            ></el-button>
+          </template>
         </el-table-column>
       </el-table>
     </div>
@@ -42,7 +47,6 @@
 
 <script>
 import TablePage from "@/components/Table/TablePage";
-import { getImportListPage } from "@/api/culturalRelic";
 
 export default {
   name: "UploadListDialog",
@@ -99,35 +103,11 @@ export default {
     cancelForm() {
       this.handleClose();
     },
-    handleClick(item) {
-      console.log("item", item);
+    handleCancel(index) {
+      this.$emit('handleCancel',index)
     },
-    handleClose(done) {
+    handleClose() {
       this.$emit("handleClose");
-      // let title = this.isUpLoading
-      //   ? "当前有上传任务，是否取消上传"
-      //   : "确认关闭？";
-      // let confirmButtonText = this.isUpLoading ? "关闭并取消上传" : "确定";
-      // let cancelButtonText = this.isUpLoading ? "否" : "取消";
-      // let that = this;
-      // this.$confirm(title, "提示", {
-      //   confirmButtonText,
-      //   cancelButtonText,
-      //   type: "warning",
-      // })
-      //   .then(() => {
-      //      // 点击取消上传
-      //     if (that.isUpLoading) {
-      //       // TODO:取消上传
-
-      //       this.$message.info("已取消上传！");
-      //     }
-      //     this.dialogVisible = false;
-      //     that.$emit("handleClose");
-      //   })
-      //   .catch(() => {
-      //    console.log('用户取消操作');
-      //   });
     },
   },
 };

src/views/culturalRelic/config.js

@@ -142,43 +142,3 @@ export const operations = [
 
 ]
 
-export const importRecordsTitle = [{
-    prop: "createTime",
-    label: "导入时间",
-    columnAlign: "center",
-  },
-  {
-    prop: "batchNum",
-    label: "导入批次",
-    columnAlign: "center",
-  },
-  {
-    prop: "fileName",
-    label: "文件名称",
-    columnAlign: "center",
-  },
-  {
-    prop: "fileSize",
-    label: "文件大小",
-    columnAlign: "center",
-  },
-  {
-    prop: "remark",
-    label: "备注",
-    columnAlign: "center",
-  }, ,
-]
-
-export const importOperates = {
-  operate: true,
-  label: "操作",
-  width: "260px",
-  minwidth: "220px",
-  titleAlign: "center",
-  columnAlign: "center",
-}
-
-export const importOperations = [{
-  type: 'delete',
-  title: '删除'
-}, ]

src/views/culturalRelic/index.vue

@@ -57,9 +57,9 @@
       </template>
       <template v-slot:faceImageUrl="data">
         <img
-          :src="data.scope.faceImageUrl"
+          :src="data.scope.faceImagePressUrl || data.scope.faceImageUrl"
           alt="查看大图"
-          v-if="data.scope.faceImageUrl"
+          v-if="data.scope.faceImagePressUrl || data.scope.faceImageUrl"
           style="cursor: pointer"
           width="100px"
           @click="handelPreviewImages(data.scope.faceImageUrl)"
@@ -106,6 +106,7 @@
       :visible="multiUploadVisible"
       :filesList="filesList"
       @handleClose="handleMultiUploadClose"
+      @handleCancel="handleMultiUploadCancel"
     />
   </div>
 </template>
@@ -123,7 +124,6 @@ import {
 } from "@/api/culturalRelic";
 import InfoEditDialog from "./components/InfoEditDialog";
 import UploadListDialog from "./components/UploadListDialog";
-import { mapGetters } from "vuex";
 import { importZip } from "@/utils/file";
 import { getToken } from "@/utils/auth";
 export default {
@@ -152,12 +152,6 @@ export default {
           type: "input",
           label: "文物名称",
         },
-        // {
-        //   prop: "level",
-        //   type: "select",
-        //   label: "文物级别",
-        //   selectOptions: [],
-        // },
         {
           prop: "status",
           type: "select",
@@ -225,7 +219,7 @@ export default {
           this.uploadSelf(this.filesList[i].file, i); //弹窗显示的时候，就根据文件队列的数量调用上传接口
         }
       } else {
-        //弹窗关闭，记得还原数据到初始位置
+        //弹窗关闭，还原数据到初始位置
         this.filesList = [];
         this.uploadCount = 0;
         this.cancelUploadArr = [];
@@ -372,7 +366,8 @@ export default {
 
     // 文件上传进度回调
     uploadUnderWayCallback(progressEvent, index) {
-      let completeVal = (progressEvent.loaded / progressEvent.total) * 100 || 0; //处理成组件库进度组件需要的格式
+      let completeVal =
+        (progressEvent.loaded / progressEvent.total) * 100 - 1 || 0; //处理成组件库进度组件需要的格式
       this.$set(this.filesList[index], "percent", Math.floor(completeVal)); //直接改变数组某一项不是响应式的，因此我们需要用到这个api，将其响应式化，添加到数组中
     },
 
@@ -391,9 +386,6 @@ export default {
           return;
         }
       });
-      // let isUpLoading = this.uploadCount != this.filesList.length;
-      // console.log("this.uploadCount", this.uploadCount);
-      // return
       let title = isUpLoading ? "当前有上传任务，是否取消上传" : "确认关闭？";
       let confirmButtonText = isUpLoading ? "关闭并取消上传" : "确定";
       let cancelButtonText = isUpLoading ? "否" : "取消";
@@ -406,17 +398,32 @@ export default {
         .then(() => {
           // 点击取消上传
           if (that.isUpLoading) {
-            this.cancelUploadArr.forEach((cancelCallBack) => cancelCallBack()); //批量取消上传
+            this.handleCancelAllUpLoad();
             this.$message.warning("已取消上传！");
           }
           this.multiUploadVisible = false; //最后关闭
-          that.$emit("handleClose");
+          this.multiUploadVisible = false;
         })
         .catch(() => {
           console.log("用户取消操作");
         });
     },
 
+    handleMultiUploadCancel(index) {
+      if (this.cancelUploadArr[index]) {
+        this.cancelUploadArr[index](); //取消上传
+        this.cancelUploadArr.splice(index, 1); //从取消队列中删除
+      } 
+      if (this.filesList[index]) {
+        this.filesList.splice(index,1)
+      }
+      this.$message.info("已取消上传！");
+    },
+
+    handleCancelAllUpLoad() {
+      this.cancelUploadArr.forEach((cancelCallBack) => cancelCallBack()); //批量取消上传
+    },
+
     handleSuccess(res) {
       res.Success && this.$Message.success("上传成功"); //提示
       this.processModal = false; //成功后关闭弹窗

src/views/display/index.vue

@@ -32,9 +32,9 @@
       </template>
       <template v-slot:faceImageUrl="data">
         <img
-          :src="data.scope.faceImageUrl"
+          :src="data.scope.faceImagePressUrl || data.scope.faceImageUrl"
           alt="查看大图"
-          v-if="data.scope.faceImageUrl"
+          v-if="data.scope.faceImagePressUrl || data.scope.faceImageUrl"
           style="cursor: pointer"
           width="100px"
           @click="handelPreviewImages(data.scope.faceImageUrl)"

src/views/importExport/config.js

+
+export const importRecordsTitle = [{
+    prop: "createTime",
+    label: "导入时间",
+    columnAlign: "center",
+  },
+  {
+    prop: "batchNum",
+    label: "导入批次",
+    columnAlign: "center",
+  },
+  {
+    prop: "fileName",
+    label: "文件名称",
+    columnAlign: "center",
+  },
+  {
+    prop: "fileSize",
+    label: "文件大小",
+    columnAlign: "center",
+  },
+  {
+    prop: "remark",
+    label: "备注",
+    columnAlign: "center",
+  },
+]
+
+export const importOperates = {
+  operate: true,
+  label: "操作",
+  width: "260px",
+  minwidth: "220px",
+  titleAlign: "center",
+  columnAlign: "center",
+}
+
+export const importOperations = [{
+  type: 'delete',
+  title: '删除'
+}, ]
\ No newline at end of file

src/views/culturalRelic/import.vue → src/views/importExport/index.vue

@@ -2,31 +2,34 @@
   <div class="app-container">
     <div class="top-bar">
       <SearchBar :config="searchConfig" @search="search" @reset="reset" />
-      <TablePage
-        :data="list.records"
-        :tableTitle="tableTitle"
-        :operates="tableOperates"
-      >
-        <template v-slot:operates="scope">
-          <TableOperation
-            :operations="tableOperations"
-            :rawData="scope.scope.row"
-            @handleOperation="handleOperation"
-          ></TableOperation>
-        </template>
-      </TablePage>
-      <el-pagination
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-        :current-page="Number(list.current)"
-        :page-sizes="[10, 20, 40, 50]"
-        :page-size="Number(list.size)"
-        layout="total, sizes, prev, pager, next, jumper"
-        :total="Number(list.total)"
-        class="pagination"
-      >
-      </el-pagination>
     </div>
+    <TablePage
+      :data="list.records"
+      :tableTitle="tableTitle"
+      :operates="tableOperates"
+    >
+      <template v-slot:fileSize="scope">
+        {{ getFileSize(scope.scope.fileSize) }}
+      </template>
+      <template v-slot:operates="scope">
+        <TableOperation
+          :operations="tableOperations"
+          :rawData="scope.scope.row"
+          @handleOperation="handleOperation"
+        ></TableOperation>
+      </template>
+    </TablePage>
+    <el-pagination
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page="Number(list.current)"
+      :page-sizes="[10, 20, 40, 50]"
+      :page-size="Number(list.size)"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="Number(list.total)"
+      class="pagination"
+    >
+    </el-pagination>
   </div>
 </template>
 
@@ -34,7 +37,7 @@
 import TablePage from "@/components/Table/TablePage.vue";
 import TableOperation from "@/components/Table/TableOperation.vue";
 import { importRecordsTitle, importOperates, importOperations } from "./config";
-import { getImportListPage } from "@/api/culturalRelic";
+import { getImportListPage, deleteByBatchNum } from "@/api/file";
 
 import SearchBar from "@/components/SearchBar";
 
@@ -58,7 +61,22 @@ export default {
       },
       searchConfig: [
         {
-          prop: "name",
+          prop: "type",
+          type: "select",
+          label: "所属分类",
+          selectOptions: [
+            {
+              label: "文物",
+              value: "biz_cultural_relic",
+            },
+            {
+              label: "展览",
+              value: "biz_exhibition",
+            },
+          ],
+        },
+        {
+          prop: "batchNum",
           type: "input",
           label: "批次",
         },
@@ -75,6 +93,12 @@ export default {
     tableOperations() {
       return importOperations;
     },
+    getFileSize(fileSize) {
+      return (fileSize) => {
+        console.log(fileSize);
+        return (Number(fileSize) / 1024 / 1024).toFixed(2) + "M";
+      };
+    },
   },
   mounted() {
     this.loadData();
@@ -86,9 +110,6 @@ export default {
         limit: this.list.size,
         ...form,
       };
-      if (!params.level) {
-        delete params.level;
-      }
       let res = await getImportListPage(params);
       if (res.code == 0) {
         this.list = res.data;
@@ -107,7 +128,6 @@ export default {
       };
       let res = await getImportListPage(params);
       if (res.code == 0) {
-        // debugger
         this.list = res.data;
       }
     },
@@ -120,11 +140,12 @@ export default {
         case "view":
           break;
         case "delete":
-        //   let deleteRes = await deleteCultralRelic([row.crId]);
-        //   if (deleteRes.code == 0) {
-        //     this.$message.success("删除成功！");
-        //     this.loadData();
-        //   }
+          let { batchNum, type,id } = row;
+          let deleteRes = await deleteByBatchNum({ batchNum, type });
+          if (deleteRes.code == 0) {
+            this.$message.success("删除成功！");
+            this.loadData();
+          }
           break;
       }
     },

src/views/log/index.vue

@@ -27,7 +27,7 @@
 <script>
 import TablePage from "@/components/Table/TablePage.vue";
 import TableOperation from "@/components/Table/TableOperation.vue";
-import { title, operates, operations } from "./config";
+import { title } from "./config";
 import { getLogList } from "@/api/log";
 
 import SearchBar from "@/components/SearchBar";