完成教师端，页面顶部展示

luohairen

2024-11-08 cce9b105726750f1b76eef2fa250680ebf36d06c

 src/views/exam/exam/monitor.vue

@@ -2,37 +2,60 @@
  <div class="app-container">
    <el-form :model="queryParam" ref="queryForm" :inline="true">
      <el-form-item>
        <el-input v-model="queryParam.keyword" placeholder="请输入名称" clearable></el-input>
        <el-input v-model="queryParam.keyword" size="small" placeholder="请输入名称" @input="search" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
        <el-button type="primary" @click="search" size="small">查询</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="listLoading" :data="tableData" border fit highlight-current-row style="width: 100%">
      <el-table-column align="center" prop="examName" label="考试" />
      <el-table-column align="center" prop="userName" label="姓名" show-overflow-tooltip />
      <el-table-column align="center" prop="createTime" label="开始时间" />
      <el-table-column align="center" prop="doTime" label="耗时（秒）" />
      <el-table-column align="center" prop="status" label="状态" :formatter="statusFormatter" />
      <el-table-column align="center" prop="examName" label="考试"/>
      <el-table-column align="center" prop="userName" label="姓名" show-overflow-tooltip/>
      <el-table-column align="center" prop="createTime" label="开始时间"/>
      <el-table-column align="center" prop="doTime" label="耗时（秒）"/>
      <el-table-column align="center" prop="status" label="状态" :formatter="statusFormatter"/>
      <el-table-column label="操作" align="center">
        <template slot-scope="{row}">
          <el-button size="mini" type="danger" @click="handleNullify(row)">作废</el-button>
          <el-button size="mini" type="primary" @click="edit(row)">收卷</el-button>
          <el-button size="mini" type="success" @click="edit(row)">加时</el-button>
          <el-popover
            v-show="row.status === 'temp'"
            placement="right"
            width="400"
            trigger="click">
            <el-form :model="addTimeForm" ref="addTimeForm" :rules="addTimeRule">
              <el-form-item label="学员">
                <div>{{ row.userName }}</div>
              </el-form-item>
              <el-form-item label="加多少分钟">
                <el-input v-model="addTimeForm.addTimeM" type="number" size="small"/>
              </el-form-item>
              <el-form-item>
                <el-button size="mini" type="success" @click="handlerAddTime(row)">加时</el-button>
              </el-form-item>
            </el-form>
            <el-button size="mini" slot="reference">加时</el-button>
          </el-popover>
          <el-button v-show="row.status === 'temp'" size="mini" type="danger" @click="handleNullify(row)">作弊</el-button>
          <el-popconfirm
            v-show="row.status === 'temp'"
            title="确定要强制提交该学员的试卷吗？"
            @confirm="handlerForceSubmit(row.userId)"
          >
            <el-button size="mini" type="primary" slot="reference">收卷</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" :page.sync="queryParam.pageIndex" :limit.sync="queryParam.pageSize"
      @pagination="search" />
    <pagination v-show="total > 0" :total="total" :page.sync="queryParam.currentPage" :limit.sync="queryParam.pageSize"
                @pagination="search"/>

    <el-dialog :visible.sync="visible" width="400px">
      <el-form :model="form" ref="form" label-width="100px" v-loading="formLoading" :rules="rules">
        <el-form-item label="名称：" prop="name" required>
          <el-input v-model="form.name" maxlength="10" show-word-limit />
        <el-form-item label="名称：" prop="name">
          <el-input v-model="form.name" maxlength="10" show-word-limit/>
        </el-form-item>
        <el-form-item label="排序：" prop="itemOrder" required>
          <el-input-number v-model="form.itemOrder" type="number" :min="1" :max="100" />
        <el-form-item label="排序：" prop="itemOrder">
          <el-input-number v-model="form.itemOrder" type="number" :min="1" :max="100"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">提交</el-button>
@@ -48,17 +71,17 @@
<script>
import { mapGetters, mapState } from 'vuex'
import Pagination from '@/components/Pagination'
import { monitorList } from '@/api/exam'
import { monitorList, addTime, forceSubmit } from '@/api/exam'
import cheatApi from '@/api/cheat'

export default {
  components: { Pagination },
  data() {
  data () {
    return {
      listLoading: true,
      queryParam: {
        examId: '',
        pageIndex: 1,
        currentPage: 1,
        pageSize: 10
      },
      formLoading: false,
@@ -69,6 +92,16 @@
        name: '',
        itemOrder: ''
      },
      addTimeForm: {
        examId: null,
        userId: null,
        userName: '',
        addTimeM: 1  // 添加多少分钟
      },
      forceSubmitForm: {
        examId: null,
        userId: null
      },
      visible: false,
      rules: {
        name: [
@@ -78,28 +111,59 @@
          { required: true, message: '请输入排序', trigger: 'blur', type: 'number' }
        ]
      },
    };
      addTimeRule: {
        userId: [
          { required: true, message: '请选择为谁加时', trigger: 'blur' }
        ],
        addTimeSecond: [
          { required: true, message: '请输入加时时间', trigger: 'blur' }
        ]
      },
    }
  },
  created() {
    this.queryParam.examId = this.$route.query.examId;
  created () {
    this.queryParam.examId = this.$route.query.examId
    this.search()
  },
  methods: {
    handleNullify(row) {
      let cheatObj = { examId: row.examId, cheatUser: row.userId };
      cheatApi.edit(cheatObj).then(res => {
        this.$message.success(res.message);
    // 处理加时
    handlerAddTime (row) {
      this.$refs['addTimeForm'].validate((valid) => {
        if (valid) {
          this.addTimeForm.examId = this.queryParam.examId
          this.addTimeForm.userId = row.userId
          addTime(this.addTimeForm).then(res => {
            this.$message.success('加时成功')
          })
        }
      })
    },
    statusFormatter(row) {
    // 强制交卷
    handlerForceSubmit (userId) {
      this.forceSubmitForm.examId = this.queryParam.examId
      this.forceSubmitForm.userId = userId
      forceSubmit(this.forceSubmitForm).then(res => {
        this.$message.success('强制交卷成功')
        this.search()
      })
    },
    handleNullify (row) {
      let cheatObj = { examId: row.examId, cheatUser: row.userId }
      cheatApi.edit(cheatObj).then(res => {
        this.$message.success(res.message)
      })
    },
    statusFormatter (row) {
      if (row.status === 'temp') {
        return '进行中'
      } else if (row.status === 'finish') {
        return '已结束'
      } else if (!row.status) {
        return '未开始'
      }
    },
    // 获取列表
    search() {
    search () {
      this.listLoading = true
      monitorList(this.queryParam).then(re => {
        re = re.data
@@ -110,17 +174,17 @@
        this.listLoading = false
      })
    },
    edit(row) {
    edit (row) {
      cheatApi.select(row.id).then(re => {
        if (re.code === 1) {
          this.form = re.data;
          this.visible = true;
          this.form = re.data
          this.visible = true
        } else {
          this.$message.error(re.message)
        }
      })
    },
    status(row) {
    status (row) {
      let question = {
        id: row.id,
        status: row.status === '禁用' ? '启用' : '禁用'
@@ -134,7 +198,7 @@
        }
      })
    },
    deletecheat(row) {
    deletecheat (row) {
      let _this = this
      cheatApi.deletecheat(row.id).then(re => {
        if (re.code === 1) {
@@ -145,7 +209,7 @@
        }
      })
    },
    submitForm() {
    submitForm () {
      let _this = this
      this.$refs.form.validate((valid) => {
        if (valid) {
@@ -165,7 +229,7 @@
        }
      })
    },
    resetForm() {
    resetForm () {
      let lastId = this.form.id
      this.$refs['form'].resetFields()
      this.form.id = lastId