feat：示例数据

龚焕茏

2024-06-19 c20a16253461b9b9e8484d65e976fbf705748f6c

 src/views/exam/exam/MarkPaper.vue

@@ -1,35 +1,134 @@
<template>
  <div>
    <div>
      <div></div>
      <div></div>
    </div>
    <div></div>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="5">
        <div class="nameClass">
          <div class="bottom5">考试名称</div>
          <div class="title">{{examInfo.examName}}</div>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="nameClass">
          <div class="bottom5">试卷名称</div>
          <div class="title">{{examInfo.examPaperName}}</div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="staticNum">
          <div class="bottom5">应考人数</div>
          <div class="title">{{examInfo.shouldJoinNum}}</div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="staticNum">
          <div class="bottom5">缺考人数</div>
          <div class="title">{{examInfo.missJoinNum}}</div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="staticNum">
          <div class="bottom5">参加但未完成人数</div>
          <div class="title">{{examInfo.joinButNotFinishNum}}</div>
        </div>
      </el-col>
    </el-row>
    <!-- 表格 -->
    <el-table
      :data="examInfo.studentExamInfoVOList"
      border
      style="width: 100%;margin-top: 20px"
    >
      <el-table-column
        align="center"
        prop="id"
        label="学号"
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="realName"
        label="姓名"
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="phone"
        label="电话"
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="status"
        :formatter="statusFormatter"
        label="提交状态"
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="markPaperStatus"
        :formatter="statusFormatter"
        label="阅卷状态"
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="phone"
        label="系统自动估分(选择题型)"
      >
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        width="300px"
      >
        <template slot-scope="scope">
          <el-button @click="markPaper(scope.row)" type="warning">阅卷</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getExamInfo } from "@/api/exam"
import { getExamMarkPaperInfo } from '@/api/exam'

export default {
  name: "MarkPaper",
  mounted() {
  name: 'MarkPaper',
  mounted () {
    this.examInfo.examName = this.$route.query.examName
    this.examInfo.id = this.$route.query.examId
    this.getExamInfo()
    this.examInfo.examId = this.$route.query.examId
    if (this.examInfo.examId) {
      this.getExamInfo()
    }
  },
  data() {
  data () {
    return {
      examInfo: {
        examName: "",
        id: null,
        paperList: []
        examName: '',
        examPaperName: '',
        suggestTime: 0,
        shouldJoinNum: 0,
        joinNum: 0,
        missJoinNum: 0,
        joinButNotFinishNum: 0,
        examId: null,
        studentExamInfoVOList: []
      }

    }
  },
  methods: {
    getExamInfo() {
      getExamInfo(this.examInfo.id).then(res => {
    statusFormatter (row) {
      if (row.status === 'finish' || row.markPaperStatus === 'finish') {
        return '完成'
      } else if (row.status === 'temp' || row.markPaperStatus === 'temp') {
        return '未完成'
      }
    },
    markPaper (row) {
      // todo打开阅卷页面
    },
    getExamInfo () {
      getExamMarkPaperInfo(this.examInfo.examId).then(res => {
        this.examInfo = res.data.data
      })
    }
@@ -39,4 +138,33 @@

<style scoped>

.title {
  font-size: 18px;
}
.bottom5 {
  margin-bottom: 5px;
}
.nameInfo {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.nameClass {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 70px;
  background-color: #cb5858;
}
.staticNum {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #0a76a4;
  height: 70px;
}
</style>