学生考试详情

src/views/student/components/StudentExamInfoCard.vue

@@ -49,7 +49,13 @@
         >
           结果报告
         </v-btn>
-        <v-btn color="info" class="mx-2">查看详情</v-btn>
+        <v-btn
+          color="info"
+          class="mx-2"
+          @click="onShowDetail"
+          :loading="showDetailLoading"
+          >查看详情</v-btn
+        >
       </v-col>
     </v-row>
     <v-row justify="space-between" dense>
@@ -72,16 +78,10 @@
     </v-row>
     <v-row no-gutters>
       <v-col>
-        <v-card-text class="pa-0 pb-5"
-          >职位: {{ examInfo.position }}</v-card-text
+        <v-card-text class="pa-0 pb-4"
+          >监考：{{ examInfo.antiCheating ? '是' : '否' }}</v-card-text
         >
       </v-col>
-      <v-col>
-        <v-card-text class="pa-0 pb-5"
-          >技能点: {{ examInfo.skills.join(' ') }}
-        </v-card-text>
-      </v-col>
-      <v-spacer></v-spacer>
     </v-row>
     <v-dialog v-model="inputInviteCode" max-width="500">
       <v-card class="pa-2 pt-3">
@@ -91,6 +91,38 @@
         </v-card-actions>
       </v-card>
     </v-dialog>
+    <v-dialog v-model="showDetail" max-width="500">
+      <v-card class="pa-2 pt-3">
+        <v-card-title>考试详情</v-card-title>
+        <v-row dense class="mx-5" justify="space-between">
+          <v-col>
+            <v-card-text class="pa-0 pb-5">
+              职位: {{ examInfo.position }}
+            </v-card-text>
+          </v-col>
+          <v-col>
+            <v-card-text class="pa-0 pb-5"
+              >技能点: {{ examInfo.skills.join(' ') }}
+            </v-card-text>
+          </v-col>
+        </v-row>
+        <v-row dense class="mx-5" justify="space-between">
+          <v-col>
+            <v-card-text class="pa-0 pb-5">
+              客观题: {{ examQuestionsNum - examCodeQuestionsNum }} 道
+            </v-card-text>
+          </v-col>
+          <v-col>
+            <v-card-text class="pa-0 pb-5"
+              >编程题: {{ examCodeQuestionsNum }} 道
+            </v-card-text>
+          </v-col>
+        </v-row>
+      </v-card>
+    </v-dialog>
+    <v-snackbar v-model="showDetailFailed" color="error" top>
+      考试未就绪
+    </v-snackbar>
   </v-card>
 </template>
 
@@ -98,7 +130,12 @@
 import Vue, { PropType } from 'vue'
 import { ExamSerializer, ExamStateText, LocalDateTime } from '@/api/types'
 import { computeExamStateText, timeLength } from '@/utils/common'
-import { joinExamByInviteCode, joinPublicExam } from '@/api/exam'
+import {
+  getExamCodeQuestions,
+  getExamQuestions,
+  joinExamByInviteCode,
+  joinPublicExam
+} from '@/api/exam'
 
 export default Vue.extend({
   name: 'StudentExamInfoCard',
@@ -106,7 +143,12 @@ export default Vue.extend({
     return {
       state: (null as unknown) as ExamStateText,
       inviteCode: '',
-      inputInviteCode: false
+      inputInviteCode: false,
+      showDetail: false,
+      showDetailFailed: false,
+      showDetailLoading: false,
+      examQuestionsNum: 0,
+      examCodeQuestionsNum: 0
     }
   },
   props: {
@@ -135,20 +177,39 @@ export default Vue.extend({
       const examId = this.examInfo.examId ?? 0
       const inviteCode = this.inviteCode
       joinExamByInviteCode(inviteCode, examId)
-        .then(({ data }) => {
-          const joinSuccess = data.result
+        .then(() => {
           this.inputInviteCode = false
-          if (joinSuccess) {
-            this.$emit('joinExam', 'true')
-          } else {
-            this.$emit('joinExam', 'false')
-          }
+          this.$emit('joinExam', 'true')
+        })
+        .catch(() => {
+          this.$emit('joinExam', 'false')
         })
         .finally(() => {
           this.inviteCode = ''
         })
     },
-
+    onShowDetail() {
+      this.showDetailLoading = true
+      const examId = this.examInfo.examId ?? ''
+      getExamQuestions(examId)
+        .then(({ data }) => {
+          this.examQuestionsNum = Object.keys(
+            data.result.questionAndScore
+          ).length
+          getExamCodeQuestions(examId)
+            .then(({ data }) => {
+              this.examCodeQuestionsNum = data.result.length
+              this.showDetail = true
+            })
+            .finally(() => {
+              this.showDetailLoading = false
+            })
+        })
+        .catch(() => {
+          this.showDetailFailed = true
+          this.showDetailLoading = false
+        })
+    },
     onJoinExam() {
       if (this.examInfo.isPublic) {
         const examId = this.examInfo.examId ?? 0

src/views/teacher/components/TeacherExamInfoCard.vue

@@ -44,7 +44,7 @@
         >
       </v-col>
     </v-row>
-    <v-row justify="space-between" no-gutters>
+    <v-row justify="space-between" dense>
       <v-col>
         <v-card-text class="pa-0 pb-4"
           >开始时间: {{ examInfo.startTime }}</v-card-text