frontend-admin/src/features/examwork/StudentManagement/StudentManagementDialog.vue

<template>
  <div>
    <el-dialog
      ref="dialog"
      title="考试记录"
      width="800px"
      top="20px"
      :visible.sync="visible"
      @open="dialogOpen"
      @close="closeDialog"
    >
      <el-table :data="tableData" stripe style="width: 100%;">
        <el-table-column width="100" label="姓名">
          <span slot-scope="scope">{{ scope.row.name }}</span>
        </el-table-column>
        <el-table-column width="120" label="证件号">
          <span slot-scope="scope">{{ scope.row.identity }}</span>
        </el-table-column>
        <el-table-column label="批次名称">
          <span slot-scope="scope">{{ scope.row.examName }}</span>
        </el-table-column>
        <el-table-column width="100" label="课程">
          <span slot-scope="scope">{{ scope.row.courseName }}</span>
        </el-table-column>
        <el-table-column width="100" label="状态">
          <span slot-scope="scope">{{
            scope.row.status | examRecordStatusFilter
          }}</span>
        </el-table-column>
        <el-table-column width="100" label="操作">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.monitorRecord && scope.row.monitorRecord.length"
              size="mini"
              type="primary"
              plain
              @click="openMonitorRecord(scope.row)"
            >
              监考回放
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="part-page">
        <el-pagination
          background
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pageSize"
          :page-sizes="[10, 20, 50, 100, 200, 300]"
          @size-change="handleSizeChange"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        />
      </div>
      <div class="my-2"></div>
    </el-dialog>
  </div>
</template>

<script>
import { searchStudentExamRecord } from "@/api/examwork-student";
export default {
  name: "StudentManagementDialog",
  props: {
    student: Object,
  },
  watch: {
    student() {
      this.tableData = [];
      this.pageSize = 10;
      this.total = 0;
    },
  },
  data() {
    return {
      visible: false,
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 10,
    };
  },
  methods: {
    dialogOpen() {
      this.handleCurrentChange(0);
    },
    openDialog() {
      this.visible = true;
    },
    closeDialog() {
      this.visible = false;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.searchForm();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.searchForm();
    },
    async searchForm() {
      const res = await searchStudentExamRecord({
        studentId: this.student.id,
        pageNumber: this.currentPage,
        pageSize: this.pageSize,
      });
      this.tableData = res.data.data.records;
      this.total = res.data.data.total;
      if (this.total > 0 && this.tableData.length === 0) {
        this.handleCurrentChange(this.currentPage - 1);
      }
    },
    // monitor record
    openMonitorRecord(row) {
      console.log(row);
      window.sessionStorage.setItem("record", JSON.stringify(row));
      window.open(
        this.$router.resolve({
          name: "StudentMonitorRecord",
        }).href
      );
    },
  },
};
</script>

<style></style>