From 1bff236fdad53af7f5616ddeedba47af3df7b7e9 Mon Sep 17 00:00:00 2001 From: xiangpei <xiangpei@timesnew.cn> Date: 星期四, 13 六月 2024 09:38:28 +0800 Subject: [PATCH] 考试管理 --- src/views/exam/exam/ExamManage.vue | 364 ++++++++++++++++++++------------------------------- 1 files changed, 145 insertions(+), 219 deletions(-) diff --git a/src/views/exam/exam/ExamManage.vue b/src/views/exam/exam/ExamManage.vue index f609511..472322f 100644 --- a/src/views/exam/exam/ExamManage.vue +++ b/src/views/exam/exam/ExamManage.vue @@ -1,100 +1,89 @@ <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="210px"> + <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 + 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,7 +104,8 @@ </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"> @@ -140,27 +130,28 @@ </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: "", + examPlace: '', + status: '', + startTime: '', + endTime: '', time: [], }, examRules: { @@ -184,73 +175,72 @@ ], }, 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) { + 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) { + deleteExam (id) { deleteExamById(id).then(res => { - this.$message.success("鍒犻櫎鎴愬姛") + this.$message.success('鍒犻櫎鎴愬姛') this.page() }) }, - handlerEdit(row) { + handlerEdit (row) { this.examForm = row this.examForm.time = [row.startTime, row.endTime] - this.title = "淇敼鑰冭瘯" + this.title = '淇敼鑰冭瘯' this.open = true }, - addOrEditExam() { + addOrEditExam () { this.$refs['examForm'].validate((valid) => { if (valid) { this.examForm.startTime = this.examForm.time[0] @@ -259,119 +249,55 @@ 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: '', + endTime: '', } }, - 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> -- Gitblit v1.8.0