stmms-proxy/src/features/ExamList/ExamList.vue

<template>
  <div class="wp">
    <div class="hd">
      <div class="logo"><img src="img/logo.png" /></div>
      <span class="y">
        欢迎您，<span id="user-name"></span> <span class="pipe">|</span
        ><a href="login.html">退出</a>
      </span>
    </div>
    <div class="cont">
      <div class="title cl" style="background: #fff">
        <span class="y"
          >共有<b id="total-count">{{ examList.length }}</b
          >场考试，请选择</span
        >
        <h2>考试列表</h2>
      </div>
      <table cellpadding="0" cellspacing="0" width="100%" class="tablelist">
        <thead>
          <th>ID</th>
          <th>考试名称</th>
          <th>创建时间</th>
          <th>操作</th>
        </thead>
        <tbody id="exam-list">
          <tr v-for="(exam, index) in examList" :key="index">
            <td>{{ exam.id }}</td>
            <td>{{ exam.name }}</td>
            <td>{{ exam.examTime }}</td>
            <td><a-button @click="selectExam(exam)">进入考试</a-button></td>
          </tr>
        </tbody>
      </table>
      <div class="page">
        <span class="back" id="previous-button">上页</span>
        <div id="page-list"></div>
        <span class="next" id="next-button">下页</span>
      </div>
    </div>
    <div class="ft">
      Copyright © 2011-2020 www.qmth.com.cn, All Rights Reserved
    </div>
  </div>
</template>

<script setup lang="ts">
import { store } from "@/store";
import { onMounted, ref } from "vue";
import { getExams } from "@/api/api";
import { useRouter } from "vue-router";
const router = useRouter();

let examList = ref([]);
// TODO: add pager

onMounted(async () => {
  const exams = await getExams(1, 1000);
  console.log(exams);
  examList.value = exams.data;
});

const selectExam = (exam) => {
  store.env.exam = exam;
  store.env.examId = exam.id;
  router.push("/home");
};
</script>