进度详情新增考试记录

src/features/examwork/StudentManagement/StudentManagementDialog.vue

@@ -68,6 +68,10 @@ export default {
   name: "StudentManagementDialog",
   props: {
     student: Object,
+    fromPage: {
+      type: String,
+      default: "student",
+    },
   },
   watch: {
     student() {
@@ -123,11 +127,16 @@ export default {
       this.searchForm();
     },
     async searchForm() {
-      const res = await searchStudentExamRecord({
+      let datas = {
         studentId: this.student.id,
         pageNumber: this.currentPage,
         pageSize: this.pageSize,
-      });
+      };
+      //
+      if (this.student.examId) {
+        datas.examId = this.student.examId;
+      }
+      const res = await searchStudentExamRecord(datas);
       this.tableData = res.data.data.records;
       this.total = res.data.data.total;
       if (this.total > 0 && this.tableData.length === 0) {
@@ -136,7 +145,11 @@ export default {
     },
     // monitor record
     openMonitorRecord(row) {
-      console.log(row);
+      if (this.fromPage !== "student") {
+        this.$emit("to-track", row);
+        return;
+      }
+
       window.sessionStorage.setItem(
         "studentTrackMonitorRecord",
         row.monitorRecord

src/features/examwork/StudentManagement/StudentTrackRecord.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="student-track-record">
-    <div class="student-track-head box-justify">
+    <div v-if="!propData" class="student-track-head box-justify">
       <h2 class="student-track-title">轨迹回放</h2>
       <el-button size="mini" icon="el-icon-arrow-left" @click="goBack"
         >返回列表</el-button
@@ -153,10 +153,16 @@ import {
 export default {
   name: "StudentTrackRecord",
   components: { SimpleImagePreview, StudentMonitorRecordDialog },
+  props: {
+    propData: {
+      type: Object,
+      default: null,
+    },
+  },
   data() {
     return {
       filter: {
-        examRecordId: this.$route.params.examRecordId,
+        examRecordId: "",
         monitorRecord: "",
         log: true,
       },
@@ -183,14 +189,21 @@ export default {
     };
   },
   mounted() {
-    const studentTrackMonitorRecord = window.sessionStorage.getItem(
-      "studentTrackMonitorRecord"
-    );
+    let studentTrackMonitorRecord = null;
+    if (this.propData) {
+      this.filter.examRecordId = this.propData.examRecordId;
+      studentTrackMonitorRecord = this.propData.monitorRecord;
+    } else {
+      this.filter.examRecordId = this.$route.params.examRecordId;
+      studentTrackMonitorRecord = window.sessionStorage.getItem(
+        "studentTrackMonitorRecord"
+      );
+    }
+
     if (!studentTrackMonitorRecord) {
       this.$message.error("数据丢失，请退出本页");
       return;
     }
-
     this.monitorRecordList = studentTrackMonitorRecord
       .split(",")
       .map((item) => {

src/features/examwork/StudentManagement/StudentTrackRecordDialog.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="">
+    <el-dialog
+      class="student-track-record-dialog"
+      :visible.sync="dialogVisible"
+      :close-on-press-escape="false"
+      :close-on-click-modal="false"
+      title="轨迹回放"
+      append-to-body
+      fullscreen
+    >
+      <StudentTrackRecord v-if="dialogVisible" :prop-data="data" />
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import StudentTrackRecord from "./StudentTrackRecord.vue";
+export default {
+  name: "StudentTrackRecordDialog",
+  components: { StudentTrackRecord },
+  props: {
+    data: {
+      type: Object,
+      default: null,
+    },
+  },
+  data() {
+    return { dialogVisible: false };
+  },
+  methods: {
+    openDialog() {
+      this.dialogVisible = true;
+    },
+    closeDialog() {
+      this.dialogVisible = false;
+    },
+  },
+};
+</script>

src/features/invigilation/ProgressDetail/ProgressDetail.vue

@@ -8,7 +8,7 @@
         <el-form ref="FilterForm" label-position="left" inline>
           <el-form-item>
             <el-select
-              v-model="filter.examId"
+              v-model="form.examId"
               placeholder="请选择批次"
               @change="examChange"
             >
@@ -22,7 +22,7 @@
           </el-form-item>
           <el-form-item>
             <el-select
-              v-model="filter.roomCode"
+              v-model="form.roomCode"
               placeholder="请选择考场"
               clearable
             >
@@ -36,7 +36,7 @@
           </el-form-item>
           <el-form-item>
             <el-select
-              v-model="filter.courseCode"
+              v-model="form.courseCode"
               placeholder="请选择科目"
               clearable
             >
@@ -49,7 +49,7 @@
             </el-select>
           </el-form-item>
           <el-form-item>
-            <el-select v-model="filter.status" placeholder="进度状态" clearable>
+            <el-select v-model="form.status" placeholder="进度状态" clearable>
               <el-option
                 v-for="(val, key) in BOOLEAN_TYPE"
                 :key="key"
@@ -60,14 +60,14 @@
           </el-form-item>
           <el-form-item>
             <el-input
-              v-model.trim="filter.name"
+              v-model.trim="form.name"
               placeholder="姓名"
               clearable
             ></el-input>
           </el-form-item>
           <el-form-item>
             <el-input
-              v-model.trim="filter.identity"
+              v-model.trim="form.identity"
               placeholder="证件号"
               clearable
             ></el-input>
@@ -81,8 +81,8 @@
         <summary-line
           class="part-filter-info-main"
           data-type="progress"
-          :exam-id="filter.examId"
-          v-if="filter.examId"
+          :exam-id="form.examId"
+          v-if="form.examId"
         ></summary-line>
         <div class="part-filter-info-sub">
           <el-button
@@ -121,19 +121,42 @@
         label="剩余考试次数"
       ></el-table-column>
       <el-table-column prop="status" label="完成状态"></el-table-column>
+      <el-table-column :context="_self" label="操作" width="120" fixed="right">
+        <div slot-scope="scope">
+          <el-button
+            size="mini"
+            type="primary"
+            plain
+            @click="openExamRecord(scope.row)"
+          >
+            考试记录
+          </el-button>
+        </div>
+      </el-table-column>
     </el-table>
     <div class="part-page">
       <el-pagination
         background
         layout="prev, pager, next,total,sizes,jumper"
-        :current-page="current"
+        :current-page="currentPage"
         :total="total"
-        :page-size.sync="size"
+        :page-size.sync="pageSize"
         @size-change="toPage(1)"
         @current-change="toPage"
       >
       </el-pagination>
     </div>
+
+    <StudentManagementDialog
+      ref="theDialog"
+      :student="selectedStudent"
+      from-page="invigilation"
+      @to-track="toTrack"
+    />
+    <StudentTrackRecordDialog
+      ref="StudentTrackRecordDialog"
+      :data="selectedStudentTrack"
+    />
   </div>
 </template>
 
@@ -148,13 +171,19 @@ import SummaryLine from "../common/SummaryLine";
 import { downloadBlob } from "@/utils/utils";
 import { mapState, mapActions, mapMutations } from "vuex";
 import { BOOLEAN_TYPE } from "@/constant/constants";
+import StudentManagementDialog from "../../examwork/StudentManagement/StudentManagementDialog";
+import StudentTrackRecordDialog from "../../examwork/StudentManagement/StudentTrackRecordDialog";
 
 export default {
   name: "progress-detail",
-  components: { SummaryLine },
+  components: {
+    SummaryLine,
+    StudentManagementDialog,
+    StudentTrackRecordDialog,
+  },
   data() {
     return {
-      filter: {
+      form: {
         examId: "",
         roomCode: "",
         courseCode: "",
@@ -162,9 +191,9 @@ export default {
         identity: "",
         status: null,
       },
-      current: 1,
+      currentPage: 1,
       total: 0,
-      size: 10,
+      pageSize: 10,
       BOOLEAN_TYPE,
       examBatchs: [],
       examActivities: [],
@@ -172,6 +201,8 @@ export default {
       examCourses: [],
       dataList: [],
       isDownload: false,
+      selectedStudent: {},
+      selectedStudentTrack: null,
     };
   },
   computed: {
@@ -190,16 +221,17 @@ export default {
         exams: this.examBatchs,
         selectedExamId: this.selectedExamId,
       });
-      this.filter.examId = this.selectedExamId;
-      // this.filter.examId = this.examBatchs[0] && this.examBatchs[0].id;
-      this.toPage(1);
+      this.form.examId = this.selectedExamId;
+      // this.form.examId = this.examBatchs[0] && this.examBatchs[0].id;
       this.getExamActivityRoomList();
+      this.toPage(1);
+      window.sessionStorage.removeItem("studentManageCache");
     },
     async getList() {
       const datas = {
         ...this.filter,
-        pageNumber: this.current,
-        pageSize: this.size,
+        pageNumber: this.currentPage,
+        pageSize: this.pageSize,
       };
 
       const res = await progressDetailList(datas);
@@ -207,10 +239,10 @@ export default {
       this.dataList = res.data.data.records;
       this.total = res.data.data.total;
     },
-    toPage(page) {
-      this.setSelectedExamId(this.filter.examId);
-      this.current = page;
-      this.getList();
+    async toPage(page) {
+      this.setSelectedExamId(this.form.examId);
+      this.currentPage = page;
+      await this.getList();
     },
     async getExamBatchList() {
       const user = this.$store.state.user;
@@ -219,16 +251,16 @@ export default {
       this.examBatchs = res.data.data;
     },
     async getExamActivityRoomList() {
-      if (!this.filter.examId) return;
-      const res = await examActivityRoomList(this.filter.examId);
+      if (!this.form.examId) return;
+      const res = await examActivityRoomList(this.form.examId);
       this.examActivities = res.data.data.examActivitys;
       this.examRooms = res.data.data.examRooms;
       this.examCourses = res.data.data.examCourses;
     },
     examChange() {
-      this.filter.examActivityId = null;
-      this.filter.roomCode = null;
-      this.filter.courseCode = null;
+      this.form.examActivityId = null;
+      this.form.roomCode = null;
+      this.form.courseCode = null;
       this.getExamActivityRoomList();
     },
     async toExport() {
@@ -245,6 +277,15 @@ export default {
         this.$message.error("导出失败，请重新尝试！");
       }
     },
+    openExamRecord(user) {
+      this.selectedStudent = { ...user, id: user.studentId };
+      this.$refs.theDialog.openDialog();
+    },
+    toTrack(trackInfo) {
+      this.selectedStudentTrack = trackInfo;
+      console.log(trackInfo);
+      this.$refs.StudentTrackRecordDialog.openDialog();
+    },
   },
 };
 </script>

src/styles/base.scss

@@ -2076,3 +2076,24 @@ body {
     margin: 20px 0 0;
   }
 }
+.student-track-record-dialog{
+  .el-dialog{
+    border-radius: 0;
+  }
+  .el-dialog__body{
+    position: absolute;
+    width: 100%;
+    top: 58px;
+    bottom: 0;
+    background-color: #f0f4f9;
+  }
+  .student-track-record{
+    position: relative;
+    height: 0;
+    top: auto;
+    left: auto;
+    bottom: auto;
+    right: auto;
+    height: 100%;
+  }
+}