思维导图细节补充及预览节点点击

src/components/CommonPreview.vue

@@ -69,7 +69,7 @@
       width="680px"
       :close-on-click-modal="false"
       class="audit-dialog"
-      @close="dialogClose"
+      @close="dialogClose('')"
     >
       <RichText
         v-model="remark_content"
@@ -85,6 +85,16 @@
         </el-button>
       </div>
     </el-dialog>
+
+    <el-dialog title="" :visible="visibleMindMap" width="1100px" class="audit-dialog" @close="dialogClose('MindMap')">
+      <MindMap
+        v-if="isChildDataLoad"
+        ref="mindMapRef"
+        :project-id="projectId"
+        :mind-map-json-data="mindMapJsonData"
+        @child-click="handleNodeClick"
+      />
+    </el-dialog>
   </div>
 </template>
 
@@ -93,6 +103,7 @@ import CoursewarePreview from '@/views/book/courseware/preview/CoursewarePreview
 import MenuPopover from '@/views/personal_workbench/common/MenuPopover.vue';
 import RichText from '@/components/RichText.vue';
 import { isTrue } from '@/utils/common';
+import MindMap from '@/components/MindMap.vue';
 
 import {
   GetBookCoursewareInfo,
@@ -101,7 +112,12 @@ import {
   AddCoursewareAuditRemark,
   DeleteCoursewareAuditRemarkList,
 } from '@/api/project';
-import { ContentGetCoursewareContent_View, ChapterGetBookChapterStructExpandList, GetBookBaseInfo } from '@/api/book';
+import {
+  ContentGetCoursewareContent_View,
+  ChapterGetBookChapterStructExpandList,
+  GetBookBaseInfo,
+  MangerGetBookMindMap,
+} from '@/api/book';
 
 export default {
   name: 'CommonPreview',
@@ -109,6 +125,7 @@ export default {
     CoursewarePreview,
     MenuPopover,
     RichText,
+    MindMap,
   },
   props: {
     projectId: {
@@ -162,6 +179,7 @@ export default {
       remark_list: [],
       remark_list_obj: {}, // 存放以组件为对象的数组
       visible: false,
+
       remark_content: '',
       submit_loading: false,
       isTrue,
@@ -181,6 +199,9 @@ export default {
         { icon: 'collect', title: '收藏', handle: '' },
         { icon: 'setting', title: '设置', handle: '' },
       ],
+      visibleMindMap: false,
+      isChildDataLoad: false,
+      mindMapJsonData: {}, // 思维导图json数据
     };
   },
   created() {
@@ -291,8 +312,8 @@ export default {
         };
       }
     },
-    dialogClose() {
-      this.visible = false;
+    dialogClose(type) {
+      this[`visible${type}`] = false;
     },
     // 添加审校批注
     addCoursewareAuditRemark(id) {
@@ -347,7 +368,16 @@ export default {
       }
     },
     openMindMap() {
-      console.log('打开思维导图');
+      MangerGetBookMindMap({ book_id: this.projectId }).then(({ content }) => {
+        if (content) {
+          this.mindMapJsonData = JSON.parse(content);
+          this.isChildDataLoad = true;
+        }
+      });
+      this.visibleMindMap = true;
+    },
+    handleNodeClick(data) {
+      console.log('子组件触发了事件', data); // 节点UID
     },
   },
 };

src/views/project_manage/project/components/MindMap.vue → src/components/MindMap.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="mind-map-container">
-    <div class="toolbar">
+    <div v-if="isEdit" class="toolbar">
       <button @click="addParentNode">添加父节点</button>
       <button @click="addNode">添加节点</button>
       <button @click="addChildNode">添加子节点</button>
@@ -28,6 +28,10 @@ MindMap.usePlugin(Export);
 export default {
   name: 'MindMap',
   props: {
+    isEdit: {
+      type: Boolean,
+      default: false,
+    },
     projectId: {
       type: String,
       required: true,
@@ -106,6 +110,13 @@ export default {
       });
       this.mindMap.view.translateX(-400);
       this.mindMap.view.translateY(-50);
+      if (!this.isEdit) {
+        // 监听所有节点点击事件
+        this.mindMap.on('node_click', (node) => {
+          // console.log('点击的节点:', node?.nodeData?.data?.text || '文本');
+          this.$emit('child-click', `${node.uid}`);
+        });
+      }
     },
     destroyMindMap() {
       if (this.mindMap) {

src/views/book/courseware/create/components/base/audio/Audio.vue

@@ -47,15 +47,14 @@ export default {
     },
     // 思维导图
     handlerMindMap() {
-      this.$set(this.data.mind_map, 'node_list', [
-        {
-          name: '音频',
-          node_list:
-            this.data.file_list?.map((file) => ({
-              name: file.file_name === undefined ? '' : file.file_name,
-            })) ?? [],
-        },
-      ]);
+      this.$set(
+        this.data.mind_map,
+        'node_list',
+        this.data.file_list?.map((file) => ({
+          name: file.file_name === undefined ? '' : file.file_name,
+          id: Math.random().toString(36).substring(2, 12),
+        })) ?? [],
+      );
     },
   },
 };

src/views/book/courseware/create/components/base/describe/Describe.vue

@@ -97,7 +97,8 @@ export default {
     handlerMindMap() {
       this.$set(this.data.mind_map, 'node_list', [
         {
-          name: `题干：${this.sanitizeHTML(this.data.content)}`,
+          name: `${this.sanitizeHTML(this.data.content)}`,
+          id: Math.random().toString(36).substring(2, 12),
         },
       ]);
     },

src/views/book/courseware/create/components/base/picture/Picture.vue

@@ -47,15 +47,14 @@ export default {
     },
     // 思维导图
     handlerMindMap() {
-      this.$set(this.data.mind_map, 'node_list', [
-        {
-          name: '图片',
-          node_list:
-            this.data.file_list?.map((file) => ({
-              name: file.file_name === undefined ? '' : file.file_name,
-            })) ?? [],
-        },
-      ]);
+      this.$set(
+        this.data.mind_map,
+        'node_list',
+        this.data.file_list?.map((file) => ({
+          name: file.file_name === undefined ? '' : file.file_name,
+          id: Math.random().toString(36).substring(2, 12),
+        })) ?? [],
+      );
     },
   },
 };

src/views/book/courseware/create/components/base/stem/Stem.vue

@@ -98,7 +98,8 @@ export default {
     handlerMindMap() {
       this.$set(this.data.mind_map, 'node_list', [
         {
-          name: `描述：${this.sanitizeHTML(this.data.content)}`,
+          name: `${this.sanitizeHTML(this.data.content)}`,
+          id: Math.random().toString(36).substring(2, 12),
         },
       ]);
       // console.log(this.data.mind_map);

src/views/book/courseware/create/components/base/video/Video.vue

@@ -47,15 +47,14 @@ export default {
     },
     // 思维导图
     handlerMindMap() {
-      this.$set(this.data.mind_map, 'node_list', [
-        {
-          name: '视频',
-          node_list:
-            this.data.file_list?.map((file) => ({
-              name: file.file_name === undefined ? '' : file.file_name,
-            })) ?? [],
-        },
-      ]);
+      this.$set(
+        this.data.mind_map,
+        'node_list',
+        this.data.file_list?.map((file) => ({
+          name: file.file_name === undefined ? '' : file.file_name,
+          id: Math.random().toString(36).substring(2, 12),
+        })) ?? [],
+      );
     },
   },
 };

src/views/project_manage/project/ProjectMindMap.vue

@@ -12,13 +12,19 @@
       </div>
     </div>
     <p v-if="isWaiting" class="waiting">数据生成中...请等待</p>
-    <MindMap v-if="isChildDataLoad" ref="mindMapRef" :project-id="project_id" :mind-map-json-data="mindMapJsonData" />
+    <MindMap
+      v-if="isChildDataLoad"
+      ref="mindMapRef"
+      :is-edit="true"
+      :project-id="project_id"
+      :mind-map-json-data="mindMapJsonData"
+    />
   </div>
 </template>
 
 <script>
 import ProjectMenu from '@/views/project_manage/common/ProjectMenu.vue';
-import MindMap from './components/MindMap.vue';
+import MindMap from '@/components/MindMap.vue';
 import { GetProjectBaseInfo } from '@/api/project';
 import { MangerGetBookMindMap, MangerGenerateMindMapByBookContent, MangerSaveBookMindMap } from '@/api/book';