From 8a968bcc9d96c6ac88c6ec85b27be63ae40aef36 Mon Sep 17 00:00:00 2001
From: xiangpei <xiangpei@timesnew.cn>
Date: 星期二, 09 七月 2024 17:37:31 +0800
Subject: [PATCH] 密码强制修改实现

---
 src/views/exam/exam/MarkPaperDetail.vue |  166 +++++++++++++++++++++++++++++++++++++++++++-----------
 1 files changed, 131 insertions(+), 35 deletions(-)

diff --git a/src/views/exam/exam/MarkPaperDetail.vue b/src/views/exam/exam/MarkPaperDetail.vue
index 8b8710f..ef466f7 100644
--- a/src/views/exam/exam/MarkPaperDetail.vue
+++ b/src/views/exam/exam/MarkPaperDetail.vue
@@ -1,64 +1,160 @@
 <template>
-  <div>
-    <el-row style="text-align: center">xxx鑰冭瘯</el-row>
-    <el-row>
-      <div>xxx濮撳悕</div>
-      <div>xxx浜ゅ嵎鏃堕棿</div>
-      <div>xxx绛旈鏃堕棿</div>
-    </el-row>
-    <el-row class="paper-warp">
-      <div v-for="(paper,index) in examInfo.paperQuestionList" :key="index" class="paperTitleWarp">
-        <div class="paperTitle">{{ paper.title }}</div>
-        <div class="question-warp">
-          <div v-for="(doQuestion, index) in paper.questionList" :key="index">
-            <DoQuestion :question="doQuestion" :qType="paper.questionType" :qLoading="questionLoading"></DoQuestion>
-          </div>
+  <div class="paper-container">
+    <div class="paper-card" v-loading="formLoading">
+      <el-card style="height: 100vh">
+        <el-row style="text-align: left; margin-bottom : 20px; font-size: 20px">璇枃鑰冭瘯</el-row>
+        <el-row>
+          <el-col class="info">
+            <span class="exam-info">瀛﹀憳濮撳悕锛�</span>
+            <span class="exam-info">{{ form.userName }}</span>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col class="info">
+            <span class="exam-info">浜ゅ嵎鏃堕棿锛�</span>
+            <span class="exam-info">{{ form.submitTime }}</span>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col class="info">
+            <span class="exam-info">瀹屾垚鑰楁椂锛�</span>
+            <span class="exam-info">{{ formattedDoTime }}</span>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col class="info">
+            <span class="exam-info">寰楀垎锛�</span>
+            <span class="exam-info">{{ form.score + ' / ' + form.totalScore }}</span>
+          </el-col>
+        </el-row>
+        <el-divider></el-divider>
+        <el-row class="do-exam-title">
+          <el-col :span="24">
+                <span :key="item.itemOrder" v-for="item in form.navbar">
+                    <el-tag :type="questionDoRightTag(item.right)" class="do-exam-title-tag"
+                            @click="goAnchor('#question-' + item.itemOrder)">{{ item.itemOrder }}</el-tag>
+                </span>
+          </el-col>
+        </el-row>
+        <el-divider></el-divider>
+        <div style="text-align: center">
+          <el-button type="primary" style="width: 120px;height: 35px" @click="open">鎻愪氦鎵规敼</el-button>
         </div>
-      </div>
-    </el-row>
+      </el-card>
+    </div>
+    <div class="paper-form">
+      <el-form :model="form" ref="form" v-loading="formLoading" label-width="100px">
+        <el-row :key="index" v-for="(titleItem, index) in form.titleItems">
+          <h3>{{ titleItem.title }}</h3>
+          <el-card class="exampaper-item-box" v-if="titleItem.questionList.length !== 0">
+            <el-form-item :key="questionItem.itemOrder" :label="questionItem.itemOrder + '.'"
+                          v-for="questionItem in titleItem.questionList" class="exam-question-item"
+                          label-width="50px" :id="'question-' + questionItem.itemOrder">
+              <MarkPaperShow :qType="questionItem.questionType" :question="questionItem" :answer="form.navbar"/>
+            </el-form-item>
+          </el-card>
+        </el-row>
+      </el-form>
+    </div>
   </div>
 </template>
 
 <script>
-import DoQuestion from '@/components/question/DoQuestion'
-import { getStudentExam } from '@/api/exam'
+import { getStudentExam, submitMark } from '@/api/exam'
+import MarkPaperShow from '@/views/exam/exam/components/MarkPaperShow'
+import { mapGetters, mapState } from 'vuex'
 
 export default {
   name: 'MarkPaperDetail',
-  components: { DoQuestion },
+  components: { MarkPaperShow },
   mounted () {
-    this.examInfo.examId = this.$route.query.examId
-    this.examInfo.examName = this.$route.query.examName
-    this.userId = this.$route.query.userId
-    if (this.examInfo.examId && this.userId) {
-      this.getStudentPaper()
-    }
+    getStudentExam(this.$route.query.examId, this.$route.query.userId).then(re => {
+      this.formLoading = true
+      this.form = re.data.data
+      this.formLoading = false
+    })
   },
   data () {
     return {
+      paperQuestionList: [],
+      form: {},
+      formLoading: false,
       userId: null,
-      questionLoading: false,
-      examInfo: {
-        examId: null,
-        examName: '',
-        doTime: 0,
-        paperQuestionList: []
-      }
+      userName: '寮犱笁',
+      questionLoading: false
     }
   },
   methods: {
+    open () {
+      this.$confirm('纭鏄惁鎻愪氦鎴愮哗鎵规敼?', '鎻愮ず', {
+        confirmButtonText: '纭畾',
+        cancelButtonText: '鍙栨秷',
+        type: 'warning'
+      }).then(() => {
+        submitMark(this.form).then(re => {
+          if (re.data.code === 1) {
+            console.log('1111111')
+            this.$message.success('鎻愪氦鎴愬姛')
+            this.$router.back()
+          } else {
+            this.$message.error(re.message)
+          }
+        })
+      })
+    },
+    goAnchor (selector) {
+      this.$el.querySelector(selector).scrollIntoView({ behavior: 'instant', block: 'center', inline: 'nearest' })
+    },
+    questionDoRightTag (status) {
+      return this.enumFormat(this.doRightTag, status)
+    },
     getStudentPaper () {
-      this.getStudentExam(this.examInfo.examId, this.userId).then(res => {
+      getStudentExam(this.examInfo.examId, this.userId).then(res => {
         this.examInfo = res.data.data
       })
     }
+  },
+  computed: {
+    formattedDoTime () {
+      const totalSeconds = this.form.doTime
+      const minutes = Math.floor(totalSeconds / 60)
+      const seconds = totalSeconds % 60
+      return `${minutes}鍒�${seconds < 10 ? '0' + seconds : seconds}绉抈
+    },
+    ...mapGetters('enumItem', ['enumFormat']),
+    ...mapState('enumItem', {
+      doRightTag: state => state.exam.question.answer.doRightTag
+    })
   }
 }
 </script>
 
 <style scoped>
-.question-warp {
-  margin-top: 50px;
 
+.paper-container {
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+  padding: 20px;
+  min-height: 100%;
 }
+
+.paper-card {
+  position: fixed;
+  width: 270px;
+}
+
+.paper-form {
+  flex: 1; /* 鍗犳嵁鍓╀綑绌洪棿 */
+  margin-left: 300px;
+}
+
+.info {
+  display: flex;
+  flex-direction: row;
+  justify-content: left;
+  font-size: 14px;
+  margin-top: 10px;
+}
+
 </style>

--
Gitblit v1.8.0