优化

luohairen

2024-10-31 3fdb38dd19c8a61d91d789c83074a7e8a3c10897

 src/views/exam/exam/ExamManage.vue

@@ -2,22 +2,46 @@
  <div class="app-container">
    <div style="display: flex; flex-direction: row">
      <div>
        <el-button type="primary" size="small" style="margin-right: 10px" @click="openAdd">安排考试</el-button>
        <el-button
          type="primary"
          size="small"
          style="margin-right: 10px"
          @click="openAdd"
          >安排考试</el-button
        >
      </div>
      <div>
        <el-form :inline="true" :model="searchForm" class="demo-form-inline">
          <el-form-item label="考试名称">
            <el-input v-model="searchForm.examName" @input="page" clearable size="small" @clear="page"
                      placeholder="班级名称"></el-input>
            <el-input
              v-model="searchForm.examName"
              @input="page"
              clearable
              size="small"
              @clear="page"
              placeholder="考试名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="参考班级">
            <el-select v-model="searchForm.classesId" @change="page" clearable size="small" @clear="page">
              <el-option v-for="classes in classesList" :key="classes.id" :value="classes.id"
                         :label="classes.className"/>
            <el-select
              v-model="searchForm.classesId"
              @change="page"
              clearable
              size="small"
              @clear="page"
            >
              <el-option
                v-for="classes in classesList"
                :key="classes.id"
                :value="classes.id"
                :label="classes.className"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="page" size="small">查询</el-button>
            <el-button type="primary" @click="page" size="small"
              >查询</el-button
            >
          </el-form-item>
        </el-form>
      </div>
@@ -52,11 +76,7 @@
        prop="status"
        :formatter="statusFormatter"
      ></el-table-column>
      <el-table-column
        label="考试时间"
        width="180px"
        algin="center"
      >
      <el-table-column label="考试时间" width="180px" algin="center">
        <template slot-scope="scope">
          <div>{{ scope.row.startTime }}</div>
          <div>至</div>
@@ -76,31 +96,54 @@
            @click="handlerEdit(scope.row)"
            v-if="scope.row.status === 'not_start'"
            v-show="scope.row.status !== 'cancel'"
          >修改
            >修改
          </el-button>
          <el-popconfirm
            v-if="scope.row.status === 'not_start'"
            v-show="scope.row.status !== 'cancel'"
            style="margin: 0 5px"
            title="确定要删除该考试吗？"
            @confirm="deleteExam(scope.row.id)"
            @confirm="deleteExam(scope.row)"
          >
            <el-button slot="reference" type="danger" size="small" v-show="scope.row.status !== 'cancel'">删除</el-button>
            <el-button
              slot="reference"
              type="danger"
              size="small"
              v-show="scope.row.status !== 'cancel'"
              >删除</el-button
            >
          </el-popconfirm>

          <el-button v-if="scope.row.status === 'finished'" type="success" size="small" @click="markPaper(scope.row)" v-show="scope.row.status !== 'cancel'">
          <el-button
            v-if="scope.row.status === 'finished'"
            type="success"
            size="small"
            @click="markPaper(scope.row)"
            v-show="scope.row.status !== 'cancel'"
          >
            阅卷
          </el-button>
          <el-button v-if="scope.row.status === 'ing'" type="warning" size="small" @click="monitor(scope.row)" v-show="scope.row.status !== 'cancel'">监控</el-button>
          <el-button
            v-if="scope.row.status === 'ing'"
            type="warning"
            size="small"
            @click="monitor(scope.row)"
            v-show="scope.row.status !== 'cancel'"
            >监控</el-button
          >
          <el-popconfirm
            class="confirm"
            style="margin: 0 5px"
            title="确定要作废该考试记录吗？"
            @confirm="cancel(scope.row.id)"
          >
            <el-button slot="reference" v-show="scope.row.status !== 'cancel'" type="danger"
                       size="small"
                       v-if="scope.row.status !== 'ing'">作废
            <el-button
              slot="reference"
              v-show="scope.row.status !== 'cancel'"
              type="danger"
              size="small"
              v-if="scope.row.status !== 'ing'"
              >作废
            </el-button>
          </el-popconfirm>
          <el-popconfirm
@@ -108,45 +151,98 @@
            title="确定要恢复该考试记录吗？"
            @confirm="recover(scope.row.id)"
          >
            <el-button slot="reference" v-show="scope.row.status === 'cancel'" type="success"
                       size="small">恢复正常
            <el-button
              slot="reference"
              v-show="scope.row.status === 'cancel'"
              type="success"
              size="small"
              >恢复正常
            </el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div
      class="flex"
      style="justify-content:center;margin-top:20px;"
    >
      <pagination v-show="total>0" :total="total" :page.sync="searchForm.pageIndex" :limit.sync="searchForm.pageSize"
                  @pagination="page"/>
    <div class="flex" style="justify-content: center; margin-top: 20px">
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="searchForm.currentPage"
        :limit.sync="searchForm.pageSize"
        @pagination="page"
      />
    </div>
    <el-dialog width="500px" :title="title" @close="closeHandler" :visible.sync="open" :destroy-on-close="true"
               :append-to-body="true" :close-on-click-modal="false">
    <el-dialog
      width="500px"
      :title="title"
      @close="closeHandler"
      :visible.sync="open"
      :destroy-on-close="true"
      :append-to-body="true"
      :close-on-click-modal="false"
    >
      <el-form :model="examForm" :rules="examRules" ref="examForm">
        <el-form-item label="考试名称" :label-width="formLabelWidth" prop="examName">
        <el-form-item
          label="考试名称"
          :label-width="formLabelWidth"
          prop="examName"
        >
          <el-input v-model="examForm.examName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="参考班级" :label-width="formLabelWidth" prop="classesId">
        <el-form-item
          label="参考班级"
          :label-width="formLabelWidth"
          prop="classesId"
        >
          <el-select v-model="examForm.classesId">
            <el-option v-for="classes in classesList" :key="classes.id" :value="classes.id" :label="classes.className"/>
            <el-option
              v-for="classes in classesList"
              :key="classes.id"
              :value="classes.id"
              :label="classes.className"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="试卷类型" :label-width="formLabelWidth" prop="examPaperType">
          <el-select v-model="examForm.examPaperType" @change="getMyExamPaperList">
        <el-form-item
          label="试卷类型"
          :label-width="formLabelWidth"
          prop="examPaperType"
        >
          <el-select
            v-model="examForm.examPaperType"
            @change="getMyExamPaperList"
          >
            <el-option label="固定试卷" :value="1"></el-option>
            <el-option label="随机试卷" :value="2"></el-option>
            <el-option label="随序试卷" :value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="考试试卷" :label-width="formLabelWidth" prop="examPaperId">
          <el-select v-model="examForm.examPaperId" :disabled="!examForm.examPaperType" placeholder="请先选择试卷类型">
            <el-option v-for="examPaper in examPaperList" :key="examPaper.id" :value="examPaper.id"
                       :label="examPaper.name"/>
        <el-form-item
          label="考试试卷"
          :label-width="formLabelWidth"
          prop="examPaperId"
        >
          <el-select
            @change="handleExamPaperSelect"
            v-model="examForm.examPaperId"
            :disabled="!examForm.examPaperType"
            placeholder="请先选择试卷类型"
          >
            <el-option
              v-for="examPaper in examPaperList"
              :key="examPaper.id"
              :value="examPaper.id"
              :label="examPaper.name"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="开始时间" :label-width="formLabelWidth" prop="time">
        <el-form-item v-show="examForm.examPaperId" label="考试时长">
          <div>{{ selectExamPaper.suggestTime }}分钟</div>
        </el-form-item>
        <el-form-item
          label="开始时间"
          :label-width="formLabelWidth"
          prop="time"
        >
          <el-date-picker
            v-model="examForm.time"
            type="datetimerange"
@@ -158,7 +254,11 @@
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="考试地点" :label-width="formLabelWidth" prop="examPlace">
        <el-form-item
          label="考试地点"
          :label-width="formLabelWidth"
          prop="examPlace"
        >
          <el-input v-model="examForm.examPlace" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
@@ -172,7 +272,14 @@

<script>
import Pagination from '@/components/Pagination'
import { getExams, addExam, editExam, deleteExamById, cancel, recover } from '@/api/exam'
import {
  getExams,
  addExam,
  editExam,
  deleteExamById,
  cancel,
  recover
} from '@/api/exam'
import { myClasses } from '@/api/classes'
import examPaperAPI from '@/api/examPaper'

@@ -195,6 +302,7 @@
        endTime: null,
        time: []
      },
      selectExamPaper: {},
      examRules: {
        examName: [
          { required: true, message: '请输入考试名称', trigger: 'blur' }
@@ -221,7 +329,7 @@
      searchForm: {
        examName: '',
        subject: null,
        pageIndex: 1,
        currentPage: 1,
        pageSize: 10
      },
      tableData: []
@@ -235,14 +343,14 @@
  methods: {
    // 作废考试
    cancel (id) {
      cancel(id).then(res => {
      cancel(id).then((res) => {
        this.$message.success(res.data.message)
        this.page()
      })
    },
    // 恢复考试
    recover (id) {
      recover(id).then(res => {
      recover(id).then((res) => {
        this.$message.success(res.data.message)
        this.page()
      })
@@ -253,7 +361,10 @@
    },
    markPaper (row) {
      // 跳转阅卷页面
      this.$router.push({ path: '/exam/mark/paper', query: { examName: row.examName, examId: row.id } })
      this.$router.push({
        path: '/exam/mark/paper',
        query: { examName: row.examName, examId: row.id }
      })
    },
    timeFormatter (row) {
      return row.startTime + '至' + row.endTime
@@ -271,9 +382,9 @@
    },
    MyExamPaperList () {
      let param = {
        'paperType': this.examForm.examPaperType
        paperType: this.examForm.examPaperType
      }
      examPaperAPI.myExamPaperList(param).then(res => {
      examPaperAPI.myExamPaperList(param).then((res) => {
        this.examForm.examPaperId = null
        this.examPaperList = res.data
      })
@@ -285,7 +396,7 @@
      this.MyExamPaperList()
    },
    getMyClasses () {
      myClasses().then(res => {
      myClasses().then((res) => {
        this.classesList = res.data.data
      })
    },
@@ -295,7 +406,7 @@
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteExamById(row.id).then(res => {
        deleteExamById(row.id).then((res) => {
          this.$message.success('删除成功')
          this.page()
        })
@@ -315,14 +426,14 @@
          this.examForm.startTime = this.examForm.time[0]
          this.examForm.endTime = this.examForm.time[1]
          if (this.examForm.id) {
            editExam(this.examForm).then(res => {
            editExam(this.examForm).then((res) => {
              this.open = false
              this.clearForm()
              this.$message.success('操作成功')
              this.page()
            })
          } else {
            addExam(this.examForm).then(res => {
            addExam(this.examForm).then((res) => {
              this.open = false
              this.clearForm()
              this.$message.success('操作成功')
@@ -354,10 +465,9 @@
      this.title = this.examForm.id ? '修改考试' : '安排考试'
      this.open = true
    },
    formatterType (row) {
    },
    formatterType (row) {},
    page () {
      getExams(this.searchForm).then(res => {
      getExams(this.searchForm).then((res) => {
        this.tableData = res.data.data
        this.total = res.data.total
      })
@@ -365,6 +475,9 @@
    routerTo (url) {
      this.$router.push(url)
    },
    handleExamPaperSelect (e) {
      this.selectExamPaper = this.examPaperList.find((o) => o.id === e)
    }
  }
}
</script>