[更新] test loading

src/views/student/Code/ProjectDetail/Test/FunctionalTestDetail.vue

@@ -1,6 +1,7 @@
 <template>
   <div>
     <page-header
+      :loading="testDetailLoading"
       :routes="[
         { name: '代码作业', path: 'code' },
         { name: '项目列表', path: `code/${$route.params.homeworkId}` },
@@ -24,15 +25,22 @@
       </template>
     </page-header>
     <page-body>
-      <div v-for="item in testDetail.detail" :key="item.id" class="gap-section">
-        <div class="page-section">
-          <div>
-            <pass-tag :pass="item.isPass" />
-            <strong style="padding-left: 10px">
-              页面测试用例 : #{{ item.id }}
-            </strong>
+      <div v-if="testDetailLoading"><page-section-loading show /></div>
+      <div v-else>
+        <div
+          v-for="item in testDetail.detail"
+          :key="item.id"
+          class="gap-section"
+        >
+          <div class="page-section">
+            <div>
+              <pass-tag :pass="item.isPass" />
+              <strong style="padding-left: 10px">
+                页面测试用例 : #{{ item.id }}
+              </strong>
+            </div>
+            <div class="code-section">{{ item.message }}</div>
           </div>
-          <div class="code-section">{{ item.message }}</div>
         </div>
       </div>
     </page-body>
@@ -45,20 +53,23 @@ import PageBody from "@/components/PageBody/index";
 import { getFunctionalDetail } from "@/api/codehw";
 import timeMixins from "@/mixins/time";
 import PassTag from "@/views/student/Code/ProjectDetail/components/PassTag";
+import PageSectionLoading from "@/components/PageBody/PageSectionLoading/index";
 export default {
-  components: { PassTag, PageBody, PageHeader },
+  components: { PageSectionLoading, PassTag, PageBody, PageHeader },
   data() {
     return {
       testDetail: { detail: [] },
-      showModal: false
+      testDetailLoading: false
     };
   },
   mixins: [timeMixins],
   mounted() {
     const { functionalTestId } = this.$route.params;
-    getFunctionalDetail(functionalTestId).then(
-      value => (this.testDetail = value.data)
-    );
+    this.testDetailLoading = true;
+    getFunctionalDetail(functionalTestId).then(value => {
+      this.testDetail = value.data;
+      this.testDetailLoading = false;
+    });
   }
 };
 </script>

src/views/student/Code/ProjectDetail/Test/UnitTestDetail.vue

@@ -1,6 +1,7 @@
 <template>
   <div>
     <page-header
+      :loading="testDetailLoading"
       :routes="[
         { name: '代码作业', path: 'code' },
         { name: '项目列表', path: `code/${$route.params.homeworkId}` },
@@ -24,15 +25,22 @@
       </template>
     </page-header>
     <page-body>
-      <div v-for="item in testDetail.detail" :key="item.id" class="gap-section">
-        <div class="page-section">
-          <div>
-            <pass-tag :pass="item.isPass" />
-            <strong style="padding-left: 10px">
-              页面测试用例 : #{{ item.id }}
-            </strong>
+      <div v-if="testDetailLoading"><page-section-loading show /></div>
+      <div v-else>
+        <div
+          v-for="item in testDetail.detail"
+          :key="item.id"
+          class="gap-section"
+        >
+          <div class="page-section">
+            <div>
+              <pass-tag :pass="item.isPass" />
+              <strong style="padding-left: 10px">
+                页面测试用例 : #{{ item.id }}
+              </strong>
+            </div>
+            <div class="code-section">{{ item.message }}</div>
           </div>
-          <div class="code-section">{{ item.message }}</div>
         </div>
       </div>
     </page-body>
@@ -45,17 +53,23 @@ import PageBody from "@/components/PageBody/index";
 import { getUnitTestDetail } from "@/api/codehw";
 import timeMixins from "@/mixins/time";
 import PassTag from "@/views/student/Code/ProjectDetail/components/PassTag";
+import PageSectionLoading from "@/components/PageBody/PageSectionLoading/index";
 export default {
-  components: { PassTag, PageBody, PageHeader },
+  components: { PageSectionLoading, PassTag, PageBody, PageHeader },
   data() {
     return {
-      testDetail: { detail: [] }
+      testDetail: { detail: [] },
+      testDetailLoading: false
     };
   },
   mixins: [timeMixins],
   mounted() {
     const { unitTestId } = this.$route.params;
-    getUnitTestDetail(unitTestId).then(value => (this.testDetail = value.data));
+    this.testDetailLoading = true;
+    getUnitTestDetail(unitTestId).then(value => {
+      this.testDetail = value.data;
+      this.testDetailLoading = false;
+    });
   }
 };
 </script>

src/views/student/Code/ProjectDetail/TestDetail.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="columns is-desktop">
     <div class="column">
-      <div class="page-section">
+      <div v-if="detailLoading"><page-section-loading show /></div>
+      <div v-else class="page-section">
         <h5 class="title is-5">单元测试:</h5>
         <router-link
           class="test-item"
@@ -19,7 +20,8 @@
       </div>
     </div>
     <div class="column">
-      <div class="page-section">
+      <div v-if="detailLoading"><page-section-loading show /></div>
+      <div v-else class="page-section">
         <h5 class="test-title title is-5">
           页面测试:
           <div
@@ -53,8 +55,9 @@
 import PassTag from "@/views/student/Code/ProjectDetail/components/PassTag";
 import timeMixins from "@/mixins/time";
 import { makeFunctionalTest } from "@/api/codehw";
+import PageSectionLoading from "@/components/PageBody/PageSectionLoading/index";
 export default {
-  components: { PassTag },
+  components: { PageSectionLoading, PassTag },
   props: {
     projectDetail: {
       type: Object,
@@ -62,6 +65,10 @@ export default {
         unitTestList: [],
         functionTestList: []
       })
+    },
+    detailLoading: {
+      type: Boolean,
+      default: false
     }
   },
   computed: {

src/views/student/Code/ProjectDetail/index.vue

@@ -34,7 +34,12 @@
         <div>项目详情</div>
       </template>
     </page-header>
-    <page-body> <router-view :projectDetail="projectDetail" /> </page-body>
+    <page-body>
+      <router-view
+        :project-detail="projectDetail"
+        :detail-loading="detailLoading"
+      />
+    </page-body>
   </div>
 </template>
 
@@ -49,13 +54,16 @@ export default {
   },
   data() {
     return {
-      projectDetail: {}
+      projectDetail: {},
+      detailLoading: false
     };
   },
   async mounted() {
     const { projectId } = this.$route.params;
+    this.detailLoading = true;
     const detail = await getProjectDetail(projectId);
     this.projectDetail = detail.data;
+    this.detailLoading = false;
   }
 };
 </script>