[新增]所有页面loading部分

src/components/AssignmentCRUD/CreateAssignment/index.vue

@@ -60,7 +60,7 @@
 
           <a
             class="button is-link"
-            :class="{ 'is-loading': submitting }"
+            :class="{ 'is-loading': loadingCreateAssignment }"
             @click="createAssignment()"
           >
             确认新建
@@ -88,7 +88,7 @@
             <p class="control">
               <button
                 class="button is-link"
-                :class="{ 'is-loading': submitting }"
+                :class="{ 'is-loading': loadingSearchQuestions }"
                 @click="search(searchContent)"
               >
                 查找
@@ -220,7 +220,9 @@ export default {
       },
       errorMassage: null,
       isServerError: false,
-      submitting: false
+      submitting: false,
+      loadingSearchQuestions: false,
+      loadingCreateAssignment: false
     };
   },
   methods: {
@@ -234,18 +236,20 @@ export default {
     /**
      * 搜索题目
      */
-    async search(content) {
+    search(content) {
       if (this.submitting) return;
       this.isServerError = false;
       this.$v.searchContent.$touch();
       if (!this.$v.searchContent.$invalid) {
+        this.loadingSearchQuestions = true;
         this.submitting = true;
         try {
-          await getTeacherKeywordQuestions(content).then(res => {
+          getTeacherKeywordQuestions(content).then(res => {
             this.questions = res.data;
+            this.isSearchModalActive = false;
+            this.loadingSearchQuestions = false;
+            this.isProblemListModalActive = true;
           });
-          this.isSearchModalActive = false;
-          this.isProblemListModalActive = true;
         } catch (e) {
           this.errorMassage = e.message;
           this.isServerError = true;
@@ -267,16 +271,18 @@ export default {
       if (this.submitting) return;
       this.$v.params.$touch();
       if (!this.$v.params.$invalid) {
+        this.loadingCreateAssignment = true;
         this.submitting = true;
-        this.isCreateModalActive = false;
         this.params["type"] = this.postParam;
         this.parseParams();
         if (this.assignType === 1) {
+          // 文档作业
           this.myPromise = postDocAssignment(
             this.params,
             parseInt(this.courseId)
           );
         } else {
+          // 代码作业
           this.myPromise = postCodeAssignment(
             this.params,
             parseInt(this.courseId)
@@ -287,6 +293,7 @@ export default {
             //创建成功
             this.$emit("sendCreatedAssignment", res.data);
             this.isCreateModalActive = false;
+            this.loadingCreateAssignment = false;
             if (this.assignType === 1) {
               this.$router.push({
                 path: `${this.prefix}/review?documentHwId=${res.data.id}`
@@ -294,6 +301,8 @@ export default {
             }
           } else {
             //创建失败
+            this.isCreateModalActive = false;
+            this.loadingCreateAssignment = false;
             this.$dialog.alert({
               title: "创建失败",
               message: res.message,

src/components/AssignmentCRUD/DeleteAssignment/index.vue

@@ -1,5 +1,12 @@
 <template>
-  <div><a style="color:#b34141" @click="confirmDelete()">删除</a></div>
+  <div>
+    <a
+      style="color:#b34141"
+      :class="{ 'is-loading': loadingDelAssignment }"
+      @click="confirmDelete()"
+      >删除</a
+    >
+  </div>
 </template>
 
 <script>
@@ -18,12 +25,14 @@ export default {
   data() {
     return {
       myPromise: null,
-      submitting: false
+      submitting: false,
+      loadingDelAssignment: false
     };
   },
   methods: {
     confirmDelete() {
       if (this.submitting) return;
+      this.loadingDelAssignment = true;
       this.submitting = true;
       this.$dialog.confirm({
         message: "确认删除？",
@@ -47,6 +56,7 @@ export default {
                 hasIcon: true
               });
             }
+            this.loadingDelAssignment = false;
           });
         }
       });

src/components/AssignmentCRUD/UpdateAssignment/index.vue

@@ -51,7 +51,13 @@
               :config="endAtConfig"
             ></flat-pickr>
           </b-field>
-          <a class="button is-link" @click="updateAssignment()"> 确认修改 </a>
+          <a
+            class="button is-link"
+            :class="{ 'is-loading': loadingUpdateAssignment }"
+            @click="updateAssignment()"
+          >
+            确认修改
+          </a>
         </div>
       </div>
     </b-modal>
@@ -101,7 +107,8 @@ export default {
         minDate: "today",
         maxDate: null
       },
-      submitting: false
+      submitting: false,
+      loadingUpdateAssignment: false
     };
   },
   methods: {
@@ -120,6 +127,7 @@ export default {
       if (this.submitting) return;
       this.$v.params.$touch();
       if (!this.$v.params.$invalid) {
+        this.loadingUpdateAssignment = true;
         this.submitting = true;
         this.isUpdateModalActive = false;
         this.parseParams();
@@ -131,7 +139,9 @@ export default {
         this.myPromise.then(res => {
           if (res.code === 0) {
             this.$emit("updateDocData", res.data);
+            this.loadingUpdateAssignment = false;
           } else {
+            this.loadingUpdateAssignment = false;
             this.$dialog.alert({
               title: "修改失败",
               message: res.message,

src/views/student/Document/detail.vue

@@ -1,6 +1,7 @@
 <template>
   <div>
     <page-header
+      :loading="loadingDocDetail"
       :routes="[
         { name: '文档作业', path: 'document' },
         { name: `作业 `, path: $route.path }
@@ -12,53 +13,57 @@
       <template slot="content">
         {{ assignmentInfo.description }}
       </template>
-      <template slot="action" v-if="resultDisplay">
-        <a class="button is-primary" v-if="resultDisplay"
-          >成绩：{{ docResult.result }}</a
-        >
+      <template slot="action" v-if="loadingDocResult">
+        <a class="button is-primary">成绩：{{ docResult.result }}</a>
       </template>
     </page-header>
     <page-body>
-      <div class="page-section">
-        <!--第一行-->
-        <div class="columns is-desktop">
-          <div class="column">
-            <h5 class="title is-5">题目名称</h5>
-            <div class="subtitle is-6">
-              {{ detail.problem ? detail.problem.name : "" }}
+      <div>
+        <page-section-loading :show="loadingDocDetail" />
+        <div v-if="!loadingDocDetail" class="page-section">
+          <!--第一行-->
+          <div class="columns is-desktop">
+            <div class="column">
+              <h5 class="title is-5">题目名称</h5>
+              <div class="subtitle is-6" v-if="isAvailable">
+                {{ detail.problem ? detail.problem.name : "" }}
+              </div>
+              <div class="subtitle is-6" v-else>题目开始进行才可查看</div>
             </div>
-          </div>
-          <div class="column">
-            <h5 class="title is-5">状态:</h5>
-            <div class="subtitle is-6">
-              <document-state-tag :state="detail.status"></document-state-tag>
+            <div class="column">
+              <h5 class="title is-5">状态:</h5>
+              <div class="subtitle is-6">
+                <document-state-tag :state="detail.status"></document-state-tag>
+              </div>
             </div>
           </div>
-        </div>
-        <!--第二行-->
-        <div class="columns is-desktop">
-          <div class="column">
-            <h5 class="title is-5">开始时间</h5>
-            <div class="subtitle is-6">
-              {{ displayUnixTime(detail.startAt) }}
+          <!--第二行-->
+          <div class="columns is-desktop">
+            <div class="column">
+              <h5 class="title is-5">开始时间</h5>
+              <div class="subtitle is-6">
+                {{ displayUnixTime(detail.startAt) }}
+              </div>
+            </div>
+            <div class="column">
+              <h5 class="title is-5">结束时间</h5>
+              <div class="subtitle is-6">
+                {{ displayUnixTime(detail.endAt) }}
+              </div>
             </div>
           </div>
-          <div class="column">
-            <h5 class="title is-5">结束时间</h5>
-            <div class="subtitle is-6">{{ displayUnixTime(detail.endAt) }}</div>
-          </div>
-        </div>
-        <div class="columns is-desktop">
-          <div class="column">
-            <h5 class="title is-5">Git地址</h5>
-            <div class="subtitle is-6">{{ docResult.url }}</div>
+          <div class="columns is-desktop" v-show="isAvailable">
+            <div class="column">
+              <h5 class="title is-5">Git地址</h5>
+              <div class="subtitle is-6">{{ docResult.url }}</div>
+            </div>
           </div>
-        </div>
-        <div class="columns is-desktop">
-          <div class="column">
-            <h5 class="title is-5">题目描述</h5>
-            <div class="subtitle is-6">
-              {{ detail.problem ? detail.problem.description : "" }}
+          <div class="columns is-desktop" v-show="isAvailable">
+            <div class="column">
+              <h5 class="title is-5">题目描述</h5>
+              <div class="subtitle is-6">
+                {{ detail.problem ? detail.problem.description : "" }}
+              </div>
             </div>
           </div>
         </div>
@@ -75,6 +80,7 @@ import { getDocAssignmentDetailByDocuId } from "@/api/assignment";
 import { getDocResultById } from "@/api/assignment";
 import DocumentStateTag from "@/components/DocumentStateTag";
 import timeMixins from "@/mixins/time";
+import PageSectionLoading from "@/components/PageBody/PageSectionLoading/index";
 
 const assignmentInfo = {
   id: 0,
@@ -86,22 +92,26 @@ const assignmentInfo = {
 
 export default {
   components: {
+    PageSectionLoading,
     PageBody,
     PageHeader,
     DocumentStateTag
   },
   mixins: [timeMixins],
   mounted() {
+    this.loadingDocDetail = true;
     this.assignmentInfo = this.$route.query.assignmentInfo;
     getDocAssignmentDetailByDocuId(this.assignmentInfo.id).then(res => {
-      console.log(res.data);
       this.detail = res.data;
+      this.loadingDocDetail = false;
+      this.isAvailable =
+        this.detail.status === "AVAILABLE" || this.detail.status === "FINISHED";
     });
     getDocResultById(this.assignmentInfo.id).then(res => {
       this.docResult = res.data;
-      console.log("doc.result" + this.docResult.result);
+      // 有成绩
       if (parseInt(this.docResult.result) !== -1) {
-        this.resultDisplay = true;
+        this.loadingDocResult = true;
       }
     });
   },
@@ -110,7 +120,9 @@ export default {
       assignmentInfo,
       detail: {},
       docResult: {},
-      resultDisplay: false
+      loadingDocResult: false,
+      loadingDocDetail: false,
+      isAvailable: false
     };
   },
   computed: {

src/views/student/Document/index.vue

@@ -1,6 +1,9 @@
 <template>
   <div>
-    <page-header :routes="[{ name: '文档作业', path: 'document' }]">
+    <page-header
+      :loading="loadingDocList"
+      :routes="[{ name: '文档作业', path: 'document' }]"
+    >
       <template slot="title">
         文档作业列表
       </template>
@@ -10,7 +13,15 @@
     </page-header>
     <page-body>
       <div class="columns is-multiline is-desktop">
-        <div :key="item.id" v-for="item in docList" class="column is-4">
+        <div v-if="loadingDocList" class="column is-4-desktop">
+          <card loading />
+        </div>
+        <div
+          v-else
+          :key="item.id"
+          v-for="item in docList"
+          class="column is-4-desktop"
+        >
           <router-link
             :to="{
               path: `${$route.path}/${item.id}`,
@@ -47,9 +58,10 @@ export default {
   },
   mixins: [timeMixins],
   mounted() {
-    console.log(this.$route.path);
+    this.loadingDocList = true;
     getDocAssignmentListByCrs(this.course.id).then(res => {
       this.docList = res.data;
+      this.loadingDocList = false;
     });
   },
   computed: {
@@ -65,7 +77,8 @@ export default {
         description: "",
         startAt: new Date(),
         endAt: new Date()
-      }
+      },
+      loadingDocList: false
     };
   },
   methods: {}

src/views/student/Review/ReviewDocDetail/index.vue

@@ -81,7 +81,7 @@ export default {
         checkList: []
       },
       submitLoading: false,
-      fetchLoading: false
+      loadingDocContent: false
     };
   },
   mixins: [timeMixins],

src/views/teacher/Code/detail.vue

@@ -1,6 +1,7 @@
 <template>
   <div>
     <page-header
+      :loading="loadingCommittedGroups"
       :routes="[
         { name: '代码作业', path: 'code' },
         { name: '作业详情', path: 'code/${assignmentInfo.id}' }
@@ -16,9 +17,15 @@
 
     <page-body>
       <div class="data-table">
-        <b-tabs type="is-boxed">
-          <b-tab-item label="已提交">
-            <b-table :data="codeProcedureList" detailed detail-key="id">
+        <b-tabs>
+          <b-tab-item :label="submitInfo.yes">
+            <page-section-loading :show="loadingCommittedGroups" />
+            <b-table
+              v-if="!loadingCommittedGroups"
+              :data="codeProcedureList"
+              detailed
+              detail-key="id"
+            >
               <template slot-scope="props">
                 <b-table-column
                   field="id"
@@ -94,7 +101,8 @@
           </b-tab-item>
 
           <b-tab-item :label="submitInfo.no">
-            <b-table :data="unsubmitedGroups">
+            <page-section-loading :show="loadingUncommittedGroups" />
+            <b-table v-if="!loadingUncommittedGroups" :data="unsubmitedGroups">
               <template slot-scope="props">
                 <b-table-column
                   field="id"
@@ -128,6 +136,7 @@ import PageHeader from "@/components/PageHeader";
 import PageBody from "@/components/PageBody/index";
 import { getCodeProcedureListByCodeId } from "@/api/assignment";
 import { getUnsubmittedCodeGroupsList } from "@/api/assignment";
+import PageSectionLoading from "@/components/PageBody/PageSectionLoading/index";
 
 const assignmentInfo = {
   id: 0,
@@ -152,17 +161,22 @@ const status = {
 export default {
   components: {
     PageBody,
-    PageHeader
+    PageHeader,
+    PageSectionLoading
   },
   mounted() {
+    this.loadingUncommittedGroups = true;
+    this.loadingCommittedGroups = true;
     this.assignmentInfo = this.$route.query.assignmentInfo;
     getCodeProcedureListByCodeId(123).then(res => {
       this.codeProcedureList = res.data;
       this.submitInfo.yes = "已提交：" + this.codeProcedureList.length;
+      this.loadingCommittedGroups = false;
     });
     getUnsubmittedCodeGroupsList(123).then(res => {
       this.unsubmitedGroups = res.data;
       this.submitInfo.no = "未提交：" + this.unsubmitedGroups.length;
+      this.loadingUncommittedGroups = false;
     });
   },
   data() {
@@ -174,9 +188,11 @@ export default {
       tag,
       status,
       submitInfo: {
-        yes: "",
-        no: ""
-      }
+        yes: "已提交",
+        no: "未提交"
+      },
+      loadingCommittedGroups: false,
+      loadingUncommittedGroups: false
     };
   },
   methods: {

src/views/teacher/Code/index.vue

@@ -1,6 +1,9 @@
 <template>
   <div>
-    <page-header :routes="[{ name: '代码作业', path: 'code' }]">
+    <page-header
+      :loading="loadingCodeList"
+      :routes="[{ name: '代码作业', path: 'code' }]"
+    >
       <template slot="title">
         代码作业列表
       </template>
@@ -18,7 +21,13 @@
 
     <page-body>
       <div class="data-table">
-        <b-table :data="codeData" detailed detail-key="id">
+        <page-section-loading :show="loadingCodeList" />
+        <b-table
+          v-if="!loadingCodeList"
+          :data="codeData"
+          detailed
+          detail-key="id"
+        >
           <template slot-scope="props">
             <b-table-column field="id" label="ID" numeric sortable centered>
               {{ props.row.id }}
@@ -90,6 +99,7 @@ import { mapState } from "vuex";
 import DeleteAssignment from "@/components/AssignmentCRUD/DeleteAssignment";
 import UpdateAssignment from "@/components/AssignmentCRUD/UpdateAssignment";
 import CreateAssignment from "@/components/AssignmentCRUD/CreateAssignment";
+import PageSectionLoading from "@/components/PageBody/PageSectionLoading/index";
 
 export default {
   components: {
@@ -97,18 +107,22 @@ export default {
     PageHeader,
     DeleteAssignment,
     UpdateAssignment,
-    CreateAssignment
+    CreateAssignment,
+    PageSectionLoading
   },
   mixins: [timeMixins],
   mounted() {
+    this.loadingCodeList = true;
     getCodeAssignmentListByTeacher(this.course.id).then(res => {
       this.codeData = res.data;
+      this.loadingCodeList = false;
     });
   },
   data() {
     return {
       codeData: [],
-      assignType: 0
+      assignType: 0,
+      loadingCodeList: false
     };
   },
   methods: {

src/views/teacher/Document/detail.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <page-header
-      :loading="isLoading"
+      :loading="loadingCommittedGroups"
       :routes="[
         { name: '文档作业', path: 'document' },
         { name: `作业详情`, path: `document` }
@@ -22,7 +22,13 @@
       <div class="data-table">
         <b-tabs>
           <b-tab-item :label="submitInfo.yes">
-            <b-table :data="submittedData" detailed detail-key="id">
+            <page-section-loading :show="loadingCommittedGroups" />
+            <b-table
+              v-if="!loadingCommittedGroups"
+              :data="submittedData"
+              detailed
+              detail-key="id"
+            >
               <template slot-scope="props">
                 <b-table-column
                   field="id"
@@ -82,7 +88,8 @@
           </b-tab-item>
 
           <b-tab-item :label="submitInfo.no">
-            <b-table :data="unsubmitedGroups">
+            <page-section-loading :show="loadingUncommittedGroups" />
+            <b-table v-if="!loadingUncommittedGroups" :data="unsubmitedGroups">
               <template slot-scope="props">
                 <b-table-column
                   field="id"
@@ -117,6 +124,7 @@ import PageBody from "@/components/PageBody/index";
 import { getSubmittedDocResultListByDocId } from "@/api/assignment";
 import { getUnsubmittedDocGroupsByDocId } from "@/api/assignment";
 import { mapState } from "vuex";
+import PageSectionLoading from "@/components/PageBody/PageSectionLoading/index";
 
 export default {
   computed: {
@@ -126,24 +134,26 @@ export default {
   },
   components: {
     PageBody,
-    PageHeader
+    PageHeader,
+    PageSectionLoading
   },
   created() {
     this.docId = this.$route.query.docId;
     this.question = this.$route.query.question;
   },
   mounted() {
-    this.isLoading = true;
+    this.loadingCommittedGroups = true;
+    this.loadingUncommittedGroups = true;
     getSubmittedDocResultListByDocId(this.docId).then(res => {
       this.status = res.data.status;
       this.submittedData = res.data.result;
       this.submitInfo.yes = "已提交：" + this.submittedData.length;
-      this.isLoading = false;
+      this.loadingCommittedGroups = false;
     });
     getUnsubmittedDocGroupsByDocId(this.docId).then(res => {
       this.unsubmitedGroups = res.data;
       this.submitInfo.no = "未提交：" + this.unsubmitedGroups.length;
-      this.isLoading = false;
+      this.loadingUncommittedGroups = false;
     });
   },
   data() {
@@ -154,10 +164,11 @@ export default {
       question: null,
       docId: null,
       submitInfo: {
-        yes: "",
-        no: ""
+        yes: "已提交",
+        no: "未提交"
       },
-      isLoading: false
+      loadingCommittedGroups: false,
+      loadingUncommittedGroups: false
     };
   }
 };

src/views/teacher/Document/docContent.vue

@@ -1,6 +1,7 @@
 <template>
   <div>
     <page-header
+      :loading="loadingDocContent"
       :routes="[
         { name: '文档作业', path: 'document' },
         {
@@ -14,24 +15,22 @@
         文档内容
       </template>
       <template slot="content">
-        题目名称：{{ contentResult.name }}
-      </template>
-      <template slot="extraContent">
+        题目名称：{{ contentResult.name }} <br />
+        <br />
         小组成员：<span
           v-for="member in contentResult.group.members"
           :key="member.id"
           >{{ member.username }}&emsp;</span
         >
       </template>
+      <template slot="extraContent">
+        上次修改时间：{{ displayUnixTime(contentResult.lastUpdateAt) }}
+      </template>
     </page-header>
     <page-body>
       <div class="data-table">
-        <div style="text-align: right">
-          上次修改时间：{{ displayUnixTime(contentResult.lastUpdateAt) }}
-        </div>
-        <hr />
-        <div v-if="fetchLoading"><page-section-loading show /></div>
-        <div v-else class="page-section">
+        <page-section-loading :show="loadingDocContent" />
+        <div v-if="!loadingDocContent" class="page-section">
           <div v-if="contentResult.content" class="content">
             <vue-markdown>{{ contentResult.content }}</vue-markdown>
           </div>
@@ -65,17 +64,17 @@ export default {
         lastUpdateAt: "",
         name: ""
       },
-      fetchLoading: false
+      loadingDocContent: false
     };
   },
   created() {
     this.docId = this.$route.query.assignId;
   },
   mounted() {
-    this.fetchLoading = true;
+    this.loadingDocContent = true;
     getDocContentByDocId(this.docId).then(res => {
       this.contentResult = res.data;
-      this.fetchLoading = false;
+      this.loadingDocContent = false;
     });
   }
 };

src/views/teacher/Document/index.vue

@@ -1,6 +1,9 @@
 <template>
   <div>
-    <page-header :routes="[{ name: '文档作业', path: 'document' }]">
+    <page-header
+      :loading="loadingDocList"
+      :routes="[{ name: '文档作业', path: 'document' }]"
+    >
       <template slot="title">
         文档作业列表
       </template>
@@ -17,63 +20,66 @@
     </page-header>
 
     <page-body>
-      <div class="data-table">
-        <b-table :data="docData" detailed detail-key="id">
-          <template slot-scope="props">
-            <b-table-column field="id" label="ID" numeric sortable centered>
-              {{ props.row.id }}
-            </b-table-column>
+      <div>
+        <page-section-loading :show="loadingDocList" />
+        <div v-if="!loadingDocList" class="data-table">
+          <b-table :data="docData" detailed detail-key="id">
+            <template slot-scope="props">
+              <b-table-column field="id" label="ID" numeric sortable centered>
+                {{ props.row.id }}
+              </b-table-column>
 
-            <b-table-column label="作业名称" centered>
-              <router-link
-                :to="{
-                  path: `${$route.path}/${props.row.id}`,
-                  query: { docId: props.row.id, question: props.row.problem }
-                }"
-              >
-                {{ props.row.name }}
-              </router-link>
-            </b-table-column>
-            <b-table-column label="状态" centered>
-              {{ props.row.status }}
-            </b-table-column>
+              <b-table-column label="作业名称" centered>
+                <router-link
+                  :to="{
+                    path: `${$route.path}/${props.row.id}`,
+                    query: { docId: props.row.id, question: props.row.problem }
+                  }"
+                >
+                  {{ props.row.name }}
+                </router-link>
+              </b-table-column>
+              <b-table-column label="状态" centered>
+                {{ props.row.status }}
+              </b-table-column>
 
-            <b-table-column label="开始时间" centered>
-              {{ displayUnixTime(props.row.startAt) }}
-            </b-table-column>
+              <b-table-column label="开始时间" centered>
+                {{ displayUnixTime(props.row.startAt) }}
+              </b-table-column>
 
-            <b-table-column label="结束时间" centered>
-              {{ displayUnixTime(props.row.endAt) }}
-            </b-table-column>
-            <b-table-column label="修改" centered>
-              <update-assignment
-                :assign-type="assignType"
-                :update-item="props.row"
-                @updateDocData="updateData($event)"
-              ></update-assignment>
-            </b-table-column>
-            <b-table-column label="删除" centered>
-              <delete-assignment
-                :del-id="props.row.id"
-                :assign-type="assignType"
-                @del="deleteAssignment(props.row.id)"
-              ></delete-assignment>
-            </b-table-column>
-          </template>
+              <b-table-column label="结束时间" centered>
+                {{ displayUnixTime(props.row.endAt) }}
+              </b-table-column>
+              <b-table-column label="修改" centered>
+                <update-assignment
+                  :assign-type="assignType"
+                  :update-item="props.row"
+                  @updateDocData="updateData($event)"
+                ></update-assignment>
+              </b-table-column>
+              <b-table-column label="删除" centered>
+                <delete-assignment
+                  :del-id="props.row.id"
+                  :assign-type="assignType"
+                  @del="deleteAssignment(props.row.id)"
+                ></delete-assignment>
+              </b-table-column>
+            </template>
 
-          <template slot="detail" slot-scope="props">
-            <article class="media">
-              <div class="media-content">
-                <div class="content">
-                  <p>
-                    <strong>作业描述：</strong>
-                    <small>{{ props.row.description }}</small> <br />
-                  </p>
+            <template slot="detail" slot-scope="props">
+              <article class="media">
+                <div class="media-content">
+                  <div class="content">
+                    <p>
+                      <strong>作业描述：</strong>
+                      <small>{{ props.row.description }}</small> <br />
+                    </p>
+                  </div>
                 </div>
-              </div>
-            </article>
-          </template>
-        </b-table>
+              </article>
+            </template>
+          </b-table>
+        </div>
       </div>
     </page-body>
   </div>
@@ -88,6 +94,7 @@ import { mapState } from "vuex";
 import DeleteAssignment from "@/components/AssignmentCRUD/DeleteAssignment";
 import UpdateAssignment from "@/components/AssignmentCRUD/UpdateAssignment";
 import CreateAssignment from "@/components/AssignmentCRUD/CreateAssignment";
+import PageSectionLoading from "@/components/PageBody/PageSectionLoading/index";
 
 export default {
   computed: {
@@ -100,18 +107,22 @@ export default {
     PageHeader,
     DeleteAssignment,
     UpdateAssignment,
-    CreateAssignment
+    CreateAssignment,
+    PageSectionLoading
   },
   mixins: [timeMixins],
   mounted() {
+    this.loadingDocList = true;
     getDocAssignmentListTeacherByCrs(this.course.id).then(res => {
       this.docData = res.data;
+      this.loadingDocList = false;
     });
   },
   data() {
     return {
       assignType: 1,
-      docData: []
+      docData: [],
+      loadingDocList: false
     };
   },
   methods: {