From 15ff2af69bb77dd0b01209ebab77aad1bce6cb43 Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期一, 01 七月 2024 15:07:40 +0800
Subject: [PATCH] feat:填空题填写

---
 src/views/exam/components/answer-main/answer-fill/index.vue |   78 +++++++++++++++++++++++----------------
 src/views/exam/components/answer-sheet/index.vue            |    9 +++-
 2 files changed, 53 insertions(+), 34 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 7ce7988..2f85957 100644
--- a/src/views/exam/components/answer-main/answer-fill/index.vue
+++ b/src/views/exam/components/answer-main/answer-fill/index.vue
@@ -4,11 +4,16 @@
       <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"
-          :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">
-            <el-input v-model="answerList[`answer${index}`]" @focus="answerClick(item)" maxlength="30" placeholder="璇疯緭鍏ュ唴瀹�"></el-input>
+          <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>
@@ -18,55 +23,49 @@
 </template>
 
 <script setup>
-import { ref,watchEffect } 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 answerList = ref([]);
 
 
 const { currentType, currentIndex } = storeToRefs(examStore);
 
 const activeQuestion = ref(examStore.getActiveQuestion);
 
-const answerClick = (item) => {
-  return;
-  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 = (index) => {
+  examStore.setQuestionAnswerList(currentType.value, currentIndex.value, answerList.value);
 }
 
+
 watchEffect(() => {
-  activeQuestion.value.questionItemList.forEach((item,index) => {
-    answerList[`answer${index}`] = '';
-  })
+  activeQuestion.value.questionItemList.forEach((item, index) => {
+    if(Array.isArray(activeQuestion.value.answerList)) {
+      answerList[index] = activeQuestion.value.answerList[index];
+    } else {
+      answerList[index] = '';
+    }
+  });
 })
 
 
@@ -107,4 +106,19 @@
     background-color: #409EFF !important;
   }
 }
+
+.answer-input {
+  width: 100%;
+  border: 0;
+
+  .el-input__wrapper,
+  .is-focus {
+    box-shadow: none !important;
+  }
+
+  .el-input__wrapper:hover {
+    box-shadow: none !important;
+  }
+
+}
 </style>
\ No newline at end of file
diff --git a/src/views/exam/components/answer-sheet/index.vue b/src/views/exam/components/answer-sheet/index.vue
index 2199d32..bb9bc94 100644
--- a/src/views/exam/components/answer-sheet/index.vue
+++ b/src/views/exam/components/answer-sheet/index.vue
@@ -22,13 +22,13 @@
 import {useExamStore} from '@/store/index.js';
 const examStore = useExamStore();
 
-const {examType, examDetail,currentType,currentIndex} = storeToRefs(examStore);
+const {examDetail,currentType,currentIndex} = storeToRefs(examStore);
 
 const activeNames = ref(examDetail.value.map(item => item.questionType));
 
 const itemClass = (question,type,index) => {
   return {
-    answer: question.answer || (question.answerList && question.answerList.length),
+    answer: question.answer || checkAnswerList(question.answerList),
     active: currentType.value === type && currentIndex.value === index
   }
 }
@@ -38,6 +38,11 @@
   currentIndex.value = index;
 }
 
+
+const checkAnswerList = (answerList) => {
+  return Array.isArray(answerList) && answerList.length && answerList.every(item => item);
+}
+
 </script>
 
 <style lang="scss" scoped>

--
Gitblit v1.8.0