student-client/src/features/OfflineExam/OfflineExamHome.vue

<template>
  <main-layout>
    <Breadcrumb
      style="text-align: left; padding-left: 20px; height: 40px; 
                       line-height: 40px; background-color: #fafafa;"
    >
      当前所在位置：
      <BreadcrumbItem>离线考试</BreadcrumbItem>
    </Breadcrumb>

    <div class="home">
      <ecs-offline-list
        :courses="courses"
        @reloadList="fetchData"
      ></ecs-offline-list>
    </div>
  </main-layout>
</template>

<script>
import EcsOfflineList from "./OfflineExamList.vue";

export default {
  name: "OfflineExamHome",
  data() {
    return {
      courses: []
    };
  },
  async mounted() {
    try {
      window._hmt.push(["_trackEvent", "离线考试页面", "进入列表", ""]);
      await this.fetchData();
    } catch (error) {
      this.$Message.error({
        content: "获取离线考试列表失败",
        duration: 15,
        closable: true
      });
    }
  },
  methods: {
    async fetchData() {
      const res = await this.$http.get(
        "/api/ecs_oe_student/offlineExam/getOfflineCourse"
      );

      this.courses = res.data.map(c => ({
        examId: c.examId,
        examRecordDataId: c.examRecordDataId,
        courseName: c.courseName,
        specialtyName: c.specialtyName,
        orgName: c.orgName,
        examStudentId: c.examStudentId,
        startTime: c.startTime,
        endTime: c.endTime,
        offlineFileUrl: c.offlineFileUrl,
        paperId: c.paperId
      }));
    }
  },
  components: {
    "ecs-offline-list": EcsOfflineList
  }
};
</script>

<style scoped>
.home {
  margin: 20px;
}
</style>