[修改]学生文档作业样式

mock/modules/assignment/index.js

@@ -82,7 +82,7 @@ router.route("/teacher/code/:codeId/unsubmitted/groups").get((req, res) => {
 });
 
 //老师查看单个代码作业的成绩列表（所有组的）
-router.route("/teacher/code/:codeId/result").get((req, res) => {
+router.route("/teacher/code/:codeId/docResult").get((req, res) => {
   res.send({
     err: 0,
     data: [CodeResultSerializer, CodeResultSerializer]
@@ -90,7 +90,7 @@ router.route("/teacher/code/:codeId/result").get((req, res) => {
 });
 
 //学生查看单个代码作业的成绩
-router.route("/student/code/:codeId/result").get((req, res) => {
+router.route("/student/code/:codeId/docResult").get((req, res) => {
   res.send({
     err: 0,
     data: CodeResultSerializer
@@ -149,7 +149,7 @@ router.route("/student/document/:documentId").get((req, res) => {
 
 //老师查看文档作业的成绩列表（已提交小组）
 router
-  .route("/teacher/document/:documentId/submitted/result")
+  .route("/teacher/document/:documentId/submitted/docResult")
   .get((req, res) => {
     res.send({
       err: 0,
@@ -169,7 +169,7 @@ router
   });
 
 //学生查看文档作业的成绩
-router.route("/student/document/:documentId/result").get((req, res) => {
+router.route("/student/document/:documentId/docResult").get((req, res) => {
   res.send({
     err: 0,
     data: DocumentResultSerializer()

mock/modules/review/index.js

@@ -128,7 +128,7 @@ router
   );
 
 // 学生选择查看某次互评作业中自己的文档
-router.route("/student/review/:reviewId/result").get((req, res) =>
+router.route("/student/review/:reviewId/docResult").get((req, res) =>
   res.send({
     data: reviewDocResultSerializer()
   })

mock/serializers/assignment/DocumentResultSerializer.js

@@ -7,7 +7,7 @@ const groupSerializer = require("../course/GroupSerializer");
  * @property {number} document 所属文档作业Id
  * @property {GroupSerializerType} group 所属小组
  * @property {string} state 作业状态
- * @property {string} result 成绩等级
+ * @property {string} docResult 成绩等级
  */
 
 /**
@@ -21,7 +21,7 @@ module.exports = () => {
     document: makeId(),
     group: groupSerializer(),
     state: "互评中",
-    result: "B",
+    docResult: "B",
     url: "https://github.com",
     reviewGroup: [1, 2, 3]
   };

mock/serializers/assignment/DocumentSerializer.js

@@ -25,7 +25,7 @@ module.exports = () => {
     id: makeId(),
     name: "需求规格说明文档",
     description: "请给该项目的需求规格说明文档",
-    status: "Underway",
+    status: "PREPARING",
     createAt: dayjs("2018-10-21").unix(),
     startAt: dayjs("2019-01-01").unix(),
     endAt: dayjs("2019-01-20").unix(),

src/api/assignment.js

@@ -75,7 +75,7 @@ export const delCodeAssignment = codeId => {
  * @param courseId
  * @returns {Promise<{data:CodeSerializerType[]}>}
  */
-export const getCodeAssignmentListByTeacher = (courseId = 123) => {
+export const getCodeAssignmentListByTeacher = courseId => {
   return request(`${ASSIGNMENT_MODULE}/teacher/course/${courseId}/code`);
 };
 
@@ -120,7 +120,7 @@ export const getCodeResultByCode = codeId => {
  * @param codeId
  * @returns {Promise<{data:CodeProcedureSerializerType[]}>}
  */
-export const getCodeProcedureListByCodeId = (codeId = 123) => {
+export const getCodeProcedureListByCodeId = codeId => {
   return request(
     `${ASSIGNMENT_MODULE}/teacher/code/${codeId}/submitted/procedure`
   );
@@ -131,7 +131,7 @@ export const getCodeProcedureListByCodeId = (codeId = 123) => {
  * @param codeId
  * @returns {Promise<{data:GroupSerializerType[]}>}
  */
-export const getUnsubmittedCodeGroupsList = (codeId = 123) => {
+export const getUnsubmittedCodeGroupsList = codeId => {
   return request(
     `${ASSIGNMENT_MODULE}/teacher/code/${codeId}/unsubmitted/groups`
   );
@@ -211,7 +211,7 @@ export const putDocAssignment = ({
  * @param documentId
  * @returns {Promise<{}>}
  */
-export const delDocAssignment = (documentId = 123) => {
+export const delDocAssignment = documentId => {
   return request(`${ASSIGNMENT_MODULE}/document/${documentId}`, {
     method: "DELETE"
   });
@@ -222,7 +222,7 @@ export const delDocAssignment = (documentId = 123) => {
  * @param courseId
  * @returns {Promise<{data:DocumentSerializerType[]}>}
  */
-export const getDocAssignmentListTeacherByCrs = (courseId = 123) => {
+export const getDocAssignmentListTeacherByCrs = courseId => {
   return request(`${ASSIGNMENT_MODULE}/teacher/course/${courseId}/document`);
 };
 
@@ -231,7 +231,7 @@ export const getDocAssignmentListTeacherByCrs = (courseId = 123) => {
  * @param courseId
  * @returns {Promise<{data:DocumentSerializerType[]}>}
  */
-export const getDocAssignmentListByCrs = (courseId = 123) => {
+export const getDocAssignmentListByCrs = courseId => {
   return request(`${ASSIGNMENT_MODULE}/student/course/${courseId}/document`);
 };
 
@@ -240,7 +240,7 @@ export const getDocAssignmentListByCrs = (courseId = 123) => {
  * @param documentId
  * @returns {Promise<{data:DocumentSerializerType}>}
  */
-export const getDocAssignmentDetailByDocuId = (documentId = 123) => {
+export const getDocAssignmentDetailByDocuId = documentId => {
   return request(`${ASSIGNMENT_MODULE}/student/document/${documentId}`);
 };
 
@@ -249,7 +249,7 @@ export const getDocAssignmentDetailByDocuId = (documentId = 123) => {
  * @param documentId
  * @returns {Promise<{data:DocumentResultSerializerType}>}
  */
-export const getDocResultById = (documentId = 123) => {
+export const getDocResultById = documentId => {
   return request(`${ASSIGNMENT_MODULE}/student/document/${documentId}/result`);
 };
 
@@ -258,7 +258,7 @@ export const getDocResultById = (documentId = 123) => {
  * @param documentId
  * @returns {Promise<{data:DocumentResultSerializerType}>}
  */
-export const getSubmittedDocResultListByDocId = (documentId = 123) => {
+export const getSubmittedDocResultListByDocId = documentId => {
   return request(
     `${ASSIGNMENT_MODULE}/teacher/document/${documentId}/submitted/result`
   );
@@ -269,7 +269,7 @@ export const getSubmittedDocResultListByDocId = (documentId = 123) => {
  * @param documentId
  * @returns {Promise<{data:GroupSerializerType[]}>}
  */
-export const getUnsubmittedDocGroupsByDocId = (documentId = 123) => {
+export const getUnsubmittedDocGroupsByDocId = documentId => {
   return request(
     `${ASSIGNMENT_MODULE}/teacher/document/${documentId}/unsubmitted/groups`
   );

src/components/DocumentStateTag/index.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="tag" :class="tagDetail.styledClass">{{ tagDetail.name }}</div>
+</template>
+
+<script>
+import getDocumentState from "../../data/documentState";
+export default {
+  name: "DocumentStateTag",
+  props: {
+    state: {
+      type: String,
+      default: "已失效"
+    }
+  },
+  computed: {
+    tagDetail() {
+      return getDocumentState(this.state);
+    }
+  }
+};
+</script>

src/data/documentState.js

@@ -0,0 +1,21 @@
+export const DEFAULT = "DEFAULT";
+export const PREPARING = "PREPARING";
+export const UNAVAILABLE = "UNAVAILABLE";
+export const READY = "READY";
+export const AVAILABLE = "AVAILABLE";
+export const FINISHED = "FINISHED";
+
+export default function(state) {
+  switch (state) {
+    case PREPARING:
+      return { name: "准备中", styledClass: "is-info" };
+    case UNAVAILABLE:
+      return { name: "创建失败", styledClass: "is-warning" };
+    case READY:
+      return { name: "未开始", styledClass: "is-light" };
+    case AVAILABLE:
+      return { name: "正在进行", styledClass: "is-success" };
+    case FINISHED:
+      return { name: "已结束", styledClass: "is-danger" };
+  }
+}

src/views/student/Document/detail.vue

@@ -12,33 +12,55 @@
       <template slot="content">
         {{ assignmentInfo.description }}
       </template>
+      <template slot="action">
+        <div @click="() => (this.showModal = true)" class="button is-primary">
+          成绩：{{ docResult.result }}
+        </div>
+      </template>
     </page-header>
     <page-body>
-      <div class="data-table">
-        <div class="detail-description">
-          <div class="subtitle">题目名称</div>
-          <div class="detail-content">
-            {{ detail.problem ? detail.problem.name : "" }}
+      <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>
           </div>
-        </div>
-        <div class="detail-description">
-          <div class="subtitle">作业详情</div>
-          <div class="detail-content">
-            {{ detail.problem ? detail.problem.description : "" }}
+          <div class="column">
+            <h5 class="title is-5">状态:</h5>
+            <div class="subtitle is-6">
+              <document-state-tag :state="detail.status" />
+            </div>
           </div>
         </div>
-        <div class="detail-description">
-          <div class="subtitle">git地址</div>
-          <div class="detail-content">{{ detail.url }}</div>
+        <!--第二行-->
+        <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="detail-description">
-          <div class="subtitle">所处阶段</div>
-          <div class="detail-content">{{ detail.status }}</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>
         </div>
-        <div class="detail-description">
-          <div class="subtitle">成绩</div>
-          <div class="detail-content">{{ result.result }}</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>
+          </div>
         </div>
       </div>
     </page-body>
@@ -50,6 +72,8 @@ import PageHeader from "../../../components/PageHeader";
 import PageBody from "../../../components/PageBody";
 import { getDocAssignmentDetailByDocuId } from "@/api/assignment";
 import { getDocResultById } from "@/api/assignment";
+import DocumentStateTag from "@/components/DocumentStateTag";
+import timeMixins from "@/mixins/time";
 
 const assignmentInfo = {
   id: 0,
@@ -62,24 +86,24 @@ const assignmentInfo = {
 export default {
   components: {
     PageBody,
-    PageHeader
+    PageHeader,
+    DocumentStateTag
   },
+  mixins: [timeMixins],
   mounted() {
     this.assignmentInfo = this.$route.query.assignmentInfo;
     getDocAssignmentDetailByDocuId(123).then(res => {
-      console.log(res.data);
       this.detail = res.data;
     });
     getDocResultById(123).then(res => {
-      console.log(res.data);
-      this.result = res.data;
+      this.docResult = res.data;
     });
   },
   data() {
     return {
       assignmentInfo,
       detail: {},
-      result: {}
+      docResult: {}
     };
   }
 };

src/views/student/Document/index.vue

@@ -9,76 +9,54 @@
       </template>
     </page-header>
     <page-body>
-      <div>
-        <b-table
-          :data="docList"
-          paginated
-          per-page="5"
-          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: `document/${props.row.id}`,
-                  query: { assignmentInfo: props.row }
-                }"
-              >
-                {{ 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.endAt) }}
-            </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>
-                </div>
+      <div class="columns is-multiline is-desktop">
+        <div :key="item.id" v-for="item in docList" class="column is-4">
+          <router-link
+            :to="{
+              path: `${$route.path}/${item.id}`,
+              query: { assignmentInfo: item }
+            }"
+          >
+            <card hoverable>
+              {{ item.name }}
+              <div>
+                <document-state-tag :state="item.status"></document-state-tag>
               </div>
-            </article>
-          </template>
-        </b-table>
+            </card>
+          </router-link>
+        </div>
       </div>
     </page-body>
   </div>
 </template>
 
 <script>
+import { mapState } from "vuex";
 import PageHeader from "@/components/PageHeader";
 import PageBody from "@/components/PageBody/index";
 import { getDocAssignmentListByCrs } from "@/api/assignment";
 import timeMixins from "@/mixins/time";
+import Card from "@/components/Card";
+import DocumentStateTag from "@/components/DocumentStateTag";
 export default {
   components: {
     PageBody,
-    PageHeader
+    PageHeader,
+    Card,
+    DocumentStateTag
   },
   mixins: [timeMixins],
   mounted() {
-    getDocAssignmentListByCrs(123).then(res => {
+    console.log(this.$route.path);
+    getDocAssignmentListByCrs(this.course.id).then(res => {
       this.docList = res.data;
     });
   },
+  computed: {
+    ...mapState({
+      course: state => state.course.currentCourse
+    })
+  },
   data() {
     return {
       docList: [],

src/views/teacher/Document/detail.vue

@@ -55,7 +55,7 @@
                 </b-table-column>
 
                 <b-table-column label="分数" centered>
-                  {{ props.row.result }}
+                  {{ props.row.docResult }}
                 </b-table-column>
                 <b-table-column field="difficulty" label="详情" centered
                   ><a :href="props.row.url" target="_blank">查看详情</a>

src/views/teacher/Result/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <page-header :routes="[{ name: '成绩管理', path: 'result/' }]">
+    <page-header :routes="[{ name: '成绩管理', path: 'docResult/' }]">
       <template slot="title">
         全部作业成绩
       </template>
@@ -265,7 +265,7 @@ export default {
       this.data = res.data;
     });
     //绘制图表
-    var resultChart = document.getElementById("result-chart");
+    var resultChart = document.getElementById("docResult-chart");
     var myChart2 = new Chart(resultChart, {
       type: "bar",
       data: {