选择排序 录入预览增加答案及判断answer，50%

src/components/Adult/inputModules/SelectDrag.vue

@@ -4,13 +4,26 @@
     <div class="select-drag-configure">
       <span>拼音位置：</span>
       <el-radio-group v-model="curQue.pyPosition">
-        <el-radio v-for="{type, label} in pyPositionList" :key="type" :label="type">{{ label }}</el-radio>
+        <el-radio
+          v-for="{ type, label } in pyPositionList"
+          :key="type"
+          :label="type"
+          >{{ label }}</el-radio
+        >
       </el-radio-group>
     </div>
     <!-- 选项 -->
     <div class="select-drag-options">
-      <div v-for="(item, i) in curQue.options" :key="i" class="select-drag-options-item">
-        <sentence-segword-chs :cur-que="item" type="adultinput" :is-hide-py-position="true" />
+      <div
+        v-for="(item, i) in curQue.options"
+        :key="i"
+        class="select-drag-options-item"
+      >
+        <sentence-segword-chs
+          :cur-que="item"
+          type="adultinput"
+          :is-hide-py-position="true"
+        />
         <div>
           <el-button type="danger" @click="deleteOption(i)">删除</el-button>
         </div>
@@ -20,25 +33,51 @@
     </div>
     <!-- 句子 -->
     <div class="select-drag-sentences">
-      <div v-for="(item, i) in curQue.sentences" :key="`sentences-${i}`" class="select-drag-sentences-item">
+      <div
+        v-for="(item, i) in curQue.sentences"
+        :key="`sentences-${i}`"
+        class="select-drag-sentences-item"
+      >
         <span>{{ i + 1 }}.</span>
-        <div v-for="(x, j) in item" :key="`segmentation-${j}`" class="segmentation">
+        <div
+          v-for="(x, j) in item"
+          :key="`segmentation-${j}`"
+          class="segmentation"
+        >
           <div>
             <template v-if="x.isSpace">
-              <el-input class="space-placeholder" disabled />
+              <!-- <el-input class="space-placeholder" disabled /> -->
+              <span>答案</span>
+              <el-select v-model="x.answer" placeholder="请选择">
+                <el-option
+                  v-for="(items, indexs) in curQue.options"
+                  :key="indexs"
+                  :label="items.sentence"
+                  :value="items.sentence"
+                >
+                </el-option>
+              </el-select>
             </template>
             <template v-else>
-              <sentence-segword-chs :cur-que="x" type="adultinput" :is-hide-py-position="true" />
+              <sentence-segword-chs
+                :cur-que="x"
+                type="adultinput"
+                :is-hide-py-position="true"
+              />
             </template>
           </div>
           <div>
-            <el-button type="danger" @click="deleteSegmentation(i, j)">删除</el-button>
+            <el-button type="danger" @click="deleteSegmentation(i, j)"
+              >删除</el-button
+            >
           </div>
         </div>
         <div>
           <el-button @click="addSentenceSeg(i)">添加分句</el-button>
           <el-button @click="addSentenceSeg(i, true)">添加空格</el-button>
-          <el-button type="danger" @click="deleteSentenceSeg(i)">删除分句</el-button>
+          <el-button type="danger" @click="deleteSentenceSeg(i)"
+            >删除分句</el-button
+          >
         </div>
       </div>
 
@@ -52,7 +91,7 @@ import SentenceSegwordChs from "@/components/Adult/inputModules/SentenceSegwordC
 
 export default {
   components: {
-    SentenceSegwordChs
+    SentenceSegwordChs,
   },
   props: {
     curQue: {
@@ -64,27 +103,27 @@ export default {
           pyPosition: "top",
           options: [],
           sentences: [],
-          isFirst: true
+          isFirst: true,
         };
-      }
+      },
     },
     changeCurQue: {
       type: Function,
-      required: true
-    }
+      required: true,
+    },
   },
   data() {
     return {
       pyPositionList: [
         {
           type: "top",
-          label: "拼音在上"
+          label: "拼音在上",
         },
         {
           type: "bottom",
-          label: "拼音在下"
-        }
-      ]
+          label: "拼音在下",
+        },
+      ],
     };
   },
   created() {
@@ -102,19 +141,18 @@ export default {
         sentence: "", // 句子
         segList: [], // 分词结果
         seg_words: "",
-        wordsList: []
+        wordsList: [],
       });
     },
 
     deleteOption(i) {
-        this.$confirm("确定要删除吗?", "提示", {
-            confirmButtonText: "确定",
-            cancelButtonText: "取消",
-            type: "warning",
-        })
-        .then(() => {
-            this.curQue.options.splice(i, 1);
-        })
+      this.$confirm("确定要删除吗?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      }).then(() => {
+        this.curQue.options.splice(i, 1);
+      });
     },
 
     addSentence() {
@@ -127,7 +165,8 @@ export default {
       if (isSpace) {
         sentences.push({
           isSpace,
-          dragList: []
+          answer: "",
+          dragList: [],
         });
         return;
       }
@@ -140,32 +179,30 @@ export default {
         sentence: "", // 句子
         segList: [], // 分词结果
         seg_words: "",
-        wordsList: []
+        wordsList: [],
       });
     },
 
     deleteSentenceSeg(i) {
-        this.$confirm("确定要删除吗?", "提示", {
-            confirmButtonText: "确定",
-            cancelButtonText: "取消",
-            type: "warning",
-        })
-        .then(() => {
-            this.curQue.sentences.splice(i, 1);
-        })
+      this.$confirm("确定要删除吗?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      }).then(() => {
+        this.curQue.sentences.splice(i, 1);
+      });
     },
 
     deleteSegmentation(i, j) {
-        this.$confirm("确定要删除吗?", "提示", {
-            confirmButtonText: "确定",
-            cancelButtonText: "取消",
-            type: "warning",
-        })
-        .then(() => {
-            this.curQue.sentences[i].splice(j, 1);
-        })
-    }
-  }
+      this.$confirm("确定要删除吗?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      }).then(() => {
+        this.curQue.sentences[i].splice(j, 1);
+      });
+    },
+  },
 };
 </script>
 

src/components/Adult/preview/SelectDrag.vue

@@ -17,7 +17,7 @@
           :key="`option-${i}`"
           class="drag-option"
           :style="{
-            cursor: `${isAnswerMode ? 'default' : 'pointer'}`
+            cursor: `${isAnswerMode ? 'default' : 'pointer'}`,
           }"
         >
           <div>
@@ -52,12 +52,12 @@
           :key="`sentence-item-${j}`"
           :class="[
             'drag-sentence-item',
-            `${item.isSpace && item.dragList.length <= 0 ? 'space' : ''}`
+            `${item.isSpace && item.dragList.length <= 0 ? 'space' : ''}`,
           ]"
           :style="{
             'grid-template': item.isSpace
               ? ''
-              : `repeat(${item.wordsList.length}, auto) / repeat(${item.wordsList.length}, auto)`
+              : `repeat(${item.wordsList.length}, auto) / repeat(${item.wordsList.length}, auto)`,
           }"
         >
           <!-- 空格 -> 拖拽 -->
@@ -81,7 +81,7 @@
                     item.dragList.length > 0
                       ? `repeat(${item.dragList[0].wordsList.length}, auto) / repeat(${item.dragList[0].wordsList.length}, auto)`
                       : '',
-                  cursor: `${isAnswerMode ? 'default' : 'pointer'}`
+                  cursor: `${isAnswerMode ? 'default' : 'pointer'}`,
                 }"
               >
                 <template v-if="item.dragList.length > 0">
@@ -131,26 +131,27 @@ export default {
   props: {
     curQue: {
       type: Object,
-      required: true
+      required: true,
     },
     themeColor: {
       type: String,
-      required: true
-    }
+      required: true,
+    },
   },
   data() {
     return {
       isAnswerMode: false,
       curDrag: {
         sentenceIndex: 0,
-        subsectionIndex: 0
-      }
+        subsectionIndex: 0,
+      },
+      IsError: false,
     };
   },
   computed: {
     isPyTop() {
       return this.curQue.pyPosition === "top";
-    }
+    },
   },
   created() {
     const Bookanswer = this.curQue.Bookanswer;
@@ -159,14 +160,31 @@ export default {
       Bookanswer.dragList.forEach(
         ({ sentenceIndex, subsectionIndex, ...data }) => {
           this.curQue.sentences[sentenceIndex][subsectionIndex].dragList = [
-            { ...data }
+            { ...data },
           ];
         }
       );
     } else {
       let Bookanswer = {
-        dragList: []
+        dragList: [],
+        answerList: [],
       };
+      this.curQue.sentences.forEach((item) => {
+        let arr = [];
+        item.forEach((items) => {
+          if (items.isSpace) {
+            let obj = {
+              userAnswerJudge: "",
+              answer: items.answer,
+            };
+            if (items.answer) {
+              obj.userAnswerJudge = "[JUDGE##F##JUDGE]";
+            }
+            arr.push(obj);
+          }
+        });
+        Bookanswer.answerList.push(arr);
+      });
       this.$set(this.curQue, "Bookanswer", Bookanswer);
     }
   },
@@ -176,7 +194,7 @@ export default {
       let { sentence, subsection } = e.to.dataset;
       this.curDrag = {
         sentenceIndex: sentence,
-        subsectionIndex: subsection
+        subsectionIndex: subsection,
       };
       return true;
     },
@@ -185,11 +203,13 @@ export default {
       if (
         e.to.classList.contains("draggable-space") &&
         e.relatedContext.component.realList.length > 0
-      ) { return false; }
+      ) {
+        return false;
+      }
       let { sentence, subsection } = e.from.dataset;
       this.curDrag = {
         sentenceIndex: sentence,
-        subsectionIndex: subsection
+        subsectionIndex: subsection,
       };
     },
 
@@ -197,25 +217,56 @@ export default {
       if (added) {
         this.curQue.Bookanswer.dragList.push({
           ...this.curDrag,
-          ...added.element
+          ...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;
+        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;
+            }
+          );
+      }
+    },
+    // 判断对错
+    changeuserAnswerJudge() {
+      this.curQue.Bookanswer.forEach((item) => {
+        item.answerList.forEach((items, i) => {
+          if (items.answer) {
+            if (item.dragList[i]) {
+              if (items.answer == item.dragList[i].sentence) {
+                items.userAnswerJudge = "[JUDGE##T##JUDGE]";
+              }
+            } else {
+              items.userAnswerJudge = "[JUDGE##F##JUDGE]";
             }
-            return true;
           }
-        );
+        });
+      });
+    },
+    // 判断是否有错的
+    iSError() {
+      let flag = false;
+      this.curQue.Bookanswer.forEach((item) => {
+        item.answerList.forEach((items, i) => {
+          if (items.userAnswerJudge == "[JUDGE##F##JUDGE]") {
+            flag = true;
+          }
+        });
+      });
+      if (flag) {
+        this.IsError = true;
+      } else {
+        this.IsError = false;
       }
-    }
-  }
+    },
+  },
 };
 </script>