［修改］成绩页button loading效果

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(),

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/views/teacher/Question/index.vue

@@ -29,19 +29,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,7 +131,8 @@
 import { mapState } from "vuex";
 import {
   getQuestionsByAssignType,
-  getTeacherQuestionType
+  getTeacherQuestionType,
+  getTeacherKeywordQuestions
 } from "@/api/question";
 import PageHeader from "@/components/PageHeader";
 import PageBody from "@/components/PageBody/index";
@@ -155,35 +152,58 @@ export default {
       courses: [],
       review: [],
       questionType: [],
-      data: []
+      data: [],
+      keyWord: "",
+      errorMessage: "服务器错误，请稍后再试"
     };
   },
   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();
   },
   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/Result/index.vue

@@ -108,6 +108,13 @@
           成绩比例调控<small>&nbsp;&nbsp;请按百分比填写</small>
         </div>
         <div class="content">
+          <b-notification
+            class="notification-self"
+            type="is-danger"
+            :active.sync="isServerError"
+          >
+            {{ errorMassage }}
+          </b-notification>
           <div class="homework-item">
             <label>文档作业</label>
             <div class="homework-percent">
@@ -166,7 +173,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,7 +184,6 @@
 </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";
@@ -206,15 +214,14 @@ 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: "服务器错误,请稍后重试"
     };
   },
   methods: {
@@ -256,6 +263,13 @@ export default {
         currentIndex++;
       }
       return parseInt(finalRes);
+    },
+    confirmPercent() {
+      this.submitting = true;
+      this.$toast.open({
+        message: "成绩比例调整成功",
+        type: "is-success"
+      });
     }
   },
   mounted() {
@@ -265,17 +279,19 @@ export default {
       this.data = res.data;
     });
     //绘制图表
-    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 +301,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 +319,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;
 }