报告导出ui调整

src/api/allAnalysisPage.ts

@@ -67,7 +67,7 @@ export function getProjectReportTask(params: {
         taskId: number;
       };
     }
-  >("/api/ess/report/task/export", {}, { params });
+  >("/api/ess/report/task/export", params);
 }
 // 上传报告html内容，后台生成报告pdf
 export function uploadProjectReportCont(params: {

src/features/allAnalysis/AllAnalysis.vue

@@ -21,7 +21,7 @@
 
     <div class="part-box">
       <a-space class="part-action" :size="6">
-        <a-button type="text" @click="exportExcel">
+        <a-button type="text" :loading="exportLoading" @click="exportExcel">
           <template #icon> <svg-icon name="export-excel"></svg-icon> </template>
           导出excel
         </a-button>
@@ -69,10 +69,11 @@ import { useRoute } from "vue-router";
 import router from "@/router";
 import { getSasPaperList } from "@/api/allAnalysisPage";
 import { getProjectList } from "@/api/projectManagementPage";
-// import EventBus from "@/plugins/eventBus";
 import ReportBatchDownload from "../report/ReportBatchDownload.vue";
+import useLoading from "@/hooks/loading";
 
 import { SASPaper, Project } from "@/types";
+import { message } from "ant-design-vue";
 
 type PaginationType = {
   current: number;
@@ -98,8 +99,6 @@ const route = useRoute();
 const projectId = +route.params.projectId;
 let curProject = $ref<Project>({} as Project);
 
-let activeTab = $ref("1");
-
 let data = $ref<SASPaper[]>([]);
 let pageSize = $ref<number>(10);
 let pageNo = $ref(1);
@@ -111,8 +110,10 @@ async function search() {
   pageNo = 1;
   await fetchData();
 }
-
+const { loading: exportLoading, setLoading: setExportLoading } = useLoading();
 async function exportExcel() {
+  if (exportLoading.value) return;
+  setExportLoading(true);
   let params: Record<string, any> = {
     projectId,
     courseId,
@@ -122,7 +123,14 @@ async function exportExcel() {
   if (sortOrder && sortColName) {
     params = { ...params, sortColName, sortOrder };
   }
-  await downloadFileURL("/api/ess/sasPaper/export", params);
+  let err = false;
+  await downloadFileURL("/api/ess/sasPaper/export", params).catch(() => {
+    err = true;
+  });
+  setExportLoading(false);
+
+  if (err) return;
+  message.success("导出excel成功！");
 }
 
 interface fetchParamType {

src/features/paperAnalysis/PaperAnalysis.vue

@@ -96,7 +96,7 @@ import { message } from "ant-design-vue";
 const store = useMainStore();
 store.currentLocation = "项目列表 / 查询结果 / 详情";
 
-let activeTab = $ref("5");
+let activeTab = $ref("1");
 let courseId = $ref(undefined as unknown as number);
 let startScore = $ref(undefined as unknown as number);
 const route = useRoute();

src/features/report/ReportBatchDownload.vue

@@ -19,35 +19,50 @@
     v-model:open="loadModalVisible"
     class="report-load-modal"
     centered
+    title="导出报告进度"
     :closable="false"
     :keyboard="false"
     :maskClosable="false"
     :footer="null"
-    :maskStyle="{ backgroundColor: 'rgba(0,0,0,0.75)' }"
+    :maskStyle="{ backgroundColor: 'rgba(0,0,0,0.6)' }"
+    :width="320"
   >
-    <div class="report-load-body">
-      <div class="report-load-progress">
-        <p
-          v-for="(item, index) in progressList"
-          :key="index"
-          class="report-load-item"
-        >
-          <span>{{ item.title }}...</span>
-          <span v-if="item.progress && item.progress !== 100"
-            >{{ item.progress }}%</span
-          >
-          <span v-if="!item.loading && item.progress === 100">完成</span>
-          <LoadingOutlined v-if="item.loading" />
-        </p>
-      </div>
-    </div>
+    <a-steps progress-dot :current="curProgress" direction="vertical">
+      <a-step v-for="(item, pindex) in progressList" :key="pindex">
+        <template #title>
+          <div class="step-content">
+            <h4>{{ item.title }}</h4>
+            <p>
+              <svg-icon
+                v-if="item.loading"
+                name="loading"
+                color="#165dff"
+                class="anticon-spin"
+              />
+              <span
+                v-if="item.progress && item.progress !== 100"
+                class="color-primary"
+                >{{ item.progress }}%</span
+              >
+              <span
+                v-if="!item.loading && item.progress === 100"
+                class="color-success"
+                >完成</span
+              >
+              <span v-if="pindex > curProgress" class="color-gray-light"
+                >未开始</span
+              >
+            </p>
+          </div>
+        </template>
+      </a-step>
+    </a-steps>
   </a-modal>
 </template>
 
 <script setup lang="ts">
 import { Project } from "@/types";
 import { message } from "ant-design-vue";
-import { LoadingOutlined } from "@ant-design/icons-vue";
 import SelectProject from "../paperAnalysis/SelectProject.vue";
 import {
   getProjectReportTask,
@@ -77,15 +92,35 @@ let paperIds = $shallowRef<number[]>([]);
 let finishPaperIds = $shallowRef<number[]>([]);
 let reportPreviewUrl = $ref<string>("");
 let setTs = $shallowRef<number[]>([]);
-let progressList = $ref<ProgressItemType[]>([]);
+let progressList = $ref<ProgressItemType[]>([
+  {
+    title: "构建导出任务",
+    progress: 50,
+    loading: true,
+  },
+  {
+    title: "构建报告数据",
+    progress: 0,
+    loading: false,
+  },
+  {
+    title: "获取报告pdf",
+    progress: 0,
+    loading: false,
+  },
+]);
 let totalTaskCount = $ref(1);
 let loadModalVisible = $ref(false);
+let curProgress = $ref(0);
+
+function startStep(pindex: number) {
+  if (pindex > 0) progressList[pindex - 1].loading = false;
 
-function addProgress(data: ProgressItemType) {
-  progressList.push(data);
+  curProgress = pindex;
+  progressList[curProgress].loading = true;
 }
 function updateProgress(progress: number) {
-  let data = progressList[progressList.length - 1];
+  let data = progressList[curProgress];
   data.progress = progress;
   if (progress === 100) data.loading = false;
 }
@@ -119,11 +154,7 @@ function exportReport() {
 async function projectSelected(projectId: number[]) {
   loadModalVisible = true;
   compareProjectId = projectId;
-  addProgress({
-    title: "构建导出任务",
-    progress: 0,
-    loading: true,
-  });
+  startStep(0);
   const res = await getProjectReportTask({
     projectId: props.curProject.id,
     compareProjectId: projectId,
@@ -144,21 +175,13 @@ async function projectSelected(projectId: number[]) {
 
   updateProgress(100);
 
-  addProgress({
-    title: "构建报告数据",
-    progress: 0,
-    loading: true,
-  });
+  startStep(1);
   await startTask();
 }
 
 async function startTask() {
   if (!paperIds.length) {
-    addProgress({
-      title: "获取报告pdf",
-      progress: 0,
-      loading: true,
-    });
+    startStep(2);
     await finishTask();
     return;
   }
@@ -245,33 +268,3 @@ onBeforeMount(() => {
   delete window.submitReportTemp;
 });
 </script>
-
-<style>
-.report-load-body {
-  width: 300px;
-  margin: 0 auto;
-  color: #fff;
-  font-size: 16px;
-}
-.report-load-body > p {
-  margin: 0;
-}
-.report-load-modal .ant-modal-content {
-  background-color: transparent;
-  box-shadow: none;
-}
-.report-load-item > span {
-  display: inline-block;
-  vertical-align: middle;
-  margin: 0 5px;
-}
-.report-preview-frame {
-  position: absolute;
-  width: 1000px;
-  height: 600px;
-  left: -9999px;
-  top: 0;
-  z-index: 1001;
-  visibility: hidden;
-}
-</style>

src/styles/base.less

@@ -208,3 +208,12 @@
   color: var(--app-main-text-color);
   line-height: 24px;
 }
+.color-primary {
+  color: var(--color-primary);
+}
+.color-success {
+  color: var(--color-success);
+}
+.color-gray-light {
+  color: #bfbfbf;
+}

src/styles/pages.less

@@ -68,3 +68,32 @@
     border: 1px solid var(--color-border);
   }
 }
+
+// .report-load-modal
+.report-load-modal {
+  .step-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    > h4 {
+      height: 22px;
+      font-weight: 400;
+      font-size: var(--app-main-font-size);
+      line-height: 22px;
+      color: var(--app-mid-text-color);
+    }
+  }
+  .ant-steps-item-title {
+    display: block;
+    font-size: var(--app-main-font-size);
+    padding: 0;
+
+    .svg-icon {
+      margin-right: 5px;
+      margin-top: -2px;
+    }
+  }
+  .ant-steps .ant-steps-item .ant-steps-item-icon {
+    margin-inline-end: 6px;
+  }
+}