feat: 下载调整

src/api.js

@@ -49,6 +49,11 @@ export const absentPaper = (imageId) => {
 export const markPaper = ({ paperId, isMark, role }) => {
   return $post(`/api/papers/mark_paper`, { paperId, isMark, role });
 };
+export const paperExport = (datas) => {
+  return $get(`/api/export/paper/export`, datas, {
+    responseType: "blob",
+  });
+};
 
 // client-monitor
 export const clientMonitorList = (datas) => {
@@ -561,9 +566,17 @@ export const paperCheckList = (datas) => {
 export const paperCheckSave = (datas) => {
   return $post(`/api/paperCheck/add`, datas);
 };
+export const paperCheckExport = (datas) => {
+  return $post(`/api/paperCheck/export`, datas, "form", {
+    responseType: "blob",
+  });
+};
 export const paperCheckListStudent = (datas) => {
   return $post(`/api/paperCheck/listStudent`, datas);
 };
+export const paperCheckHistoryStudent = (datas) => {
+  return $post(`/api/paperCheck/listStudent`, datas);
+};
 export const paperCheckProgress = (datas) => {
   // paperCheckId=
   return $get(`/api/paperCheck/getSelectInfo`, datas);

src/modules/inspection/paperCheck/TaskDetail.vue

@@ -77,6 +77,7 @@
     </div>
     <div class="marker-body">
       <ImageView
+        v-if="curPaper.imgSrc"
         :img-src="curPaper.imgSrc"
         @on-prev="toPrevPaper"
         @on-next="toNextPaper"
@@ -99,6 +100,7 @@ import {
   workLevelList,
   paperCheckUpdateProgress,
   paperCheckProgress,
+  paperCheckHistoryStudent,
 } from "@/api";
 import TaskAction from "./TaskAction.vue";
 import ImageView from "@/components/ImageView.vue";
@@ -134,11 +136,11 @@ export default {
     };
   },
   mounted() {
+    this.getWorkLevels();
     this.initData();
   },
   methods: {
     async initData() {
-      this.getWorkLevels();
       const res = await paperCheckProgress({ paperCheckId: this.taskInfo.id });
       if (res && res.secretNumber) {
         await this.toPage(res.pageNumber + 1);
@@ -156,12 +158,22 @@ export default {
       this.levels = data || [];
     },
     async getList() {
-      const res = await paperCheckListStudent({
+      const fetchFunc =
+        this.curMenu === "task"
+          ? paperCheckListStudent
+          : paperCheckHistoryStudent;
+
+      const res = await fetchFunc({
         paperCheckId: this.taskInfo.id,
         pageNumber: this.current - 1,
         pageSize: this.size,
       });
-      this.papers = res.data;
+      this.papers = res.data.map((item) => {
+        return {
+          ...item,
+          dataType: this.curMenu,
+        };
+      });
       this.total = res.totalCount;
       this.totalPage = res.pageCount;
     },
@@ -185,6 +197,11 @@ export default {
     // menu
     toSwitchMenu(item) {
       this.curMenu = item.value;
+      if (this.curMenu === "task") {
+        this.initData();
+      } else {
+        this.toPage(1);
+      }
     },
     // paper
     selectPaper(index) {

src/modules/inspection/paperCheck/index.vue

@@ -64,11 +64,11 @@
 </template>
 
 <script>
-import { workList, paperCheckList } from "@/api";
+import { workList, paperCheckList, paperCheckExport } from "@/api";
 import ModifyTask from "./ModifyTask.vue";
 import ImportFile from "@/components/common/ImportFile/ImportFile.vue";
 
-import { download } from "@/plugins/utils";
+import { downloadByApi } from "@/plugins/download";
 
 export default {
   name: "inspection-paper-check",
@@ -145,6 +145,7 @@ export default {
           },
         },
       ],
+      downloading: false,
       // import
       headers: {
         Authorization: this.$ls.get("user", { token: "" }).token,
@@ -190,21 +191,17 @@ export default {
       });
     },
     async toExport(row) {
-      let result = true;
-      const user = this.$ls.get("user", { token: "", id: "" });
+      if (this.downloading) return;
+      this.downloading = true;
 
-      await download({
-        type: "post",
-        url: `${this.GLOBAL.domain}/api/paperCheck/export?paperCheckId=${row.id}`,
-        header: { Authorization: user.token, userId: user.id },
-        data: {},
-        fileName: `${row.name}-试卷抽查信息.xlsx`,
-      }).catch(() => {
-        result = false;
+      const res = await downloadByApi(() => {
+        return paperCheckExport({ paperCheckId: row.id });
+      }).catch((e) => {
+        this.$Message.error(e || "下载失败，请重新尝试！");
       });
+      this.downloading = false;
 
-      if (!result) return;
-
+      if (!res) return;
       this.$Message.success("导出成功！");
     },
   },

src/modules/main/PaperManage.vue

@@ -96,13 +96,23 @@
           @click="toExportMark"
           >导出标记试卷</Button
         >
-        <Button
-          size="small"
-          class="btn-form-search"
-          type="primary"
-          @click="toPage(1)"
-          >查询</Button
-        >
+        <div>
+          <Button
+            size="small"
+            class="btn-form-search"
+            type="primary"
+            @click="toPage(1)"
+            >查询</Button
+          >
+          <Button
+            type="success"
+            shape="circle"
+            icon="upload-white icon"
+            :loading="downloading"
+            @click="toExport"
+            >导出</Button
+          >
+        </div>
       </div>
     </div>
 
@@ -136,10 +146,17 @@
 </template>
 
 <script>
-import { paperPageList, subjectList, areaList, clientUserQuery } from "@/api";
+import {
+  paperPageList,
+  subjectList,
+  areaList,
+  clientUserQuery,
+  paperExport,
+} from "@/api";
 import { SORT_RULE_TYPE, CAFA_EXCEPTION_TYPE } from "@/constants/enumerate";
 import ImageActionList from "./components/ImageActionList";
 import SimpleImagePreview from "@/components/SimpleImagePreview";
+import { downloadByApi } from "@/plugins/download";
 
 export default {
   name: "paper-manage",
@@ -175,6 +192,7 @@ export default {
       areas: [],
       curPaper: {},
       curPaperIndex: 0,
+      downloading: false,
     };
   },
   computed: {
@@ -322,6 +340,20 @@ export default {
         )
       );
     },
+    async toExport(row) {
+      if (this.downloading) return;
+      this.downloading = true;
+
+      const res = await downloadByApi(() => {
+        return paperExport(this.filter);
+      }).catch((e) => {
+        this.$Message.error(e || "下载失败，请重新尝试！");
+      });
+      this.downloading = false;
+
+      if (!res) return;
+      this.$Message.success("导出成功！");
+    },
     // paper view
     toReview(index) {
       this.selectPaper(index);

src/plugins/axios.js

@@ -108,6 +108,8 @@ const $get = (url, datas, config = {}) => {
   return axios
     .get(url, config)
     .then((rep) => {
+      if (config["responseType"] === "blob") return rep;
+
       return successCallback(rep.data);
     })
     .catch((error) => {
@@ -120,7 +122,7 @@ const $get = (url, datas, config = {}) => {
  * @param {String} url 请求地址
  * @param {Object} datas 请求数据
  */
-const $post = (url, datas, dataType = "form") => {
+const $post = (url, datas, dataType = "form", config = {}) => {
   let sqDatas = "";
   if (datas.constructor === Object && dataType === "form") {
     sqDatas = qs.stringify(datas, { allowDots: true });
@@ -129,8 +131,10 @@ const $post = (url, datas, dataType = "form") => {
   }
 
   return axios
-    .post(url, sqDatas)
+    .post(url, sqDatas, config)
     .then((rep) => {
+      if (config["responseType"] === "blob") return rep;
+
       return successCallback(rep.data);
     })
     .catch((error) => {

src/plugins/download.js

@@ -0,0 +1,70 @@
+import { objTypeOf, blobToText } from "./utils";
+
+function parseDownloadFilename(dispositionInfo) {
+  const strs = dispositionInfo.split(";");
+  let filename = "";
+  strs
+    .map((item) => item.split("="))
+    .find((item) => {
+      if (item[0].indexOf("filename") !== -1) {
+        filename = decodeURI(item[1]);
+      }
+    });
+  return filename;
+}
+
+/**
+ * 通过api下载文件
+ * @param {AxiosPromise} fetchFunc 下载接口
+ * @param {String}} fileName 文件名
+ * @returns Promise<Boolean>
+ */
+export async function downloadByApi(fetchFunc, fileName) {
+  let errorInfo = null;
+  const res = await fetchFunc().catch((e) => {
+    errorInfo = e;
+  });
+
+  // 展示后台错误信息
+  if (errorInfo && objTypeOf(errorInfo) === "blob") {
+    const res = await blobToText(errorInfo).catch(() => {});
+    if (!res) return Promise.reject("下载失败！");
+    const resJson = JSON.parse(res);
+    return Promise.reject(resJson.message);
+  }
+
+  const filename =
+    fileName || parseDownloadFilename(res.headers["content-disposition"]);
+  downloadByBlob(new Blob([res.data]), filename);
+  return true;
+}
+
+/**
+ * 下载blob
+ * @param {Blob} data blob对象
+ * @param {String} filename 文件名
+ */
+export function downloadByBlob(data, filename) {
+  const blobUrl = URL.createObjectURL(data);
+  downloadByUrl(blobUrl, filename);
+}
+
+/**
+ * 下载url
+ * @param {String} url 文件下载地址
+ * @param {String}} filename 文件名
+ */
+export function downloadByUrl(url, filename) {
+  const tempLink = document.createElement("a");
+  tempLink.style.display = "none";
+  tempLink.href = url;
+  const fileName = filename || url.split("/").pop().split("?")[0];
+  tempLink.setAttribute("download", fileName);
+  if (tempLink.download === "undefined") {
+    tempLink.setAttribute("target", "_blank");
+  }
+  document.body.appendChild(tempLink);
+  tempLink.click();
+  document.body.removeChild(tempLink);
+  window.URL.revokeObjectURL(url);
+}

src/plugins/utils.js

@@ -22,6 +22,19 @@ function objTypeOf(obj) {
   return map[toString.call(obj)];
 }
 
+function blobToText(blob) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsText(blob, "utf-8");
+    reader.onload = function () {
+      resolve(reader.result);
+    };
+    reader.onerror = function () {
+      reject();
+    };
+  });
+}
+
 /**
  * 深拷贝
  * @param {Object/Array} data 需要拷贝的数据
@@ -264,6 +277,7 @@ function levelNameTransform(val) {
 
 export {
   objTypeOf,
+  blobToText,
   deepCopy,
   objAssign,
   download,