考试模块开发

src/api/open/open.ts

@@ -1,5 +1,5 @@
 import request from "../request"
-
+import { openApi } from "./type"
 export default {
     questionInfoSelectFreeQuestionInfo(params: {
         subject: number

src/api/open/type.d.ts

@@ -3,10 +3,10 @@ interface Res {
     msg: string
 
 }
-declare namespace openApi {
+export declare namespace openApi {
     interface selectFreeQuestionInfoRes extends Res {
         rows: {
-            userAnswer:string
+            userAnswer:string|string[]
             optsArr: string[]
             answer: string
             answerkeyword: string

src/views/driverExam/index.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="pt30 pb30 pr30 pl30 w100vw h100vh">
+  <div class="pt30 pb30 pr30 pl30 w100vw h100vh flex flex-col">
     <div
-      class="w-full h-full flex content-start items-start flex-wrap border-gray-200 border"
+      class="w-full h-full flex content-start items-start border-gray-200 border flex-col"
     >
       <div class="w-full flex h440">
         <div class="w215">
@@ -34,6 +34,15 @@
               >{{ listIndex + 1 }}、{{ list[listIndex].issue }}</span
             >
           </div>
+          <div v-if="list[listIndex].questionType !== 1" class="mt30">
+            <div
+              v-for="(item, index) in list[listIndex].optsArr"
+              :key="index"
+              class="pl20 text-left font-bold"
+            >
+              <span>{{ switchIndexBySelect(index) }}</span> {{ item }}
+            </div>
+          </div>
         </div>
         <div class="w440 h440 bg-driver-exam">
           <div class="w-full">
@@ -75,14 +84,26 @@
                       "
                     >
                       <div
+                        v-if="list[listIndex].questionType==1"
                         style="white-space: nowrap"
                         :data-key="index * 10 + _index + 1"
-                        class="coll-table-topic-item"
+                        class="coll-table-topic-item text-black"
                         :class="{
                           'text-red': list[index * 10 + _index].isError,
                         }"
                       >
-                        {{ list[index * 10 + _index].userAnswerLetter || "" }}
+                        {{ list[index * 10 + _index].userAnswer || "" }}
+                      </div>
+                       <div
+                        v-if="list[listIndex].questionType!=1"
+                        style="white-space: nowrap"
+                        :data-key="index * 10 + _index + 1"
+                        class="coll-table-topic-item text-black"
+                        :class="{
+                          'text-red': list[index * 10 + _index].isError,
+                        }"
+                      >
+                        {{ switchAnswerBySelect(list[index * 10 + _index].userAnswer) || "" }}
                       </div>
                     </td>
                   </tr>
@@ -100,9 +121,20 @@
               <div class="pl20">00:39:00</div>
             </div>
 
-            <div class="ml90 font-bold inline-block">
+            <div
+              v-if="list[listIndex].questionType == 1"
+              class="ml90 font-bold inline-block"
+            >
               您选择的答案：{{ list[listIndex].userAnswer }}
             </div>
+            <div
+              v-if="list[listIndex].questionType != 1"
+              class="ml90 font-bold inline-block"
+            >
+              您选择的答案：{{
+                switchAnswerBySelect(list[listIndex].userAnswer)
+              }}
+            </div>
           </div>
         </div>
         <div class="flex cursor-pointer mt20">
@@ -113,7 +145,12 @@
             :key="_index"
             class="w46 lh46 h46 answer-select font20 font-bold mr15 flex-grow-0"
           >
-            {{ _index }}
+            <span v-if="list[listIndex].questionType == 1">{{
+              switchIndexByJudge(_index)
+            }}</span>
+            <span v-if="list[listIndex].questionType !== 1">{{
+              switchIndexBySelect(_index)
+            }}</span>
           </div>
           <!-- <div class="w46 lh46 h46 answer-select font20 font-bold flex-grow-0">
             ×
@@ -137,6 +174,16 @@
         </div>
       </div>
     </div>
+    <div class="w-full pt15 h280 pb15 flex-1">
+      <div class="h-full">
+        <img
+          class="h-full mr-auto ml-auto"
+          v-if="list[listIndex].image"
+          :src="list[listIndex].image"
+        />
+      </div>
+    </div>
+
     <mProblemAlert
       v-model:visible="alertVisible"
       title="开启"
@@ -151,11 +198,12 @@ import { defineComponent, ref, onMounted } from "vue";
 import mProblemAlert from "@/components/mProblemAlert/index.vue";
 import mProblemDialog from "@/components/mProblemDialog/index.vue";
 import api from "@/api";
+import { openApi } from "@/api/open/type";
 export default defineComponent({
   name: "driverExam",
   setup() {
     let listIndex = ref(0);
-    let list = ref([
+    let list = ref<openApi.selectFreeQuestionInfoRes["rows"]>([
       {
         createTime: "2022-10-09 15:05:43",
         updateTime: "2022-10-10 10:19:19",
@@ -699,11 +747,81 @@ export default defineComponent({
       return name;
     };
     let setUserAnswer = (answer: string) => {
-      list.value[listIndex.value].userAnswer = answer;
+      if (list.value[listIndex.value].questionType == 3) {
+        if (typeof answer !== "string") {
+          let userAnswer = list.value[listIndex.value].userAnswer as string[];
+          userAnswer.push(answer);
+        }
+      } else {
+        list.value[listIndex.value].userAnswer = answer;
+      }
     };
-    let getJudgeItem=(_index:number)=>{
-      return _index==0?'√':'×'
-    }
+    let getJudgeItem = (_index: number) => {
+      return _index == 0 ? "√" : "×";
+    };
+    let switchIndexBySelect = (index: number) => {
+      let name = "";
+      switch (index) {
+        case 0:
+          name = "A";
+          break;
+        case 1:
+          name = "B";
+          break;
+        case 2:
+          name = "C";
+          break;
+        case 3:
+          name = "D";
+          break;
+      }
+      return name;
+    };
+    let switchIndexByJudge = (index: number) => {
+      let name = "";
+      switch (index) {
+        case 0:
+          name = "√";
+          break;
+        case 1:
+          name = "×";
+          break;
+      }
+      return name;
+    };
+    let switchAnswerBySelect = (answer: string | string[]) => {
+      let select = "";
+      if (Array.isArray(answer)) {
+        answer.forEach((item) => {
+          select += switchIndexBySelect(
+            list.value[listIndex.value].optsArr.indexOf(item)
+          );
+        });
+      } else {
+        select += switchIndexBySelect(
+          list.value[listIndex.value].optsArr.indexOf(answer)
+        );
+      }
+      return select;
+    };
+    //  let switchIndexToLetter = (index: number) => {
+    //   let name = "";
+    //   switch (index) {
+    //     case 0:
+    //       name = "A";
+    //       break;
+    //     case 1:
+    //       name = "B";
+    //       break;
+    //     case 2:
+    //       name = "C";
+    //       break;
+    //     case 3:
+    //       name = "D";
+    //       break;
+    //   }
+    //   return name
+    // };
     onMounted(() => {
       api.open
         .questionInfoSelectFreeQuestionInfo({
@@ -712,6 +830,11 @@ export default defineComponent({
         .then((res) => {
           res.rows.forEach((element) => {
             element.optsArr = element.opts.split("-");
+            if (element.questionType !== 3) {
+              element.userAnswer = "";
+            } else if (element.questionType == 3) {
+              element.userAnswer = [];
+            }
           });
           list.value = res.rows;
         });
@@ -724,7 +847,10 @@ export default defineComponent({
       nextProblem,
       preProblem,
       getProblemTypeName,
-      setUserAnswer
+      setUserAnswer,
+      switchIndexBySelect,
+      switchIndexByJudge,
+      switchAnswerBySelect,
     };
   },