Merge remote-tracking branch 'origin/feature/result-zhouweilu' into develop

mock/modules/question/index.js

@@ -10,8 +10,30 @@ router.route("/teacher/questionType").get((req, res) => {
   });
 });
 
+//按题目分类获得题目(分页)
+router.route("/teacher/questions/type").get((req, res) => {
+  res.send({
+    data: [
+      QuestionSerializer(),
+      QuestionSerializer(),
+      QuestionSerializer(),
+      QuestionSerializer(),
+      QuestionSerializer(),
+      QuestionSerializer(),
+      QuestionSerializer(),
+      QuestionSerializer(),
+      QuestionSerializer(),
+      QuestionSerializer(),
+      QuestionSerializer(),
+      QuestionSerializer(),
+      QuestionSerializer()
+    ],
+    pageNum: 1
+  });
+});
+
 //按题目分类获得题目(分页) || 根据作业分类获得题目
-router.route("/teacher/questions").get((req, res) => {
+router.route("/teacher/questions/assignmentType").get((req, res) => {
   res.send({
     data: [
       QuestionSerializer(),

src/views/student/Home/index.vue

@@ -15,7 +15,15 @@
     </section>
     <div class="container">
       <div class="columns is-multiline is-desktop">
-        <div :key="item.id" v-for="item in courses" class="column is-4-desktop">
+        <div v-if="isStudentCourseLoading" class="column is-4-desktop">
+          <card loading />
+        </div>
+        <div
+          v-else
+          :key="item.id"
+          v-for="item in courses"
+          class="column is-4-desktop"
+        >
           <router-link :to="`/course-student/${item.id}/dashboard`">
             <card hoverable>{{ item.name }}</card>
           </router-link>
@@ -95,7 +103,8 @@ export default {
       coursenum: "",
       submitting: false,
       isServerError: false,
-      errorMassage: "服务器错误,请稍后重试"
+      errorMassage: "服务器错误,请稍后重试",
+      isStudentCourseLoading: true
     };
   },
   mounted() {
@@ -103,7 +112,10 @@ export default {
   },
   methods: {
     getCourses() {
-      getStudentCourses().then(value => (this.courses = value.data));
+      getStudentCourses().then(value => {
+        this.courses = value.data;
+        this.isStudentCourseLoading = false;
+      });
     },
     //加入课程
     joinSubject() {

src/views/teacher/Home/index.vue

@@ -15,7 +15,10 @@
     </section>
     <div class="container">
       <div class="columns is-multiline is-desktop">
-        <div :key="item.id" v-for="item in courses" class="column is-4">
+        <div v-if="isTeacherCourseLoading" class="column is-4-desktop">
+          <card loading />
+        </div>
+        <div v-else :key="item.id" v-for="item in courses" class="column is-4">
           <router-link :to="`/course-teacher/${item.id}/dashboard`">
             <card hoverable>{{ item.name }}</card>
           </router-link>
@@ -124,7 +127,8 @@ export default {
       coursenum: "",
       submitting: false,
       isServerError: false,
-      errorMassage: "服务器错误,请稍后再试"
+      errorMassage: "服务器错误,请稍后再试",
+      isTeacherCourseLoading: true
     };
   },
   mounted() {
@@ -132,7 +136,10 @@ export default {
   },
   methods: {
     getCourses() {
-      getTeacherCourses().then(value => (this.courses = value.data));
+      getTeacherCourses().then(value => {
+        this.courses = value.data;
+        this.isTeacherCourseLoading = false;
+      });
     },
     //新建课程
     newSubject() {

src/views/teacher/Question/index.vue

@@ -1,13 +1,17 @@
 <template>
   <div>
-    <page-header :routes="[{ name: `查看题目`, path: 'question/' }]">
+    <page-header
+      :loading="loadingQuestionList"
+      :routes="[{ name: `查看题目`, path: 'question/' }]"
+    >
       <template slot="title">
         查看题目
       </template>
     </page-header>
     <page-body>
+      <page-section-loading :show="loadingQuestionList" />
       <!-- container面板-->
-      <div class="data-table">
+      <div v-if="!loadingQuestionList" class="data-table">
         <!--下拉框&搜索框-->
         <div class="form-group">
           <!--下拉框-->
@@ -29,19 +33,15 @@
               placeholder="输入关键字查找题目"
               type="search"
               icon="magnify"
+              v-model="keyWord"
             >
             </b-input>
-            <p class="control"><button class="button is-link">查找</button></p>
+            <p class="control">
+              <button class="button is-link" @click="getQuestionsByKey()">
+                查找
+              </button>
+            </p>
           </b-field>
-
-          <!--<b-field>-->
-          <!--<b-input-->
-          <!--placeholder="输入关键字查找题目"-->
-          <!--type="search"-->
-          <!--icon="magnify"-->
-          <!--&gt;-->
-          <!--</b-input>-->
-          <!--</b-field>-->
         </div>
         <!--题目table-->
         <div class="question-list">
@@ -135,15 +135,18 @@
 import { mapState } from "vuex";
 import {
   getQuestionsByAssignType,
-  getTeacherQuestionType
+  getTeacherQuestionType,
+  getTeacherKeywordQuestions
 } from "@/api/question";
 import PageHeader from "@/components/PageHeader";
 import PageBody from "@/components/PageBody/index";
+import PageSectionLoading from "@/components/PageBody/PageSectionLoading/index";
 
 export default {
   components: {
     PageHeader,
-    PageBody
+    PageBody,
+    PageSectionLoading
   },
   computed: {
     ...mapState({
@@ -155,35 +158,61 @@ export default {
       courses: [],
       review: [],
       questionType: [],
-      data: []
+      data: [],
+      keyWord: "",
+      errorMessage: "服务器错误，请稍后再试",
+      loadingQuestionList: true
     };
   },
   mounted() {
     //获取全部题目分类
-    getTeacherQuestionType()
-      .then(value => {
-        this.questionType = value.res;
-      })
-      .catch(e => {
-        this.$toast.open({
-          message: e.message,
-          type: "is-link"
-        });
-      });
+    this.getQuestionType();
     //获取全部题目
-    getQuestionsByAssignType({ type: "DOCUMENT", page: 0, limit: 10 })
-      .then(value => {
-        console.log(value);
-        this.data = value.res.content;
-      })
-      .catch(e => {
-        this.$toast.open({
-          message: e.message,
-          type: "is-danger"
-        });
-      });
+    this.getQuestions();
+
+    this.loadingQuestionList = false;
   },
   methods: {
+    //获取全部题目分类
+    getQuestionType() {
+      getTeacherQuestionType()
+        .then(value => {
+          this.questionType = value.data;
+        })
+        .catch(e => {
+          this.$toast.open({
+            message: e.message,
+            type: "is-link"
+          });
+        });
+    },
+    //获取全部题目
+    getQuestions() {
+      getQuestionsByAssignType({ type: "DOCUMENT", page: 0, limit: 10 })
+        .then(value => {
+          // this.data = value.res.content;
+          this.data = value.data;
+        })
+        .catch(e => {
+          this.$toast.open({
+            message: e.message,
+            type: "is-danger"
+          });
+        });
+    },
+    //根据关键字查找题目
+    getQuestionsByKey() {
+      getTeacherKeywordQuestions(this.keyWord)
+        .then(value => {
+          this.data = value.data;
+        })
+        .catch(e => {
+          this.$toast.open({
+            message: e.message || this.errorMessage,
+            type: "is-danger"
+          });
+        });
+    },
     difficultyType: level => {
       switch (level) {
         case 1:

src/views/teacher/Question/questionDetail.vue

@@ -1,6 +1,7 @@
 <template>
   <div>
     <page-header
+      :loading="isQuestionDetailLoading"
       :routes="[
         { name: '查看题目', path: 'question/' },
         { name: `${questionName}`, path: `question/123` }
@@ -19,30 +20,35 @@
       </template>
     </page-header>
     <page-body>
-      <div class="data-table">
-        <div class="question-description">
-          <div class="subtitle">题目描述</div>
-          <div class="question-content">{{ questionInfo.description }}</div>
-        </div>
-        <div class="question-description">
-          <div class="subtitle">预计完成时间</div>
-          <div class="question-content">{{ questionInfo.expectTime }}分钟</div>
-        </div>
-        <div class="question-description">
-          <div class="subtitle">题目难度</div>
-          <div class="question-content">
-            {{ difficultyType(questionInfo.difficulty) }}
+      <page-section-loading :show="isQuestionDetailLoading" />
+      <div v-if="!isQuestionDetailLoading" class="data-table">
+        <div>
+          <div class="question-description">
+            <div class="subtitle">题目描述</div>
+            <div class="question-content">{{ questionInfo.description }}</div>
           </div>
-        </div>
-        <div class="question-description">
-          <div class="subtitle">文件信息</div>
-          <div class="question-content">
-            <div
-              class="file-info"
-              v-for="(item, index) in questionInfo.file"
-              :key="index"
-            >
-              <a>{{ item.filename }}</a>
+          <div class="question-description">
+            <div class="subtitle">预计完成时间</div>
+            <div class="question-content">
+              {{ questionInfo.expectTime }}分钟
+            </div>
+          </div>
+          <div class="question-description">
+            <div class="subtitle">题目难度</div>
+            <div class="question-content">
+              {{ difficultyType(questionInfo.difficulty) }}
+            </div>
+          </div>
+          <div class="question-description">
+            <div class="subtitle">文件信息</div>
+            <div class="question-content">
+              <div
+                class="file-info"
+                v-for="(item, index) in questionInfo.file"
+                :key="index"
+              >
+                <a>{{ item.filename }}</a>
+              </div>
             </div>
           </div>
         </div>
@@ -54,11 +60,13 @@
 import PageHeader from "@/components/PageHeader";
 import PageBody from "@/components/PageBody/index";
 import { getQuestionDetail } from "@/api/question";
+import PageSectionLoading from "@/components/PageBody/PageSectionLoading/index";
 
 export default {
   components: {
     PageBody,
-    PageHeader
+    PageHeader,
+    PageSectionLoading
   },
   mounted() {
     this.questionName = this.$route.query.questionName;
@@ -66,13 +74,15 @@ export default {
     getQuestionDetail(this.questionId).then(res => {
       console.log(res.data);
       this.questionInfo = res.data;
+      this.isQuestionDetailLoading = false;
     });
   },
   data() {
     return {
       questionName: "",
       questionInfo: {},
-      questionId: ""
+      questionId: "",
+      isQuestionDetailLoading: true
     };
   },
   methods: {

src/views/teacher/Result/index.vue

@@ -1,13 +1,17 @@
 <template>
   <div>
-    <page-header :routes="[{ name: '成绩管理', path: 'result/' }]">
+    <page-header
+      :loading="isResultLoading"
+      :routes="[{ name: '成绩管理', path: 'result/' }]"
+    >
       <template slot="title">
         全部作业成绩
       </template>
     </page-header>
     <page-body>
+      <page-section-loading :show="isResultLoading" />
       <!-- container面板-->
-      <div class="data-table">
+      <div v-show="!isResultLoading" class="data-table">
         <!--下拉框&搜索框-->
         <div class="form-group">
           <!--下拉框-->
@@ -166,7 +170,9 @@
             </div>
           </div>
         </div>
-        <a class="button is-link" @click="isCardModalActive = false"
+        <a
+          :class="['button', 'is-link', { 'is-loading': submitting }]"
+          @click="confirmPercent"
           >确认调整</a
         >
       </div>
@@ -175,19 +181,20 @@
 </template>
 <script>
 import { mapState } from "vuex";
-// import { getStudentCourseReviewList } from "@/api/review";
 import PageHeader from "@/components/PageHeader";
 import PageBody from "@/components/PageBody/index";
 import Chart from "chart.js";
 import BInput from "buefy/src/components/input/Input";
 import { required, numeric, between } from "vuelidate/lib/validators";
 import { getStudentFinaleResult } from "@/api/resultstatistics";
+import PageSectionLoading from "@/components/PageBody/PageSectionLoading/index";
 
 export default {
   components: {
     BInput,
     PageHeader,
-    PageBody
+    PageBody,
+    PageSectionLoading
   },
   validations: {
     percent: {
@@ -206,15 +213,15 @@ export default {
       name: "",
       courses: [],
       review: [],
-      questionType: [
-        { id: 1, title: "文档作业题目" },
-        { id: 2, title: "代码作业题目" }
-      ],
       data: [],
       isCardModalActive: false,
       myChart2: {},
       percent: "",
-      finalResultPercentage: [20, 20, 20, 10, 10, 10, 10]
+      finalResultPercentage: [20, 20, 20, 10, 10, 10, 10],
+      submitting: false,
+      isServerError: false,
+      errorMessage: "服务器错误,请稍后重试",
+      isResultLoading: true
     };
   },
   methods: {
@@ -256,6 +263,13 @@ export default {
         currentIndex++;
       }
       return parseInt(finalRes);
+    },
+    confirmPercent() {
+      this.submitting = true;
+      this.$toast.open({
+        message: "成绩比例调整成功",
+        type: "is-success"
+      });
     }
   },
   mounted() {
@@ -263,19 +277,22 @@ export default {
     getStudentFinaleResult(this.courses.id).then(res => {
       console.log(res.data);
       this.data = res.data;
+      this.isResultLoading = false;
     });
     //绘制图表
-    var resultChart = document.getElementById("result-chart");
-    var myChart2 = new Chart(resultChart, {
+    let resultChart = document.getElementById("result-chart");
+    let myChart2 = new Chart(resultChart, {
       type: "bar",
       data: {
         labels: [
-          "0-30分段",
-          "30-60分段",
-          "60-70分段",
-          "70-80分段",
-          "80-90分段",
-          "90-100分段"
+          "0分",
+          "1-29分",
+          "30-59分段",
+          "60-69分段",
+          "70-79分段",
+          "80-89分段",
+          "90-99分段",
+          "100分"
         ],
         datasets: [
           {
@@ -285,7 +302,7 @@ export default {
             borderWidth: 1,
             pointStrokeColor: "#fff",
             pointStyle: "crossRot",
-            data: [6, 10, 34, 50, 80, 30],
+            data: [2, 6, 10, 34, 50, 80, 30, 2],
             cubicInterpolationMode: "monotone",
             spanGaps: "false",
             fill: "false"
@@ -303,12 +320,6 @@ export default {
   /*color: #7957d5;*/
   font-weight: bold;
 }
-/*.data-table {*/
-/*width: 100%;*/
-/*padding: 30px;*/
-/*!*min-height: 80vh;*!*/
-/*background-color: #ffffff;*/
-/*}*/
 .chart {
   margin-top: 1.5rem;
 }