baoman / Ezquiz_Platform

<template>
  <div class="page-content" v-loading="queryLoading">
    <div class="page-title">
      <span class="default-title">错题组卷</span>
      <div>
        <el-select
          v-model="formData.grade"
          placeholder=""
          style="width: 100px"
          @change="changeGrade"
        >
          <el-option
            v-for="item in gradeList"
            :key="item.grade"
            :label="item.gradeName"
            :value="item.grade"
          >
          </el-option>
        </el-select>
        <el-select
          @change="changeSubject"
          v-model="formData.subjectName"
          placeholder=""
          style="width: 100px; margin-left: 10px"
        >
          <el-option
            v-for="(item, index) in subjectList"
            :key="index"
            :label="item.toString()"
            :value="item"
          >
          </el-option>
        </el-select>
      </div>
    </div>
    <div class="info">
      <div class="box-search page-padding">
        <el-row :gutter="20">
          <el-col class="col-margin" :span="24"
            ><span style="font-weight: 600">班级：</span>
            <div
              @click="handleClass(item.classId)"
              class="select-box"
              :class="item.classId === formData.classId ? 'Selected' : ''"
              v-for="(item, index) in classList"
              :key="index"
            >
              {{ item.className }}
            </div>
          </el-col>
          <el-col class="col-margin" :span="12">
            <span style="font-weight: 600">时间：</span>
            <el-date-picker
              :clearable="false"
              value-format="yyyy-MM-dd"
              class="filter-datePicker"
              v-model="formData.dateRange"
              type="daterange"
              range-separator="-"
            >
            </el-date-picker>
            <div
              @click="handleDate(item.type)"
              class="select-box"
              :class="item.type === formData.type ? 'Selected' : ''"
              v-for="(item, index) in dateList"
              :key="index"
            >
              {{ item.name }}
            </div>
          </el-col>
          <el-col class="col-margin" :span="8">
            <span style="font-weight: 600">得分率：</span>
            <div>
              <el-input
                v-model="formData.startScoreRate"
                type="number"
                :min="minValue"
                :max="maxValue"
                @change="startValidateInput(formData.startScoreRate)"
                placeholder="请输入一个数字"
                style="width: 70px; margin-right: 4px"
              ></el-input
              >% ~
              <el-input
                v-model="formData.endScoreRate"
                type="number"
                :min="minValue"
                :max="maxValue"
                @change="endValidateInput(formData.endScoreRate)"
                placeholder="请输入一个数字"
                style="width: 70px; margin-right: 4px"
              ></el-input>
              %
            </div>
          </el-col>
          <el-col class="col-margin" :span="7"
            ><span style="font-weight: 600">题型：</span>
            <div
              @click="handleQuestion(item.value)"
              class="select-box"
              :class="item.value === formData.questionType ? 'Selected' : ''"
              v-for="(item, index) in questionList"
              :key="index"
            >
              {{ item.label }}
            </div></el-col
          >
          <el-col class="col-margin" :span="2"
            ><el-button
              @click="handleSearch"
              style="background: #6b73f5"
              type="primary"
              y
              >筛选错题</el-button
            ></el-col
          >
        </el-row>
      </div>
      <div class="box-info">
        <div class="box-info-title">
          错题列表
          <span
            >(共<span style="color: #000000; padding: 0 3px">{{
              this.listPage.total
            }}</span
            >道题)</span
          >
        </div>
        <div class="topic" v-for="(item, index) in topicList" :key="index">
          <div class="topic-title">
            <div style="display: flex">
              <div style="display: flex; align-items: center">
                <span class="size"> 第 {{ item.questionIndex }} 题 </span>
                <div
                  class="select-box Selected size"
                  style="padding: 3px 5px; margin-right: 20px"
                >
                  {{
                    questionList.find(
                      (subItem) => subItem.value == item.questionType
                    ).label
                  }}
                </div>
              </div>
              <div>
                <span class="color size"> 得分率： </span>
                <span class="score-color size">{{ item.scoreRate }}%</span>
                <span class="size">({{ item.joinClassNames }})</span>
              </div>
            </div>
            <div>
              <span class="color size">来自试卷：</span
              ><span class="size">{{ item.paperName }}</span>
              <span class="color size" style="margin-left: 20px"
                >测试时间：</span
              ><span class="size">{{ item.testTime }}</span>
            </div>
          </div>

          <iframe
            class="topic-info"
            :src="item.screenshot"
            :ref="'iframe' + index"
            style="width: 100%"
            @load="onIFrameLoad(index)"
          />
          <!-- <div class="topic-info" v-html="item.modifiedHtml"></div> -->
          <div class="topic-bottom">
            <div>
              <span v-if="item.answerScreenshot" class="knowledge size"
                ><i class="el-icon-key"></i>查看解析</span
              >
              <span class="color size">知识点：</span>
              <span class="size">{{ item.knowledge }}</span>
            </div>
            <el-button
              v-if="!questions.some((obj) => item.id === obj.id)"
              class="button"
              type="primary"
              @click="handleAddTest(item)"
              >加入试卷</el-button
            >
            <el-button
              v-else
              plain
              style="padding: 5px 10px"
              @click="handleDel(item)"
              >移除试卷</el-button
            >
          </div>
        </div>
      </div>
    </div>
    <div class="paging">
      <div></div>
      <el-pagination
        @current-change="pageSizeChange"
        background
        layout="prev, pager, next"
        :page-size="listPage.size"
        :current-page="listPage.page"
        :total="listPage.total"
      >
      </el-pagination>

      <el-button
        class="button button-size"
        type="primary"
        v-if="
          !arraysEqual(
            topicList.map((item) => item.id),
            questions.map((item) => item.id)
          )
        "
        @click="handleAllTest()"
        >全选本页</el-button
      >
      <el-button
        @click="handleDelTest()"
        class="button-size"
        v-else
        plain
        style="padding: 5px 10px"
        >移除本页</el-button
      >
    </div>
    <div class="shopping" @click="handleShop">
      <div class="shopping-select">{{ questions.length }}</div>
      <i class="el-icon-shopping-cart-full" style="padding: 5px 0 0 0"></i>
      <div>
        <div class="size">试</div>
        <div class="size">题</div>
        <div class="size">篮</div>
      </div>
    </div>
    <wrongQuestionDialog
      :visible.sync="visible"
      :list="questions"
      :subjectName="formData.subjectName"
      :sectionId="formData.sectionId"
      :gradeId="formData.grade"
      @setQuestions="setQuestions"
    />
  </div>
</template>
  
  <script>
import { setDateRules } from "@/utils";
import wrongQuestionDialog from "./components/wrongQuestionDialog.vue";
export default {
  components: {
    wrongQuestionDialog,
  },
  data() {
    return {
      loading: false,
      minValue: 0, // 最小值
      maxValue: 100, // 最大值
      visible: false, // 购物车弹框控制
      queryLoading: false, //loading
      // 分页
      listPage: {
        page: 1,
        size: 10,
        total: 0,
      },
      // 科目搜索
      subjectList: [],
      // 年级
      gradeList: [],

      // 班级选择
      classList: [],
      // 时间选择
      dateList: [
        { type: "onDay", name: "今天" },
        { type: "onWeek", name: "本周" },
        { type: "term", name: "本学期" },
      ],
      // 题型选择
      questionList: [
        { label: "全部", value: null },
        { label: "单选", value: 2 },
        { label: "多选", value: 3 },
        { label: "判断", value: 4 },
        { label: "主观", value: 5 },
      ],
      // 题目列表
      topicList: [],
      // 搜索内容
      formData: {
        classId: 1, // 班级选中
        // type: "onDay", // 时间类型
        type: "term", // 时间类型
        dateRange: ["2022-03-01", "2023-05-01"], // 开始结束时间
        startScoreRate: 0, // 开始区间
        endScoreRate: 100, // 结束区间
        questionType: null, // 题型
        subjectName: null, // 科目
        grade: null, // 年级
        gradeName: null, // 年级名称
      },
      questions: [],
    };
  },
  created() {
    this.handleDate(this.formData.type);
    this.queryLoading = true;
    this.getGradeList();
    if (!localStorage.getItem("testlist")) {
      localStorage.setItem("testlist", JSON.stringify(this.questions));
    } else {
      this.questions = JSON.parse(localStorage.getItem("testlist"));
      console.log(this.questions, "===");
    }
  },
  methods: {
    async loadAndModifyHTML(array) {
      let list = array;
      for (let item of list) {
        try {
          // 使用 fetch 获取 HTML 内容
          const response = await fetch(item.screenshot);
          const htmlContent = await response.text();
          // 创建一个临时的 DOM 节点，方便操作 HTML 内容
          const parser = new DOMParser();
          const doc = parser.parseFromString(htmlContent, "text/html");

          // // 修改 HTML 内容，例如删除第一个 <p> 标签
          const firstP = doc.querySelector("p");
          // if (firstP) {
          //   firstP.remove(); // 删除第一个 <p> 标签
          // }

          // 或者修改第一个 < p > 标签的内容;
          // if (firstP) {
          //   // console.log(firstP.innerHTML);

          //   let a = this.processString(firstP.innerHTML);

          //   firstP.innerHTML = a;
          //   // console.log(firstP.textContent);
          // }

          // 更新列表中的对象，保存修改后的 HTML
          item.modifiedHtml = doc.documentElement.outerHTML; // 或者将 doc.body.innerHTML 保存到 item 中
        } catch (error) {
          console.error(
            `Error fetching or modifying HTML for item ${item.id}:`,
            error
          );
        }
      }
      return list;
    },
    // 获取列表
    async getList() {
      let param = {
        ...this.listPage,
        ...this.formData,
        startDate: this.formData.dateRange[0],
        endDate: this.formData.dateRange[1],
      };
      let data = await this.$request.getWrongQuestionList(param);
      this.queryLoading = false;
      this.topicList = data.data.records;
      this.listPage.total = data.data.total;
      // this.topicList = await this.loadAndModifyHTML(data.data.records);
    },
    pageSizeChange(value) {
      this.listPage.page = value;
      this.handleSearch();
    },

    // 全选按钮
    handleAll() {
      console.log(123123);
    },

    // 班级选中
    handleClass(id) {
      this.formData.classId = id;
    },

    // 题型选中

    handleQuestion(id) {
      this.formData.questionType = id;
    },
    // 时间选中
    handleDate(type) {
      this.formData.type = type;
      let params = setDateRules(type);
      this.formData.dateRange = [params.startDay, params.endDay];
    },

    // 输入不超过100
    startValidateInput(value) {
      if (value < this.minValue) {
        this.formData.startScoreRate = this.minValue; // 修正值
      }
      if (value > this.maxValue) {
        this.formData.startScoreRate = this.maxValue; // 修正值
      }
      if (value > this.formData.endScoreRate) {
        this.formData.startScoreRate = this.formData.endScoreRate;
      }
    },
    // 输入不超过100
    endValidateInput(value) {
      if (value < this.minValue) {
        this.formData.endScoreRate = this.minValue; // 修正值
      }
      if (value > this.maxValue) {
        this.formData.endScoreRate = this.maxValue; // 修正值
      }
      if (value < this.formData.startScoreRate) {
        this.formData.endScoreRate = this.formData.startScoreRate;
      }
    },

    // 搜索按钮
    handleSearch() {
      this.queryLoading = true;
      this.getList();
    },

    // 加入试卷
    handleAddTest(item) {
      // if (this.questions.includes(item.id)) return;
      if (this.questions.some((obj) => obj.id === item.id)) return;
      this.questions = JSON.parse(localStorage.getItem("testlist")) || [];
      this.questions.push(item);
      localStorage.setItem("testlist", JSON.stringify(this.questions));
    },
    // 移除试卷
    handleDel(item) {
      let _index = this.questions.findIndex((obj) => obj.id === item.id);
      if (_index !== -1) {
        this.questions.splice(_index, 1); // 从索引位置删除一个元素
        localStorage.setItem("testlist", JSON.stringify(this.questions));
      }
    },
    // 全部选中
    handleAllTest() {
      // 获取原来的localStorage
      let list = JSON.parse(localStorage.getItem("testlist")) || [];

      let ids = this.topicList.map((item) => {
        return item;
      });
      console.log(list, "-=-11-=");

      this.questions = this.removeDuplicates([...ids, ...list]);
      localStorage.setItem("testlist", JSON.stringify(this.questions));
    },
    // 全部删除
    handleDelTest() {
      let list = this.removeMatchingValues(
        this.topicList.map((item) => item.id),
        this.questions.map((item) => item.id)
      );
      this.questions = list;
      localStorage.setItem("testlist", JSON.stringify(this.questions));
    },
    // 重置 去除locastorage 以及 questions
    handleRest() {
      this.questions = [];
      localStorage.setItem("testlist", JSON.stringify(this.questions));
    },
    // 去重
    removeDuplicates(arr) {
      const seen = new Set();
      return arr.filter((item) => {
        if (!seen.has(item.id)) {
          seen.add(item.id);
          return true;
        }
        return false;
      });
    },
    // 去除第二数组中存在第一数组中的值
    removeMatchingValues(arr1, arr2) {
      // 将第一个数组的值存入 Set，提高查找效率
      const valuesSet = new Set(arr1);

      // 过滤第二个数组，保留不在 Set 中的值
      return arr2.filter((value) => !valuesSet.has(value));
    },

    // 判断第一个数组在第二个种是否全部存在
    arraysEqual(arr1, arr2) {
      // 将第二个数组转为 Set
      const valuesSet = new Set(arr2);

      // 判断第一个数组中的值是否都在 Set 中
      return arr1.every((value) => valuesSet.has(value));
    },

    // 购物车触发弹框
    handleShop() {
      if (this.questions.length > 0) {
        this.visible = true;
      }
    },

    // 获取科目列表
    async getSubject(params) {
      console.log(params, "params");

      let data = await this.$request.getSubjectList(params);
      console.log(data, "--------");

      this.subjectList = data.data.subjectNames;
      this.formData.subjectName = this.subjectList[0];
      this.getClassList();
    },
    // 获取年级列表
    async getGradeList() {
      let data = await this.$request.getClassList();
      console.log(data, "----------data");

      this.gradeList = Array.from(
        new Map(data.data.list.map((item) => [item.grade, item])).values()
      );
      console.log(this.gradeList, "gradeList");

      this.formData.grade = this.gradeList[0].grade;
      this.formData.sectionId = this.gradeList[0].section;
      this.formData.gradeName = this.gradeList.find(
        (itme) => itme.grade == this.formData.grade
      ).gradeName;
      this.getSubject({ gradeName: this.formData.gradeName });
    },
    // 获取班级信息
    async getClassList() {
      let data = await this.$request.getClassList({
        grade: this.formData.grade,
        subjectName: this.formData.subjectName,
      });
      this.classList = [
        { className: "全部", classId: null },
        ...data.data.list,
      ];
      this.formData.classId = null;
      this.getList();
    },

    // 年级改变
    changeGrade(value) {
      let item = this.gradeList.find((subItem) => subItem.grade == value);
      this.formData.sectionId = item.section;
      this.formData.gradeName = item.gradeName;
      this.queryLoading = true;
      this.getSubject({ gradeName: this.formData.gradeName });
    },
    // 科目改变
    changeSubject() {
      this.queryLoading = true;
      this.getClassList();
    },
    processString(input) {
      // 正则表达式：匹配最多三位数字
      const regex = /^(\d{1,3})/;

      // 测试字符串是否以数字开头
      const match = input.match(regex);

      if (match) {
        // 如果匹配，去掉开头的数字并返回剩余部分
        return input.substring(match[0].length + 1).trim();
      }

      // 如果没有匹配，直接返回原字符串
      return input;
    },

    // 获取ref
    onIFrameLoad(index) {
      const iframeRef = this.$refs["iframe" + index][0]; // 获取对应的 iframe
      const doc = iframeRef.contentDocument || iframeRef.contentWindow.document;
      const body = iframeRef.contentWindow.document.body;
      body.style.overflowX = "hidden"; // 不允许出现横向滚动条
      const height = body.scrollHeight; // 获取内容的高度
      iframeRef.style.height = `${height}px`; // 设置 iframe 的高度
      // 获取第一个P标签
      const firstP = doc.getElementsByTagName("p")[0];
      // 或者修改第一个 < p > 标签的内容;
      if (firstP) {
        let a = this.processString(firstP.innerHTML);
        firstP.innerHTML = a;
      }
    },

    // 子集删除后 父级需要更新
    setQuestions() {
      this.questions = JSON.parse(localStorage.getItem("testlist")) || [];
    },
  },
};
</script>
  
  <style lang="scss" scoped>
.page-content {
  box-sizing: border-box;
  padding: 0 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #f5f6fa;
  font-size: 14px;
  color: #000000;
  position: relative;
  .page-title {
    padding: 20px 0;
    display: flex;
    justify-content: space-between;
  }
  .info {
    flex: 1;
    overflow: auto;
    display: flex;
    flex-direction: column;
    .box-search {
      background: #ffffff;
      border-radius: 5px;
    }
    .box-info {
      margin-top: 15px;
      background: #ffffff;
      flex: 1;
      padding: 10px 20px;
      .box-info-title {
        font-size: 16px !important;
        font-weight: 600;
        color: #000000;
        span {
          font-size: 14px !important;
          color: #999999;
        }
      }
      .topic {
        height: fit-content;
        max-height: 500px;
        margin-top: 15px;
        display: flex;
        flex-direction: column;
        box-shadow: 0px 0px 9px 0px #999999;
        border-radius: 5px;
        .topic-title {
          height: 45px;
          background: rgb(243, 243, 243);
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-weight: 600;
          padding: 0 20px;
          border-radius: 5px 5px 0 0;
        }
        .topic-info {
          overflow-y: auto;
          max-height: 300px;
        }
        .topic-bottom {
          height: 45px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin: 0 20px;
          font-weight: 600;
          box-sizing: border-box;
          border-top: 1px solid #d2cdcd;
          .knowledge {
            color: rgb(105, 134, 205);
            margin-right: 30px;
            cursor: pointer;
          }
        }
      }
    }
  }
  .paging {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #666666;
    background: #ffffff;
    box-shadow: 0 0 3px 0 #666666;
    padding: 5px 20px 0 20px;
  }

  .shopping {
    width: 40px;
    height: 120px;
    position: fixed;
    top: 30%;
    right: 0;
    background: #6b73f5;
    border-radius: 10px 0 0 10px;
    color: #ffffff;
    font-size: 12px !important;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    box-sizing: border-box;
    padding: 10px 0;
    text-align: center;
    cursor: pointer;
    .shopping-select {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: yellow;
      color: red;
      line-height: 20px;
      font-size: 12px !important;
    }
    .size {
      font-size: 14px !important;
    }
  }
}

.page-padding {
  box-sizing: border-box;
  padding: 14px 20px;
}
.col-margin {
  margin: 10px 0;
  display: flex;
  align-items: center;
}
.button {
  background: #6b73f5;
  padding: 5px 10px;
}
.select-box {
  padding: 5px 10px;
  border-radius: 5px;
  margin: 0 8px;
  cursor: pointer;
}
.Selected {
  background: rgba(223, 229, 253, 1);
  color: rgb(105, 134, 205);
  cursor: pointer;
}

.color {
  color: #999999;
}
.score-color {
  color: rgb(234, 160, 73);
  margin-right: 10px;
}
.size {
  font-size: 14px !important;
}
</style>