实验报告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,6 +186,8 @@ const handleList = (list: Record<string, any>[]) => {
 };
 // 查询详情
 const getData = async () => {
+  try {
+    loading.value = true;
     const res = await reportDetail(reportId.value);
     form.value = res.report;
     userScores.value = res.userScores;
@@ -198,9 +202,14 @@ const getData = async () => {
     } else {
       handleList(res.userScores);
     }
+  } finally {
+    loading.value = false;
+  }
 };
 // 导出
 const exportPage = async () => {
+  try {
+    exporting.value = true;
     const param = JSON.parse(JSON.stringify(form.value));
     const list = JSON.parse(JSON.stringify(expData.value));
     list.forEach((e, i) => {
@@ -227,6 +236,9 @@ const exportPage = async () => {
       experimentalData: list,
     });
     downloadFileDirect(`实验报告.docx`, new Blob([res]));
+  } finally {
+    exporting.value = false;
+  }
 };
 // 编辑实验报告
 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 {