tnbapp/src/views/exam/ExamEvalList.vue

<template>
  <el-container class="exam-container">
    <el-header height="auto" class="exam-header">
      <div class="filter-wrapper">
        <span class="filter-label">科目筛选：</span>
        <el-select
          v-model="queryInfo.subjectId"
          clearable
          placeholder="请选择科目"
          @change="subjectChange"
          size="medium"
        >
          <el-option
            v-for="item in allSubject"
            :key="item.label"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
    </el-header>

    <el-main class="exam-main">
      <el-card shadow="never" class="table-card">
        <el-table
          :data="dataList"
          stripe
          style="width: 100%"
          header-cell-class-name="table-header-cell"
        >
          <el-table-column
            fixed="left"
            label="序号"
            type="index"
            align="center"
          />
          <el-table-column
            prop="examName"
            label="测评名称"
            show-overflow-tooltip
          />
          <el-table-column
            label="测评码"
            align="center"
          >
            <template slot-scope="scope">
              <el-tag
                v-if="scope.row.needPasscode"
                size="small"
                type="danger"
                effect="light"
              >需要</el-tag>
              <el-tag
                v-else
                size="small"
                type="success"
                effect="light"
              >不需要</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="startTime"
            label="测评时间"
            align="center"
          />
          <el-table-column
            prop="duration"
            label="时长"
            align="center"
          />
          <el-table-column
            prop="totalScore"
            label="试卷总分"
            align="center"
          />
          <el-table-column
            prop="userScore"
            label="我的分数"
            align="center"
          />
          <el-table-column
            fixed="right"
            label="操作"
            align="center"
          >
            <template slot-scope="scope">
              <el-button
                v-if="scope.row.evalStatus === 1"
                size="mini"
                type="primary"
                icon="el-icon-edit"
                @click="prepareExam(scope.$index, scope.row)"
              >去测评</el-button>
              <el-button
                v-else-if="scope.row.evalStatus === 2"
                size="mini"
                type="danger"
                icon="el-icon-s-claim"
                @click="markPaper(scope.$index, scope.row)"
              >进行中</el-button>
              <el-button
                v-else-if="scope.row.evalStatus === 3"
                size="mini"
                type="warning"
                icon="el-icon-loading"
                disabled
                @click="waitMark(scope.$index, scope.row)"
              >阅卷中</el-button>
              <el-button
                v-else-if="scope.row.evalStatus === 4"
                size="mini"
                type="warning"
                icon="el-icon-loading"
                disabled
                @click="waitMark(scope.$index, scope.row)"
              >看结果</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="pagination-container">
          <el-pagination
            background
            :small="screenWidth <= 768"
            layout="total, prev, pager, next"
            :page-size="pageSize"
            :current-page="currentPage"
            :total="totalSize"
            @current-change="handleCurrentChange"
            @prev-click="handleCurrentChange"
            @next-click="handleCurrentChange"
          />
        </div>
      </el-card>
    </el-main>

    <el-dialog
      title="进入测评确认"
      :visible.sync="startExamDialog"
      center
      width="480px"
      custom-class="exam-confirm-dialog"
    >
      <el-alert
        title="请诚信测评！"
        description="点击“开始测评”后将自动进入系统。测评过程中可能会对用户行为、用户视频进行截图采样，请知悉。"
        type="warning"
        :closable="false"
        show-icon
      />

      <div class="exam-info-spec">
        <div class="spec-item">
          <span class="label">测评名称：</span>
          <span class="value val-bold">{{ currentSelectedExam.examName }}</span>
        </div>
        <div class="spec-item">
          <span class="label">测评时长：</span>
          <span class="value">{{ currentSelectedExam.duration }} 分钟</span>
        </div>
        <div class="spec-item">
          <span class="label">试卷总分：</span>
          <span class="value">{{ currentSelectedExam.totalScore }} 分</span>
        </div>
        <div class="spec-item">
          <span class="label">开放类型：</span>
          <span class="value">
            <el-tag size="mini" :type="currentSelectedExam.needPasscode ? 'danger' : 'success'">
              {{ currentSelectedExam.needPasscode ? '密码开启' : '完全公开' }}
            </el-tag>
          </span>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="startExamDialog = false" size="medium">返 回</el-button>
        <el-button type="primary" @click="startExam(currentSelectedExam.examId)" size="medium">开始测评</el-button>
      </span>
    </el-dialog>
  </el-container>
</template>

<script>
import { getSubjectKV, getExamList } from '@/api/exam'

export default {
  name: 'ExamEvalList',
  data() {
    return {
      // 屏幕宽度, 为了控制分页条的大小
      screenWidth: document.body.clientWidth,
      currentPage: 1,
      pageSize: 20,
      totalSize: 0,
      dataList: [],
      // **********************************************************************
      queryInfo: {
        subjectId: null,
        pageNumber: 1,
        pageSize: 10
      },
      allSubject: [],
      // 开始测评的提示框
      startExamDialog: false,
      // 当前选中的测评的信息
      currentSelectedExam: {
        examId: 114511
      }
    }
  },
  created() {
    document.title = '我的试卷'
    this.getData(this.queryInfo)
    this.getSubjects()
    // this.getQuestionTypes()
  },
  methods: {
    handleCurrentChange(pageNumber) {
      this.currentPage = pageNumber
      this.queryInfo.pageNumber = this.currentPage
      this.queryInfo.pageSize = this.pageSize
      this.getData(this.queryInfo)
      // 回到顶部
      scrollTo(0, 0)
    },
    getData(queryInfo) {
      getExamList(queryInfo).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
        })
      })
    },
    getSubjects() {
      getSubjectKV().then((resp) => {
        if (resp.code === 0) {
          this.allSubject = resp.data
        }
      })
    },
    // 题库变化
    subjectChange(val) {
      this.queryInfo.subjectId = val
      this.queryInfo.pageNumber = this.currentPage
      this.queryInfo.pageSize = this.pageSize
      this.getData(this.queryInfo)
    },
    prepareExam(index, row) {
      if (!row.needPasscode) {
        this.startExamDialog = true
        this.currentSelectedExam = row
        return
      }

      this.$prompt('请提供测评码', 'Tips', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({ value }) => {
        if (value === 123) {
          this.$message.error('密码错误o(╥﹏╥)o')
          return
        }

        this.startExamDialog = true
        this.currentSelectedExam = row
      }).catch(() => {
      })
    },
    startExam(examId) {
      const routeUrl = this.$router.resolve({
        path: '/exams',
        query: {
          examId: examId
        }
      })
      window.open(routeUrl.href, '_blank')
    },
    waitMark(index, row) {
      this.$message.info('试卷待批改')
    },
    markPaper(index, row) {
      const paperId = row.examId
      const routeUrl = this.$router.resolve({
        path: '/exam/paper/detail',
        query: {
          paperId: paperId,
          viewType: 3,
          userId: 0
        }
      })
      window.open(routeUrl.href, '_blank')
    },
    viewResult(index, row) {
      const paperId = row.examId
      const routeUrl = this.$router.resolve({
        path: '/exam/paper/detail',
        query: {
          paperId: paperId,
          viewType: 4,
          userId: ''
        }
      })
      window.open(routeUrl.href, '_blank')
    }
  }
}
</script>

<style scoped>
/* 使用 scoped 避免样式污染，采用更具现代感的设计规范 */
.exam-container {
  background-color: #f5f7fa;
  min-height: 100vh;
  padding: 16px;
}

.exam-header {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 16px 24px;
  margin-bottom: 16px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
}

.filter-wrapper {
  display: flex;
  align-items: center;
}

.filter-label {
  font-size: 14px;
  color: #606266;
  font-weight: 500;
  margin-right: 8px;
}

.exam-main {
  padding: 0 !important;
}

.table-card {
  border-radius: 8px;
  border: none;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05) !important;
}

/* 表头美化 */
::v-deep .table-header-cell {
  background-color: #fafafa !important;
  color: #303133 !important;
  font-weight: 600;
  height: 48px;
}

.score-text {
  font-weight: 600;
  color: #303133;
}

.pagination-container {
  margin-top: 24px;
  display: flex;
  justify-content: flex-end;
}

/* 弹窗内容规格表美化 */
.exam-info-spec {
  margin-top: 20px;
  background-color: #f8f9fa;
  border-radius: 6px;
  padding: 16px;
  border: 1px solid #e4e7ed;
}

.spec-item {
  display: flex;
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 1.5;
}

.spec-item:last-child {
  margin-bottom: 0;
}

.spec-item .label {
  color: #909399;
  width: 80px;
  flex-shrink: 0;
}

.spec-item .value {
  color: #303133;
}

.spec-item .val-bold {
  font-weight: 600;
  color: #2c3e50;
}

/* 规整弹窗底部按钮间距 */
.exam-confirm-dialog ::v-deep .el-dialog__footer {
  padding-top: 10px;
  padding-bottom: 24px;
}
</style>