trim() 拖拽填空录入及预览studentAnswer和standardAnswer

src/components/Adult/preview/ConfigurableTable.vue

@@ -84,6 +84,12 @@
                           ? col.answer
                           : curQue.Bookanswer[i].content[j].answer
                       "
+                      @blur="
+                        judgeAnswer == 'standardAnswer'
+                          ? (col.answer = col.answer.trim())
+                          : (curQue.Bookanswer[i].content[j].answer =
+                              curQue.Bookanswer[i].content[j].answer.trim())
+                      "
                       type="textarea"
                       :placeholder="`${isAnswerMode ? '' : '输入'}`"
                       :disabled="isAnswerMode"

src/components/Adult/preview/HeaderSparate/index.vue

@@ -70,6 +70,12 @@
                           ? col.answer
                           : curQue.Bookanswer[i].content[j].answer
                       "
+                      @blur="
+                        judgeAnswer == 'standardAnswer'
+                          ? (col.answer = col.answer.trim())
+                          : (curQue.Bookanswer[i].content[j].answer =
+                              curQue.Bookanswer[i].content[j].answer.trim())
+                      "
                       type="textarea"
                       :placeholder="`${isAnswerMode ? '' : '输入'}`"
                       :disabled="isAnswerMode"

src/components/Adult/preview/InputHasRecord.vue

@@ -123,6 +123,7 @@
             ]"
             type="textarea"
             v-model="items.answer"
+            @blur="items.answer = items.answer.trim()"
             placeholder="输入"
             maxlength="200"
             :readonly="TaskModel == 'ANSWER'"
@@ -300,6 +301,10 @@
                   ]"
                   type="textarea"
                   v-model="curQue.Bookanswer[indexs].answer"
+                  @blur="
+                    curQue.Bookanswer[indexs].answer =
+                      curQue.Bookanswer[indexs].answer.trim()
+                  "
                   placeholder="输入"
                   maxlength="200"
                   :readonly="TaskModel == 'ANSWER'"
@@ -451,6 +456,10 @@
               ]"
               type="textarea"
               v-model="curQue.Bookanswer[indexs].answer"
+              @blur="
+                curQue.Bookanswer[indexs].answer =
+                  curQue.Bookanswer[indexs].answer.trim()
+              "
               placeholder="输入"
               maxlength="200"
               :readonly="TaskModel == 'ANSWER'"

src/components/Adult/preview/SelectDrag.vue

@@ -1,6 +1,9 @@
 <!-- 选择 -> 拖拽 -->
 <template>
-  <div class="select-drag">
+  <div
+    class="select-drag"
+    v-if="curQue && judgeAnswer == 'standardAnswer' ? IsError : true"
+  >
     <!-- 选项 -->
     <div class="select-drag-options">
       <draggable
@@ -42,7 +45,9 @@
     <!-- 句子 -->
     <div class="select-drag-sentences">
       <div
-        v-for="(sentence, i) in curQue.sentences"
+        v-for="(sentence, i) in judgeAnswer == 'standardAnswer'
+          ? CorrectData.sentences
+          : curQue.sentences"
         :key="`sentence-${i}`"
         :data-serial="i + 1"
         class="drag-sentence"
@@ -53,6 +58,7 @@
           :class="[
             'drag-sentence-item',
             `${item.isSpace && item.dragList.length <= 0 ? 'space' : ''}`,
+            changeClass(i, item.index, j),
           ]"
           :style="{
             'grid-template': item.isSpace
@@ -72,7 +78,7 @@
               group="option"
               animation="300"
               :move="onMoveTo"
-              @change="change"
+              @change="change({ ...arguments }, i)"
             >
               <div
                 :class="[`${item.dragList.length > 0 ? 'drag-list' : ''}`]"
@@ -137,6 +143,14 @@ export default {
       type: String,
       required: true,
     },
+    TaskModel: {
+      type: String,
+      required: true,
+    },
+    judgeAnswer: {
+      type: String,
+      required: true,
+    },
   },
   data() {
     return {
@@ -146,6 +160,7 @@ export default {
         subsectionIndex: 0,
       },
       IsError: false,
+      CorrectData: null,
     };
   },
   computed: {
@@ -157,38 +172,87 @@ export default {
     const Bookanswer = this.curQue.Bookanswer;
     if (Bookanswer) {
       this.isAnswerMode = true;
-      Bookanswer.dragList.forEach(
-        ({ sentenceIndex, subsectionIndex, ...data }) => {
-          this.curQue.sentences[sentenceIndex][subsectionIndex].dragList = [
-            { ...data },
-          ];
-        }
-      );
+      if (this.judgeAnswer == "userAnswer") {
+      } else if (this.judgeAnswer == "standardAnswer") {
+        let data = JSON.parse(JSON.stringify(this.curQue));
+        data.sentences.forEach((item, index) => {
+          item.forEach((items, indexs) => {
+            if (items.isSpace) {
+              items.dragList = [];
+              this.curQue.oldOptions.forEach((op) => {
+                if (items.answer == op.sentence) {
+                  items.dragList.push(op);
+                }
+              });
+            }
+          });
+        });
+        this.CorrectData = data;
+      }
+      this.iSErrorEvent();
     } else {
       let Bookanswer = {
         dragList: [],
         answerList: [],
       };
+      this.curQue.oldOptions = JSON.parse(JSON.stringify(this.curQue.options));
       this.curQue.sentences.forEach((item) => {
         let arr = [];
-        item.forEach((items) => {
+        let index = 0;
+        item.forEach((items, i) => {
           if (items.isSpace) {
             let obj = {
               userAnswerJudge: "",
               answer: items.answer,
+              index: index,
             };
+            items.index = index;
             if (items.answer) {
               obj.userAnswerJudge = "[JUDGE##F##JUDGE]";
             }
             arr.push(obj);
+            index++;
           }
         });
+        Bookanswer.dragList.push([]);
         Bookanswer.answerList.push(arr);
       });
       this.$set(this.curQue, "Bookanswer", Bookanswer);
     }
   },
   methods: {
+    changeClass(index, indexs, indexss) {
+      let className = "";
+      if (Object.prototype.toString.call(index).indexOf("Number") != -1) {
+        if (
+          this.judgeAnswer == "studentAnswer" ||
+          this.judgeAnswer == "userAnswer"
+        ) {
+          if (this.curQue.Bookanswer.answerList[index][indexs]) {
+            if (
+              this.curQue.Bookanswer.answerList[index][indexs].userAnswerJudge
+            ) {
+              if (
+                this.curQue.Bookanswer.answerList[index][indexs]
+                  .userAnswerJudge == "[JUDGE##T##JUDGE]"
+              ) {
+                className = "correct";
+              } else {
+                className = "error";
+              }
+            }
+          }
+        } else if (this.judgeAnswer == "standardAnswer") {
+          if (this.CorrectData.sentences[index][indexss].isSpace) {
+            if (this.CorrectData.sentences[index][indexss].dragList.length > 0) {
+              className = "correct";
+            }
+          }
+        }
+      }
+
+      return className;
+    },
     onMove(e) {
       if (e.relatedContext.component.realList.length > 0) return false;
       let { sentence, subsection } = e.to.dataset;
@@ -213,35 +277,40 @@ export default {
       };
     },
 
-    change({ added, removed }) {
-      if (added) {
-        this.curQue.Bookanswer.dragList.push({
+    change(obj, i) {
+      if (obj[0].added) {
+        this.curQue.Bookanswer.dragList[i].push({
           ...this.curDrag,
-          ...added.element,
+          ...obj[0].added.element,
         });
       }
-      if (removed) {
-        this.curQue.Bookanswer.dragList =
-          this.curQue.Bookanswer.dragList.filter(
-            ({ sentenceIndex, subsectionIndex }) => {
-              let { sentenceIndex: senIndex, subsectionIndex: subIndex } =
-                this.curDrag;
-              if (sentenceIndex === senIndex && subsectionIndex === subIndex) {
-                return false;
-              }
-              return true;
-            }
-          );
+      if (obj[0].removed) {
+        this.curQue.Bookanswer.dragList[i] = this.curQue.Bookanswer.dragList[
+          i
+        ].filter(({ sentenceIndex, subsectionIndex }) => {
+          let { sentenceIndex: senIndex, subsectionIndex: subIndex } =
+            this.curDrag;
+          if (sentenceIndex === senIndex && subsectionIndex === subIndex) {
+            return false;
+          }
+          return true;
+        });
       }
+      this.changeuserAnswerJudge();
     },
     // 判断对错
     changeuserAnswerJudge() {
-      this.curQue.Bookanswer.forEach((item) => {
-        item.answerList.forEach((items, i) => {
+      this.curQue.Bookanswer.answerList.forEach((item, index) => {
+        item.forEach((items, indexs) => {
           if (items.answer) {
-            if (item.dragList[i]) {
-              if (items.answer == item.dragList[i].sentence) {
+            if (this.curQue.Bookanswer.dragList[index][indexs]) {
+              if (
+                items.answer ==
+                this.curQue.Bookanswer.dragList[index][indexs].sentence
+              ) {
                 items.userAnswerJudge = "[JUDGE##T##JUDGE]";
+              } else {
+                items.userAnswerJudge = "[JUDGE##F##JUDGE]";
               }
             } else {
               items.userAnswerJudge = "[JUDGE##F##JUDGE]";
@@ -251,10 +320,10 @@ export default {
       });
     },
     // 判断是否有错的
-    iSError() {
+    iSErrorEvent() {
       let flag = false;
-      this.curQue.Bookanswer.forEach((item) => {
-        item.answerList.forEach((items, i) => {
+      this.curQue.Bookanswer.answerList.forEach((item) => {
+        item.forEach((items) => {
           if (items.userAnswerJudge == "[JUDGE##F##JUDGE]") {
             flag = true;
           }
@@ -318,6 +387,18 @@ export default {
       margin-top: 24px;
       display: flex;
       align-items: center;
+      .correct {
+        background: rgba(44, 167, 103, 0.1);
+        /* 正确答案 */
+
+        border: 1px solid #2ca767;
+      }
+      .error {
+        background: rgba(237, 52, 45, 0.1);
+        /* 错误颜色 */
+
+        border: 1px solid #ed342d;
+      }
 
       &::before {
         content: attr(data-serial);

src/components/Adult/preview/SentenceInput.vue

@@ -199,7 +199,7 @@
           "
         >
           <input
-            @input="handleInput"
+            @blur="handleInput(indexs, items)"
             :class="['item-input']"
             v-model="
               judgeAnswer == 'standardAnswer'
@@ -207,6 +207,7 @@
                 : curQue.Bookanswer[indexs].answer
             "
             placeholder="输入"
+            :readonly="TaskModel == 'ANSWER'"
             @change="changeuserAnswerJudge(indexs)"
           />
         </template>
@@ -336,8 +337,15 @@ export default {
       }
     },
     // input 输入时
-    handleInput(e) {
-      e.target.value = e.target.value ? e.target.value.trim() : "";
+    handleInput(index, items) {
+      if (this.judgeAnswer == "standardAnswer") {
+        items.answer[0] = items.answer[0].trim();
+      } else {
+        this.curQue.Bookanswer[index].answer =
+          this.curQue.Bookanswer[index].answer.trim();
+      }
+
+      // e.target.value = e.target.value ? e.target.value.trim() : "";
     },
     handlePlayVoice(url) {
       let _this = this;