baoman / Ezquiz_Platform

  <template>

    <el-dialog
      :visible.sync="visible"
      width="70%"
      :before-close="handleClose"
      :modal-append-to-body="false"
    >

      <div class="test-box" v-if="groups">
        <div class="test">

          <div class="test-title" @click="enableEditing">

            <div
              class="test-title"
              v-if="!isEditing"
              @mouseenter="handleMouseEnter"
              @mouseleave="handleMouseLeave"
              :class="isHovered ? 'hover' : ''"
            >

              {{ inputValue }}
            </div>

            <div
              v-if="isHovered"
              class="tooltip"
              :style="{
                top: tooltipPosition.y + 'px',
                left: tooltipPosition.x + 'px',
              }"
            >

              单击设置试卷标题

            </div>

            <el-input
              class="test-title"
              ref="editInput"
              v-if="isEditing"
              v-model="inputValue"
              @blur="save"
              @keyup.enter.native="save"
              style="padding: 0 200px"
            />

          </div>
          <div class="test-group">

            <div
              class="outer-item"
              v-for="(group, index) in groups"
              :key="group.questionType"
              :class="{
                border: selectedIndex === group.questionType,
              }"
              @mouseenter="handleGroupMouseEnter(group.questionType, 'all')"
              @mouseleave="handleGroupMouseLeave"
            >
              <div
                v-if="selectedIndex == group.questionType"
                class="border-del"
                @click="handleDel(group.questionType, 'all')"
              >

                删除
              </div>
              <!-- 每个组的标题 -->

              <div
                class="test-group-title"
                :class="{
                  border: selectedIndex == group.questionType,
                }"
                @mouseenter="handleGroupMouseEnter(group.questionType, 'all')"
              >

                <div class="size-16" style="font-weight: 600">
                  {{ index + 1 }}、

                  <span
                    @mouseenter="
                      (event) => handleItemMouseEnter(event, group.questionType)
                    "
                    @mouseleave="handleItemMouseLeave"
                    :class="isItemHovered == group.questionType ? 'hover' : ''"
                    class="size-16"
                    @click="groupEditing(index)"
                    v-show="!group.input"
                    >{{ group.questionTitle }}</span
                  >

                  <el-input
                    :ref="'refInput' + index"
                    class="size-16"
                    size="mini"
                    v-show="group.input"
                    v-model="group.questionTitle"
                    @blur="groupSave(index)"
                    @keyup.enter.native="groupSave(index)"
                    style="width: fit-content"
                  />
                  <div
                    v-if="isItemHovered == group.questionType"
                    class="tooltip"
                    :style="{
                      top: tooltipPosition.y + 'px',
                      left: tooltipPosition.x + 'px',
                    }"
                  >

                    单击设置试卷标题
                  </div>
  

                  <span
                    v-if="group.subQuestionIds"
                    class="size-16"
                    style="margin-left: 10px"
                    >(共{{ group.subQuestionIds.length }}题 / 共{{

                      group.questionScore * group.subQuestionIds.length

                    }}分)</span
                  >

                </div>
              </div>
  
              <!-- 内部的题目列表，允许组内排序 -->

              <div
                style="display: flex"
                v-for="question in group.subQuestionIds"
                :key="question.id"
                :class="{
                  border: selectedItemIndex === question.id,
                }"
                @mouseenter="handleGroupMouseEnter(question.id, 'number')"
                @mouseleave="handleGroupMouseLeave"
                class="inner-item"
              >
                <div
                  v-if="selectedItemIndex === question.id"
                  class="border-del"
                  @click="handleDel(question.id, group.questionType)"
                >

                  删除
                </div>

                <div class="size color" style="margin-top: 20px">

                  <div
                    style="max-width: 100px; white-space: nowrap; /* 不换行 */"
                  >

                    {{ question.globalIndex }}、
                  </div>
                </div>

                <iframe
                  :src="question.screenshot"
                  :ref="'iframe' + question.id"
                  @load="onIFrameLoad(question.id)"
                  style="

                    width: 100%;
                    pointer-events: none;
                    border: none; /* 启用点击穿透 */

                  "
                ></iframe>

              </div>
            </div>
          </div>
        </div>
        <div class="edit">

          <div class="edit-title">
            <div class="edit-title-info">

              共<span>{{ list.length }}</span
              >小题，卷面分<span>{{ sumValues() }}</span
              >分

            </div>
            <div class="edit-button">

              <el-button class="button-width" type="primary" @click="handleSava"
                >保存试卷</el-button
              >
              <el-button class="button-width" plain @click="handleSava('print')"
                >保存并打印</el-button
              >
              <el-button
                class="button-width"
                type="danger"
                plain
                @click="handleClear"
                >清空题目</el-button
              >
              <el-button class="button-width" plain @click="handleSelect"
                >继续选题</el-button
              >

            </div>
          </div>

          <div class="edit-info">
            <div class="title size color" style="padding: 15px 0 0 10px">
              题目排序

              <span class="title size" style="color: #999999"
                >(拖拽题号可拖拽排序)</span
              >

            </div>
            <!-- 外层容器，允许拖拽整个组 -->
            <draggable v-model="groups" group="groups" @end="onEnd">

              <div
                v-for="(group, index) in groups"
                :key="group.id"
                class="group-item"
              >

                <!-- 每个组的标题 -->
                <div class="group-title">
                  <div class="size" style="font-weight: 600">
                    {{ index + 1 }}、{{ group.questionTitle }}
                  </div>
                  <div class="size">
                    单题分值：

                    <el-input-number
                      size="mini"
                      v-model="group.questionScore"
                      :min="1"
                      :max="30"
                      style="width: 100px"
                    ></el-input-number>

                  </div>
                </div>
  
                <!-- 内部的题目列表，允许组内排序 -->

                <draggable
                  class="questions"
                  v-model="group.subQuestionIds"
                  group="questions"
                  @end="onItemEnd(group)"
                >
                  <div
                    v-for="question in group.subQuestionIds"
                    :key="question.id"
                    class="question-item"
                  >

                    {{ question.globalIndex }}
                  </div>
                </draggable>
              </div>
            </draggable>
          </div>
        </div>
      </div>
  
      <span slot="title" class="title"> 试卷预览 </span>
    </el-dialog>
  </template>
  <script>

  import { number } from "echarts";

  import draggable from "vuedraggable";

  import { paperPrint } from "@/utils";

  export default {
    components: { draggable },
    name: "wrongQuestionDialog",
    props: {
      visible: {
        type: Boolean,
        default() {
          return false;
        },
      },

      list: {

        // 用于请求详情接口
        type: Array,
        default() {
          return [];
        },
      },
      subjectName: {
        // 科目
        type: String,
        default() {
          return null;
        },
      },

      gradeId: {
        // 科目
        type: [String, Number],
        default() {
          return null;
        },
      },

      sectionId: {
        // 科目
        type: [String, Number],
        default() {
          return null;
        },
      },

    },
    data() {
      return {
        score: 0, // 分数
        inputValue: " 2024年11月11日数学-错题复习", // 标题
        isEditing: false, // 用于判断是否处于编辑模式
        selectedIndex: null, // 当前选中的外层对象的索引
        selectedItemIndex: null, // 当前选中的内层对象的索引
        isHovered: false, // 用于控制边框和提示文字的显示

        isItemHovered: false, // 用于控制边框和提示文字的显示

        tooltipPosition: { x: 0, y: 0 }, // 提示文字的位置
        time: "",

        testData: [], // 存一份list

        questionList: [
          { label: "全部", value: null },
          { label: "单选题", value: 2 },
          { label: "多选题", value: 3 },
          { label: "判断题", value: 4 },
          { label: "主观题", value: 5 },
        ],

        groups: [],

      };
    },
  
    watch: {
      visible(val) {
        if (val) {

          // 上面数据测试
          this.testData = JSON.parse(localStorage.getItem("testData")) || [];
          this.groups = JSON.parse(localStorage.getItem("question")) || [];
          // 如果都没有直接return 执行初始化
          if (this.groups.length == 0) {
            this.init();

            localStorage.setItem("testData", JSON.stringify(this.list));

            return;
          }
          // 如果一致 就直接赋值
          if (
            this.arraysHaveSameIds(this.testData, this.list) &&
            JSON.parse(localStorage.getItem("question"))
          ) {
            return;
          } else {
            let data = this.findMissingIds(this.testData, this.list);

            this.testData = this.list;
            localStorage.setItem("testData", JSON.stringify(this.testData));

            this.testAddDel(this.groups, data.addArr, data.delArr);
          }

        } else {

          this.testDataFun();

        }
      },
    },
    methods: {
      // 初始化

      init() {
        console.log("初始化");

        this.time = this.getFormattedDate();
        this.inputValue = this.time + this.subjectName + "--错题复习";

        this.groups = this.classifyByType(
          this.list.map((item, index) => {
            return { ...item, globalIndex: index + 1 };
          })
        );
        this.updateGlobalIndexes();
      },
      // 随时保存testData
      testDataFun() {
        this.testData =
          this.groups.reduce((accumulator, current) => {
            return accumulator.concat(current.subQuestionIds);
          }, []) || [];
        localStorage.setItem("testData", JSON.stringify(this.testData));

      },
      /** 按钮 - 取消 */
      handleClose() {
        this.$emit("update:visible", false);
      },
      onEnd(event) {
        // 拖拽结束时，更新所有项目的 globalIndex
        this.updateGlobalIndexes();
      },
      onItemEnd() {
        // 每次组内排序结束时，更新所有项目的 globalIndex
        this.updateGlobalIndexes();
      },
      updateGlobalIndexes() {
        if (!this.groups) return;
        // 获取所有组的所有项目
        let allItems = [];
        this.groups.forEach((group) => {
          allItems = allItems.concat(group.subQuestionIds);
        });
        allItems.forEach((item, index) => {
          item.globalIndex = index + 1;
        });

        localStorage.setItem("question", JSON.stringify(this.groups));

      },
      classifyByType(arr) {
        const result = {};
        arr.forEach((item) => {
          const type = item.questionType;
          if (!result[type]) {
            result[type] = [];
          }
          result[type].push(item);
        });
  
        // 将结果对象转换为数组
        return Object.keys(result).map((type) => ({

          questionType: type,
          input: false,

          questionTitle: this.questionList.find((item) => item.value == type)
            .label,
          questionScore: 1,
          subQuestionIds: result[type],
        }));
      },

      onIFrameLoad(id) {
        const iframeRef = this.$refs["iframe" + id][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 + 20}px`; // 设置 iframe 的高度

        // 获取第一个P标签
        const firstP = doc.getElementsByTagName("p")[0];
        // 或者修改第一个 < p > 标签的内容;
        if (firstP) {
          let a = this.processString(firstP.innerHTML);
          firstP.innerHTML = a;
        }

      },
  
      // 启动编辑模式
      enableEditing() {
        this.isEditing = true;
        this.isHovered = false;
        this.$nextTick(() => {
          // 在 DOM 更新完成后让输入框获取焦点
          this.$refs.editInput.focus();

        });
      },
  
      // 保存修改后的内容，回车或失去焦点时触发
      save() {

        this.isEditing = false;

        localStorage.setItem("question", JSON.stringify(this.groups));

      },
  
      // 单题title修改
      groupEditing(index) {

        this.isItemHovered = null;

        this.$set(this.groups[index], "input", true);
  
        // DOM 更新完成后让对应的输入框获取焦点
        this.$nextTick(() => {
          const refName = `refInput${index}`;
          this.$refs[refName][0].focus(); // 通过动态 ref 获取元素
        });
      },
      // 单体title保存
      groupSave(index) {
        this.$set(this.groups[index], "input", false);

        localStorage.setItem("question", JSON.stringify(this.groups));

      },
      // 高亮
      selectItem(id, type) {
        if (type == "all") {
          this.selectedIndex = id;
          this.selectedItemIndex = null;
        } else {
          this.selectedItemIndex = id;
          this.selectedIndex = null;
        }
      },
      // 删除题目
      handleDel(id, type) {
        if (type == "all") {

          let _index = this.groups.findIndex((item) => item.questionType == id);
          if (_index != -1) {
            this.groups.splice(_index, 1);
            localStorage.setItem("question", JSON.stringify(this.groups));
            this.updateGlobalIndexes();
            this.testDataFun();
            localStorage.setItem("testlist", JSON.stringify(this.testData));
            this.$emit("setQuestions");
          }

        } else {

          this.groups.forEach((item) => {
            if (type == item.questionType) {
              item.subQuestionIds = item.subQuestionIds.filter(
                (item) => item.id !== id
              );
            }
          });
          localStorage.setItem("question", JSON.stringify(this.groups));
          this.updateGlobalIndexes();
          this.testDataFun();
          localStorage.setItem("testlist", JSON.stringify(this.testData));
          this.$emit("setQuestions");

        }
      },
      handleMouseEnter(event) {

        this.isHovered = true;
        // 计算提示文字位置 (鼠标右下角)
        this.tooltipPosition = {
          x: event.clientX / 2 + 30,
          y: event.clientY / 2 + 30,
        };
        this.selectedIndex = null;
        this.selectedItemIndex = null;
      },
      handleMouseLeave() {
        this.isHovered = false;
      },
  
      getFormattedDate() {
        const today = new Date();
        const year = today.getFullYear(); // 获取年份
        const month = today.getMonth() + 1; // 获取月份（0-11，需要+1）
        const day = today.getDate(); // 获取日期
        return `${year}年${month}月${day}日`;
      },

  
      // 接收两个参数
      arraysHaveSameIds(arr1, arr2) {
        // 检查两个数组长度是否相同
        if (arr1.length !== arr2.length) {
          return false;
        }
        // 提取两个数组中所有的 id
        const ids1 = arr1.map((item) => item.id);
        const ids2 = arr2.map((item) => item.id);
        // 将 id 数组排序
        ids1.sort();
        ids2.sort();
        // 比较两个 id 数组是否一致
        for (let i = 0; i < ids1.length; i++) {
          if (ids1[i] !== ids2[i]) {
            return false;
          }
        }
        return true;
      },
      // 接收两个参数
      arrContrast(arr1, arr2) {
        // 如果两个数组的长度不同，直接返回 true
        if (arr1.length !== arr2.length) {
          return true;
        }
  
        // 创建一个 id 集合来存放 arr1 中的 id
        const idsSet1 = new Set(arr1.map((obj) => obj.id));
        // 创建一个 id 集合来存放 arr2 中的 id
        const idsSet2 = new Set(arr2.map((obj) => obj.id));
  
        // 比较两个集合的大小，如果不同，返回 true
        if (idsSet1.size !== idsSet2.size) {
          return true;
        }
  
        // 比较两个集合的内容
        for (const id of idsSet1) {
          if (!idsSet2.has(id)) {
            return true;
          }
        }
  
        // 如果所有的 id 都一致，返回 false
        return false;
      },
      processString(input) {
        // 正则表达式：匹配最多三位数字
        const regex = /^(\d{1,3})/;
  
        // 测试字符串是否以数字开头
        const match = input.match(regex);
  
        if (match) {
          // 如果匹配，去掉开头的数字并返回剩余部分
          return input.substring(match[0].length + 1).trim();
        }
  
        // 如果没有匹配，直接返回原字符串
        return input;
      },
  
      // 接受两个参数，返回需要删除的数据以及需要添加的数据
      findMissingIds(array1, array2) {
        // 找出第一个数组中存在但第二个数组中不存在的 id
        const delArr = array1.filter(
          (item1) => !array2.some((item2) => item2.id === item1.id)
        );
        // 找出第二个数组中存在但第一个数组中不存在的 id
        const addArr = array2.filter(
          (item2) => !array1.some((item1) => item1.id === item2.id)
        );
  
        return {
          delArr,
          addArr,
        };
      },
  
      // 添加，删除
      // 需要的数据，添加的数据，删除的数据
      testAddDel(arr1, arr2, arr3) {
        console.log(arr1, arr3);
        if (arr2 && arr2.length > 0) {
          // 添加数据，如果没有type重新创建一个type
          arr2.forEach((item2) => {
            const typeMatch = arr1.find(
              (item1) => item1.questionType == item2.questionType
            );
            if (typeMatch) {
              typeMatch.subQuestionIds.push(item2);
            } else {
              arr1.push({
                questionType: item2.questionType,
                subQuestionIds: [item2],
                questionTitle: this.questionList.find(
                  (item) => item.value == item2.questionType
                ).label,
                input: false,
                questionScore: 1,
              });
            }
          });
        }
        if (arr3 && arr3.length > 0) {
          // 删除数据
          arr3.forEach((item3) => {
            // 在 array1 中找到匹配的 type
            let matchedArray1Item = arr1.find(
              (item1) => item1.questionType == item3.questionType
            );
            if (matchedArray1Item) {
              // 如果找到了匹配的 type，遍历 matchedArray1Item 的 items
              let _index = matchedArray1Item.subQuestionIds.findIndex(
                (item) => item.id === item3.id
              );
              console.log("_index");
  
              if (_index != -1) {
                matchedArray1Item.subQuestionIds.splice(_index, 1);
              }
            } else {
              return;
            }
          });
        }
  
        this.updateGlobalIndexes();
      },
  
      // 鼠标移入
      handleGroupMouseEnter(id, type) {
        if (type == "all") {
          this.selectedIndex = id;
          this.selectedItemIndex = null;
        } else {
          this.selectedItemIndex = id;
          this.selectedIndex = null;
        }
      },
      // 鼠标离开
      handleGroupMouseLeave() {
        this.selectedIndex = null;
        this.selectedItemIndex = null;
      },
  
      // 小标题移入
      handleItemMouseEnter(event, type) {
        this.tooltipPosition = {
          x: 50,
          y: 40,
        };
  
        this.isItemHovered = type;
      },
      // 小标题移除
      handleItemMouseLeave() {
        this.isItemHovered = null;
      },
  
      // 保存

      handleSava(type) {

        let param = {
          paperTitle: this.inputValue,
          subjectName: this.subjectName,

          sectionId: this.sectionId,

          gradeId: this.gradeId,
          questions: this.groups.filter((item) => item.subQuestionIds.length > 0),
        };
        this.$request.getWrongQuestionSave(param).then((res) => {
          if (res.status == 0) {
            this.groups = [];
            this.testData = [];

            localStorage.setItem("testlist", JSON.stringify(this.testData));

            localStorage.setItem("question", JSON.stringify(this.groups));
            this.$emit("setQuestions");

            this.handleClose();

            if (type == "print") {

              this.$request
                .tPaperDetail({
                  paperId: res.data,
                })
                .then((detail) => {
                  paperPrint(detail.data);
                });

            }

          }
        });
      },
  
      // 清空
      handleClear() {
        this.$confirm("确定要清空试题篮内的全部题目吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.groups = [];
            this.testDataFun();
            localStorage.setItem("question", JSON.stringify(this.groups));
            localStorage.setItem("testlist", JSON.stringify(this.testData));
            this.$emit("setQuestions");
            this.handleClose();
          })
          .catch(() => {
            console.log("取消");
          });
      },
      // 继续选题
      handleSelect() {
        this.handleClose();
      },
  
      // 计算总分
      sumValues() {
        return this.groups.reduce((sum, item) => {
          return sum + Number(item.questionScore) * item.subQuestionIds.length;
        }, 0);
      },

    },
  };
  </script>
  <style lang="scss" scoped>
  .title {
    font-weight: 600;
  }

  .test-box {
    display: flex;

    min-height: 742px;

    .test {
      flex: 1;
      height: fit-content;

      max-height: 742px;

      overflow-y: auto;
      box-shadow: 0 0 10px 0 #999999;
      margin-right: 20px;

      box-sizing: border-box;
      padding: 0 20px;

      .test-title {
        font-size: 20px !important;
        font-weight: 700;
        text-align: center;
        color: #000000;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px;
      }
  
      .test-name-input {
        padding: 25px 80px 0 80px;
        display: flex;
        justify-content: space-around;
        align-items: center;
      }

      .test-group {
        .test-group-title {

          position: relative;
          height: 40px;
          line-height: 30px;
          padding: 10px 0 0 0;

        }
      }
    }

    .edit {
      width: 400px;
      display: flex;
      flex-direction: column;

      .edit-title {
        width: 100%;
        height: 200px;
        border: 1px solid #999999;

        .edit-title-info {
          height: 60px;
          width: 100%;
          text-align: center;
          font-weight: 600;
          font-size: 16px !important;
          line-height: 60px;
          color: #000000;

          span {
            color: rgb(234, 163, 73);
          }
        }

        .edit-button {
          box-sizing: border-box;
          padding: 0 20px;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-around;

          .button-width {
            width: 160px !important;
            margin: 10px 0;
          }
        }

      }

      .edit-info {
        flex: 1;
        border: 1px solid #999999;
        margin-top: 20px;

        max-height: 500px;

        padding: 10px;
        overflow: auto;

        .group-item {

          margin: 10px;
          background: rgba(243, 243, 243, 0.6);
          border-radius: 5px;

          .group-title {
            display: flex;
            align-items: center;
            height: 40px;
            justify-content: space-between;
            cursor: pointer;
          }
        }

        .questions {
          display: flex;
          flex-wrap: wrap;

          .question-item {
            width: 35px;
            height: 35px;
            border: 1px solid rgb(172, 188, 249);
            border-radius: 4px;
            cursor: grab;
            margin: 5px 8px;
            line-height: 35px;
            text-align: center;
            font-size: 16px !important;
          }
        }
  
        .question-item:active {
          cursor: grabbing;
        }
      }
    }
  }

  .size {
    font-size: 14px !important;
  }

  .color {
    color: #000000;
  }

  .size-16 {
    font-size: 16px !important;
    font-weight: 600;
    color: #333333;
  }

  ::v-deep {
    .el-dialog {
      margin-top: 10vh !important;
    }
  }

  .border {
    border: 1px solid rgb(173, 190, 250);
    position: relative;

    .border-del {
      position: absolute;
      top: -30px;
      right: -1px;
      height: 28px;
      width: fit-content;
      border: 1px solid rgb(173, 190, 250);
      padding: 0 8px;
      color: rgb(67, 141, 255);
      font-size: 14px !important;
      line-height: 28px;
      font-weight: 600;
      cursor: pointer;
    }
  }

  .outer-item,
  .inner-item {
    height: fit-content;

    margin-bottom: 20px;

  }

  .tooltip {
    position: absolute;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 12px !important;
  }

  .hover {
    border: 1px solid rgb(115, 142, 246);
    background: rgb(233, 237, 253);

    width: fit-content;
  }

  .title-bg {
    background: rgb(115, 142, 246);
    border-bottom: 1px solid rgb(115, 142, 246);

  }
  </style>