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>{{ locationTitle }}</BreadcrumbItem>
    </Breadcrumb>

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

<script>
import { mapState } from "vuex";
import EcsOfflineList from "./OfflineExamList.vue";

export default {
  name: "OfflineExamHome",
  components: {
    "ecs-offline-list": EcsOfflineList,
  },
  data() {
    return {
      courses: [],
    };
  },
  computed: {
    ...mapState(["menus"]),
    locationTitle() {
      return (
        this.menus.find(
          v => v.link.toUpperCase() === this.$route.path.toUpperCase()
        ) || {}
      ).name;
    },
  },
  async mounted() {
    try {
      window._hmt.push(["_trackEvent", "离线考试页面", "进入列表", ""]);
      this.logger({ page: "离线考试页面", action: "进入页面" });
      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_admin/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,
      }));
    },
  },
};
</script>

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