在vue2的项目中使用思维导图的开源项目重写开发

用的是这个大佬的开源项目，在他的源码基础上进行修改

GitHub - chenhengjie123/vue-testcase-minder-editor: 基于百度脑图的用例编辑器组件，支持记录测试结果

这个文章是在我搞完这个思维导图工具后又重新整理的，可能在使用过程中的一些问题会被我遗漏。

这个是可编辑状态下的思维导图

 这个是不可编辑状态下的思维导图

1、安装需要的依赖(安装的依赖不一定全）

npm install codemirror@5.24.2
npm install --save jquery kity marked screenfull@4.2.0 
npm install --save vue-testcase-minder-editor

因为我的备注里面用的富文本编辑器是quill,所以还要安装相关的依赖 

npm install vue-quill-editor
npm install quill@2.0.0-dev.4 
npm install quill-better-table@1.2.10

 2、在store文件夹下的index.js中动态注册模块

 3、下载github上的源码，放到components文件下

4、在页面中引用组件

<template>
  <div id="editDetail" v-loading="loading">
    <VueTestcaseMinderEditor :initJson="initJson" ref="minderEditor" :allowEditPriority="editMode" :allowEditLabel="editMode" :allowEditResult="editMode" :allowEditNode="editMode">
    </VueTestcaseMinderEditor>
  </div>
</template>

<script>
import VueTestcaseMinderEditor from '@/components/MindEditor/VueTestcaseMinderEditor/VueTestcaseMinderEditor.vue'
export default {
  name: 'editDetail',
  components: {
    VueTestcaseMinderEditor
  },
  data() {
    return {
      mindId: this.$route.query.Mid,
      initJson: {
        root: {
          data: {
            'text': '测试数据',
            'id': '0',
            'image': 'http://192.168.5.73:8053/786d716891e34fdea2530b7623c6109a.jpeg',
            'imageSize': { 'width': 200, 'height': 200 },
            'font-size': 32,

          },
          children: [
            { data: { text: '新闻', id: '1', resource: ['自定义标签'] } },
            { data: { text: '网页', id: '2', priority: 1 } },
            { data: { text: '贴吧', id: '3', priority: 2 } },
            { data: { text: '知道', id: '4', priority: 2 } },
            { data: { text: '音乐', id: '5', priority: 3 } },
            { data: { text: '图片', id: '6', priority: 3 } },
            { data: { text: '视频', id: '7', priority: 3 } },
            { data: { text: '地图', id: '8', priority: 3 } },
            { data: { text: '百科', id: '9', priority: 3 } },
            { data: { text: '更多', id: '10', hyperlink: 'http://www.baidu.com/more' } }
          ]
        },
        template: "default",
        theme: "fresh-blue",
        version: "1.4.43",
      },
      theme: null,//当前主题样式
      mindName: null,//当前思维导图名
      editMode: true,//是否允许编辑
      loading: false,
      timer: null,//定时器
    }
  },
  provide() {
    return {
      currentMinder: this.saveCurrentData,
      // themeFromParent: this.theme,
      getThemeFromParent: () => this.theme,
      getMindName: () => this.mindName,
    };
  },

  computed: {

    buttonText: function () {
      return this.editMode === false ? '进入编辑模式，允许修改脑图内容及登记结果' : '退出编辑模式'
    }
  },
  mounted() {
    // 获取数据
    // this.getDetailInfo();
    this.theme = 'fresh-blue';
    this.mindName = '可编辑思维导图';


    // 禁止浏览器回退
    history.pushState(null, null, document.URL);
    window.onpopstate = function (e) {
      history.pushState(null, null, document.URL);
    };
    // 监听浏览器 刷新、关闭 ;
    var that = this
    window.onbeforeunload = function (e) {
      if (that.$route.name === 'editDetail') {
        var message = 'some word';
        e = e || window.event;
        if (e) {
          e.returnValue = message;
        }
        return "浏览器关闭！";
      } else {
        window.onbeforeunload = null;
      }
    }
  },
  destroyed() {
    // 销毁定时器
    // clearInterval(this.timer);
    // 销毁 浏览器回退
    window.onpopstate = null;
    // window.removeEventListener("popstate", () => {
    //   history.pushState(null, null, document.URL)
    // }, false);
    // 销毁 页面刷新、重新加载
    window.onbeforeunload = null
  },
  beforeRouteLeave(to, from, next) {
    this.$confirm('系统可能不会保存您所做的更改，是否离开此页面？', '提示', {
      confirmButtonText: '离开',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      next()
    }).catch(() => {
      next(false)
    })

  },

  methods: {
    //正式系统使用时，从后端获取当前思维导图的数据 
    //getDetailInfo() {
    //   if (this.mindId) {
    //     this.loading = true;
    //     getMindNodeByMainId(this.mindId).then((res) => {
    //       if (res.data.nodeTree.data == null) {
    //         this.initJson.root = {
    //           data: {
    //             'text': res.data.mindMain.mindName,
    //           },
    //           children: [],
    //         }
    //       } else {
    //         this.initJson.root = res.data.nodeTree;
    //       }
    //       if (res.data.mindSetting) {
    //         this.initJson.theme = res.data.mindSetting.theme;
    //         this.theme = res.data.mindSetting.theme;
    //         this.initJson.template = res.data.mindSetting.template;
    //         this.initJson.version = res.data.mindSetting.version;
    //       }
    //       this.mindName = res.data.mindMain.mindName;
    //       this.loading = false;
    //     }).catch((err) => {
    //       this.$message.error(err.message)
    //       this.loading = false;
    //     })
    //  }
    //},
    async saveCurrentData() {
      let base64 = null
      await this.$refs.minderEditor.minder.exportData('png').then(function (data) {
        base64 = data
      })
      console.log("图片数据", base64)
      const caseJson = this.$refs.minderEditor.getJsonData();
      console.log('编辑器中的最新用例内容：', caseJson)
      // let data = {
      //   'mindId': this.mindId,
      //   'status': 1,
      //   'mindSetting': {
      //     'mindId': this.mindId,
      //     'template': caseJson.template,
      //     'theme': caseJson.theme,
      //     'version': caseJson.version,
      //   },
      //   'nodeTree': caseJson.root,
      //   'userAccount': this.userRedisInfo.account,
      //   'userName': this.userRedisInfo.name,
      //   'treeBase': base64,
      // }
      // saveMindNode(data).then((res) => {
      //   if (res.code == 20000) {
      //     this.$message.success("保存成功！")
      //     this.getDetailInfo();
      //   }
      // })
    },

    logCurrentData: function (event) {
      const caseJson = this.$refs.minderEditor.getJsonData();
      console.log('编辑器中的最新用例内容：', caseJson)
      const nodeDatas = {}
      this.checkJsonHasDuplicateId(caseJson.root, nodeDatas)
      let hasDuplicateId = false;
      Object.keys(nodeDatas).forEach(function (key) {
        const nodeData = nodeDatas[key]
        if (nodeData.length > 1) {
          console.log('重复id内容: ', nodeData)
          hasDuplicateId = true;
        }
      })
      if (hasDuplicateId) {
        this.$message.error('存在重复 id ，详情请看日志')
      } else {
        this.$message('未发现重复 id ')
      }
    },
    toggleEditMode: function (event) {
      this.editMode = !this.editMode
    },
    checkJsonHasDuplicateId: function (jsonData, nodeDatas) {
      // console.log("checkJsonHasDuplicateId", jsonData, nodeDatas)
      let id;
      if (jsonData && jsonData.data && jsonData.data.id) {
        id = jsonData.data.id;
      }
      if (id !== undefined) {
        if (!Object.keys(nodeDatas).includes(id)) {
          nodeDatas[id] = [jsonData.data]
        } else {
          nodeDatas[id].push(jsonData.data)
        }
      }
      if (jsonData.children && jsonData.children.length > 0) {
        jsonData.children.forEach(element => {
          this.checkJsonHasDuplicateId(element, nodeDatas);
        });
      }
    }
  }
}

</script>

5、页面效果