student-client/src/features/OfflineExam/OfflineExamList.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 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>
            <div v-if="course.offlineFileUrl">
              <a
                @click="() => downloadOfflineFile(course.offlineFileUrl)"
                :href="course.offlineFileUrl"
                download
              >
                <i-icon type="ios-cloud-download"></i-icon>下载作答
              </a>
            </div>
            <div v-else>未上传</div>
          </td>
          <td style="min-width: 180px">
            <template v-if="!course.isvalid">
              <div v-if="course.paperId" style="display: grid; grid-gap: 10px">
                <i-button
                  class="qm-primary-button"
                  @click="previewPaper(course)"
                >
                  查看试卷
                </i-button>
                <a
                  class="qm-primary-button"
                  v-show="!disableDownloadPaperBtn"
                  @click="() => tempDisableBtnAndDownloadPaper(course)"
                  href="#"
                  download
                >
                  下载试卷
                </a>
                <i-button
                  v-if="disableDownloadPaperBtn"
                  class="qm-primary-button"
                >
                  下载中
                </i-button>
                <!-- <i-button class="qm-primary-button">
                  <a
                    class="qm-primary-button"
                    href="https://ecs-static.qmth.com.cn/offline-exam/答题卡.zip"
                    download
                  >下载答题卡</a>
                </i-button> -->
                <ecs-offline-exam-upload
                  :course="course"
                  @reloadList="$emit('reloadList')"
                ></ecs-offline-exam-upload>
              </div>

              <div v-else style="display: grid; grid-gap: 10px">
                <div
                  v-if="
                    new Date(course.startTime) - Date.now() > timeDifference
                  "
                >
                  未开始
                </div>
                <div
                  v-else-if="
                    new Date(course.endTime) - Date.now() < timeDifference
                  "
                >
                  已结束
                </div>
                <div v-else>
                  <i-button
                    class="qm-primary-button"
                    @click="enterExam(course)"
                  >
                    抽取试卷
                  </i-button>
                </div>
              </div>
            </template>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import { mapState as globalMapState } from "vuex";
import {
  TK_SERVER_HTML_URL,
  TK_SERVER_API_URL,
} from "@/constants/constants.js";
import OfflineExamUpload from "./OfflineExamUpload.vue";

export default {
  name: "EcsOfflineList",
  data() {
    return {
      disableDownloadPaperBtn: false,
    };
  },
  props: {
    courses: Array,
  },
  methods: {
    async enterExam(course) {
      // 若出错，直接报网络异常
      await this.$http.get("/api/ecs_oe_student/offlineExam/startOfflineExam", {
        params: { examStudentId: course.examStudentId },
      });
      this.$emit("reloadList");
    },
    previewPaper(course) {
      window._hmt.push(["_trackEvent", "离线考试页面", "预览"]);
      var user = {
        loginName: course.examStudentId,
        backUrl: window.document.location.href,
        isOnlineExam: true,
      };
      window.name = JSON.stringify(user);
      window.location.href =
        TK_SERVER_HTML_URL +
        "/admin/preview_paper/" +
        course.paperId +
        "?isback=true";
    },
    downloadOfflineFile(url) {
      window._hmt.push(["_trackEvent", "离线考试页面", "下载作答"]);
      window.location.href = url;
    },
    tempDisableBtnAndDownloadPaper(course) {
      window._hmt.push(["_trackEvent", "离线考试页面", "下载试卷"]);
      this.disableDownloadPaperBtn = true;
      setTimeout(() => (this.disableDownloadPaperBtn = false), 10 * 1000);

      window.location.href =
        TK_SERVER_API_URL +
        "/api/ecs_ques/paper/export/" +
        course.paperId +
        "/PAPER/" +
        this.user.rootOrgName +
        "/" +
        course.paperId +
        "/offLine?$key=" +
        this.user.key +
        "&$token=" +
        this.user.token;
    },
  },
  components: {
    "ecs-offline-exam-upload": OfflineExamUpload,
  },
  computed: {
    ...globalMapState(["user", "timeDifference"]),
  },
};
</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>