错误标记优化

src/assets/styles/pages.scss

@@ -1258,6 +1258,10 @@
       .tips-info {
         line-height: 20px;
         min-height: auto;
+        cursor: pointer;
+        &:hover {
+          font-weight: 600;
+        }
       }
     }
   }

src/modules/question/components/QuestionImportEdit.vue

@@ -69,10 +69,11 @@
                   >
                     <p
                       class="tips-info tips-error"
-                      v-for="(cont, index) in richJsonItem.exceptions"
+                      v-for="(exception, index) in richJsonItem.exceptions"
                       :key="index"
+                      @click="highLightErrorText(exception)"
                     >
-                      {{ cont }}
+                      {{ exception.message }}
                     </p>
                   </div>
                 </div>
@@ -159,6 +160,7 @@ import { propertyNameQueryApi } from "@/modules/question/api";
 import { downloadByApi } from "@/plugins/download";
 import { richTextToJSON, renderRichText } from "./import-edit/richText";
 import scrollMixins from "./import-edit/scrollMixins";
+import timeMixin from "@/mixins/timeMixin";
 
 const questionInfoField = [
   "courseId",
@@ -174,7 +176,7 @@ const questionInfoField = [
 export default {
   name: "QuestionImportEdit",
   components: { QuestionImportPaperEdit, ImportFileDialog, UploadButton },
-  mixins: [scrollMixins],
+  mixins: [scrollMixins, timeMixin],
   props: {
     data: {
       type: Object,
@@ -208,6 +210,7 @@ export default {
       lastRichTextScrollTop: 0,
       richTextIndexList: [],
       scrollType: "",
+      curException: null,
       // upload answer
       uploadAnswerUrl: `${QUESTION_API}/word/parse/import`,
       uploadAnswerData: {},
@@ -381,14 +384,73 @@ export default {
         curGroup = [];
       }
 
+      const getExceptions = (sections) => {
+        let cause = {};
+        sections.forEach((section) => {
+          if (section.remark.status) return;
+          if (!cause[section.remark.cause]) {
+            cause[section.remark.cause] = [];
+          }
+          cause[section.remark.cause].push(section.remark.index);
+        });
+        const causeList = Object.keys(cause).map((key) => {
+          return {
+            message: key,
+            indexs: cause[key],
+          };
+        });
+        causeList.sort((a, b) => a.indexs[0] - b.indexs[0]);
+        return causeList;
+      };
+
       groups.forEach((group) => {
         group.indexs = group.sections.map((item) => item.remark.index);
-        group.exceptions = group.sections
-          .filter((section) => !section.remark.status)
-          .map((section) => section.remark.cause);
+        group.exceptions = getExceptions(group.sections);
       });
       return groups;
     },
+    highLightErrorText(exception) {
+      if (this.curException) {
+        this.curException.indexs.forEach((ind) => {
+          const sectionDom = document.getElementById(`section-${ind}`);
+          if (!sectionDom) return;
+          sectionDom.style = null;
+        });
+      }
+      this.clearSetTs();
+
+      this.curException = exception;
+      let firstSectionDom = null;
+      exception.indexs.forEach((ind) => {
+        const sectionDom = document.getElementById(`section-${ind}`);
+        if (!sectionDom) return;
+        if (!firstSectionDom) firstSectionDom = sectionDom;
+        sectionDom.style.background = "#fef0f0";
+      });
+
+      if (!firstSectionDom) return;
+
+      const richTextListDom = document.getElementById("qe-part-richtext-list");
+      const elPos = richTextListDom.getBoundingClientRect();
+      const sectionOffsetTop =
+        firstSectionDom.getBoundingClientRect().y - elPos.y - 100;
+      if (sectionOffsetTop < richTextListDom.parentNode.scrollTop) {
+        richTextListDom.parentNode.scrollTop = sectionOffsetTop;
+        this.scrollType = "rich-text";
+        setTimeout(() => {
+          this.scrollType = "";
+        }, 100);
+      }
+
+      this.addSetTime(() => {
+        this.curException.indexs.forEach((ind) => {
+          const sectionDom = document.getElementById(`section-${ind}`);
+          if (!sectionDom) return;
+          sectionDom.style = null;
+        });
+        this.curException = null;
+      }, 5000);
+    },
     initData() {
       this.paperData = [];
       this.paperRichJson = { sections: [] };