［新增］互评页面

mock/serializers/question/QuestionSerializer.js

@@ -23,7 +23,8 @@ module.exports = () => {
   return {
     id: makeId(),
     name: "物流系统需求规格说明书",
-    description: "某公司为xxx快递公司，请为该公司设计一个物流管理系统",
+    description:
+      "某公司为xxx快递公司，请为该公司设计一个物流管理系统...此物流管理系统的用户分别为，管理员、快递员",
     assignmentType: {
       name: "DOCUMENT",
       value: "文档作业"

src/assets/scss/app.scss

@@ -71,5 +71,6 @@ $default-margin-between:1.5rem;
 
 .tabs a,
 .tabs ul{
-  border-bottom-color: white;
+  border-bottom-color: #dbdbdb;
+  //border-bottom-color: white;
 }

src/router/routes.js

@@ -74,13 +74,15 @@ export default [
       },
       {
         path: "review",
-        component: () => import("@/views/teacher/Review"),
-        children: [
-          {
-            path: ":id",
-            component: () => import("@/views/teacher/Review/assignment")
-          }
-        ]
+        component: () => import("@/views/teacher/Review/assignmentList")
+      },
+      {
+        path: "review/:id",
+        component: () => import("@/views/teacher/Review/assignment")
+      },
+      {
+        path: "code",
+        component: () => import("@/views/teacher/Code")
       }
     ]
   },

src/views/teacher/Code/index.vue

@@ -0,0 +1,3 @@
+<template>
+  <div></div>
+</template>

src/views/teacher/Home/index.vue

@@ -5,7 +5,11 @@
         <div class="container hint">
           <h1 class="title">我开设的课程</h1>
           <h2 class="subtitle">请点击下方按钮新建课程</h2>
-          <img class="newSubject" src="../../../assets/white.png" />
+          <img
+            class="newSubject"
+            src="../../../assets/white.png"
+            @click="isCardModalActive = true"
+          />
         </div>
       </div>
     </section>
@@ -18,19 +22,32 @@
         </div>
       </div>
     </div>
+    <!-- 成绩比例调控模态框 -->
+    <b-modal :active.sync="isCardModalActive" :width="320" scroll="keep">
+      <div class="card">
+        <div class="title">新建课程</div>
+        <div class="content">
+          <b-field label="课程名"> <b-input></b-input> </b-field>
+          <b-field label="选课码"> <b-input></b-input> </b-field>
+          <a class="button is-link" @click="isCardModalActive = false">新建</a>
+        </div>
+      </div>
+    </b-modal>
   </div>
 </template>
 
 <script>
 import Card from "@/components/Card";
 import { getTeacherCourses } from "@/api/course";
+
 export default {
   components: {
     Card
   },
   data() {
     return {
-      courses: []
+      courses: [],
+      isCardModalActive: false
     };
   },
   mounted() {
@@ -59,6 +76,22 @@ export default {
     color: #ffffff;
   }
 }
+.card {
+  padding: 30px;
+  .title {
+    font-size: 1.25rem;
+    small {
+      color: gray;
+      font-size: 1rem;
+    }
+  }
+  .content {
+    a {
+      margin-top: 30px;
+      width: 100%;
+    }
+  }
+}
 .newSubject {
   height: 80px;
   width: 80px;

src/views/teacher/Question/index.vue

@@ -1,122 +1,120 @@
 <template>
   <div>
-    <nav class="breadcrumb" aria-label="breadcrumbs">
-      <ul>
-        <li><router-link :to="{ name: 'HOME' }">所有课程</router-link></li>
-        <li>
-          <router-link :to="`/course-teacher/${course.id}/dashboard`">{{
-            course.name
-          }}</router-link>
-        </li>
-        <li class="is-active">
-          <router-link :to="`/student-course/${course.id}/question`"
-            >查看题目</router-link
-          >
-        </li>
-      </ul>
-    </nav>
-    <!-- container面板-->
-    <div class="data-table">
-      <!--下拉框&搜索框-->
-      <div class="form-group">
-        <!--下拉框-->
-        <b-field>
-          <b-select placeholder="选择题目类型">
-            <option
-              v-for="option in questionType"
-              :value="option.title"
-              :key="option.id"
+    <page-header :routes="[{ name: '查看题目', path: 'question' }]">
+      <template slot="title">
+        查看题目
+      </template>
+    </page-header>
+    <page-body>
+      <!-- container面板-->
+      <div class="data-table">
+        <!--下拉框&搜索框-->
+        <div class="form-group">
+          <!--下拉框-->
+          <b-field>
+            <b-select placeholder="选择题目类型">
+              <option
+                v-for="option in questionType"
+                :value="option.title"
+                :key="option.id"
+              >
+                {{ option.title }}
+              </option>
+            </b-select>
+          </b-field>
+          <!--搜索框-->
+          <b-field>
+            <b-input
+              placeholder="输入关键字查找题目"
+              type="search"
+              icon="magnify"
             >
-              {{ option.title }}
-            </option>
-          </b-select>
-        </b-field>
-        <!--搜索框-->
-        <b-field>
-          <b-input
-            placeholder="输入关键字查找题目"
-            type="search"
-            icon="magnify"
+            </b-input>
+          </b-field>
+        </div>
+        <!--题目table-->
+        <div class="question-list">
+          <b-table
+            :data="data"
+            paginated
+            per-page="5"
+            detailed
+            detail-key="id"
+            @details-open="
+              (row, index) => $toast.open(`Expanded ${row.user.first_name}`)
+            "
           >
-          </b-input>
-        </b-field>
-      </div>
-      <!--题目table-->
-      <div class="question-list">
-        <b-table
-          :data="data"
-          paginated
-          per-page="5"
-          detailed
-          detail-key="id"
-          @details-open="
-            (row, index) => $toast.open(`Expanded ${row.user.first_name}`)
-          "
-        >
-          <template slot-scope="props">
-            <b-table-column field="id" label="ID" width="40" numeric sortable>
-              <!--{{ props.row.id }}-->1
-            </b-table-column>
+            <template slot-scope="props">
+              <b-table-column field="id" label="ID" width="40" numeric sortable>
+                <!--{{ props.row.id }}-->1
+              </b-table-column>
 
-            <b-table-column field="user.first_name" label="题目名称">
-              {{ props.row.name }}
-            </b-table-column>
+              <b-table-column field="user.first_name" label="题目名称">
+                {{ props.row.name }}
+              </b-table-column>
 
-            <b-table-column field="user.last_name" label="题目描述">
-              <div class="description">{{ props.row.description }}</div>
-            </b-table-column>
+              <b-table-column
+                field="user.last_name"
+                label="题目描述"
+                width="400"
+              >
+                <div class="description">{{ props.row.description }}</div>
+              </b-table-column>
 
-            <b-table-column
-              field="difficulty"
-              label="题目难度"
-              sortable
-              centered
-            >
-              <span class="tag is-success">
-                {{ props.row.difficulty == 1 ? "简单" : "困难" }}
-              </span>
-            </b-table-column>
+              <b-table-column
+                field="difficulty"
+                label="题目难度"
+                sortable
+                centered
+              >
+                <span class="tag is-success">
+                  {{ props.row.difficulty == 1 ? "简单" : "困难" }}
+                </span>
+              </b-table-column>
 
-            <b-table-column
-              label="平均时长"
-              field="expectTime"
-              sortable
-              centered
-            >
-              {{ props.row.expectTime }}分钟
-            </b-table-column>
-            <b-table-column label="题目标签">
-              {{ props.row.assignmentType.value }}
-            </b-table-column>
-          </template>
+              <b-table-column
+                label="平均时长"
+                field="expectTime"
+                sortable
+                centered
+              >
+                {{ props.row.expectTime }}分钟
+              </b-table-column>
+              <b-table-column label="题目标签">
+                {{ props.row.assignmentType.value }}
+              </b-table-column>
+            </template>
 
-          <template slot="detail" slot-scope="props">
-            <article class="media">
-              <!--<figure class="media-left">-->
-              <!--<p class="image is-64x64">-->
-              <!--<img src="/static/img/placeholder-128x128.png">-->
-              <!--</p>-->
-              <!--</figure>-->
-              <div class="media-content">
-                <div class="content">
-                  <p>
-                    <strong>{{ props.row.name }}</strong>
-                    <small>@{{ props.row.expectTime }}分钟</small> <br />
-                    {{ props.row.description }}
-                  </p>
+            <template slot="detail" slot-scope="props">
+              <article class="media">
+                <!--<figure class="media-left">-->
+                <!--<p class="image is-64x64">-->
+                <!--<img src="/static/img/placeholder-128x128.png">-->
+                <!--</p>-->
+                <!--</figure>-->
+                <div class="media-content">
+                  <div class="content">
+                    <p>
+                      <strong>{{ props.row.name }}</strong>
+                      <small>@{{ props.row.expectTime }}分钟</small> <br />
+                      {{ props.row.description }}
+                    </p>
+                  </div>
                 </div>
-              </div>
-            </article>
-          </template>
-        </b-table>
+              </article>
+            </template>
+          </b-table>
+        </div>
       </div>
-    </div>
+    </page-body>
   </div>
 </template>
 <script>
 import { mapState } from "vuex";
 import { getStudentCourseReviewList } from "@/api/review";
 import { getTeacherQuestions } from "@/api/question";
+import PageHeader from "@/components/PageHeader";
+import PageBody from "@/components/PageBody/index";
 
 // const data = [
 //   {
@@ -146,7 +144,10 @@ import { getTeacherQuestions } from "@/api/question";
 // ];
 
 export default {
-  components: {},
+  components: {
+    PageHeader,
+    PageBody
+  },
   computed: {
     ...mapState({
       course: state => state.course.currentCourse
@@ -179,7 +180,7 @@ export default {
 .data-table {
   width: 100%;
   padding: 30px;
-  min-height: 80vh;
+  /*min-height: 80vh;*/
   background-color: #ffffff;
 }
 .question-list {

src/views/teacher/Result/index.vue

@@ -1,104 +1,96 @@
 <template>
   <div>
-    <nav class="breadcrumb" aria-label="breadcrumbs">
-      <ul>
-        <li><router-link :to="{ name: 'HOME' }">所有课程</router-link></li>
-        <li>
-          <router-link :to="`/course-teacher/${course.id}/dashboard`">{{
-            course.name
-          }}</router-link>
-        </li>
-        <li class="is-active">
-          <router-link :to="`/student-course/${course.id}/result`"
-            >查看成绩</router-link
-          >
-        </li>
-      </ul>
-    </nav>
-    <!-- container面板-->
-    <div class="data-table">
-      <!--下拉框&搜索框-->
-      <div class="form-group">
-        <!--下拉框-->
-        <b-field> <a class="button is-link">导出作业成绩</a> </b-field>
-        <b-field>
-          <a class="button is-link" @click="isCardModalActive = true"
-            >成绩比例调控</a
-          >
-        </b-field>
-      </div>
-      <!--题目table-->
-      <div class="question-list">
-        <b-table :data="data" paginated per-page="5" detailed detail-key="id">
-          <template slot-scope="props">
-            <b-table-column field="id" label="ID" width="40" numeric sortable>
-              {{ props.row.id }}
-            </b-table-column>
-            <b-table-column field="id" label="学生" width="60" numeric sortable>
-              {{ props.row.student }}
-            </b-table-column>
-            <b-table-column label="文档作业" centered>
-              <div
-                class="result"
-                v-for="item in props.row.documentHomeworkResult"
-                :key="item.id"
-              >
-                {{ item.name }} : {{ item.result }}
-              </div>
-            </b-table-column>
+    <page-header :routes="[{ name: '成绩管理', path: 'result' }]">
+      <template slot="title">
+        全部作业成绩
+      </template>
+    </page-header>
+    <page-body>
+      <!-- container面板-->
+      <div class="data-table">
+        <!--下拉框&搜索框-->
+        <div class="form-group">
+          <!--下拉框-->
+          <b-field> <a class="button is-link">导出作业成绩</a> </b-field>
+          <b-field>
+            <a class="button is-link" @click="isCardModalActive = true"
+              >成绩比例调控</a
+            >
+          </b-field>
+        </div>
+        <!--题目table-->
+        <div class="question-list">
+          <b-table :data="data" paginated per-page="5" detailed detail-key="id">
+            <template slot-scope="props">
+              <b-table-column field="id" label="ID" width="40" numeric sortable>
+                {{ props.row.id }}
+              </b-table-column>
+              <b-table-column label="学生姓名" width="120" centered>
+                {{ props.row.student }}
+              </b-table-column>
+              <b-table-column label="文档作业" centered> 80 </b-table-column>
 
-            <b-table-column label="代码作业" centered>
-              <div
-                class="result"
-                v-for="item in props.row.codeHomeworkResult"
-                :key="item.id"
-              >
-                {{ item.name }} : {{ item.result }}
-              </div>
-            </b-table-column>
+              <b-table-column label="代码作业" centered> 90 </b-table-column>
 
-            <b-table-column label="互评作业" centered>
-              <div
-                class="result"
-                v-for="item in props.row.reviewHomeworkResult"
-                :key="item.id"
-              >
-                {{ item.name }} : {{ item.result }}
-              </div>
-            </b-table-column>
-            <b-table-column field="difficulty" label="总评" sortable centered>
-              <span
-                :class="[
-                  'tag',
-                  props.row.finalResult > 60 ? 'is-success' : 'is-danger'
-                ]"
+              <b-table-column label="互评作业" centered> 100 </b-table-column>
+              <b-table-column
+                field="finalResult"
+                label="总评"
+                sortable
+                centered
               >
-                {{ props.row.finalResult }}
-              </span>
-            </b-table-column>
-          </template>
+                <span :class="['tag', type(props.row.finalResult)]">
+                  {{ props.row.finalResult }}
+                </span>
+              </b-table-column>
+            </template>
 
-          <template slot="detail">
-            <article class="media">
-              <!--<figure class="media-left">-->
-              <!--<p class="image is-64x64">-->
-              <!--<img src="/static/img/placeholder-128x128.png">-->
-              <!--</p>-->
-              <!--</figure>-->
-              <div class="media-content">
-                <div class="content">
-                  <p>
-                    <strong>成绩详情</strong>
-                    <small>这里可以放具体的作业成绩，前面可以放总评啥的</small>
-                    <br />
-                  </p>
+            <template slot="detail" slot-scope="props">
+              <article class="media">
+                <div class="media-content">
+                  <div class="content">
+                    <!--<strong>成绩详情</strong>-->
+                    <!--<br />-->
+                    <div class="homework-layout">
+                      <div class="document-homework">
+                        <div class="homework-class">文档作业</div>
+                        <div
+                          class="result"
+                          v-for="item in props.row.documentHomeworkResult"
+                          :key="item.id"
+                        >
+                          {{ item.name }} : {{ item.result }}
+                        </div>
+                      </div>
+                      <div class="document-homework">
+                        <div class="homework-class">代码作业</div>
+                        <div
+                          class="result"
+                          v-for="item in props.row.codeHomeworkResult"
+                          :key="item.id"
+                        >
+                          {{ item.name }} : {{ item.result }}
+                        </div>
+                      </div>
+                      <div class="document-homework">
+                        <div class="homework-class">互评作业</div>
+                        <div
+                          class="result"
+                          v-for="item in props.row.reviewHomeworkResult"
+                          :key="item.id"
+                        >
+                          {{ item.name }} : {{ item.result }}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
                 </div>
-              </div>
-            </article>
-          </template>
-        </b-table>
+              </article>
+            </template>
+          </b-table>
+        </div>
       </div>
-    </div>
+    </page-body>
     <!-- 成绩比例调控模态框 -->
     <b-modal :active.sync="isCardModalActive" :width="320" scroll="keep">
       <div class="card">
@@ -120,6 +112,8 @@
 <script>
 import { mapState } from "vuex";
 import { getStudentCourseReviewList } from "@/api/review";
+import PageHeader from "@/components/PageHeader";
+import PageBody from "@/components/PageBody/index";
 const data = [
   {
     id: 1,
@@ -164,6 +158,7 @@ const data = [
   },
   {
     id: 2,
+    student: "yasen",
     documentHomeworkResult: [
       {
         id: 1,
@@ -200,10 +195,11 @@ const data = [
         result: 85
       }
     ],
-    finalResult: 99
+    finalResult: 79
   },
   {
     id: 3,
+    student: "soleil",
     documentHomeworkResult: [
       {
         id: 1,
@@ -240,10 +236,11 @@ const data = [
         result: 85
       }
     ],
-    finalResult: 99
+    finalResult: 59
   },
   {
     id: 4,
+    student: "xiaohan",
     documentHomeworkResult: [
       {
         id: 1,
@@ -285,7 +282,10 @@ const data = [
 ];
 
 export default {
-  components: {},
+  components: {
+    PageHeader,
+    PageBody
+  },
   computed: {
     ...mapState({
       course: state => state.course.currentCourse
@@ -303,6 +303,18 @@ export default {
       isCardModalActive: false
     };
   },
+  methods: {
+    type(value) {
+      const number = parseFloat(value);
+      if (number < 60) {
+        return "is-danger";
+      } else if (number >= 60 && number < 80) {
+        return "is-warning";
+      } else if (number >= 80) {
+        return "is-success";
+      }
+    }
+  },
   mounted() {
     getStudentCourseReviewList(this.courses.id).then(
       value => (this.review = value.data)
@@ -318,7 +330,7 @@ export default {
 .data-table {
   width: 100%;
   padding: 30px;
-  min-height: 80vh;
+  /*min-height: 80vh;*/
   background-color: #ffffff;
 }
 .question-list {
@@ -350,4 +362,13 @@ export default {
 .button {
   background-color: #6172ec;
 }
+.homework-layout {
+  display: flex;
+  .document-homework {
+    margin-right: 3rem;
+    .homework-class {
+      font-weight: bold;
+    }
+  }
+}
 </style>

src/views/teacher/Review/assignment.vue

@@ -1,3 +1,113 @@
 <template>
-  <div>hello assignment</div>
+  <div>
+    <page-header
+      :routes="[
+        { name: '互评作业', path: 'review' },
+        { name: '物流系统需求规格说明文档', path: `review/123` }
+      ]"
+    >
+      <template slot="title">
+        物流系统需求规格说明文档
+      </template>
+      <template slot="content">
+        <span>checklist:</span>
+        <b-tag class="checklist" type="is-link" rounded>需求明确</b-tag>
+        <b-tag class="checklist" type="is-link" rounded
+          >用例图、架构图、流程图完整</b-tag
+        >
+        <b-tag class="checklist" type="is-link" rounded>描述清晰</b-tag>
+      </template>
+    </page-header>
+    <page-body>
+      <!-- container面板-->
+      <div class="data-table">
+        <section>
+          <b-tabs type="is-boxed">
+            <b-tab-item label="未评价">
+              <!--题目table-->
+              <!--<div class="assignment-list">-->
+              <!--<b-table :data="data" paginated per-page="10" detailed detail-key="id">-->
+              <!--<template slot-scope="props">-->
+              <!--<b-table-column field="id" label="被评价小组ID"  numeric sortable>-->
+              <!--{{ props.row.id }}-->
+              <!--</b-table-column>-->
+              <!--<b-table-column field="reviewId" label="打分小组ID" numeric sortable>-->
+              <!--{{ props.row.reviewId }}-->
+              <!--</b-table-column>-->
+              <!--<b-table-column label="文档等级" sortable>-->
+              <!--{{ props.row.level }}-->
+              <!--</b-table-column>-->
+              <!--<b-table-column label="文档分数" field="score" numeric sortable>-->
+              <!--<span :class="['tag',type(props.row.score)]">-->
+              <!--{{ props.row. }}-->
+              <!--</span>-->
+              <!--</b-table-column>-->
+              <!--</template>-->
+
+              <!--<template slot="detail" slot-scope="props">-->
+              <!--<article class="media">-->
+              <!--<div class="media-content">-->
+              <!--<div class="content">-->
+              <!--<strong>互评作业详情</strong>-->
+              <!--</div>-->
+              <!--</div>-->
+              <!--</article>-->
+              <!--</template>-->
+              <!--</b-table>-->
+              <!--</div>-->
+            </b-tab-item>
+            <b-tab-item label="互评中"> </b-tab-item>
+            <b-tab-item label="提出异议"> </b-tab-item>
+            <b-tab-item label="互评完成"> </b-tab-item>
+          </b-tabs>
+        </section>
+      </div>
+    </page-body>
+  </div>
 </template>
+<script>
+import { mapState } from "vuex";
+import PageHeader from "@/components/PageHeader";
+import PageBody from "@/components/PageBody/index";
+
+const data = [
+  {
+    id: 1,
+    reviewId: 2,
+    level: "S",
+    score: 88
+  }
+];
+
+export default {
+  components: {
+    PageBody,
+    PageHeader
+  },
+  computed: {
+    ...mapState({
+      course: state => state.course.currentCourse
+    })
+  },
+  data() {
+    return {
+      data
+    };
+  },
+  mounted() {}
+};
+</script>
+<style lang="scss" scoped>
+.checklist {
+  margin-left: 0.75rem;
+}
+span {
+  font-weight: bold;
+}
+.data-table {
+  width: 100%;
+  padding: 30px;
+  /*min-height: 80vh;*/
+  background-color: #ffffff;
+}
+</style>

src/views/teacher/Review/index.vue → src/views/teacher/Review/assignmentList.vue

@@ -1,48 +1,47 @@
 <template>
   <div>
-    <nav class="breadcrumb" aria-label="breadcrumbs">
-      <ul>
-        <li><router-link :to="{ name: 'HOME' }">所有课程</router-link></li>
-        <li>
-          <router-link :to="`/course-teacher/${course.id}/dashboard`">{{
-            course.name
-          }}</router-link>
-        </li>
-        <li class="is-active">
-          <router-link :to="`/student-course/${course.id}/review`"
-            >评审作业</router-link
-          >
-        </li>
-      </ul>
-    </nav>
-    <!-- 数据面板 -->
-    <div class="data-table">
-      <!--<div class="submit-state">-->
-      <!--<span>提交情况</span>-->
-      <!--<progress class="progress is-link" value="30" max="100">40%</progress>-->
-      <!--50/200-->
-      <!--</div>-->
-      <div class="homework-list">
-        <section>
-          <b-tabs type="is-boxed">
-            <b-tab-item label="进行中的作业">
-              <b-table
-                :data="homeworkList"
-                :columns="columns"
-                :hoverable="true"
-              ></b-table>
-            </b-tab-item>
-            <b-tab-item label="已结束作业">
-              <div class="info">暂无已结束作业</div>
-            </b-tab-item>
-          </b-tabs>
-        </section>
+    <page-header :routes="[{ name: '互评作业', path: 'review' }]">
+      <template slot="title">
+        全部互评作业
+      </template>
+      <template slot="content">
+        当前有3份互评作业进行中
+      </template>
+    </page-header>
+    <page-body>
+      <div class="page-section">
+        <!--<div class="submit-state">-->
+        <!--<span>提交情况</span>-->
+        <!--<progress class="progress is-link" value="30" max="100">40%</progress>-->
+        <!--50/200-->
+        <!--</div>-->
+        <div class="homework-list">
+          <section>
+            <b-tabs type="is-boxed">
+              <b-tab-item label="进行中的作业">
+                <router-link
+                  :to="`/course-teacher/${this.course.id}/review/123`"
+                  ><b-table
+                    :data="homeworkList"
+                    :columns="columns"
+                    :hoverable="true"
+                  ></b-table
+                ></router-link>
+              </b-tab-item>
+              <b-tab-item label="已结束作业">
+                <div class="info">暂无已结束作业</div>
+              </b-tab-item>
+            </b-tabs>
+          </section>
+        </div>
       </div>
-    </div>
+    </page-body>
   </div>
 </template>
 <script>
 import { mapState } from "vuex";
+import PageHeader from "@/components/PageHeader";
+import PageBody from "@/components/PageBody/index";
 const homeworkList = [
   {
     id: 1,
@@ -91,7 +90,10 @@ const columns = [
 ];
 
 export default {
-  components: {},
+  components: {
+    PageBody,
+    PageHeader
+  },
   computed: {
     ...mapState({
       course: state => state.course.currentCourse
@@ -113,7 +115,7 @@ export default {
 .data-table {
   width: 100%;
   padding: 30px;
-  min-height: 80vh;
+  /*min-height: 80vh;*/
   background-color: #ffffff;
   .submit-state {
     display: flex;