Merge branch 'style/loading-bay' of SEEC-II-FrontEnd-Team/SEEC-II-FrontEnd into develop

mock/serializers/user/UserSerializer.js

@@ -14,7 +14,7 @@ const makeId = require("../../util/makeId");
  * @param role
  * @returns {UserSerializerType}
  */
-module.exports = (role = "STUDENT") => {
+module.exports = (role = "TEACHER") => {
   return {
     id: makeId(),
     role: role,

src/layouts/HomeLayout/HomeHeader/index.vue

@@ -2,7 +2,7 @@
   <default-header>
     <div class="container">
       <div class="navbar-brand">
-        <a class="navbar-item header-logo"> SEEC </a>
+        <router-link to="/" class="navbar-item header-logo"> SEEC </router-link>
         <a class="navbar-item"><b-icon pack="fab" icon="github"></b-icon></a>
         <a class="navbar-item"><b-icon pack="fab" icon="twitter"></b-icon></a>
       </div>

src/layouts/courseLayouts/LayoutStructure.vue

@@ -3,7 +3,7 @@
     <div class="course-layout">
       <div class="menu-section">
         <div class="menu-sticky">
-          <div class="header-logo">SEEC</div>
+          <router-link tag="div" to="/" class="header-logo">SEEC</router-link>
           <div class="course-detail">
             {{ course.name }}
             <b-loading
@@ -127,6 +127,7 @@ $top-section-height: 4.25rem;
       border-bottom: 2px solid rgba(255, 255, 255, 0.16);
       /*background-image: linear-gradient(to left, #4f62e9 0%, #161aa7 100%);*/
       padding-left: 24px;
+      cursor: pointer;
       a {
         color: #3d70b2;
       }

src/views/teacher/Review/ReviewDetail/Detail/index.vue

@@ -1,67 +1,80 @@
 <template>
   <div>
-    <div class="page-section">
-      <div class="columns is-desktop">
-        <div class="column">
-          <h5 class="title is-5">id:</h5>
-          <div class="subtitle is-6">{{ detail.reviewId }}</div>
-        </div>
-        <div class="column">
-          <h5 class="title is-5">名称:</h5>
-          <div class="subtitle is-6">{{ detail.name }}</div>
-        </div>
-        <div class="column">
-          <h5 class="title is-5">状态:</h5>
-          <div class="subtitle is-6">
-            <review-state-tag :state="detail.state" />
-          </div>
+    <div v-if="detailLoading">
+      <page-section-loading show />
+      <div class="space">
+        <div class="columns is-desktop">
+          <div class="column"><page-section-loading show /></div>
+          <div class="column"><page-section-loading show /></div>
         </div>
       </div>
-      <div class="columns is-desktop">
-        <div class="column">
-          <h5 class="title is-5">互评结束时间:</h5>
-          <div class="subtitle is-6">
-            {{ displayUnixTime(detail.reviewDdl) }}
+    </div>
+    <div v-else>
+      <div class="page-section">
+        <div class="columns is-desktop">
+          <div class="column">
+            <h5 class="title is-5">id:</h5>
+            <div class="subtitle is-6">{{ detail.reviewId }}</div>
           </div>
-        </div>
-        <div class="column">
-          <h5 class="title is-5">重申申请结束时间:</h5>
-          <div class="subtitle is-6">
-            {{ displayUnixTime(detail.argueDdl) }}
+          <div class="column">
+            <h5 class="title is-5">名称:</h5>
+            <div class="subtitle is-6">{{ detail.name }}</div>
+          </div>
+          <div class="column">
+            <h5 class="title is-5">状态:</h5>
+            <div class="subtitle is-6">
+              <review-state-tag :state="detail.state" />
+            </div>
           </div>
         </div>
-        <div class="column">
-          <h5 class="title is-5">重申结束时间:</h5>
-          <div class="subtitle is-6">{{ displayUnixTime(detail.endDdl) }}</div>
+        <div class="columns is-desktop">
+          <div class="column">
+            <h5 class="title is-5">互评结束时间:</h5>
+            <div class="subtitle is-6">
+              {{ displayUnixTime(detail.reviewDdl) }}
+            </div>
+          </div>
+          <div class="column">
+            <h5 class="title is-5">重申申请结束时间:</h5>
+            <div class="subtitle is-6">
+              {{ displayUnixTime(detail.argueDdl) }}
+            </div>
+          </div>
+          <div class="column">
+            <h5 class="title is-5">重申结束时间:</h5>
+            <div class="subtitle is-6">
+              {{ displayUnixTime(detail.endDdl) }}
+            </div>
+          </div>
         </div>
       </div>
-    </div>
-    <div class="space">
-      <div class="columns is-desktop">
-        <div class="column">
-          <div class="page-section">
-            <h5 class="title is-5">完成率: {{ sum.completeRate }}%</h5>
-            <progress
-              class="progress is-success"
-              :value="sum.completeRate"
-              max="100"
-              >{sum.completeRate}%</progress
-            >
+      <div class="space">
+        <div class="columns is-desktop">
+          <div class="column">
+            <div class="page-section">
+              <h5 class="title is-5">完成率: {{ sum.completeRate }}%</h5>
+              <progress
+                class="progress is-success"
+                :value="sum.completeRate"
+                max="100"
+                >{sum.completeRate}%</progress
+              >
+            </div>
           </div>
-        </div>
-        <div class="column">
-          <div class="page-section">
-            <h5 class="title is-5">checkList 通过情况:</h5>
-            <div
-              class="checklist-item"
-              :key="item.id"
-              v-for="item in sum.checklistItems"
-            >
-              <div>id: {{ item.id }}</div>
-              <b-tag type="is-success" style="margin-right: 5px"
-                >通过 : {{ item.passedNum }}</b-tag
+          <div class="column">
+            <div class="page-section">
+              <h5 class="title is-5">checkList 通过情况:</h5>
+              <div
+                class="checklist-item"
+                :key="item.id"
+                v-for="item in sum.checklistItems"
               >
-              <span>{{ item.content }}</span>
+                <div>id: {{ item.id }}</div>
+                <b-tag type="is-success" style="margin-right: 5px"
+                  >通过 : {{ item.passedNum }}</b-tag
+                >
+                <span>{{ item.content }}</span>
+              </div>
             </div>
           </div>
         </div>
@@ -74,13 +87,18 @@
 import ReviewStateTag from "@/components/ReviewStateTag/index";
 import timeMixins from "@/mixins/time";
 import { getTeacherReviewResult } from "@/api/review";
+import PageSectionLoading from "@/components/PageBody/PageSectionLoading/index";
 export default {
-  components: { ReviewStateTag },
+  components: { PageSectionLoading, ReviewStateTag },
   mixins: [timeMixins],
   props: {
     detail: {
       type: Object,
       default: () => ({ completeRate: 0 })
+    },
+    detailLoading: {
+      type: Boolean,
+      default: false
     }
   },
   data() {

src/views/teacher/Review/ReviewDetail/GroupDocDetail/index.vue

@@ -1,6 +1,7 @@
 <template>
   <div>
     <page-header
+      :loading="groupDetailLoading"
       :routes="[
         { name: '互评作业', path: 'review' },
         { name: '文档详情', path: `review/${$route.params.reviewId}` },
@@ -24,7 +25,8 @@
     <page-body>
       <div class="columns">
         <div class="column is-8">
-          <div class="page-section">
+          <div v-if="detailLoading"><page-section-loading show /></div>
+          <div v-else class="page-section">
             <div v-if="detail.docContent" class="content">
               <vue-markdown>{{ detail.docContent }}</vue-markdown>
             </div>
@@ -32,7 +34,9 @@
         </div>
         <div class="column is-4">
           <div class="right-part">
+            <div v-if="detailLoading"><page-section-loading show /></div>
             <result-check-list-item
+              v-else
               v-for="item in detail.checkListResult"
               :key="item.id"
               :check-result-item="item"
@@ -51,8 +55,10 @@ import ResultCheckListItem from "@/components/CheckList/ResultCheckListItem";
 import PageHeader from "@/components/PageHeader";
 import PageBody from "@/components/PageBody/index";
 import { getGroupDetail } from "@/api/group";
+import PageSectionLoading from "@/components/PageBody/PageSectionLoading/index";
 export default {
   components: {
+    PageSectionLoading,
     PageBody,
     PageHeader,
     ResultCheckListItem,
@@ -64,17 +70,25 @@ export default {
         review: {},
         checkListResult: []
       },
+      detailLoading: false,
       groupDetail: {},
+      groupDetailLoading: false,
       submitLoading: false
     };
   },
   mixins: [timeMixins],
   mounted() {
     const { reviewId, groupId } = this.$route.params;
-    getGroupDetail(groupId).then(value => (this.groupDetail = value.data));
-    getTeacherReviewGroupDetail(reviewId, groupId).then(
-      resp => (this.detail = resp.data)
-    );
+    this.detailLoading = true;
+    this.groupDetailLoading = true;
+    getGroupDetail(groupId).then(value => {
+      this.groupDetail = value.data;
+      this.groupDetailLoading = false;
+    });
+    getTeacherReviewGroupDetail(reviewId, groupId).then(resp => {
+      this.detail = resp.data;
+      this.detailLoading = false;
+    });
   }
 };
 </script>

src/views/teacher/Review/ReviewDetail/Groups/index.vue

@@ -5,7 +5,11 @@
       </b-input>
     </div>
     <div class="columns is-multiline is-desktop">
+      <div v-if="groupsLoading" class="column is-4-desktop">
+        <card loading />
+      </div>
       <div
+        v-else
         :key="item.id"
         v-for="item in availableGroups"
         class="column is-4-desktop"
@@ -28,6 +32,10 @@ export default {
     groups: {
       type: Array,
       default: () => []
+    },
+    groupsLoading: {
+      type: Boolean,
+      default: false
     }
   },
   data() {

src/views/teacher/Review/ReviewDetail/index.vue

@@ -1,6 +1,7 @@
 <template>
   <div>
     <page-header
+      :loading="detailLoading"
       :routes="[{ name: '互评作业', path: 'review' }, { name: '文档详情' }]"
       :tab-list="[
         { name: '作业详情', path: `review/${$route.params.reviewId}` },
@@ -30,7 +31,14 @@
         </div>
       </template>
     </page-header>
-    <page-body> <router-view :detail="detail" :groups="groups" /> </page-body>
+    <page-body>
+      <router-view
+        :detail="detail"
+        :groups="groups"
+        :detail-loading="detailLoading"
+        :groups-loading="groupsLoading"
+      />
+    </page-body>
     <b-modal :active.sync="showModal" :width="400">
       <div class="card">
         <div class="title">每个等级通过数字</div>
@@ -80,7 +88,9 @@ export default {
   data() {
     return {
       detail: {},
+      detailLoading: false,
       groups: [],
+      groupsLoading: false,
       showModal: false,
       grade: {
         A: 0,
@@ -96,8 +106,16 @@ export default {
   mixins: [timeMixins],
   mounted() {
     const { reviewId } = this.$route.params;
-    getTeacherReviewDetail(reviewId).then(resp => (this.detail = resp.data));
-    getTeacherReviewAllGroups(reviewId).then(resp => (this.groups = resp.data));
+    this.detailLoading = true;
+    this.groupsLoading = true;
+    getTeacherReviewDetail(reviewId).then(resp => {
+      this.detail = resp.data;
+      this.detailLoading = false;
+    });
+    getTeacherReviewAllGroups(reviewId).then(resp => {
+      this.groups = resp.data;
+      this.groupsLoading = false;
+    });
   },
   methods: {
     async submit() {

src/views/teacher/Review/index.vue

@@ -1,6 +1,9 @@
 <template>
   <div>
-    <page-header :routes="[{ name: '互评作业', path: 'review' }]">
+    <page-header
+      :loading="reviewListLoading"
+      :routes="[{ name: '互评作业', path: 'review' }]"
+    >
       <template slot="title">
         互评作业
       </template>
@@ -15,7 +18,15 @@
     </page-header>
     <page-body>
       <div class="columns is-multiline is-desktop">
-        <div :key="item.id" v-for="item in review" class="column is-4-desktop">
+        <div v-if="reviewListLoading" class="column is-4-desktop">
+          <card loading />
+        </div>
+        <div
+          v-else
+          :key="item.id"
+          v-for="item in review"
+          class="column is-4-desktop"
+        >
           <router-link :to="`${$route.path}/${item.reviewId}`">
             <card hoverable>
               {{ item.name }}
@@ -144,6 +155,7 @@ export default {
     return {
       courses: [],
       review: [],
+      reviewListLoading: false,
       showModal: false,
       submitting: false,
       docHomework: [],