拖拽题控件

闫增涛

2024-06-24 be7eb48ee79b368139cf517f731717a3d63b8320

 src/components/examinations/index.vue

@@ -73,12 +73,13 @@
                    v-html="itemText"
                  ></span>
                  <!-- &nbsp; -->
                  <el-input
                  <input
                    v-else
                    type="text"
                    class="input"
                    v-model.trim="value.userAnswer[itemText.num]"
                    :disabled="value.isComplete"
                    :style="{ backgroundColor: inputBc }"
                  />
                  <!-- &nbsp; -->
                </span>
@@ -91,7 +92,13 @@
                v-cloak
              ></p>
            </div>
            <img :src="value.isCollect ? isHeart : heart" alt="" class="collect-png" @click="handleCollect(nindex,index)" >
            <img
              :src="value.isCollect ? isHeart : heart"
              alt=""
              class="collect-png"
              @click="setCollect(nindex, index)"
              v-if="!(hideCollect && value.questionType == 'shortAnswer')"
            />
            <!-- 收藏 -->
          </div>
          <div class="questionContent">
@@ -292,41 +299,41 @@
                      <!-- 正确错误图标 -->
                      <span class="mr-10">
                        <svg
                        v-if="value.isRight"
                        t="1716986419862"
                        class="icon"
                        viewBox="0 0 1820 1024"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        p-id="18767"
                        xmlns:xlink="http://www.w3.org/1999/xlink"
                        width="40"
                        height="20"
                      >
                        <path
                          d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
                          fill="#1AFA29"
                          p-id="18768"
                        ></path>
                      </svg>
                      <svg
                        v-if="value.isRight == false"
                        t="1716987085767"
                        class="icon"
                        viewBox="0 0 1024 1024"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        p-id="25745"
                        xmlns:xlink="http://www.w3.org/1999/xlink"
                        width="20"
                        height="20"
                      >
                        <path
                          d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
                          fill="#d81e06"
                          p-id="25746"
                        ></path>
                      </svg>
                          v-if="value.isRight"
                          t="1716986419862"
                          class="icon"
                          viewBox="0 0 1820 1024"
                          version="1.1"
                          xmlns="http://www.w3.org/2000/svg"
                          p-id="18767"
                          xmlns:xlink="http://www.w3.org/1999/xlink"
                          width="40"
                          height="20"
                        >
                          <path
                            d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
                            fill="#1AFA29"
                            p-id="18768"
                          ></path>
                        </svg>
                        <svg
                          v-if="value.isRight == false"
                          t="1716987085767"
                          class="icon"
                          viewBox="0 0 1024 1024"
                          version="1.1"
                          xmlns="http://www.w3.org/2000/svg"
                          p-id="25745"
                          xmlns:xlink="http://www.w3.org/1999/xlink"
                          width="20"
                          height="20"
                        >
                          <path
                            d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
                            fill="#d81e06"
                            p-id="25746"
                          ></path>
                        </svg>
                      </span>

                      <div class="headerConent sitgBox">
@@ -474,7 +481,7 @@
</template>

<script>
import { Message } from 'element-ui';
import { Message } from "element-ui";
export default {
  name: "examination-option",
  props: {
@@ -495,6 +502,18 @@
      type: Boolean,
      default: true,
    },
    inputBc: {
      type: String,
      default: "#fff",
    },
    hideCollect: {
      type: Boolean,
      default: false,
    },
    sourceType: {
      type: String,
      default: "bits",
    },
  },
  data() {
    return {
@@ -502,8 +521,30 @@
      loading: false,
      cardData: [],
      loading: true,
      heart:require("@/assets/images/heart.png"),
      isHeart:require("@/assets/images/heart-check.png"),
      heart: require("@/assets/images/heart.png"),
      isHeart: require("@/assets/images/heart-check.png"),
      collectList: [],
      allCollect: [
        {
          type: "bits",
          collectList: [],
        },
        {
          type: "json",
          collectList: [],
        },
      ],
      errorList: [],
      allError: [
        {
          type: "bits",
          errorList: [],
        },
        {
          type: "json",
          errorList: [],
        },
      ],
    };
  },
  watch: {
@@ -519,9 +560,8 @@
    },
  },
  mounted() {
    // this.cardData = this.cardList
    // console.log('this.cardList',this.cardList);
    // console.log('this.cardData',this.cardData);
    this.getCollectIdList();
    this.getErrorList();
  },
  methods: {
    // 数组转为字符串方法
@@ -581,6 +621,7 @@
    },
    // 批改题目  (练习,我的做题,我的收藏模式下)
    handleQuestion() {
      let errorId = [];
      const list = this.cardData;
      for (let index = 0; index < list.length; index++) {
        const item = list[index];
@@ -624,10 +665,38 @@
              }
            }
          }
          if (citem.isRight == false) {
            errorId.push(citem.id);
          }
        }
      }
      this.cardData = list;
      console.log(this.cardData);
      let oldErrodId = this.allError.find(
        (item) => item.type == this.sourceType
      ).errorList;
      for (let index = 0; index < errorId.length; index++) {
        const item = errorId[index];
        if (oldErrodId.indexOf(item == -1)) {
          oldErrodId.push(item);
        }
      }
      for (let cindex = 0; cindex < this.allError.length; cindex++) {
        const citem = this.allError[cindex];
        if (citem.type == this.sourceType) citem.errorList = oldErrodId;
      }
      this.MG.identity
        .setUserKey({
          setKeyRequests: [
            {
              domain: "errorData",
              key: this.config.activeBook.bookId,
              value: JSON.stringify(this.allError),
            },
          ],
        })
        .then((res) => {
          console.log("错题已保存", this.allError);
        });
    },
    getParentWithClass(element, className) {
      while (element.parentElement) {
@@ -672,7 +741,7 @@
          this.config.activeBook.name + "oldAnswerData",
          JSON.stringify(oldData)
        );
        Message.success('保存成功')
        Message.success("保存成功");
      }

      // if(oldData[this.chapter]) {
@@ -683,10 +752,104 @@
      // }
      // console.log(oldData);
    },
    handleCollect(infoNum,num) {
      console.log(this.cardData[infoNum].infoList[num]      );
      this.cardData[infoNum].infoList[num].isCollect = !this.cardData[infoNum].infoList[num].isCollect
    }
    handleCollect(infoNum, num) {
      this.cardData[infoNum].infoList[num].isCollect =
        !this.cardData[infoNum].infoList[num].isCollect;
    },
    // 题目收藏按钮,收藏和取消同一接口，取消数组减去该项id
    setCollect(num, number) {
      const item = this.cardData[num].infoList[number];
      item.isCollect = !item.isCollect;
      if (this.cardData.length == 0) {
        this.collectList.push(item.id);
      } else {
        const isShow = this.collectList.findIndex((citem) => citem == item.id);
        if (isShow == -1) {
          this.collectList.push(item.id);
        } else {
          this.collectList = this.collectList.filter(
            (citem) => citem != item.id
          );
        }
      }
      const list = this.collectList;
      for (let index = 0; index < this.allCollect.length; index++) {
        const item = this.allCollect[index];
        if (item.type == this.sourceType) item.collectList = this.collectList;
      }
      // console.log(this.allCollect, this.collectList, list);
      this.MG.identity
        .setUserKey({
          setKeyRequests: [
            {
              domain: "collectData",
              key: this.config.activeBook.bookId,
              value: JSON.stringify(this.allCollect),
            },
          ],
        })
        .then((res) => {
          console.log("收藏/取消成功");
        });
    },
    // 获取收藏id列表
    getCollectIdList() {
      const token = localStorage.getItem("token");
      if (!token) return false;
      this.MG.identity
        .getUserKey({
          domain: "collectData",
          keys: [this.config.activeBook.bookId],
        })
        .then((res) => {
          try {
            const collect = JSON.parse(res[0].value);
            if (collect.length) {
              this.collectList = collect.find(
                (citem) => citem.type == this.sourceType
              ).collectList;
              this.allCollect[0].collectList = collect.find(
                (citem) => citem.type == "bits"
              ).collectList;
              this.allCollect[1].collectList = collect.find(
                (citem) => citem.type == "json"
              ).collectList;
            }
          } catch (error) {
            console.log("暂无数据");
          }
        })
        .catch((res) => {
          console.log("答题器请求题目收藏id报错");
        });
    },
    // 获取错题id列表
    getErrorList() {
      const token = localStorage.getItem("token");
      if (!token) return false;
      this.MG.identity
        .getUserKey({
          domain: "errorData",
          keys: [this.config.activeBook.bookId],
        })
        .then((res) => {
          try {
            const error = JSON.parse(res[0].value);
            if (error.length) {
              this.errorList = error.find(
                (citem) => citem.type == this.sourceType
              ).errorList;
              this.allError[0].errorList = error.find(
                (citem) => citem.type == "bits"
              ).errorList;
              this.allError[1].errorList = error.find(
                (citem) => citem.type == "json"
              ).errorList;
            }
          } catch (error) {}
        })
        .catch(() => {});
    },
  },
};
</script>
@@ -824,23 +987,15 @@
        font-weight: 400;
        margin-top: 6px;
      }
      .el-input {
      input {
        width: 140px;
        height: 24px;
        border-top: 0;
        border: 0;
        outline: none;
        border-bottom: 1px solid #15c0f2;
      }
      /deep/ .el-textarea.is-disabled .el-textarea__inner {
        background-color: #fff;
      }
      /deep/.el-input__wrapper {
        border-top: 0 !important;
      }
      /deep/ .el-input__inner {
        border-top: 0 !important;
        border-left: 0 !important ;
        border-right: 0 !important ;
        border-bottom: 1px solid #15c0f2 !important;
        border-radius: 0 !important;
      }
      /deep/ .el-input.is-disabled .el-input__inner {
        background-color: #fff;