闫增涛
2024-06-13 6b15f89a33b0bffb9837f954c48ea2b21e7381fd
src/components/examinations/index.vue
@@ -1,7 +1,7 @@
<template>
  <div class="examination" v-loading="!cardList.length">
  <div class="examination" v-loading="loading">
    <div
      v-for="(item, nindex) in cardList"
      v-for="(item, nindex) in cardData"
      :key="nindex"
      class="border-box"
      v-show="item.infoList.length"
@@ -68,7 +68,7 @@
                  v-for="(itemText, indexText) in value.stem"
                  :key="indexText"
                >
                  <span v-if="typeof itemText == 'string'">{{ itemText }}</span>
                  <span v-if="typeof itemText == 'string'" v-html="itemText" ></span>
                  <!-- &nbsp; -->
                  <el-input
                    v-else
@@ -124,7 +124,9 @@
                    :src="getPublicImage(content.img, 115)"
                    v-show="content.img"
                    :preview-src-list="[getPublicImage(content.img)]"
                    v-if="isReal"
                  ></el-image>
                  <img :src="content.img" alt="" v-if="!isReal" class="radio-img">
                </p>
                <p
                  class="optionContent"
@@ -402,17 +404,17 @@
      </ul>
    </div>
    <div class="bottom-btn" v-if="!loading">
      <el-button class="btn-box" @click="saveAnswer">保存</el-button>
      <el-button class="examinations-btn-box" @click="saveAnswer">保存</el-button>
      <el-button
        @click="handleQuestion"
        class="btn-box"
        class="examinations-btn-box"
        :style="{ borderColor: primaryColor }"
        >提交</el-button
      >
      <el-button @click="redo" class="btn-box">重做</el-button>
      <el-button @click="redo" class="examinations-btn-box">重做</el-button>
      <el-button
        @click="openAnswers"
        class="btn-box"
        class="examinations-btn-box"
        :style="{ borderColor: primaryColor }"
        >查看答案</el-button
      >
@@ -421,14 +423,11 @@
</template>
<script>
import { getPublicImage } from "@/assets/js/middleGround/tool";
export default {
  name: "examination-option",
  // props: ["cardList"],
  props: {
    cardList: {
      type: Array,
      default:[]
    },
    primaryColor: {
      type: String,
@@ -440,14 +439,38 @@
    page: {
      type: Number,
    },
    isReal:{
      type:Boolean,
      default:true
    }
  },
  data() {
    return {
      type: "option",
      loading: false,
      cardData:[],
      loading:true,
    };
  },
  mounted() {},
  watch:{
    cardList:{
      handler(newVal) {
        console.log('11',newVal);
        this.cardData = this.cardList
        if(newVal && newVal.length) {
          this.loading = false
        }
      },
      immediate:true,
      deep:true
    }
  },
  mounted() {
    // this.cardData = this.cardList
    // console.log('this.cardList',this.cardList);
    // console.log('this.cardData',this.cardData);
  },
  methods: {
    // 数组转为字符串方法
    arrayToString(data) {
@@ -481,24 +504,19 @@
      }
    },
    redo() {
      for (let index = 0; index < this.cardList.length; index++) {
        const item = this.cardList[index];
      for (let index = 0; index < this.cardData.length; index++) {
        const item = this.cardData[index];
        for (let cindex = 0; cindex < item.infoList.length; cindex++) {
          const citem = item.infoList[cindex];
          citem.userAnswer = "";
          citem.isComplete = false;
        }
      }
      // for (let index = 0; index < this.questionList.length; index++) {
      //   const item = this.questionList[index];
      //   item.userAnswer = "";
      //   item.isComplete = false
      // }
    },
    openAnswers() {
      this.$data.loading = true;
      for (let index = 0; index < this.cardList.length; index++) {
        const item = this.cardList[index];
      for (let index = 0; index < this.cardData.length; index++) {
        const item = this.cardData[index];
        for (let cindex = 0; cindex < item.infoList.length; cindex++) {
          const citem = item.infoList[cindex];
          citem.isComplete = true;
@@ -511,7 +529,7 @@
    },
    // 批改题目  (练习,我的做题,我的收藏模式下)
    handleQuestion() {
      const list = this.$props.cardList;
      const list = this.cardData;
      for (let index = 0; index < list.length; index++) {
        const item = list[index];
        for (let cindex = 0; cindex < item.infoList.length; cindex++) {
@@ -556,37 +574,61 @@
          }
        }
      }
      this.$props.cardList = list;
      console.log(this.$props.cardList);
      this.cardData = list;
      console.log(this.cardData);
    },
    getParentWithClass(element, className) {
      while (element.parentElement) {
        element = element.parentElement;
        if (element.classList.contains(className)) {
          return element;
        }
      }
    },
    // 保存按钮
    saveAnswer() {
      console.log(this.cardList);
      const oldAnswerData = localStorage.getItem("oldAnswerData");
      let oldData = oldAnswerData ? JSON.parse(oldAnswerData) : {};
      const asnwerList = [];
      for (let index = 0; index < this.$props.cardList.length; index++) {
        const item = this.$props.cardList[index];
        for (let cindex = 0; cindex < item.infoList.length; cindex++) {
          const citem = item.infoList[cindex];
          asnwerList.push({
            id: citem.id,
            userAnswer: citem.userAnswer,
          });
      const element = (this.container ? this.container : document
      ).querySelector(".examination");
      if (element) {
        const pageNum = this.getParentWithClass(
          element,
          "page-box"
        ).getAttribute("page");
        const oldAnswerData = localStorage.getItem(
          this.config.activeBook.name + "oldAnswerData"
        );
        let oldData = oldAnswerData ? JSON.parse(oldAnswerData) : {};
        const asnwerList = [];
        for (let index = 0; index < this.cardData.length; index++) {
          const item = this.cardData[index];
          for (let cindex = 0; cindex < item.infoList.length; cindex++) {
            const citem = item.infoList[cindex];
            asnwerList.push({
              id: citem.id,
              userAnswer: citem.userAnswer,
            });
          }
        }
        if(oldData[pageNum]) {
          oldData[pageNum] = oldData[pageNum].filter(citem => asnwerList.findIndex(ditem => ditem.id == citem.id) == -1 )
          oldData[pageNum].push(...asnwerList)
        } else {
          oldData[pageNum] = asnwerList
        }
        localStorage.setItem(this.config.activeBook.name + "oldAnswerData", JSON.stringify(oldData));
      }
      if(oldData[this.chapter]) {
        oldData[this.chapter][this.page] = asnwerList
      } else {
        oldData[this.chapter] = {}
        oldData[this.chapter][this.page] = asnwerList
      }
      console.log(oldData);
      localStorage.setItem("oldAnswerData", JSON.stringify(oldData));
      // if(oldData[this.chapter]) {
      //   oldData[this.chapter][this.page] = asnwerList
      // } else {
      //   oldData[this.chapter] = {}
      //   oldData[this.chapter][this.page] = asnwerList
      // }
      // console.log(oldData);
    },
  },
};
</script>
<style lang="less" scoped>
@@ -603,7 +645,7 @@
    list-style: none;
  }
}
.btn-box {
.examinations-btn-box {
  height: 30px;
  width: 78px;
  padding: 4px 10px;
@@ -1100,4 +1142,8 @@
    margin-top: 10px;
  }
}
.radio-img {
  width: 200px;
  object-fit: contain;
}
</style>