修改批注问题

src/components/CommonPreview.vue

@@ -15,13 +15,15 @@
     </div>
 
     <div class="audit-content">
-      <div class="main-container" ref="previewMain">
+      <div ref="previewMain" class="main-container">
         <main :class="['preview-main', { 'no-audit': !isShowAudit }]">
           <span class="title">
             <SvgIcon icon-class="menu-2" size="24" />
             <span>{{ courseware_info.name_path }}</span>
           </span>
           <CoursewarePreview
+            v-if="courseware_info.book_name"
+            ref="courserware"
             :data="data"
             :component-list="component_list"
             :background="background"
@@ -30,8 +32,6 @@
             :component-remark-obj="remark_list_obj"
             @computeScroll="computeScroll"
             @addRemark="addRemark"
-            ref="courserware"
-            v-if="courseware_info.book_name"
           />
         </main>
       </div>
@@ -148,7 +148,7 @@ export default {
       data: { row_list: [] },
       component_list: [],
       remark_list: [],
-      remark_list_obj: {}, // 存放转为以组件为对象的数组
+      remark_list_obj: {}, // 存放以组件为对象的数组
       visible: false,
       remark_content: '',
       submit_loading: false,
@@ -235,20 +235,20 @@ export default {
     // 审校批注列表
     getCoursewareAuditRemarkList(id) {
       this.remark_list = [];
-      this.remark_list_obj = {};
+      let remarkListObj = {};
       GetCoursewareAuditRemarkList({
         courseware_id: id,
       }).then(({ remark_list }) => {
         this.remark_list = remark_list;
-        remark_list.forEach((item) => {
-          // 组件的审批
-          if (item.component_id !== 'WHOLE') {
-            if (!this.remark_list_obj[item.component_id]) {
-              this.remark_list_obj[item.component_id] = [];
-            }
-            this.remark_list_obj[item.component_id].push(item);
+        remarkListObj = remark_list.reduce((acc, item) => {
+          if (!acc[item.component_id]) {
+            acc[item.component_id] = [];
           }
-        });
+          acc[item.component_id].push(item);
+          return acc;
+        }, {});
+
+        this.remark_list_obj = remarkListObj;
       });
     },
     addRemark(selectNode, x, y, componentId) {
@@ -256,9 +256,9 @@ export default {
       this.visible = true;
       if (selectNode) {
         this.menuPosition = {
-          x: x,
-          y: y,
-          componentId: componentId,
+          x,
+          y,
+          componentId,
         };
       } else {
         this.menuPosition = {

src/views/book/courseware/preview/CoursewarePreview.vue

@@ -1,7 +1,7 @@
 <template>
   <div
-    class="courserware"
     ref="courserware"
+    class="courserware"
     :style="[
       {
         backgroundImage: background.background_image_url ? `url(${background.background_image_url})` : '',
@@ -21,7 +21,7 @@
           <div :key="j" :class="['col', `col-${i}-${j}`]" :style="computedColStyle(col)">
             <!-- 网格 -->
             <template v-for="(grid, k) in col.grid_list">
-              <div @contextmenu.prevent="handleContextMenu($event, grid.id)" :key="k">
+              <div :key="k" @contextmenu.prevent="handleContextMenu($event, grid.id)">
                 <component
                   :is="previewComponentList[grid.type]"
                   ref="preview"
@@ -36,17 +36,17 @@
 
               <div
                 v-if="showMenu && componentId === grid.id"
+                :key="'menu' + grid.id + k"
                 class="custom-context-menu"
                 :style="{ left: menuPosition.x + 'px', top: menuPosition.y + 'px' }"
                 @click="handleMenuItemClick"
-                :key="'menu' + grid.id + k"
               >
                 <SvgIcon icon-class="icon-publish" size="24" />
                 添加批注
               </div>
               <div
-                :key="'show' + grid.id + k"
                 v-if="showRemark && Object.keys(componentRemarkObj).length !== 0 && componentRemarkObj[grid.id]"
+                :key="'show' + grid.id + k"
               >
                 <el-popover
                   v-for="(items, indexs) in componentRemarkObj[grid.id]"
@@ -58,10 +58,10 @@
                   <div v-html="items.content"></div>
                   <template #reference>
                     <SvgIcon
+                      slot="reference"
                       icon-class="icon-info"
                       size="24"
                       class="remark-info"
-                      slot="reference"
                       :style="{ left: items.position_x - 12 + 'px', top: items.position_y - 12 + 'px' }"
                     />
                   </template>
@@ -136,6 +136,9 @@ export default {
     };
     window.addEventListener('mousedown', this.handleMouseDown);
   },
+  beforeDestroy() {
+    window.removeEventListener('mousedown', this.handleMouseDown);
+  },
   methods: {
     /**
      * 计算组件内容
@@ -278,7 +281,7 @@ export default {
       this.menuPosition = {
         x: this.menuPosition.x + left,
         y: this.menuPosition.y + top,
-        select_node: select_node,
+        select_node,
       }; // 设置菜单位置
       this.showMenu = true; // 显示菜单
     },
@@ -293,15 +296,12 @@ export default {
       );
     },
     handleMouseDown(event) {
-      if (event.button === 0) {
+      if (event.button === 0 && event.target.className !== 'custom-context-menu') {
         // 0 表示左键
         this.showMenu = false;
       }
     },
   },
-  beforeDestroy() {
-    window.removeEventListener('mousedown', this.handleMouseDown);
-  },
 };
 </script>
 

src/views/book/courseware/preview/components/voice_matrix/VoiceMatrixPreview.vue

@@ -363,7 +363,7 @@ export default {
       ];
       const operable = event.composedPath().some((item) => {
         const className = item.className;
-        if (!className) return false;
+        if (!className || typeof className !== 'string') return false;
         return whitePath.some((path) => className.includes(path));
       });
       if (!operable) {