背题组卷修改答案

梁保满
1 parent 813d4d64
Showing 3 changed files with 502 additions and 69 deletions
src/assets/css/index.scss
src/views/examinationPaper/edit.vue
src/views/test/index.vue
@@ -79,6 +79,7 @@
 }
  
 .answer-box {
+  padding-top: 12px;
   .answer-s {
     display: inline-block;
     width: 30px;
@@ -97,6 +98,19 @@
       color: #fff;
     }
   }
+
+  .delButton {
+    border-color: #ff6868;
+    background: #ff6868 url("../images/arrow.png") no-repeat center;
+    background-size: 19px;
+    color: transparent;
+  }
+
+  .ac {
+    border-color: #ff6868;
+    background: #ff6868;
+    color: #fff;
+  }
 }
  
 .el-menu-item i {
@@ -16,59 +16,143 @@
         <p class="name">{{ form.title }}</p>
         <p class="totals">卷面总分：{{ allScore }}分</p>
       </div>
-      <div v-for="(question, index) in form.questionList" :key="index">
-        <p class="question-title">
-          <span>{{ setBigNum(index) }}、</span>
-          <el-input
-            class="ipt"
-            v-model.trim="question.questionTitle"
-            maxlength="30"
-            placeholder="填写大题名称"
-          ></el-input>
-          <span>共 {{ setScore(question) }} 分</span>
-        </p>
-        <ul class="questions-ul">
-          <li class="sub-questions">
-            <div class="qs-num">题号</div>
-            <div class="qs-type">题型</div>
-            <div class="qs-score">分数</div>
-             <div class="qs-partScore">漏选得分</div>
-            <div class="qs-options qs-options2">选项设置</div>
-          </li>
-          <li
-            class="sub-questions"
-            v-for="(subQuestions, indexs) in question.subQuestions"
-            :key="indexs"
+      <template v-if="questionList[0]?.subQuestions">
+        <div v-for="(question, index) in questionList" :key="index">
+          <p class="question-title">
+            <span>{{ setBigNum(index) }}、</span>
+            <el-input
+              class="ipt"
+              v-model.trim="question.questionTitle"
+              maxlength="30"
+              placeholder="填写大题名称"
+            ></el-input>
+            <span>共 {{ setScore(question) }} 分</span>
+          </p>
+          <ul class="questions-ul">
+            <li class="sub-questions">
+              <div class="qs-num">题号</div>
+              <div class="qs-type">题型</div>
+              <div class="qs-score">分数</div>
+              <div class="qs-partScore">漏选得分</div>
+              <div class="qs-options qs-options2">选项设置</div>
+            </li>
+            <li
+              v-for="(subQuestions, indexs) in question.subQuestions"
+              :key="indexs"
+            >
+              <p
+                class="set-ans-btn"
+                v-if="
+                  subQuestions.qusType &&
+                  subQuestions.subNum &&
+                  subQuestions.subNum > 4
+                "
+              >
+                <el-button type="primary" @click="setFormAns(indexs, index)"
+                  >批量设置答案</el-button
+                >
+              </p>
+              <div v-else class="sub-questions">
+                <div class="qs-num">{{ subQuestions.questionIndex }}</div>
+                <div class="qs-type">
+                  {{ setSubPro(subQuestions.questionType) }}
+                </div>
+                <div class="qs-score">
+                  {{ subQuestions.score }}
+                </div>
+                <div class="qs-partScore">
+                  <p v-if="subQuestions.questionType != 3">--</p>
+                  <p v-else>{{ subQuestions.partScore }}</p>
+                </div>
+                <div class="qs-options qs-options2">
+                  <p v-if="subQuestions.questionType == 5">--</p>
+                  <p v-if="subQuestions.questionType == 4" class="answer-box">
+                    <span
+                      class="answer-s"
+                      :class="subQuestions.correctAnswer == 1 ? 'active' : ''"
+                      @click="subQuestions.correctAnswer = 1"
+                      >✓</span
+                    >
+                    <span
+                      class="answer-s"
+                      :class="subQuestions.correctAnswer == 2 ? 'active' : ''"
+                      @click="subQuestions.correctAnswer = 2"
+                      >✗</span
+                    >
+                  </p>
+                  <p v-if="subQuestions.questionType == 3" class="answer-box">
+                    <template
+                      v-for="option in subQuestions.answerOptions.split(',')"
+                    >
+                      <span
+                        v-if="option"
+                        class="answer-s"
+                        :class="
+                          subQuestions.correctAnswer.includes(option)
+                            ? 'active'
+                            : ''
+                        "
+                        :key="option"
+                        @click="changAnswer(subQuestions, option)"
+                        >{{ option }}</span
+                      >
+                    </template>
+                  </p>
+                  <p v-if="subQuestions.questionType == 2" class="answer-box">
+                    <template
+                      v-for="option in subQuestions.answerOptions.split(',')"
+                    >
+                      <span
+                        class="answer-s"
+                        v-if="option"
+                        :class="
+                          subQuestions.correctAnswer == option ? 'active' : ''
+                        "
+                        :key="option"
+                        @click="subQuestions.correctAnswer = option"
+                        >{{ option }}</span
+                      >
+                    </template>
+                  </p>
+                </div>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </template>
+      <ul class="questions-ul" v-else>
+        <li class="sub-questions">
+          <div class="qs-num">题号</div>
+          <div class="qs-type">题型</div>
+          <div class="qs-score">分数</div>
+          <div class="qs-partScore">漏选得分</div>
+          <div class="qs-options qs-options2">选项设置</div>
+        </li>
+        <li v-for="(subQuestions, indexs) in questionList" :key="indexs">
+          <p
+            class="set-ans-btn"
+            v-if="
+              subQuestions.qusType &&
+              subQuestions.subNum &&
+              subQuestions.subNum > 4
+            "
           >
+            <el-button type="primary" @click="setFormAns(indexs, index)"
+              >批量设置答案</el-button
+            >
+          </p>
+          <div v-else class="sub-questions">
             <div class="qs-num">{{ subQuestions.questionIndex }}</div>
             <div class="qs-type">
               {{ setSubPro(subQuestions.questionType) }}
             </div>
             <div class="qs-score">
-              <el-input-number
-                class="number-ipt"
-                size="medium"
-                :min="1"
-                :max="200"
-                :precision="2"
-                v-model="subQuestions.score"
-                label="单题分值"
-              ></el-input-number>
+              {{ subQuestions.score }}
             </div>
             <div class="qs-partScore">
-                <p v-if="subQuestions.questionType != 3">--</p>
-                <el-input-number
-                  class="number-ipt"
-                  v-else
-                  size="medium"
-                  :min="0"
-                  :precision="2"
-                  :max="subQuestions.score"
-                  :step="0.5"
-                  v-model="subQuestions.partScore"
-                  label="漏选得分"
-                ></el-input-number>
-              </div>
+              <p v-if="subQuestions.questionType != 3">--</p>
+              <p v-else>{{ subQuestions.partScore }}</p>
+            </div>
             <div class="qs-options qs-options2">
               <p v-if="subQuestions.questionType == 5">--</p>
               <p v-if="subQuestions.questionType == 4" class="answer-box">
@@ -120,19 +204,108 @@
                 </template>
               </p>
             </div>
-          </li>
-        </ul>
-      </div>
+          </div>
+        </li>
+      </ul>
       <div class="btn-box">
         <el-button type="danger" plain round @click="linkBack">取消</el-button>
         <el-button type="primary" round @click="save">保存</el-button>
       </div>
+      <el-dialog
+        title="批量设置答案"
+        :close-on-click-modal="false"
+        :visible.sync="diaSetAns"
+        width="400"
+        :modal-append-to-body="false"
+      >
+        <div class="qs-options">
+          <p class="dia-tips">
+            请点击选项按钮设置答案,多选题题目之间用“,”隔开，若添加5道题：“AC,AD,BD,AC,CD”
+          </p>
+          <p>{{ setSubPro(formAns.qusType) }}：</p>
+          <p class="ipt">
+            <el-input
+              v-if="formAns.qusType == 2 || formAns.qusType == 3"
+              v-model="formAns.answerList"
+              @keydown.native="keydownAnswer($event, formAns.qusType)"
+              @input="setAllAnswer($event, formAns.qusType)"
+            ></el-input>
+            <el-input
+              v-if="formAns.qusType == 4"
+              v-model="formAns.answerList"
+              readonly=""
+            ></el-input>
+          </p>
+          <p class="answer-box">
+            <template v-if="formAns.qusType == 4">
+              <span
+                class="answer-s active"
+                @click="
+                  formAns.answerList.length < formAns.subNum
+                    ? (formAns.answerList += '✓')
+                    : ''
+                "
+                >✓</span
+              >
+              <span
+                class="answer-s active"
+                @click="
+                  formAns.answerList.length < formAns.subNum
+                    ? (formAns.answerList += '✗')
+                    : ''
+                "
+                >✗</span
+              >
+            </template>
+            <template v-if="formAns.qusType == 3">
+              <span
+                class="answer-s active"
+                v-for="option in formAns.answerOptions.split(',')"
+                :key="option"
+                @click="setMultiple(formAns, option)"
+                >{{ option }}</span
+              >
+              <span
+                class="answer-s active"
+                @click="
+                  formAns.answerList.split(',').length < formAns.subNum
+                    ? (formAns.answerList += ',')
+                    : ''
+                "
+                >,</span
+              >
+            </template>
+            <template v-if="formAns.qusType == 2" class="answer-box">
+              <span
+                class="answer-s active"
+                v-for="option in formAns.answerOptions.split(',')"
+                :key="option"
+                @click="
+                  formAns.answerList.length < formAns.subNum
+                    ? (formAns.answerList += option)
+                    : ''
+                "
+                >{{ option }}</span
+              >
+            </template>
+            <span
+              class="answer-s delButton"
+              @click="formAns.answerList = formAns.answerList.slice(0, -1)"
+              >x</span
+            >
+          </p>
+        </div>
+        <div class="dialog-footer" slot="footer">
+          <el-button @click="saveFormAns">确 定</el-button>
+          <el-button @click="diaSetAns = false">取 消</el-button>
+        </div>
+      </el-dialog>
     </div>
   </div>
 </template>
  
 <script>
-import { deepClone } from "utils";
+import { deepClone, checkAnswer } from "utils";
 export default {
   data() {
     return {
@@ -145,21 +318,29 @@ export default {
         examsDuration: 90,
         gradeName: "",
         share: 1,
-
         questionList: [],
       },
       paperModifyLog: {
         realName: "",
         modifiedTime: "",
       },
+      diaSetAns: false,
+      formAns: {
+        listIndex: 0, //大题位置
+        endIndex: 0, //相同题目最后一位题目的questionIndex
+        qusType: "", //题目类型
+        subNum: 0, //数量
+        answerOptions: [], //答案选项
+        answerList: "", //答案列表-字符串
+      },
     };
   },
   computed: {
     allScore: function () {
       let score = 0;
-      this.form.questionList.map((item) => {
+      this.questionList.map((item) => {
         score += item.subQuestions.reduce((a, b) => {
-          return a + Number(b.score);
+          return a + (Number(b.score) || 0);
         }, 0);
       }, 0);
       return Number(score).toFixed(2);
@@ -222,7 +403,7 @@ export default {
     },
     setScore(question) {
       let score = question.subQuestions.reduce((a, b) => {
-        return a + b.score;
+        return a + (b.score || 0);
       }, 0);
       return Number(score).toFixed(2);
     },
@@ -237,20 +418,136 @@ export default {
         sub.correctAnswer = arrs.sort().join("");
       }
     },
+    keydownAnswer(event, type) {
+      let answerA = "ABCDEFG";
+      let answer_a = "abcdefg";
+      answerA = answerA.substring(0, this.formAns.subNum);
+      answer_a = answer_a.substring(0, this.formAns.subNum);
+      answerA += answer_a;
+      answerA = type == 2 ? answerA : answerA + ",";
+      if (
+        event.key == "Meta" ||
+        event.key == "CapsLock" ||
+        event.key == "Shift" ||
+        event.key == "Enter" ||
+        event.key == "Alt" ||
+        event.key == "Backspace" ||
+        event.key == "Delete" ||
+        event.key == "ArrowUp" ||
+        event.key == "ArrowDown" ||
+        event.key == "ArrowLeft" ||
+        event.key == "v" ||
+        event.key == "V" ||
+        event.key == "ArrowRight"
+      )
+        return;
+      if (!answerA.includes(event.key)) {
+        event.returnValue = "";
+      }
+    },
+    setAllAnswer(event, type) {
+      let str = this.formAns.answerList;
+      let str2 = checkAnswer(
+        str,
+        type,
+        this.formAns.answerOptions.split(",").length,
+        this.formAns.subNum
+      );
+      this.formAns.answerList = str2;
+    },
+    setAnswer(type, ans) {
+      let txt = "";
+      if (type == 2) {
+        txt = ans;
+      } else if (type == 3) {
+        txt = ans + ",";
+      } else if (type == 4) {
+        txt = ans == 1 ? "✓" : ans == 2 ? "✗" : "";
+      }
+      return txt;
+    },
+    setMultiple(obj, answer) {
+      //多选答案设置
+      obj.answerList += answer;
+      let str = obj.answerList;
+      let str2 = checkAnswer(
+        str,
+        3,
+        obj.answerOptions.split(",").length,
+        obj.answerList.length
+      );
+      obj.answerList = str2;
+    },
+    setFormAns(indexs, index) {
+      //初始化要修改的答案
+      if (this.questionList[0].subQuestions) {
+        this.formAns = { ...this.questionList[index].subQuestions[indexs] };
+        this.formAns.listIndex = index;
+      } else {
+        this.formAns = { ...this.questionList[indexs] };
+        this.formAns.listIndex = indexs;
+      }
+      this.diaSetAns = true;
+    },
+    saveFormAns() {
+      //批量修改答案
+      let EndIndex;
+      let subNum = this.formAns.subNum - 1;
+      if (this.questionList[this.formAns.listIndex].subQuestions) {
+        this.questionList[this.formAns.listIndex].subQuestions.some(
+          (item, index) => {
+            if (this.formAns.endIndex == item.questionIndex) {
+              EndIndex = index;
+              return;
+            }
+          }
+        );
+      } else {
+        this.questionList.some((item, index) => {
+          if (this.formAns.endIndex == item.questionIndex) {
+            EndIndex = index;
+            return;
+          }
+        });
+      }
+
+      for (let i = 0; i <= subNum; i++) {
+        let correctAnswer = "";
+        if (this.formAns.qusType == 2) {
+          correctAnswer = this.formAns.answerList[subNum - i];
+        } else if (this.formAns.qusType == 3) {
+          correctAnswer = this.formAns.answerList.split(",")[subNum - i];
+
+          console.log(this.formAns.answerList.split(",")[subNum - i]);
+        } else if (this.formAns.qusType == 4) {
+          correctAnswer = this.formAns.answerList[subNum - i] == "✓" ? 1 : 2;
+        }
+        if (this.questionList[0].subQuestions) {
+          this.questionList[this.formAns.listIndex].subQuestions[
+            EndIndex - i
+          ].correctAnswer = correctAnswer;
+        } else {
+          this.questionList[EndIndex - i].correctAnswer = correctAnswer;
+        }
+      }
+      this.diaSetAns = false;
+    },
     async save() {
-      // let valid = "";
-      // this.form.questionList.map((item, index) => {
-      //   if (!item.questionTitle) {
-      //     valid += index + 1 + "、";
-      //   }
-      // });
-      // if (valid) {
-      //   this.$message.error(
-      //     `大题名称不能为空，请检查第${valid.slice(0, -1)}题！`
-      //   );
-      //   return;
-      // }
-      let questionList = this.form.questionList.map((item) => {
+      for (let i = 0; i < this.questionList.length; i++) {
+        if (this.questionList[0].subQuestions) {
+          for (let j = 0; j < this.questionList[i].subQuestions.length; j++) {
+            if (this.questionList[i].subQuestions[j].qusType) {
+              this.questionList[i].subQuestions.splice(j, 1);
+            }
+          }
+        } else {
+          if (this.questionList[i].qusType) {
+            this.questionList.splice(i, 1);
+            i--;
+          }
+        }
+      }
+      let questionList = this.questionList.map((item) => {
         item.score = null;
         // item.questionId = "";
         // item.questionIndex = "";
@@ -276,13 +573,127 @@ export default {
       });
       if (status == 0) {
         this.form = deepClone(data);
-        this.form.questionList.map((item) => {
-          item.score = "";
-        });
+        this.questionList = deepClone(this.form.questionList);
         this.paperModifyLog = {
           ...this.paperModifyLog,
           ...this.form.paperModifyLog,
         };
+        if (!!this.questionList[0]?.subQuestions) {
+          this.questionList?.map((item) => {
+            let types = [{}];
+            let addndex = 0;
+            item.subQuestions.map((sub, index) => {
+              if (!!sub.questionType && sub.questionType != 5) {
+                if (sub.questionType == types[addndex].qusType) {
+                  //同类型批量答案+1
+                  types[addndex].subNum += 1;
+                  if (
+                    types[addndex].answerOptions.length <
+                    sub.answerOptions.length
+                  ) {
+                    types[addndex].answerOptions = sub.answerOptions;
+                  }
+                  types[addndex].answerList += this.setAnswer(
+                    sub.questionType,
+                    sub.correctAnswer
+                  );
+                  if (index == item.subQuestions.length - 1) {
+                    //循环最后类型数量大于等于5，保存批量答案
+                    if (types[addndex].subNum && types[addndex].subNum >= 5) {
+                      types[addndex].endIndex = sub.questionIndex;
+                      types[addndex].index = index;
+                    }
+                  }
+                } else {
+                  if (types[addndex].subNum && types[addndex].subNum >= 5) {
+                    //不同类型时如果原有类型数量大于等于5，保存批量答案
+                    types[addndex].endIndex =
+                      item.subQuestions[index - 1].questionIndex;
+                    types[addndex].index = index - 1;
+                    addndex += 1;
+                    types[addndex] = {};
+                  }
+                  //不同类型初始化批量答案
+                  types[addndex].qusType = sub.questionType;
+                  types[addndex].subNum = 1;
+                  types[addndex].answerOptions = sub.answerOptions;
+                  types[addndex].answerList = this.setAnswer(
+                    sub.questionType,
+                    sub.correctAnswer
+                  );
+                }
+              }
+            });
+            for (let i = 0; i < types.length; i++) {
+              if (types[i].qusType == 3) {
+                types[i].answerList = types[i].answerList.slice(0, -1);
+              }
+              if (types[i].subNum >= 5) {
+                item.subQuestions.splice(
+                  types[i].index + i + 1,
+                  0,
+                  deepClone(types[i])
+                );
+              }
+            }
+          });
+        } else {
+          let types = [{}];
+          let addndex = 0;
+          this.questionList?.map((sub, index) => {
+            if (!!sub.questionType && sub.questionType != 5) {
+              if (sub.questionType == types[addndex].qusType) {
+                //同类型批量答案+1
+                types[addndex].subNum += 1;
+                if (
+                  types[addndex].answerOptions.length < sub.answerOptions.length
+                ) {
+                  types[addndex].answerOptions = sub.answerOptions;
+                }
+                types[addndex].answerList += this.setAnswer(
+                  sub.questionType,
+                  sub.correctAnswer
+                );
+                if (index == this.questionList.length - 1) {
+                  //循环最后类型数量大于等于5，保存批量答案
+                  if (types[addndex].subNum && types[addndex].subNum >= 5) {
+                    types[addndex].endIndex = sub.questionIndex;
+                    types[addndex].index = index;
+                  }
+                }
+              } else {
+                if (types[addndex].subNum && types[addndex].subNum >= 5) {
+                  //不同类型时如果原有类型数量大于等于5，保存批量答案
+                  types[addndex].endIndex =
+                    this.questionList[index - 1].questionIndex;
+                  types[addndex].index = index - 1;
+                  addndex += 1;
+                  types[addndex] = {};
+                }
+                //不同类型初始化批量答案
+                types[addndex].qusType = sub.questionType;
+                types[addndex].subNum = 1;
+                types[addndex].answerOptions = sub.answerOptions;
+                types[addndex].answerList = this.setAnswer(
+                  sub.questionType,
+                  sub.correctAnswer
+                );
+              }
+            }
+          });
+          for (let i = 0; i < types.length; i++) {
+            if (types[i].qusType == 3) {
+              types[i].answerList = types[i].answerList.slice(0, -1);
+            }
+            if (types[i].subNum >= 5) {
+              item.subQuestions.splice(
+                types[i].index + i + 1,
+                0,
+                deepClone(types[i])
+              );
+            }
+          }
+        }
       } else {
         this.$message.error(info);
       }
@@ -350,6 +761,13 @@ export default {
     font-weight: 700;
   }
 }
+.set-ans-btn {
+  width: 100%;
+  padding: 10px 0 10px 630px;
+  box-sizing: border-box;
+  border-bottom: 1px solid #e2e2e2;
+  border-right: 1px solid #e2e2e2;
+}
 .el-input-number {
   width: 140px;
 }
@@ -122,6 +122,7 @@
           <el-table-column
             prop="examStartTime"
             label="测验时间"
+            width="160"
             align="center"
           ></el-table-column>
           <el-table-column prop="avgScore" label="班平均分" align="center"