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