chore: 试卷批阅修改为Drawer 抽屉弹出

src/modules/exam/components/QuestionItem.vue

@@ -37,8 +37,7 @@
               controls-position="right"
               :min="0"
               :max="questionData.score"
-              size="mini"
-            ></el-input-number>
+              size="mini"></el-input-number>
           </div>
         </div>
         <el-input
@@ -46,8 +45,7 @@
           placeholder="请输入评语"
           v-model="questionData.comment"
           rows="3"
-          :disabled="questionData.checked_flag"
-        />
+          :disabled="questionData.checked_flag" />
         <div style="text-align: center; padding-top: 10px">
           <el-button type="primary" size="mini" @click="fetchComment" :disabled="questionData.checked_flag"
             >提交点评</el-button
@@ -74,7 +72,6 @@ export default {
   },
   data() {
     return {
-      bc: null,
       questionData: {},
       showComment: false,
       comment: ''
@@ -98,9 +95,6 @@ export default {
   created() {
     this.questionData = JSON.parse(JSON.stringify(this.question.item))
   },
-  destroyed() {
-    this.bc && this.bc.close()
-  },
   methods: {
     fetchComment() {
       const params = {
@@ -116,8 +110,6 @@ export default {
         } else {
           this.$message.success('提交点评失败')
         }
-        this.bc = new BroadcastChannel('exam')
-        this.bc.postMessage({ action: 'refetch' })
       })
     }
   }

src/modules/exam/views/Detail.vue

@@ -48,12 +48,9 @@
         </el-dropdown>
       </div>
       <template v-slot:table-x="{ row }">
-        <router-link
-          :to="{ path: 'markingPaper', query: { eid: exam_id, sid: row.student_id } }"
-          v-permission="'admin_exam_exam_sheet_detail'"
+        <el-button type="text" @click="handleView(row)" v-permission="'admin_exam_exam_sheet_detail'"
+          >查看详情</el-button
         >
-          <el-button type="text">查看详情</el-button>
-        </router-link>
       </template>
       <el-dialog title="转移考生" :visible.sync="dialogVisible" width="40%">
         <div>
@@ -73,10 +70,18 @@
       </el-dialog>
     </app-list>
     <input type="text" style="opacity: 0" id="copyInput" />
+    <el-drawer title="批阅试卷" :visible.sync="drawer" append-to-body destroy-on-close size="80%" @close="refetchList">
+      <MarkingPaper
+        :exam_id="exam_id"
+        :student_id="currentRow.student_id"
+        style="margin: 0 20px"
+        v-if="currentRow && drawer"></MarkingPaper>
+    </el-drawer>
   </app-card>
 </template>
 
 <script>
+import MarkingPaper from './MarkingPaper.vue'
 import {
   getExamPaperDetail,
   deleteStudent,
@@ -96,6 +101,7 @@ const stuStatus = [
 ]
 
 export default {
+  components: { MarkingPaper },
   data() {
     return {
       visible: false,
@@ -103,7 +109,8 @@ export default {
       dialogVisible: false,
       transferList: [],
       transfer_exam_id: '',
-      bc: null
+      drawer: false,
+      currentRow: null
     }
   },
   computed: {
@@ -287,20 +294,20 @@ export default {
         this.$message.success('考生转移成功')
         this.dialogVisible = false
       })
+    },
+    // 刷新列表
+    refetchList() {
+      // 刷新列表
+      this.$refs.list.refetch()
+    },
+    handleView(row) {
+      this.currentRow = row
+      this.drawer = true
     }
   },
   mounted() {
     // 获取转移列表
     this.getTransferList()
-    this.bc = new BroadcastChannel('exam')
-    this.bc.onmessage = ({ data }) => {
-      if (data.action === 'refetch') {
-        this.$refs.list.refetch()
-      }
-    }
-  },
-  destroyed() {
-    this.bc && this.bc.close()
   }
 }
 </script>

src/modules/exam/views/MarkingPaper.vue

@@ -4,8 +4,7 @@
       :options="{ item, sheet_id: questionData.sheet_id, question_item_id: item.question_item_id }"
       :question_item_id="item.question_item_id"
       :key="item.question_item_id"
-      v-for="item in questionList"
-    />
+      v-for="item in questionList" />
   </div>
 </template>
 
@@ -13,7 +12,7 @@
 import { getPaperDetails } from '../api.js'
 import PaperQuestion from '../components/PaperQuestion.vue'
 export default {
-  // props: { id: { type: String } },
+  props: { exam_id: { type: String }, student_id: { type: String } },
   components: { PaperQuestion },
   data() {
     return {
@@ -23,10 +22,10 @@ export default {
   },
   computed: {
     eid() {
-      return this.$route.query.eid
+      return this.exam_id || this.$route.query.eid
     },
     sid() {
-      return this.$route.query.sid
+      return this.student_id || this.$route.query.sid
     }
   },
   beforeMount() {