From a38b2ce4cf02b6ac7069ac89517287bf78f4dfdf Mon Sep 17 00:00:00 2001
From: luohairen <3399054449@qq.com>
Date: 星期二, 29 十月 2024 14:13:56 +0800
Subject: [PATCH] 完成个人信息头像更换
---
src/views/exam/exam/ExamManage.vue | 599 +++++++++++++++++++++++++++++++++++------------------------
1 files changed, 354 insertions(+), 245 deletions(-)
diff --git a/src/views/exam/exam/ExamManage.vue b/src/views/exam/exam/ExamManage.vue
index f609511..667e3b9 100644
--- a/src/views/exam/exam/ExamManage.vue
+++ b/src/views/exam/exam/ExamManage.vue
@@ -1,133 +1,264 @@
<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"
+ @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>
+ </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 style="width: 100%">
+ <el-table-column
+ label="鑰冭瘯鍚嶇О"
+ width="150px"
+ prop="examName"
+ ></el-table-column>
+ <el-table-column
+ label="鑰冭瘯璇曞嵎"
+ prop="examPaperName"
+ width="200px"
+ ></el-table-column>
+ <el-table-column
+ label="鍙傝�冪彮绾�"
+ width="200px"
+ prop="className"
+ ></el-table-column>
+ <!-- <el-table-column-->
+ <!-- label="鐝骇浜烘暟"-->
+ <!-- prop="studentNum"-->
+ <!-- ></el-table-column>-->
+ <el-table-column
+ label="鑰冭瘯鍦扮偣"
+ prop="examPlace"
+ width="150px"
+ ></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="160px"
+ prop="createTime"
+ ></el-table-column>
+ <el-table-column label="鎿嶄綔" fixed="right" width="220px">
+ <template slot-scope="scope">
+ <el-button
+ type="primary"
+ size="small"
+ @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)"
+ >
+ <el-button
+ slot="reference"
+ type="danger"
+ size="small"
+ v-show="scope.row.status !== 'cancel'"
+ >鍒犻櫎</el-button
+ >
+ </el-popconfirm>
-
- <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-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-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>
+ </el-popconfirm>
+ <el-popconfirm
+ class="confirm"
+ title="纭畾瑕佹仮澶嶈鑰冭瘯璁板綍鍚楋紵"
+ @confirm="recover(scope.row.id)"
+ >
+ <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.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-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="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">
+ <el-form-item
+ label="鑰冭瘯鍦扮偣"
+ :label-width="formLabelWidth"
+ prop="examPlace"
+ >
<el-input v-model="examForm.examPlace" autocomplete="off"></el-input>
</el-form-item>
</el-form>
@@ -140,29 +271,38 @@
</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,
+ cancel,
+ recover
+} 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: []
},
+ selectExamPaper: {},
examRules: {
examName: [
{ required: true, message: '璇疯緭鍏ヨ�冭瘯鍚嶇О', trigger: 'blur' }
@@ -181,197 +321,166 @@
],
time: [
{ required: true, message: '璇烽�夋嫨鑰冭瘯鏃堕棿', trigger: 'change' }
- ],
+ ]
},
total: 0,
- title: "瀹夋帓鑰冭瘯",
+ title: '瀹夋帓鑰冭瘯',
open: false,
searchForm: {
- examName: "",
+ examName: '',
subject: null,
- pageIndex: 1,
+ currentPage: 1,
pageSize: 10
},
- tableData: [
- ],
- };
+ tableData: []
+ }
},
- mounted() {
- this.page();
+ mounted () {
+ this.page()
this.getMyClasses()
this.MyExamPaperList()
},
methods: {
- markPaper(row) {
+ // 浣滃簾鑰冭瘯
+ cancel (id) {
+ cancel(id).then((res) => {
+ this.$message.success(res.data.message)
+ this.page()
+ })
+ },
+ // 鎭㈠鑰冭瘯
+ recover (id) {
+ recover(id).then((res) => {
+ this.$message.success(res.data.message)
+ this.page()
+ })
+ },
+ // 鑰冭瘯鐩戞帶鍒楄〃
+ 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 '宸茬粨鏉�'
+ } else if (row.status === 'cancel') {
+ return '宸蹭綔搴�'
}
},
- MyExamPaperList() {
+ 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
})
},
- getMyExamPaperList() {
- if (! this.examForm.examPaperType) {
+ getMyExamPaperList () {
+ if (!this.examForm.examPaperType) {
return
}
this.MyExamPaperList()
},
- getMyClasses() {
- myClasses().then(res => {
+ 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]
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.$message.success('鎿嶄綔鎴愬姛')
this.page()
})
} else {
- addExam(this.examForm).then(res => {
+ 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) {
- },
- page() {
- getExams(this.searchForm).then(res => {
+ formatterType (row) {},
+ 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)
},
- },
-};
+ handleExamPaperSelect (e) {
+ this.selectExamPaper = this.examPaperList.find((o) => o.id === e)
+ }
+ }
+}
</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