student-client/src/features/OnlinePractice/OnlinePracticeList.vue

<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>平均正确率</td>
          <td>最高正确率</td>
          <td style="max-width: 200px">操作</td>
        </tr>

        <tr v-for="course in courses" :key="course.courseId">
          <td>{{ course.courseName }}</td>
          <td>{{ course.startTime }} <br> ~ <br> {{ course.endTime }}</td>
          <td>{{ course.practiceCount }}</td>
          <td>{{ course.recentObjectiveAccuracy }}%</td>
          <td>{{ course.aveObjectiveAccuracy }}%</td>
          <td>{{ course.maxObjectiveAccuracy }}%</td>
          <td style="min-width: 180px">
            <div style="display: grid; grid-template-columns:  repeat( auto-fit, minmax(100px, 1fr) ); grid-gap: 10px">
              <i-button class="qm-primary-button" :disabled="!courseInBetween(course)" @click="enterPractice(course)">进入练习</i-button>
              <i-button class="qm-primary-button" @click="enterPracticeList(course)">查看详情</i-button>
            </div>
          </td>
        </tr>
      </tbody>
    </table>

  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
import moment from "moment";
import { mapState as globalMapState } from "vuex";
const { mapMutations } = createNamespacedHelpers("examHomeModule");

export default {
  name: "OnlinePracticeList",
  data() {
    return { now: new Date(), selectedCourse: null };
  },
  props: {
    examList: Array,
    courses: Array
  },
  created() {
    this.getNow();
    this.intervalID = setInterval(() => this.getNow(), 1000);
  },
  beforeDestroy() {
    clearInterval(this.intervalID);
  },
  methods: {
    ...mapMutations(["toggleFaceCheckModal"]),
    getNow() {
      this.now = new Date();
    },
    courseInBetween(course) {
      return moment(this.now).isBetween(
        moment(course.startTime),
        moment(course.endTime)
      );
    },
    async checkExamInProgress() {
      try {
        // 断点续考
        const examingRes = (await this.$http.get(
          "/api/ecs_oe_student/examControl/checkExamInProgress"
        )).data;
        if (examingRes) {
          this.$Spin.show({
            render: () => {
              return <div style="font-size: 24px">正在进入断点续考...</div>;
            }
          });
          this.$router.push(
            `/online-exam/exam/${examingRes.examId}/examRecordData/${
              examingRes.examRecordDataId
            }/order/1` +
              (examingRes.faceVerifyMinute
                ? `?faceVerifyMinute=${examingRes.faceVerifyMinute}`
                : "")
          );
          setTimeout(() => this.$Spin.hide(), 1000);
          return true;
        }
      } catch (error) {
        this.$Message.error("获取断点续考信息异常");
        return true;
      }
    },
    async enterPractice(course) {
      const alreadyInExam = await this.checkExamInProgress();
      if (alreadyInExam) return;

      this.$router.push(
        `/online-exam/exam/${course.examId}/overview?examStudentId=${
          course.examStudentId
        }`
      );
    },
    async enterPracticeList(course) {
      this.$router.push(
        `/online-practice/exam/${course.examId}/list?examStudentId=${
          course.examStudentId
        }&examName=${encodeURIComponent(
          course.examName
        )}&courseName=${encodeURIComponent(course.courseName)}`
      );
    }
  },
  computed: {
    ...globalMapState(["user"])
  }
};
</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>