tnbapp/src/views/exam/ExamIndex.vue

<template>
  <el-row>
    <el-row>
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item>
          <el-select v-model="searchForm.type" placeholder="查询类型">
            <el-option label="稿件标题" value="1" />
            <el-option label="用户ID" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input v-model="searchForm.content" placeholder="" />
        </el-form-item>
        <el-form-item>
          <el-button size="mini" type="warning" @click="search">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table
        :data="dataList"
        border
        style="width: 100%"
      >
        <el-table-column
          fixed="left"
          label="No"
          type="index"
        />
        <el-table-column
          prop="examName"
          label="考试名称"
          width="150"
        />
        <el-table-column
          prop="type"
          label="考试类型"
          width="90"
        />
        <el-table-column
          prop="startTime"
          label="考试时间"
          width="150"
        />
        <el-table-column
          prop="duration"
          label="考试时长(分钟)"
          width="150"
        />
        <el-table-column
          prop="totalScore"
          label="考试总分"
        />
        <el-table-column
          prop="passScore"
          label="及格分数"
        />
        <el-table-column
          fixed="right"
          label="操作"
          width="320"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="warning"
              @click="prepareExam(scope.$index, scope.row)"
            >去考试</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row>
      <el-pagination
        background
        :small="screenWidth <= 768"
        layout="prev, pager, next"
        :page-size="pageSize"
        :current-page="currentPage"
        :total="totalSize"
        @current-change="handleCurrentChange"
        @prev-click="handleCurrentChange"
        @next-click="handleCurrentChange"
      />
    </el-row>

    <el-dialog
      title="考试提示"
      :visible.sync="startExamDialog"
      center
      width="50%"
    >
      <el-alert
        title="点击`开始考试`后将自动进入考试，请诚信考试，考试过程中可能会对用户行为、用户视频进行截图采样，请知悉！"
        type="error"
      />
      <el-card style="margin-top: 25px">
        <span>考试名称：</span>{{ currentSelectedExam.examName }}
        <br>
        <span>考试描述：</span>{{ currentSelectedExam.examDesc }}
        <br>
        <span>考试时长：</span>{{ currentSelectedExam.duration + '分钟' }}
        <br>
        <span>试卷总分：</span>{{ currentSelectedExam.totalScore }}分
        <br>
        <span>及格分数：</span>{{ currentSelectedExam.passScore }}分
        <br>
        <span>开放类型：</span> {{ currentSelectedExam.type === 2 ? '需要密码' : '完全公开' }}
        <br>
      </el-card>
      <span slot="footer" class="dialog-footer">
        <el-button @click="startExamDialog = false">返 回</el-button>
        <el-button type="primary" @click="startExam(currentSelectedExam.examId)">开始考试</el-button>
      </span>
    </el-dialog>
  </el-row>
</template>

<script>
import {getExamPapers, getExams} from '@/api/exam'

export default {
  name: 'ExamIndex',
  data() {
    return {
      // 屏幕宽度, 为了控制分页条的大小
      screenWidth: document.body.clientWidth,
      currentPage: 1,
      pageSize: 20,
      totalSize: 0,
      dataList: [],
      // **********************************************************************
      searchForm: {
        page: 1,
        type: '1',
        content: null
      },
      // 开始考试的提示框
      startExamDialog: false,
      // 当前选中的考试的信息
      currentSelectedExam: {
        examId: 114511
      }
    }
  },
  created() {
    document.title = '试卷列表'
    this.getData(this.searchForm)
  },
  methods: {
    handleCurrentChange(pageNumber) {
      this.currentPage = pageNumber
      this.getData(this.searchForm)
      // 回到顶部
      scrollTo(0, 0)
    },
    getData(searchForm) {
      this.dataList = []
      getExams(this.currentPage).then(resp => {
        if (resp.code === 0) {
          this.dataList = resp.data.list
          this.totalSize = resp.data.totalSize
        } else {
          this.$notify({
            title: '提示',
            message: resp.msg,
            type: 'warning',
            duration: 3000
          })
        }
      }).catch(error => {
        this.$notify({
          title: '提示',
          message: error.message,
          type: 'error',
          duration: 3000
        })
      })

      getExamPapers(this.currentPage).then(resp => {
        if (resp.code === 0) {
          // this.dataList = resp.data.list
          // this.totalSize = resp.data.totalSize
        } else {
          this.$notify({
            title: '提示',
            message: resp.msg,
            type: 'warning',
            duration: 3000
          })
        }
      }).catch(error => {
        this.$notify({
          title: '提示',
          message: error.message,
          type: 'error',
          duration: 3000
        })
      })
    },
    prepareExam(index, row) {
      row.password = 12345678
      row.type = 1
      if (row.type === 2) {
        this.$prompt('请提供考试密码', 'Tips', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(({ value }) => {
          if (value === row.password) {
            this.startExamDialog = true
            this.currentSelectedExam = row
          } else {
            this.$message.error('密码错误o(╥﹏╥)o')
          }
        }).catch(() => {
        })
      } else {
        this.startExamDialog = true
        this.currentSelectedExam = row
      }
    },
    startExam(paperId) {
      const path = '/exam/paper/' + paperId
      console.log(path)
      this.$router.push('/exam/paper/' + paperId)
    },
    search() {
      this.currentPage = 1
      this.getData(this.searchForm)
    }
  }
}
</script>

<style>
</style>