web 模块的所有页面跳转详情时增加loading的效果

src/views/statistics/fileDetail.vue

@@ -1,31 +1,29 @@
 <template>
   <a-card :bordered="false" style="margin-left: 20px;height: 100%;">
     <div class="detail-top">
-        <div class="top-back" @click="handleback">
-          <img class="icon-back" src="../../assets/images/web-statistics/return.png" alt="">
-          <span style="margin-left: 10px;">return</span>
+      <div class="top-back" @click="handleback">
+        <img class="icon-back" src="../../assets/images/web-statistics/return.png" alt="">
+        <span style="margin-left: 10px;">return</span>
+      </div>
+      <div class="top-actions">
+        <div class="right-btn" @click="downloadFile">
+          <img class="icon-download" src="../../assets/images/web-statistics/download.png" alt="">
+          <span style="margin-left: 10px;">
+            TXT
+          </span>
         </div>
-        <div class="top-actions">
-          <div class="right-btn" @click="downloadFile">
-            <!-- <a :href="fileSrc" :download="type" rel="noopener noreferrer"> -->
-              <img class="icon-download" src="../../assets/images/web-statistics/download.png" alt="">
-              <span style="margin-left: 10px;">
-                TXT
-              </span>
-            <!-- </a> -->
-          </div>
-          <div class="right-btn" @click="viewFile">
-            <!-- <a :href="fileSrc" target="_blank" rel="noopener noreferrer"> -->
-              <img class="icon-view" src="../../assets/images/web-statistics/view.png" alt="">
-              <span style="margin-left: 10px;">
-                View Report
-              </span>
-            <!-- </a> -->
-          </div>
+        <div class="right-btn" @click="viewFile">
+          <img class="icon-view" src="../../assets/images/web-statistics/view.png" alt="">
+          <span style="margin-left: 10px;">
+            View Report
+          </span>
         </div>
+      </div>
     </div>
     <div class="file-content">
-      <pre>{{ fileText }}</pre>
+      <a-spin style="height: 100%;" :spinning="spinning">
+        <pre>{{ fileText }}</pre>
+      </a-spin>
     </div>
   </a-card>
 </template>
@@ -45,6 +43,7 @@ export default {
   },
   data() {
     return {
+      spinning: false,
       fileText: "",
       fileSrc:""
     }
@@ -58,19 +57,18 @@ export default {
     },
     getFildBlob() {
       let _this = this
+      _this.spinning = true
       let paramsRr = {
         type: this.type,
         sampleId: this.sampleId,
-        // type: "rrr",
-        // sampleId:"1523651"
       }
       let paramsSoh = {
-        // sohId:"11"
         sohId:this.sampleId
       }
       let url = this.type === "soh" ? "/webStatistics/sohFile" : "/webStatistics/arFile"
       let params = this.type === "soh" ? paramsSoh : paramsRr
       getAction(url, params).then((res) => {
+        _this.spinning = false
         if (res.code && res.code==500) {
           _this.fileSrc = ""
           this.$message.warning("This operation fails. Contact your system administrator")

src/views/statistics/imsData/radionuclide/particulate/blankphd.vue

@@ -1,32 +1,33 @@
 <template>
   <div style="height: 100%;">
-    <a-card v-if="!isDetail" :bordered="false" style="margin-left: 20px">
-      <!-- <search-form :items="formItems" v-model="queryParam" @search="searchQuery"> -->
-      <search-form :items="formItems" v-model="queryParam" @search="searchQueryData">
-        <a-space style="float: right" class="btn-group" slot="additional">
-          <a-button @click="handleExcel" type="primary">
-            <img class="icon-edit" src="@/assets/images/global/edit.png" alt="" />
-            Excel
-          </a-button>
-        </a-space>
-      </search-form>
-      <custom-table
-        size="middle"
-        rowKey="sampleId"
-        :columns="columns"
-        :list="dataSource"
-        :pagination="ipagination"
-        :loading="loading"
-        @change="handleTableChange"
-        @detail="handleDetail"
-        :selectedRowKeys.sync="selectedRowKeys"
-        :scroll="{ y: 'calc(100vh - 306px)' }"
-      >
-        <template slot="index" slot-scope="{ index }">
-          {{ index + 1 }}
-        </template>
-      </custom-table>
-    </a-card>
+    <a-spin :spinning="spinning">
+      <a-card v-if="!isDetail" :bordered="false" style="margin-left: 20px">
+        <search-form :items="formItems" v-model="queryParam" @search="searchQueryData">
+          <a-space style="float: right" class="btn-group" slot="additional">
+            <a-button @click="handleExcel" type="primary">
+              <img class="icon-edit" src="@/assets/images/global/edit.png" alt="" />
+              Excel
+            </a-button>
+          </a-space>
+        </search-form>
+        <custom-table
+          size="middle"
+          rowKey="sampleId"
+          :columns="columns"
+          :list="dataSource"
+          :pagination="ipagination"
+          :loading="loading"
+          @change="handleTableChange"
+          @detail="handleDetail"
+          :selectedRowKeys.sync="selectedRowKeys"
+          :scroll="{ y: 'calc(100vh - 306px)' }"
+        >
+          <template slot="index" slot-scope="{ index }">
+            {{ index + 1 }}
+          </template>
+        </custom-table>
+      </a-card>
+    </a-spin>
     <Detail v-if="isDetail" type="BLANKPHD" :sampleId="currSampleId" :allData="detailJson" @back="handleBack"></Detail>
   </div>
 </template>
@@ -92,6 +93,7 @@ export default {
   },
   data() {
     return {
+      spinning: false,
       isImmediate:true,
       isDetail:false,
       columns,
@@ -115,35 +117,12 @@ export default {
       pageType:"ACQ"
     }
   },
-  // mounted() {
-  //   console.log("this.$route.meta",this.$route.meta);
-  //   this.queryParam.dataType = this.$route.meta.title
-  // },
   created() {
     this.findStationList()
   },
-  // watch: {
-  //     '$route.meta.title'(val) {
-  //       if(val === 'SPHDF'){
-  //           this.queryParam.dataType = 'FULL'
-  //       } else if(val === 'SPHDP'){
-  //           this.queryParam.dataType = 'PREL'
-  //       } else{
-  //           this.queryParam.dataType = val.substring(0, 1)
-  //       }
-  //     // this.searchQuery()
-  //   },
-  // },
   methods: {
     handleExcel() {
       if (this.dataSource.length>0) {
-        // this.queryParam = {
-        //   dataType: "S",
-        //   startTime: "2023-07-01",
-        //   endTime: "2023-07-14",
-        //   stationIds: [209],
-        //   spectralQualifie:"FULL"
-        // }
         let params = {
           ...this.queryParam,
           pageType:this.pageType
@@ -169,12 +148,6 @@ export default {
     searchQueryData() {
       this.isImmediate = false
       this.loading = true
-      // this.queryParam = {
-      //   dataType: "S",
-      //   startTime: "2023-05-01",
-      //   endTime: "2023-05-07",
-      //   stationIds: [209, 211, 213]
-      // }
       let params = {
         ...this.queryParam,
         pageNo: 1,
@@ -193,8 +166,10 @@ export default {
       })
     },
     handleDetail(record) {
+      this.spinning = true
       this.currSampleId = record.sampleId
       getAction("webStatistics/findGeneratedReport", { sampleId: record.sampleId }).then(res => {
+        this.spinning = false
         if (res.success) {
           this.detailJson = res.result
           this.detailJson = JSON.parse(JSON.stringify(this.detailJson))
@@ -202,6 +177,8 @@ export default {
         } else {
           this.$message.warning("This operation fails. Contact your system administrator")
         }
+      }).catch(err => {
+        this.spinning = false
       })
     },
     handleBack(flag) {
@@ -221,7 +198,6 @@ export default {
       })
     },
     handleSelectChange(val) {
-      console.log(val);
       let length = this.stationList.length
       if (val.length === length) {
         this.allChecked = true

src/views/statistics/list.vue

@@ -1,31 +1,33 @@
 <template>
   <div style="height: 100%;">
-    <a-card v-if="!isDetail" :bordered="false" style="margin-left: 20px">
-      <search-form :items="formItems" v-model="queryParam" @search="searchQueryData">
-        <a-space style="float: right" class="btn-group" slot="additional">
-          <a-button @click="handleExcel" type="primary">
-            <img class="icon-edit" src="@/assets/images/global/edit.png" alt="" />
-            Excel
-          </a-button>
-        </a-space>
-      </search-form>
-      <custom-table
-        size="middle"
-        rowKey="sampleId"
-        :columns="columns"
-        :list="dataSource"
-        :pagination="ipagination"
-        :loading="loading"
-        @change="handleTableChange"
-        @detail="handleDetail"
-        :selectedRowKeys.sync="selectedRowKeys"
-        :scroll="{ y: 'calc(100vh - 306px)' }"
-      >
-        <template slot="index" slot-scope="{ index }">
-          {{ index + 1 }}
-        </template>
-      </custom-table>
-    </a-card>
+    <a-spin :spinning="spinning">
+      <a-card v-if="!isDetail" :bordered="false" style="margin-left: 20px">
+        <search-form :items="formItems" v-model="queryParam" @search="searchQueryData">
+          <a-space style="float: right" class="btn-group" slot="additional">
+            <a-button @click="handleExcel" type="primary">
+              <img class="icon-edit" src="@/assets/images/global/edit.png" alt="" />
+              Excel
+            </a-button>
+          </a-space>
+        </search-form>
+        <custom-table
+          size="middle"
+          rowKey="sampleId"
+          :columns="columns"
+          :list="dataSource"
+          :pagination="ipagination"
+          :loading="loading"
+          @change="handleTableChange"
+          @detail="handleDetail"
+          :selectedRowKeys.sync="selectedRowKeys"
+          :scroll="{ y: 'calc(100vh - 306px)' }"
+        >
+          <template slot="index" slot-scope="{ index }">
+            {{ index + 1 }}
+          </template>
+        </custom-table>
+      </a-card>
+    </a-spin>
     <Detail v-if="isDetail" :type="fileName" :sampleId="currSampleId" :allData="detailJson" @back="handleBack"></Detail>
   </div>
 </template>
@@ -69,6 +71,7 @@ export default {
   },
   data() {
     return {
+      spinning: false,
       isImmediate:true,
       isDetail:false,
       queryParam: {
@@ -93,13 +96,6 @@ export default {
   methods: {
     handleExcel() {
       if (this.dataSource.length>0) {
-        // this.queryParam = {
-        //   dataType: "S",
-        //   startTime: "2023-07-01",
-        //   endTime: "2023-07-14",
-        //   stationIds: [209],
-        //   spectralQualifie:"FULL"
-        // }
         let params = {
           ...this.queryParam,
           pageType:this.pageType
@@ -125,12 +121,6 @@ export default {
     searchQueryData() {
       this.isImmediate = false
       this.loading = true
-      // this.queryParam = {
-      //   dataType: "S",
-      //   startTime: "2023-05-01",
-      //   endTime: "2023-05-07",
-      //   stationIds: [209, 211, 213]
-      // }
       let params = {
         ...this.queryParam,
         pageNo: 1,
@@ -149,9 +139,10 @@ export default {
       })
     },
     handleDetail(record) {
+      this.spinning = true
       this.currSampleId = record.sampleId
       getAction("webStatistics/findGeneratedReport", { sampleId: record.sampleId }).then(res => {
-      // getAction("webStatistics/findGeneratedReport", { sampleId: "1523651" }).then(res => {
+        this.spinning = false
         if (res.success){
           this.detailJson = res.result
           this.detailJson = JSON.parse(JSON.stringify(this.detailJson))
@@ -159,6 +150,8 @@ export default {
         } else {
           this.$message.warning("This operation fails. Contact your system administrator")
         }
+      }).catch(err => {
+        this.spinning = false
       })
     },
     handleBack(flag) {