［修改］

mock/serializers/question/QuestionSerializer.js

@@ -30,12 +30,12 @@ module.exports = () => {
       value: "文档作业"
     },
     type: {
-      name: "DOCUMENT",
-      value: "文档作业"
+      name: "JAVA",
+      value: "JAVA"
     },
     creator: makeId(),
     expectTime: 20,
     difficulty: 1,
-    file: fileSerializer()
+    file: [fileSerializer(), fileSerializer()]
   };
 };

src/router/routes.js

@@ -68,6 +68,10 @@ export default [
         path: "question",
         component: () => import("@/views/teacher/Question")
       },
+      {
+        path: "question/:id",
+        component: () => import("@/views/teacher/Question/questionDetail.vue")
+      },
       {
         path: "result",
         component: () => import("@/views/teacher/Result")

src/views/teacher/Question/index.vue

@@ -47,7 +47,13 @@
               </b-table-column>
 
               <b-table-column label="题目名称">
-                {{ props.row.name }}
+                <router-link
+                  :to="{
+                    path: `${props.row.id}`,
+                    query: { questionName: props.row.name }
+                  }"
+                  >{{ props.row.name }}</router-link
+                >
               </b-table-column>
 
               <b-table-column label="题目描述" width="400">

src/views/teacher/Question/questionDetail.vue

@@ -0,0 +1,123 @@
+<template>
+  <div>
+    <page-header
+      :routes="[
+        { name: '查看题目', path: 'question' },
+        { name: `${questionName}`, path: `question/123` }
+      ]"
+    >
+      <template slot="title">
+        {{ questionName }}
+      </template>
+      <template slot="content">
+        <b-tag class="tag" type="is-link" rounded>{{
+          questionInfo.assignmentType ? questionInfo.assignmentType.value : ""
+        }}</b-tag>
+        <b-tag class="tag" type="is-link" rounded>{{
+          questionInfo.type ? questionInfo.type.value : ""
+        }}</b-tag>
+      </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) }}
+          </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>
+    </page-body>
+  </div>
+</template>
+<script>
+import PageHeader from "@/components/PageHeader";
+import PageBody from "@/components/PageBody/index";
+import { getQuestionDetail } from "@/api/question";
+
+export default {
+  components: {
+    PageBody,
+    PageHeader
+  },
+  mounted() {
+    this.questionName = this.$route.query.questionName;
+    getQuestionDetail(234).then(res => {
+      console.log(res.data);
+      this.questionInfo = res.data;
+    });
+  },
+  data() {
+    return {
+      questionName: "",
+      questionInfo: {}
+    };
+  },
+  methods: {
+    difficultyType: level => {
+      switch (level) {
+        case 1:
+          return "简单";
+        case 2:
+          return "中等";
+        case 3:
+          return "困难";
+        default:
+          return "--";
+      }
+    },
+    difficultyClass: level => {
+      switch (level) {
+        case 1:
+          return "is-success";
+        case 2:
+          return "is-warning";
+        case 3:
+          return "is-danger";
+        default:
+          return "is-link";
+      }
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.tag {
+  margin-right: 10px;
+}
+.question-description {
+  margin-bottom: 1.5rem;
+  .subtitle {
+    width: 100%;
+    font-weight: bold;
+    padding-bottom: 10px;
+    border-bottom: 1px solid #dbdbdb;
+  }
+  .file-info {
+    margin-bottom: 0.75rem;
+    span {
+      margin-left: 0.75rem;
+    }
+  }
+}
+</style>