滚动联动

src/assets/styles/pages.scss

@@ -1290,7 +1290,7 @@
     }
   }
 
-  div.remark-error {
+  div.section-error {
     position: relative;
     color: #fe5d4e;
 

src/modules/question/components/QuestionImportEdit.vue

@@ -83,7 +83,7 @@
                 >
               </div>
             </div>
-            <div class="qe-part-body">
+            <div id="qe-part-paper" class="qe-part-body">
               <question-import-paper-edit
                 v-if="paperData.length"
                 ref="QuestionImportPaperEdit"
@@ -200,13 +200,17 @@ export default {
       // this.paperData = deepCopy(this.data.detailInfo);
       this.transformDataInfo();
       this.questionKey = randomCode();
+
+      this.$nextTick(() => {
+        this.registSrollEvent();
+      });
     },
     transformRichText(richText) {
       let nsections = [];
       richText.sections.forEach((section) => {
         nsections.push({
           blocks: section.blocks,
-          attributes: { id: `remark-${section.remark.index}` },
+          attributes: { id: `section-${section.remark.index}` },
         });
         if (section.remark && !section.remark.status) {
           nsections.push({
@@ -217,8 +221,8 @@ export default {
               },
             ],
             attributes: {
-              id: `remark-error-${section.remark.index}`,
-              class: "remark-error",
+              id: `section-error-${section.remark.index}`,
+              class: "section-error",
             },
           });
         }
@@ -287,6 +291,7 @@ export default {
       this.paperRichJson = { sections: [] };
       window.sessionStorage.removeItem("coursePropertys");
       this.$message.closeAll();
+      this.removeSrollEvent();
     },
     cancel() {
       this.modalIsShow = false;
@@ -739,6 +744,46 @@ export default {
     uploadError(error) {
       this.$message.error(error.message);
     },
+    // scroll
+    registSrollEvent() {
+      document
+        .getElementById("qe-part-paper")
+        .addEventListener("scroll", this.scrollEvent);
+    },
+    removeSrollEvent() {
+      document
+        .getElementById("qe-part-paper")
+        .removeEventListener("scroll", this.scrollEvent);
+    },
+    scrollEvent(e) {
+      // e.preventDefault();
+      // e.stopPropagation();
+      const questionContIndexList =
+        this.$refs.QuestionImportPaperEdit.questionContIndexList;
+
+      const scrollTop = e.target.scrollTop;
+      // console.log(questionContIndexList, scrollTop);
+      const targeContIndex = questionContIndexList.findIndex(
+        (item) => scrollTop < item[3]
+      );
+      const targeCont =
+        targeContIndex !== -1
+          ? questionContIndexList[targeContIndex - 1]
+          : questionContIndexList.slice(-1)[0];
+
+      const richTextSectionDom = document.getElementById(
+        `section-${targeCont[2]}`
+      );
+      const elPos = this.$refs.RichTextEditor.$el
+        .querySelector(".v-editor-main")
+        .getBoundingClientRect();
+      const textPos = richTextSectionDom.getBoundingClientRect();
+      let textScrollTop = textPos.y - elPos.y;
+      textScrollTop = Math.max(textScrollTop, 0);
+      this.$refs.RichTextEditor.$el.querySelector(
+        ".v-editor-container"
+      ).scrollTop = textScrollTop;
+    },
   },
 };
 </script>

src/modules/question/components/QuestionImportPaperEdit.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="question-export-paper-edit">
-    <div v-for="(detail, dIndex) in paperData" :key="dIndex" class="ep-detail">
+    <div
+      v-for="(detail, dIndex) in paperData"
+      :key="dIndex"
+      class="ep-detail"
+      :id="`detail-${dIndex}`"
+    >
       <div class="ep-detail-head">
         <h3 class="ep-detail-title">
           {{ detail.number | numberToChaineseFilter }}、{{ detail.name }}
@@ -16,11 +21,13 @@
           <div class="ep-question-type">
             [题型：{{ question.sourceDetailName }}]
           </div>
-          <component
-            :is="structTypeComp(question.questionType)"
-            :ref="`QuestionEditDetail-${dIndex}-${qindex}-${question.id}`"
-            :question="question"
-          ></component>
+          <div :id="`question-${question.id}`">
+            <component
+              :is="structTypeComp(question.questionType)"
+              :ref="`QuestionEditDetail-${dIndex}-${qindex}-${question.id}`"
+              :question="question"
+            ></component>
+          </div>
         </div>
       </div>
     </div>
@@ -62,39 +69,94 @@ export default {
   data() {
     return {
       paperData: [],
+      questionContIndexList: [],
     };
   },
   mounted() {
     this.transformPaperData();
+    this.$nextTick(() => {
+      this.updateQuestionContIndexTop();
+      console.log(this.questionContIndexList);
+    });
   },
   methods: {
     structTypeComp(questionType) {
       return STRUCT_TYPE_COMP_DICT[questionType];
     },
+    getQuestionInfo(question) {
+      return {
+        sourceDetailId: question.customizeQuestionType.id,
+        sourceDetailName: question.customizeQuestionType.name,
+        questionType: question.customizeQuestionType.questionType,
+        courseId: this.courseId,
+        score: question.score || 0,
+        id: randomCode(),
+      };
+    },
+    getQuestionContIndex(question) {
+      const { id, questionIndex } = question;
+      const questionId = `question-${id}`;
+      const indexItems = ["bodyIndex", "optionIndex", "answerIndex"];
+      let itemList = [];
+      indexItems.forEach((item) => {
+        const indexs = questionIndex[item];
+        if (indexs && indexs.length) {
+          itemList.push([
+            questionId,
+            item.replace("Index", ""),
+            indexs[0],
+            null,
+          ]);
+        }
+      });
+
+      return itemList;
+    },
     transformPaperData() {
       let paperData = deepCopy(this.paper);
-      paperData.forEach((detail) => {
+      let questionContIndexList = [];
+
+      paperData.forEach((detail, dIndex) => {
+        questionContIndexList.push([
+          `detail-${dIndex}`,
+          "detail",
+          detail.detailIndex[0],
+          null,
+        ]);
         detail.questions.forEach((question) => {
-          question.sourceDetailId = question.customizeQuestionType.id;
-          question.sourceDetailName = question.customizeQuestionType.name;
-          question.questionType = question.customizeQuestionType.questionType;
-          question.courseId = this.courseId;
-          question.score = question.score || 0;
-          question.id = randomCode();
+          Object.assign(question, this.getQuestionInfo(question));
+          questionContIndexList.push(...this.getQuestionContIndex(question));
 
           if (question.subQuestions && question.subQuestions.length) {
             question.subQuestions.forEach((subq) => {
-              subq.id = randomCode();
-              subq.questionType = subq.customizeQuestionType.questionType;
-              subq.sourceDetailId = subq.customizeQuestionType.id;
-              subq.sourceDetailName = subq.customizeQuestionType.name;
-              subq.courseId = this.courseId;
-              subq.score = subq.score || 0;
+              Object.assign(subq, this.getQuestionInfo(subq));
+              questionContIndexList.push(...this.getQuestionContIndex(subq));
             });
           }
         });
       });
       this.paperData = paperData;
+      this.questionContIndexList = questionContIndexList;
+    },
+    updateQuestionContIndexTop() {
+      const elPos = this.$el.getBoundingClientRect();
+      this.questionContIndexList.forEach((item) => {
+        // item:[id,type,index,offsetTop];
+        const [id, type] = item;
+        let itemDom = document.getElementById(id);
+        if (type === "body") {
+          itemDom = itemDom.querySelector(".ep-question-title");
+        } else if (type === "option") {
+          itemDom = itemDom.querySelector(".ep-question-body");
+        } else if (type === "answer") {
+          itemDom =
+            itemDom.querySelector(".question-info-view") ||
+            itemDom.querySelector(".ep-question-props");
+        }
+
+        const itemPos = itemDom.getBoundingClientRect();
+        item[3] = itemPos.y - elPos.y;
+      });
     },
     getData() {
       this.paperData.forEach((detail, dIndex) => {

src/modules/question/components/import-edit/NestedQuestion.vue

@@ -7,6 +7,7 @@
       v-for="subq in question.subQuestions"
       :key="subq.id"
       class="ep-question-subq"
+      :id="`question-${subq.id}`"
     >
       <component
         :is="getStructTypeComp(subq.questionType)"