实验报告loading

.env

@@ -2,8 +2,8 @@ VITE_APP_TITLE=金融产品设计及数字化营销沙盘
 VITE_PORT=9520
 # VITE_PROXY=http://192.168.31.125:8080
 VITE_PUBLIC_PATH=./
-VITE_BASE_API=http://192.168.31.51:9000
-# VITE_BASE_API=http://121.37.12.51
+# VITE_BASE_API=http://192.168.31.51:9000
+VITE_BASE_API=http://121.37.12.51
 # VITE_BASE_API=https://www.occupationlab.com
 VITE_I18N_LOCALE=zh-cn
 VITE_I18N_FALLBACK_LOCALE=zh-cn

src/views/report/Index.vue

@@ -10,13 +10,13 @@
       </el-tooltip>
     </div>
   </div>
-  <div class="py-5 px-[300px]">
-    <div class="content" :class="{ loading }" id="pdfDom">
+  <div class="py-5 px-[300px]" v-loading="loading">
+    <div class="content" id="pdfDom">
       <div class="text-right" v-if="!loading">
         <el-button @click="editReport">
           {{ editing ? '保存' : '编辑' }}
         </el-button>
-        <el-button type="primary" @click="exportPage">导出报告</el-button>
+        <el-button type="primary" :loading="exporting" @click="exportPage">导出报告</el-button>
       </div>
       <h6 class="mb-8 text-[24px] text-center text-[#333]">标准实验报告</h6>
       <div class="max-h-[calc(100vh-204px)] overflow-auto p-4 border border-solid border-[#e1e6f2]">
@@ -154,6 +154,8 @@ const form = ref<Record<string, any>>({});
 const expData = ref<Record<string, any>[]>([]);
 const editing = ref<boolean>(false);
 const userScores = ref<Record<string, any>[]>([]);
+const loading = ref<boolean>(false);
+const exporting = ref<boolean>(false);
 
 // 处理实验数据
 const handleList = (list: Record<string, any>[]) => {
@@ -176,7 +178,7 @@ const handleList = (list: Record<string, any>[]) => {
       }
     });
     e.lcStudentAnswer.map((n, i) => {
-      e.answer += `${i + 1}.${n.userAnswer || '未填写'};`
+      e.answer += `${i + 1}.${n.userAnswer || '未填写'};`;
     });
   });
   console.log('🚀 ~ file: Index.vue:235 ~ handleList ~ list:', list);
@@ -184,49 +186,59 @@ const handleList = (list: Record<string, any>[]) => {
 };
 // 查询详情
 const getData = async () => {
-  const res = await reportDetail(reportId.value);
-  form.value = res.report;
-  userScores.value = res.userScores;
-  const { data } = res.report;
-  // 如果没有data，则添加，否则，直接使用
-  if (!data) {
-    handleList(res.userScores);
-    await editExperimentalData({
-      reportId: reportId.value,
-      data: JSON.stringify(res.userScores),
-    });
-  } else {
-    handleList(res.userScores);
+  try {
+    loading.value = true;
+    const res = await reportDetail(reportId.value);
+    form.value = res.report;
+    userScores.value = res.userScores;
+    const { data } = res.report;
+    // 如果没有data，则添加，否则，直接使用
+    if (!data) {
+      handleList(res.userScores);
+      await editExperimentalData({
+        reportId: reportId.value,
+        data: JSON.stringify(res.userScores),
+      });
+    } else {
+      handleList(res.userScores);
+    }
+  } finally {
+    loading.value = false;
   }
 };
 // 导出
 const exportPage = async () => {
-  const param = JSON.parse(JSON.stringify(form.value));
-  const list = JSON.parse(JSON.stringify(expData.value));
-  list.forEach((e, i) => {
-    e.id = i + 1;
-    if (e.referenceAnswer && typeof e.referenceAnswer === 'string')
-      e.referenceAnswer = e.referenceAnswer
-        .replace(/<[^>]+>/g, '')
-        .replace(/(&nbsp;|&amp;|%s)/g, '')
-        .replace(/>/g, '&gt;')
-        .replace(/</g, '&lt;');
-    if (e.answer && typeof e.answer === 'string') {
-      e.answer = e.answer.replace(/<[^>]+>/g, '');
-      e.answer = e.answer.replace(/(&nbsp;|&amp;|%s)/g, '');
-      e.answer = e.answer.replace(/>/g, '&gt;');
-      e.answer = e.answer.replace(/</g, '&lt;');
+  try {
+    exporting.value = true;
+    const param = JSON.parse(JSON.stringify(form.value));
+    const list = JSON.parse(JSON.stringify(expData.value));
+    list.forEach((e, i) => {
+      e.id = i + 1;
+      if (e.referenceAnswer && typeof e.referenceAnswer === 'string')
+        e.referenceAnswer = e.referenceAnswer
+          .replace(/<[^>]+>/g, '')
+          .replace(/(&nbsp;|&amp;|%s)/g, '')
+          .replace(/>/g, '&gt;')
+          .replace(/</g, '&lt;');
+      if (e.answer && typeof e.answer === 'string') {
+        e.answer = e.answer.replace(/<[^>]+>/g, '');
+        e.answer = e.answer.replace(/(&nbsp;|&amp;|%s)/g, '');
+        e.answer = e.answer.replace(/>/g, '&gt;');
+        e.answer = e.answer.replace(/</g, '&lt;');
+      }
+    });
+    for (const i in param) {
+      if (param[i] && typeof param[i] === 'string') param[i] = param[i].replace(/<[^>]+>/g, '');
     }
-  });
-  for (const i in param) {
-    if (param[i] && typeof param[i] === 'string') param[i] = param[i].replace(/<[^>]+>/g, '');
+    param.purpose = param.purpose.replace(/<[^>]+>/g, '');
+    const res = await exportBankExperimentReport({
+      ...param,
+      experimentalData: list,
+    });
+    downloadFileDirect(`实验报告.docx`, new Blob([res]));
+  } finally {
+    exporting.value = false;
   }
-  param.purpose = param.purpose.replace(/<[^>]+>/g, '');
-  const res = await exportBankExperimentReport({
-    ...param,
-    experimentalData: list,
-  });
-  downloadFileDirect(`实验报告.docx`, new Blob([res]));
 };
 // 编辑实验报告
 const editReport = async () => {
@@ -267,9 +279,6 @@ samp {
   font-family: 'PingFang SC', 'Helvetica Neue', Helvetica, 'microsoft yahei', arial, STHeiTi, sans-serif;
 }
 .content {
-  &.loading {
-    padding-top: 30px;
-  }
   .l-title {
     @apply flex items-center px-2 py-1 mb-3 bg-[#f7f9fc];
     img {