在线考试：显示客观分

src/features/OnlineExam/OnlineExamHome.vue

@@ -6,43 +6,18 @@
     </Breadcrumb>
 
     <div class="home">
-      <i-table border :columns="columns" :data="courses"></i-table>
-
+      <ecs-online-list :courses="courses"></ecs-online-list>
     </div>
   </main-layout>
 </template>
 
 <script>
+import EcsOnlineList from "./OnlineExamList.vue";
+
 export default {
   name: "OnlineExamHome",
   data() {
     return {
-      columns: [
-        {
-          title: "课程",
-          key: "courseName"
-        },
-        {
-          title: "专业",
-          key: "specialtyName"
-        },
-        {
-          title: "考试开放时间",
-          key: "start2end",
-          render: (h, params) => {
-            // return h("div", params.row.start2end);
-            return <div domPropsInnerHTML={params.row.start2end} />;
-          }
-        },
-        {
-          title: "剩余考试次数",
-          key: "times"
-        },
-        {
-          title: "操作",
-          key: "operations"
-        }
-      ],
       courses: []
     };
   },
@@ -52,10 +27,13 @@ export default {
     this.courses = res.data.map(c => ({
       courseName: c.courseName,
       specialtyName: c.specialtyName,
-      start2end: c.startTime + "<br> ~ <br>" + c.endTime,
-      times: c.allowExamCount,
-      operations: ""
+      startTime: c.startTime,
+      endTime: c.endTime,
+      allowExamCount: c.allowExamCount
     }));
+  },
+  components: {
+    "ecs-online-list": EcsOnlineList
   }
 };
 </script>

src/features/OnlineExam/OnlineExamList.vue

@@ -0,0 +1,97 @@
+<template>
+  <div class="list">
+    <table>
+      <tbody class="list-row">
+        <tr class="list-header qm-primary-strong-text">
+          <td>课程</td>
+          <td>专业</td>
+          <td>考试开放时间</td>
+          <td>剩余考试次数</td>
+          <td style="max-width: 200px">操作</td>
+        </tr>
+
+        <tr v-for="(course) in courses" :key="course.examId">
+          <td>{{ course.courseName }}</td>
+          <td>{{ course.specialtyName }}</td>
+          <td>{{ course.startTime }} <br> ~ <br> {{ course.endTime }}</td>
+          <td>{{ course.allowExamCount }}</td>
+          <td style="min-width: 180px">
+            <template v-if="!course.isvalid">
+              <div style="display: grid; grid-template-columns: 1fr 1fr; grid-gap: 10px">
+                <i-button class="qm-primary-button" @click="previewPaper(course)">进入考试</i-button>
+
+                <i-poptip trigger="hover" placement="left" class="online-exam-list-override-poptip">
+                  <i-button class="qm-primary-button" style="width: 100%">客观分</i-button>
+                  <ecs-online-exam-result-list slot="content" :results="[{startTime: '2018-06-03 12:00:00', endTime: '2018-06-04 14:00:00', score: 100}]"></ecs-online-exam-result-list>
+                </i-poptip>
+              </div>
+            </template>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+import OnlineExamResultList from "./OnlineExamResultList.vue";
+
+export default {
+  name: "EcsOnlineList",
+  data() {
+    return {};
+  },
+  props: {
+    courses: Array
+  },
+  methods: {
+    async enterExam(course) {
+      await this.$http.get("/api/offline_exam/start", {
+        params: { examStudentId: course.examStudentId }
+      });
+      this.$emit("reloadList");
+    },
+    previewPaper(course) {
+      var user = {
+        loginName: course.examStudentId,
+        backUrl: window.document.location.href,
+        isOnlineExam: true
+      };
+      window.name = JSON.stringify(user);
+      window.location.href =
+        this.tk_server_url +
+        "/#/preview_paper/" +
+        course.paperId +
+        "?isback=true";
+    }
+  },
+  components: {
+    "ecs-online-exam-result-list": OnlineExamResultList
+  }
+};
+</script>
+
+<style scoped>
+.list {
+  border: 1px solid #eeeeee;
+  border-radius: 6px;
+}
+
+.list table {
+  width: 100%;
+  border-collapse: collapse !important;
+  border-spacing: 0;
+}
+.list td {
+  border: 1px solid #eeeeee;
+  border-radius: 6px;
+  border-collapse: separate !important;
+  padding: 10px;
+}
+</style>
+
+<style>
+.online-exam-list-override-poptip .ivu-poptip-rel {
+  width: 100%;
+}
+</style>

src/features/OnlineExam/OnlineExamResultList.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="list">
+    <table>
+
+      <tbody class="list-row">
+        <tr class="list-header qm-primary-strong-text">
+          <td>次数</td>
+          <td>开始时间</td>
+          <td>交卷时间</td>
+          <td>客观分</td>
+        </tr>
+
+        <tr v-for="(course, index) in results" :key="index">
+          <td>{{ index + 1 }}</td>
+          <td>{{ course.startTime }}</td>
+          <td>{{ course.endTime }}</td>
+          <td>{{ course.score }}</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "EcsOnlineExamResultList",
+  props: {
+    results: Array
+  }
+};
+</script>
+
+<style scoped>
+.list {
+  border: 1px solid #eeeeee;
+  border-radius: 6px;
+}
+
+.list table {
+  width: 100%;
+  border-collapse: collapse !important;
+  border-spacing: 0;
+}
+.list td {
+  border: 1px solid #eeeeee;
+  border-radius: 6px;
+  border-collapse: separate !important;
+  padding: 10px;
+}
+</style>

src/features/login/Login.vue

@@ -48,6 +48,12 @@
 </template>
 
 <script>
+/**
+ * 在任何组件需要强制退出，做以下步骤
+ * 1. this.$Message.info()
+ * 2. this.$router.push("/login");
+ * 因为在/login里会删除localStorage的token，而在router.beforeEach会检查是否有token，达到退出的目的。
+ */
 export default {
   data() {
     return {

src/main.js

@@ -15,7 +15,7 @@ import MainLayout from "@/components/MainLayout/MainLayout.vue";
 Vue.use(iView);
 Vue.use(axiosPlugin);
 
-Vue.config.productionTip = false;
+Vue.config.productionTip = process.env.NODE_ENV !== "production";
 
 Vue.component("main-layout", MainLayout);