考试管理

xiangpei

2024-06-11 241255fbe2b6db3b2ed263f1e5a9956f5f9a0ee2

考试管理

 src/api/classes.js

@@ -9,6 +9,14 @@
    })
}

// 我的班级
export const myClasses = () => {
  return axios({
    url: "/api/admin/classes/my",
    method: "GET"
  })
}

// 获取班级列表
export const getClassesList = () => {
    return axios({

 src/api/exam.js

New file
@@ -0,0 +1,61 @@
import axios from "./request";

// 获取考试分页
export const getExams = (params) => {
    return axios({
        url: "/api/exam/page",
        method: "GET",
        params: params
    })
}

// 获取考试列表
export const getExamList = () => {
    return axios({
        url: "/api/exam/list",
        method: "GET"
    })
}

// 通过id获取考试
export const getExamById = (params) => {
    return axios({
        url: "/api/exam/" + params,
        method: "GET"
    })
}

// 通过id删除考试
export const deleteExamById = (params) => {
    return axios({
        url: "/api/exam/" + params,
        method: "DELETE"
    })
}

// 批量删除考试
export const deleteExamByIds = (params) => {
    return axios({
        url: "/api/exam/batch",
        method: "DELETE",
        data: params
    })
}

// 修改考试
export const editExam = (params) => {
    return axios({
        url: "/api/exam/",
        method: "PUT",
        data: params
    })
}

// 添加考试
export const addExam = (params) => {
    return axios({
        url: "/api/exam/",
        method: "POST",
        data: params
    })
}

 src/api/examPaper.js

@@ -1,9 +1,10 @@
import { post } from '@/utils/request'
import { post,get } from '@/utils/request'

export default {
  pageList: query => post('/api/admin/exam/paper/page', query),
  addPaper: query => post('/api/admin/exam/paper/addPaper', query),
  edit: query => post('/api/admin/exam/paper/edit', query),
  select: id => post('/api/admin/exam/paper/select/' + id),
  deletePaper: id => post('/api/admin/exam/paper/delete/' + id)
  deletePaper: id => post('/api/admin/exam/paper/delete/' + id),
  myExamPaperList: param => get('/api/admin/exam/paper/my', param),
}

 src/router.js

@@ -45,7 +45,7 @@
      {
        path: '/',
        name: 'examIndex',
        component: () => import('@/views/Exam/Exam.vue')
        component: () => import('@/views/Exam/ExamManage.vue')
      },
      {
        path: 'myexam',

 src/views/Exam/ExamManage.vue

New file
@@ -0,0 +1,317 @@
<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.className" size="small" clearable @clear="page" placeholder="班级名称"></el-input>
              </el-form-item>
              <el-form-item label="考试班级">
                <el-select v-model="searchForm.classesId" size="small" clearable @change="page" placeholder="班级状态">
                  <el-option label="正常" value="normal"></el-option>
                  <el-option label="解散" value="dissolution"></el-option>
                </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="examName"
                ></el-table-column>
                <el-table-column
                  label="参考班级"
                  prop="examClasses"
                ></el-table-column>
                <el-table-column
                  label="班级人数"
                  prop="studentNum"
                ></el-table-column>
                <el-table-column
                  label="考试地点"
                  prop="site"
                ></el-table-column>
                <el-table-column
                  label="考试科目"
                  prop="subject"
                ></el-table-column>
                <el-table-column label="状态" prop="type" :formatter="formatterType">
                </el-table-column>
                <el-table-column
                  label="考试时间"
                  prop="ctime"
                ></el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button
                      class="deepBlue"
                      colorType="blue"
                    >修改
                    </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>

    </div>


    <el-dialog width="35%" :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-input v-model="examForm.examName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="参考班级" :label-width="formLabelWidth" prop="classesId">
          <el-input v-model="examForm.classesId" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="试卷类型" :label-width="formLabelWidth" prop="examPaperType">
          <el-input v-model="examForm.examPaperType" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="考试试卷" :label-width="formLabelWidth" prop="examPaperId">
          <el-input v-model="examForm.examPaperId" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="考试地点" :label-width="formLabelWidth" prop="examPlace">
          <el-input v-model="examForm.examPlace" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="开始时间" :label-width="formLabelWidth" prop="startTime">
          <el-input v-model="examForm.startTime" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="结束时间" :label-width="formLabelWidth" prop="endTime">
          <el-input v-model="examForm.endTime" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeHandler">取 消</el-button>
        <el-button type="primary" @click="addOrEditExam">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination"
import { getExams, addExam, editExam, deleteExamById } from "@/api/exam"
import { myClasses } from "@/api/classes"
import { myExamPaperList } from "@/api/examPaper"
export default {
  components: { Pagination },
  data() {
    return {
      formLabelWidth: "80px",
      classesList: [],
      examPaperList: [],
      examForm: {
        id: null,
        examName: "",
        examPaperId: "",
        classesId: "",
        examPaperType: "",
        examPlace: "",
        status: "",
        startTime: "",
        endTime: "",
      },
      examRules: {
        examName: [
          { required: true, message: '请输入考试名称', trigger: 'blur' }
        ],
        examPaperId: [
          { required: true, message: '请选择考试试卷', trigger: 'change' }
        ],
        classesId: [
          { required: true, message: '请选择参考班级', trigger: 'change' }
        ],
        examPaperType: [
          { required: true, message: '请选择试卷类型', trigger: 'change' }
        ],
        examPlace: [
          { required: true, message: '请输入考试地点', trigger: 'blur' }
        ],
        startTime: [
          { required: true, message: '请选择开始时间', trigger: 'change' }
        ],
        endTime: [
          { required: true, message: '请选择结束时间', trigger: 'change' }
        ],
      },
      total: 0,
      title: "安排考试",
      open: false,
      searchForm: {
        examName: "",
        subject: null,
        pageIndex: 1,
        pageSize: 10
      },
      tableData: [
      ],
    };
  },
  mounted() {
    this.page();
  },
  methods: {
    getMyExamPaperList() {
      if (! this.examForm.examPaperType) {
        return
      }
      let param = {
        "paperType": this.examForm.examPaperType
      }
      myExamPaperList(param).then(res => {
        this.examPaperList = res.data
      })
    },
    getMyClasses() {
      myClasses().then(res => {
        this.classesList = res.data.data
      })
    },
    deleteExam(id) {
      deleteExamById(id).then(res => {
        this.$message.success("删除成功")
      })
    },
    addOrEditExam() {
      this.$refs['examForm'].validate((valid) => {
        if (valid) {
          if (this.examForm.id) {
            editExam(this.examForm).then(res => {
              this.$message.success("操作成功")
            })
          } else {
            addExam(this.examForm).then(res => {
              this.$message.success("操作成功")
            })
          }
        }
      })
    },
    clearForm() {
      this.examForm = {
        id: null,
        examName: "",
        examPaperId: "",
        classesId: "",
        examPaperType: "",
        examPlace: "",
        status: "",
        startTime: "",
        endTime: "",
      }
    },
    closeHandler() {
      this.open = false
      this.clearForm()
    },
    openAdd() {
      this.title = this.examForm.id ? "修改考试" : "安排考试"
      this.open = true
    },
    formatterType(row) {
    },
    page() {
      getExams(this.searchForm).then(res => {
        this.tableData = res.data.data
      })
    },
    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>

 src/views/Manage/ClassManagement/Class.vue

@@ -11,16 +11,17 @@
            <div>
              <el-button
                type="primary"
                size="small"
                style="margin-right:20px;"
                @click="handlerAdd"
              >新增班级</el-button>
            </div>
            <el-form :inline="true" :model="searchForm" class="demo-form-inline">
              <el-form-item label="班级名称">
                <el-input v-model="searchForm.className" clearable @clear="page" placeholder="班级名称"></el-input>
                <el-input v-model="searchForm.className" size="small" clearable @clear="page" placeholder="班级名称"></el-input>
              </el-form-item>
              <el-form-item label="班级状态">
                <el-select v-model="searchForm.status" clearable @change="page" placeholder="班级状态">
                <el-select v-model="searchForm.status" size="small" clearable @change="page" placeholder="班级状态">
                  <el-option label="正常" value="normal"></el-option>
                  <el-option label="解散" value="dissolution"></el-option>
                </el-select>
@@ -92,10 +93,10 @@
                  fixed="right"
                >
                  <template slot-scope="scope">
                    <el-button size="small" @click="handlerEdit(scope.row)" type="primary">修改</el-button>
                    <el-button size="small" type="warning">班级验证</el-button>
                    <el-button size="small" @click="handlerOpenNotify(scope.row)" type="info">通知</el-button>
                    <el-button @click="studentManager(scope.row.id)" size="small" type="success">成员管理</el-button>
                    <el-button v-if="scope.row.status !== '解散'" size="small" @click="handlerEdit(scope.row)" type="primary">修改</el-button>
                    <el-button v-if="scope.row.status !== '解散'" size="small" type="warning">班级验证</el-button>
                    <el-button v-if="scope.row.status !== '解散'" size="small" @click="handlerOpenNotify(scope.row)" type="info">通知</el-button>
                    <el-button v-if="scope.row.status !== '解散'" @click="studentManager(scope.row.id)" size="small" type="success">成员管理</el-button>
                    <el-button v-if="scope.row.status !== '解散'" @click="dissolution(scope.row.id)" type="danger" size="small">解散</el-button>
                  </template>
                </el-table-column>