From d22a02992d557859a8c610fb74e0d070ce936d05 Mon Sep 17 00:00:00 2001
From: fuliqi <fuliqi@qq.com>
Date: 星期一, 08 七月 2024 18:05:26 +0800
Subject: [PATCH] 考试不能多次提交

---
 src/views/exam/components/answer-main/answer-fill/index.vue |   82 +++++++++++++++++++++++------------------
 1 files changed, 46 insertions(+), 36 deletions(-)

diff --git a/src/views/exam/components/answer-main/answer-fill/index.vue b/src/views/exam/components/answer-main/answer-fill/index.vue
index 0712750..f594f27 100644
--- a/src/views/exam/components/answer-main/answer-fill/index.vue
+++ b/src/views/exam/components/answer-main/answer-fill/index.vue
@@ -1,13 +1,21 @@
+<!-- 濉┖棰� -->
 <template>
   <div class="answer-container w-full h-full">
     <el-scrollbar>
       <ExamInfo class="mb-5" :questionIndex="currentIndex" :activeQuestion="activeQuestion"></ExamInfo>
 
       <div class="answer-content">
-        <div class="answer-item flex" v-for="item, index in activeQuestion.questionItemList" @click="answerClick(item)"
-          :class="answerState(item)">
+        <div class="answer-item flex" v-for="item, index in activeQuestion.questionItemList" :class="answerState(item,index)">
           <div class="answer-icon flex flex-col justify-center items-center flex-shrink-0">{{ item.prefix }}</div>
-          <div class="answer-text text-gray-700">{{ item.content }}</div>
+          <div class="answer-text text-gray-700 grow">
+            <el-input v-model="answerList[index]"
+            maxlength="30"
+            placeholder="璇疯緭鍏ュ唴瀹�"
+            class="answer-input" 
+            @focus="answerFocus(item)" 
+            @blur="answerBlur(item)"
+            @change="answerChange(index)"></el-input>
+          </div>
         </div>
       </div>
 
@@ -16,46 +24,50 @@
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { ref, watchEffect } from 'vue';
 import { storeToRefs } from 'pinia';
 import ExamInfo from '@/components/ExamInfo/index.vue';
 import { useExamStore } from '@/store/index.js';
 const examStore = useExamStore();
 
+const answerList = ref([]);
+
+
 const { currentType, currentIndex } = storeToRefs(examStore);
 
 const activeQuestion = ref(examStore.getActiveQuestion);
 
-const answerClick = (item) => {
-  if (item) {
-    if (item.isActive) {
-      item.isActive = !item.isActive;
-    } else {
-      resetAnswer();
-      item.isActive = true;
-    }
-    const answerList = filterAnswer();
-    let temp = '';
-    if(answerList) {
-      temp = answerList.prefix;
-    }
-    examStore.setQuestionAnswer(currentType.value, currentIndex.value, temp);
-  }
+const answerFocus = (item) => {
+  item.isActive = true;
 };
 
-const answerState = (item) => {
+const answerBlur = (item) => {
+  item.isActive = false;
+}
+
+const answerState = (item,index) => {
+  if(Array.isArray(activeQuestion.value.answerList) && activeQuestion.value.answerList[index]) {
+    item.isActive = true;
+  }
   return {
     active: item.isActive
   };
 };
 
-const resetAnswer = () => {
-  activeQuestion.value.questionItemList.forEach(item => item.isActive = false);
-};
-
-const filterAnswer = () => {
-  return activeQuestion.value.questionItemList.find(item => item.isActive);
+const answerChange = () => {
+  examStore.setQuestionAnswerList(currentType.value, currentIndex.value, answerList.value);
 }
+
+
+watchEffect(() => {
+  activeQuestion.value.questionItemList.forEach((item, index) => {
+    if(Array.isArray(activeQuestion.value.answerList)) {
+      answerList.value[index] = activeQuestion.value.answerList[index];
+    } else {
+      answerList.value[index] = '';
+    }
+  });
+})
 
 
 </script>
@@ -67,19 +79,9 @@
   border: 1px solid #DCDFE6;
   overflow: hidden;
   margin-bottom: 20px;
-  cursor: pointer;
 
   &:last-of-type {
     margin-bottom: 0;
-  }
-
-  &:hover {
-    border-color: #3680fa;
-
-    .answer-icon {
-      color: #3680fa;
-      border-color: #3680fa;
-    }
   }
 
 
@@ -105,4 +107,12 @@
     background-color: #409EFF !important;
   }
 }
+
+.answer-input {
+  width: 100%;
+  border: 0;
+  :deep(.el-input__wrapper) {
+    box-shadow: none !important;
+  }
+}
 </style>
\ No newline at end of file

--
Gitblit v1.8.0