修改搜索提示

luohairen

2024-10-30 55b2e475da98ae7bf13a4ecd50eb8a278aeeeee3

 src/views/exam/exam/MarkPaper.vue

@@ -1,35 +1,153 @@
<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="3">
        <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.joinNum }}人</div>
        </div>
      </el-col>
      <el-col :span="3">
        <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="userId"
        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
        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() {
  // watch: {
  //   $route: {
  //     handler () {
  //       this.reloadPage()
  //     }
  //   }
  // },
  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 => {
    // reloadPage () {
    //   this.examInfo.examName = this.$route.query.examName
    //   this.examInfo.examId = this.$route.query.examId
    //   console.log('------->' + this.examInfo.examName + '------->' + this.examInfo.examId)
    //   if (this.examInfo.examId) {
    //     this.getExamInfo()
    //   }
    // },
    statusFormatter (row, column, cellValue, index) {
      if (cellValue === 'finish') {
        return '完成'
      } else if (cellValue === 'temp') {
        return '未完成'
      }
    },
    markPaper (row) {
      // todo打开阅卷页面
      this.$router.push({
        path: '/exam/mark/paper/detail',
        query: { examId: this.examInfo.examId, examName: this.examInfo.examName, userId: row.userId }
      })
    },
    getExamInfo () {
      getExamMarkPaperInfo(this.examInfo.examId).then(res => {
        this.examInfo = res.data.data
      })
    }
@@ -39,4 +157,37 @@

<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>