bug

lohir

2024-10-16 eb010c8d0f12c4861d2fde556f8ca441ba5e10d9

 src/views/exam/exam/ExamManage.vue

@@ -1,100 +1,100 @@
<template>
  <div class="c">
    <div class="bg">
      <div class="main">
        <div class="main-1">
          <div class="main-btn">
            <el-button
              type="primary"
              @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" clearable @clear="page" placeholder="班级名称"></el-input>
              </el-form-item>
              <el-form-item label="参考班级">
                <el-select v-model="searchForm.classesId" @change="page" clearable @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-form-item>
            </el-form>
            <div>
              <el-table :data="tableData">
                <el-table-column
                  label="考试名称"
                  prop="examName"
                ></el-table-column>
                <el-table-column
                  label="考试试卷"
                  prop="examPaperName"
                ></el-table-column>
                <el-table-column
                  label="参考班级"
                  prop="className"
                ></el-table-column>
                <el-table-column
                  label="班级人数"
                  prop="studentNum"
                ></el-table-column>
                <el-table-column
                  label="考试地点"
                  prop="examPlace"
                ></el-table-column>
                <el-table-column
                  label="考试状态"
                  prop="status"
                  :formatter="statusFormatter"
                ></el-table-column>
                <el-table-column
                  label="创建时间"
                  width="150px"
                  prop="createTime"
                ></el-table-column>
                <el-table-column
                  label="考试时间"
                  width="200px"
                  algin="center"
                >
                  <template slot-scope="scope">
                    <div>{{scope.row.startTime}}</div>
                    <div>至</div>
                    <div>{{scope.row.endTime}}</div>
                  </template>
                </el-table-column>
                <el-table-column label="操作" fiexd="right" width="150px">
                  <template slot-scope="scope">
                    <el-button
                      type="primary"
                      size="small"
                      @click="handlerEdit(scope.row)"
                    >修改
                    </el-button>
                    <el-button type="danger" size="small" @click="deleteExam(scope.row.id)">删除</el-button>
                    <el-button type="success" size="small" @click="markPaper(scope.row)">阅卷</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <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>
          </div>
        </div>
  <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>
      </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" clearable @clear="page"
                      placeholder="班级名称"></el-input>
          </el-form-item>
          <el-form-item label="参考班级">
            <el-select v-model="searchForm.classesId" @change="page" clearable @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-form-item>
        </el-form>
      </div>
    </div>
    <el-table :data="tableData" border>
      <el-table-column
        label="考试名称"
        prop="examName"
      ></el-table-column>
      <el-table-column
        label="考试试卷"
        prop="examPaperName"
      ></el-table-column>
      <el-table-column
        label="参考班级"
        prop="className"
      ></el-table-column>
      <!--      <el-table-column-->
      <!--        label="班级人数"-->
      <!--        prop="studentNum"-->
      <!--      ></el-table-column>-->
      <el-table-column
        label="考试地点"
        prop="examPlace"
      ></el-table-column>
      <el-table-column
        label="考试状态"
        prop="status"
        :formatter="statusFormatter"
      ></el-table-column>
      <el-table-column
        label="考试时间"
        width="180px"
        algin="center"
      >
        <template slot-scope="scope">
          <div>{{ scope.row.startTime }}</div>
          <div>至</div>
          <div>{{ scope.row.endTime }}</div>
        </template>
      </el-table-column>
      <el-table-column
        label="创建时间"
        width="150px"
        prop="createTime"
      ></el-table-column>
      <el-table-column label="操作" fiexd="right" width="280px">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="small"
            @click="handlerEdit(scope.row)"
          >修改
          </el-button>
          <el-popconfirm
            v-if="scope.row.status === 'not_start'"
            style="margin: 0 5px"
            title="确定要删除该考试吗？"
            @confirm="deleteExam(scope.row.id)"
          >
            <el-button slot="reference" type="danger" size="small">删除</el-button>
          </el-popconfirm>


          <el-button v-if="scope.row.status === 'finished'" type="success" size="small" @click="markPaper(scope.row)">
            阅卷
          </el-button>
          <el-button type="warning" size="small" @click="monitor(scope.row)">监控</el-button>
        </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>
    <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">
@@ -115,16 +115,20 @@
        </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-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-date-picker
            v-model="examForm.time"
            type="daterange"
            type="datetimerange"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="考试地点" :label-width="formLabelWidth" prop="examPlace">
@@ -140,28 +144,29 @@
</template>

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

export default {
  components: { Pagination },
  data() {
  data () {
    return {
      formLabelWidth: "80px",
      formLabelWidth: '80px',
      classesList: [],
      examPaperList: [],
      examForm: {
        id: null,
        examName: "",
        examPaperId: "",
        classesId: "",
        examName: '',
        examPaperId: '',
        classesId: '',
        examPaperType: null,
        examPlace: "",
        status: "",
        startTime: "",
        endTime: "",
        time: [],
        examPlace: '',
        status: '',
        startTime: null,
        endTime: null,
        time: []
      },
      examRules: {
        examName: [
@@ -181,76 +186,87 @@
        ],
        time: [
          { required: true, message: '请选择考试时间', trigger: 'change' }
        ],
        ]
      },
      total: 0,
      title: "安排考试",
      title: '安排考试',
      open: false,
      searchForm: {
        examName: "",
        examName: '',
        subject: null,
        pageIndex: 1,
        pageSize: 10
      },
      tableData: [
      ],
    };
      tableData: []
    }
  },
  mounted() {
    this.page();
  mounted () {
    this.page()
    this.getMyClasses()
    this.MyExamPaperList()
  },
  methods: {
    markPaper(row) {
    // 考试监控列表
    monitor (row) {
      this.$router.push({ path: '/exam/monitor', query: { examId: row.id } })
    },
    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
    timeFormatter (row) {
      return row.startTime + '至' + row.endTime
    },
    statusFormatter(row) {
      if (row.status === "ing") {
        return "进行中"
      } else if (row.status === "not_start") {
        return "未开始"
      } else if (row.status === "finished") {
        return "已结束"
    statusFormatter (row) {
      if (row.status === 'ing') {
        return '进行中'
      } else if (row.status === 'not_start') {
        return '未开始'
      } else if (row.status === 'finished') {
        return '已结束'
      }
    },
    MyExamPaperList() {
    MyExamPaperList () {
      let param = {
        "paperType": this.examForm.examPaperType
        'paperType': this.examForm.examPaperType
      }
      examPaperAPI.myExamPaperList(param).then(res => {
        this.examForm.examPaperId = null
        this.examPaperList = res.data
      })
    },
    getMyExamPaperList() {
      if (! this.examForm.examPaperType) {
    getMyExamPaperList () {
      if (!this.examForm.examPaperType) {
        return
      }
      this.MyExamPaperList()
    },
    getMyClasses() {
    getMyClasses () {
      myClasses().then(res => {
        this.classesList = res.data.data
      })
    },
    deleteExam(id) {
      deleteExamById(id).then(res => {
        this.$message.success("删除成功")
        this.page()
    deleteExam (row) {
      this.$confirm('确认是否删除' + row.examName + '?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteExamById(row.id).then(res => {
          this.$message.success('删除成功')
          this.page()
        })
      })
    },
    handlerEdit(row) {
      this.examForm = row
      this.examForm.time = [row.startTime, row.endTime]
      this.title = "修改考试"
    handlerEdit (row) {
      this.examForm = {
        ...row,
        time: [row.startTime, row.endTime]
      }
      this.title = '修改考试'
      this.open = true
    },
    addOrEditExam() {
    addOrEditExam () {
      this.$refs['examForm'].validate((valid) => {
        if (valid) {
          this.examForm.startTime = this.examForm.time[0]
@@ -259,119 +275,56 @@
            editExam(this.examForm).then(res => {
              this.open = false
              this.clearForm()
              this.$message.success("操作成功")
              this.$message.success('操作成功')
              this.page()
            })
          } else {
            addExam(this.examForm).then(res => {
              this.open = false
              this.clearForm()
              this.$message.success("操作成功")
              this.$message.success('操作成功')
              this.page()
            })
          }
        }
      })
    },
    clearForm() {
    clearForm () {
      this.examForm = {
        id: null,
        examName: "",
        examPaperId: "",
        classesId: "",
        examPaperType: "",
        examPlace: "",
        status: "",
        startTime: "",
        endTime: "",
        examName: '',
        examPaperId: '',
        classesId: '',
        examPaperType: '',
        examPlace: '',
        status: '',
        startTime: null,
        endTime: null,
        time: []
      }
    },
    closeHandler() {
    closeHandler () {
      this.open = false
      this.clearForm()
    },
    openAdd() {
      this.title = this.examForm.id ? "修改考试" : "安排考试"
    openAdd () {
      this.title = this.examForm.id ? '修改考试' : '安排考试'
      this.open = true
    },
    formatterType(row) {
    formatterType (row) {
    },
    page() {
    page () {
      getExams(this.searchForm).then(res => {
        this.tableData = res.data.data
        this.total = res.data.total
      })
    },
    routerTo(url) {
      this.$router.push(url);
    routerTo (url) {
      this.$router.push(url)
    },
  },
};
  }
}
</script>

<style scoped lang="scss">
.flex {
  display: flex;
}

.mian-1-top {
  margin: 10px 0;
  align-items: center;

  & input {
    height: 30px;
    width: 200px;
    margin-right: 20px;
  }
}

// .c{
//     background-image:url('../../assets/img/loginBackground.jpg');
//     width:100vw;
//     height:calc(100vh - 75px);
//     background-size: cover;
// }
// .bg{
//     width:100%;
//     height:100%;
//     background: rgba(255,255,255,0.2);
//     display: flex;
//     justify-content: center;

// }
.main {
  &-title {
    border-left: 5px solid rgb(16, 71, 247);
    padding-left: 10px;
    margin: 50px 0;

    & p {
      font-weight: 700;
    }
  }

  &-1 {
    width: 1227px;
    height: 784px;
    background: white;
    box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    padding: 32px 40px;
  }

  &-btn {
    padding-bottom: 32px;
    border-bottom: 3px solid rgb(16, 71, 247);
  }
}

.deepBlue {
  background: rgb(16, 71, 247);
  color: white;
  border: none;

  &:hover {
    background-color: rgb(45, 92, 248);
  }
}
</style>