AgileTC 开源一个 vue 版的脑图编辑器，数据上已兼容 agiletc 的测试结果格式
背景
由于公司测试平台前端框架用的是 vue ，且年初 agiletc 还不支持百度脑图原生支持的从 xmind 复制粘贴至脑图组件，快捷键也不够好用，且前端组件没开源。因此基于社区内其他已有的开源脑图组件，再仿照 agiletc 的脑图组件包了一层。
很早就确认了可以开源，但一直有别的事情忙没空弄。刚好这周末又有同学私聊我，所以花了点时间把公司私库相关信息改为外部 npm 的，进行开源。
支持功能：
1、百度脑图原有功能（节点编辑、优先级设置、自定义标签设置）
2、测试结果登记，数据格式和 agiletc 现有脑图组件的格式一致，即可以直接正确展示和编辑现有 agiletc 自带编辑器设置的测试结果
3、当前选中节点个数统计，在顶部标题栏加了个当前选中节点个数统计数据的文字
相比 agiletc 少了的功能：
1、脑图本身自带的导入导出功能（agiletc 服务端有提供，所以前端就不提供了）
2、添加图片（百度脑图本身就没有）
3、实时上报及更新脑图数据
在此特别感谢 fudax、MeYoung 两位前辈的开源贡献，我只是站在大家的肩膀上补充了一些边角功能而已
开源地址
https://github.com/chenhengjie123/vue-testcase-minder-editor
效果
也可以本地跑起来体验，克隆完代码后，在根目录下：
# 安装依赖
npm --registry=https://registry.npm.taobao.org install
# 本地运行
npm run lib && npm run serve
运行后，按照提示的地址打开即可，例如
App running at:
- Local: http://localhost:8081
表示通过 http://localhost:8081 可以打开
项目中使用
安装本组件
npm --registry=https://registry.npm.taobao.org install vue-testcase-minder-editor
在 main.js 中
import 'vue-testcase-minder-editor/lib/VueTestcaseMinderEditor.css'
import VueTestcaseMinderEditor from 'vue-testcase-minder-editor'
Vue.use(VueTestcaseMinderEditor)
本组件依赖 vuex 进行部分全局配置管理。如果没有用 vuex ，可直接在 main.js 加入下面代码。
Vue.use(Vuex)
const store = new Vuex.Store({
modules: {
caseEditorStore: VueTestcaseMinderEditor.caseEditorStore
}
})
如果有，可以仿照下面代码，动态注册对应 module
const store = new Vuex.Store({...})
// 动态注册用例编辑器项目的 store 模块到项目中
store.registerModule('caseEditorStore', {
...VueTestcaseMinderEditor.caseEditorStore
})
在页面的 .vue 文件中
<template>
<VueTestcaseMinderEditor
:initJson="initJson" // 初始化数据，加载脑图时自动更新。同时也会监听数据变化，数据一更新就重新加载
ref="minderEditor" // 组件应用名称
:allowEditPriority="true" // 是否允许增删改优先级，实时更新状态
:allowEditLabel="true" // 是否允许增删改标签，实时更新状态
:allowEditResult="true" // 是否允许增删改测试结果，实时更新状态
:allowEditNode="true"> // 是否允许增删改节点内容，实时更新状态
</VueTestcaseMinderEditor>
</template>
...
<scripts>
export default {
...
data() {
return {
// 测试数据，实际可不必引入
initJson: {
'data': {
'id': 2,
'text': 'Design project',
'image': 'https://testerhome.com/uploads/user/avatar/6109.jpg',
'imageSize': { 'width': 200, 'height': 200 }
}
}
}
},
methods: {
// 示例方法，实际可根据需要绑定到其他元素事件中，比如 v-on:click="logCurrentData"
logCurrentData: function(event) {
console.log("编辑器中的最新用例内容：", this.$refs.minderEditor.getJsonData())
}
}
}
<scripts>
完整示例可查看 examples 下面的 2 个文件
更多信息
更多信息，请查看 https://github.com/chenhengjie123/vue-testcase-minder-editor
最后
有些 eslint 之类的问题因为本身原有代码就有比较多问题，不影响功能但会有一堆红线。修复起来比较耗时所以暂时没动，请大家见谅。
如果代码方面有什么优化建议，也欢迎提出，甚至直接提 PR 优化哈！
给大佬点赞，有时间准备部署试试
厉害👍
代码拉下来 可以直接跑 不错
我是萌新，恒捷大佬才是前辈
npm 安装依赖的时候，提示上面的报错，是有依赖 python2.x 吗
一枚老男孩
回复
你在跑哪个命令的时候报错？可以把完整的日志发一下不？
项目本身没有依赖 python ，估计是项目某些依赖有需要用 python 安装。
陈恒捷
回复
就是把源代码拉下来安装依赖的时候报的错误，npm --registry=https://registry.npm.taobao.org install
大佬，搜索功能貌似不可用呢，有时间帮忙看下哈
一枚老男孩
回复
刚看了下，默认数据的问题。默认数据没有 id，而搜索要求用到节点 id。
刚修复了，你更新下代码重新跑应该就没问题。正式项目里添加节点后，id 是自动生成的，所以也不会有问题。
你是我的偶像啊！！！
一枚老男孩
回复
刚试了下，貌似是用不了。之前这个功能基本没用过，一直没发现这个问题。。。
你先 github 记录个 issue ？这周事情比较多，估计得下周才有空研究。
陈恒捷
回复
@ 一枚老男孩 其实是可以用的，默认都是无样式的，你们试着改一下字体或者字号，『复制样式』、『清除样式』就可以点了
但是『粘贴样式』是有 bug 的，只是样式上一直是 disable 的，但其实也是可以点的，试一下就知道了，找一下样式控制那个文件改一下代码就 OK 了：
请教一下，使用 VueTestcaseMinderEditor 组件，在调用后端 wsClearRecord 接口时，websocket 获取到的结果为 null，跟 AgileTC 前端有 wsUrl 参数有关吗？
stephen
回复
你截图里用的不是 VueTestcaseMinderEditor 组件，而是 AgileTCEditor 组件哦。
VueTestcaseMinderEditor 目前没有支持 websocket ，所以你如果用这个组件的话，涉及 websocket 部分的都会用不了。
陈恒捷
回复
首先感谢大佬回复！我在比对 这两个组件 ，发现有这个参数，然后确实 websocket 用不了，目前已经计划基于 VueTestcaseMinderEditor 组件来开发。所以这里有两个关键问题想再问下：1、 前端想加上这个清除结果功能的时候，发现后端里面还调用了 websocket，会报错 ，不知道您的解决方案是？ 2、保存 baseCaseContent 内容，在分配多个子任务的情况下，需要获取到全量的 baseCase？还是说只要获取到当前子集的 baseCase 内容？
stephen
回复
1、 前端想加上这个清除结果功能的时候，发现后端里面还调用了 websocket，会报错 ，不知道您的解决方案是？
你的服务端用的是 agileTC 么？清除结果的核心是清理掉数据库里 exec_record 表里的内容，清理了这里后重新从服务端再拉一次合并测试结果后的用例数据，就是清除了所有测试结果后的数据了。
2、保存 baseCaseContent 内容，在分配多个子任务的情况下，需要获取到全量的 baseCase？还是说只要获取到当前子集的 baseCase 内容？
没太明白你的问题，这里的全量和子集具体是指？
然后如果是使用这个组件配合 agiletc 服务端使用的话，多人协作这块可能你需要花点精力处理下，比如加个锁或者让服务端能做增量保存，否则按照默认情况，是会出现相互覆盖的问题的。
陈恒捷
回复
是的，服务端用 AgileTC；然后全量和子集是指，当分配多个子任务后，每个任务中的用例，就是当前用例集下的一个子集；关于服务端增量保存，我挪了这段代码：https://github.com/didi/AgileTC/pull/93，还需要再加锁么？
stephen
回复
有这段代码的话，测试任务还是需要加锁的。因为测试任务里面的测试结果，pr 里面是不带有增量保存的。
同时前端记得按照我 pr 的说明里适配一下。
然后对于清除执行记录这个，我瞄了下我的前端，原来没把这个功能迁移过来。。。所以我只说思路吧。
思路是给服务端请求了 clear 清除了对应的测试结果记录后，把新结果的 json 对象更新到 VueTestcaseMinderEditor 的 init-json 属性绑定的对象即可（印象中 react 要显式用 set 属性名 的方法才能更新指定对象，而 vue 直接更新绑定的对象值即可）。组件内部有对这个属性值进行 watch 监听，一旦检测到变更，会立即变更自己的展示内容。
有个问题，请教一下楼主，vue 的脑图编辑器组件，虽然不影响使用，但控制台有报错，需要怎么解决，或者是可以忽略：
template 代码引用：
<template>
<div>
<h3>这是一个用例/任务详情页面</h3>
<div v-show="showTask" >
<el-row :gutter="20">
<el-col :span="6" >
<el-tooltip
title={{ recordDetail.description }}
placement="bottomLeft" >
{{ recordInfo.description }}
</el-tooltip>
</el-col>
<el-col :span="1"></el-col>
<el-col :span="4">
通过率: {{ recordInfo.passRate + '%' }}
</el-col>
<el-col :span="4">
已测: {{ recordInfo.passCount + '/' + recordInfo.totalCount }}
</el-col>
</el-row>
</div>
<VueTestcaseMinderEditor
ref="minderEditor"
:init-json="initJson"
:allow-edit-priority="editMode"
:allow-edit-label="editMode"
:allow-edit-result="resultMode"
:allow-edit-node="editMode"
/>
<el-button v-if="showTask" type="danger" @user1="clearRecord()">
清除执行记录
</el-button>
<el-button type="primary" @user2="updateCase()">
保存
</el-button>
</div>
</template>
方便把你项目其他无关信息精简掉，只留下能重现问题的最小项目内容，打个包或者上传 github 仓库后发一下不？
我这边没遇到过你这两个报错，不好评估。
渲染脑图报错。
重来看雨
回复
get，从报错上看，可能和你本身的脑图数据有关。
可以在 https://github.com/chenhengjie123/vue-testcase-minder-editor/issues 上单独提一个 issue ，并附上你的操作步骤、 xmind json 数据么？方便的话，能把一个能复现这个问题的最小项目直接提供过来最好，能复现才能有办法获取到更多的信息，有助于解决问题。
重来看雨
回复
能否建个 Issue ，把详细操作步骤、运行环境都发下？
我刚拉仓库最新代码跑了下，也进入编辑模式试了下加标签，都很正常，console 里没有任何 error 日志。
陈恒捷
回复
是 vue-i18n 的问题，已通过 https://github.com/kazupon/vue-i18n/issues/306 解决
after delete this line : Vue.locale = () => {}; it works fine for me
怎么绑定编辑、删除、新增节点事件啊
aaaaaa
回复
可以监听 minder 的事件来获取。
示例：
minder.on && minder.on('interactchange', function() {
self.selectedNodeCount = minder.getSelectedNodes().length
if (self.selectedNodeCount === 1) {
self.selectedNodeText = minder.getSelectedNodes()[0].data.text
} else {
self.selectedNodeText = ''
}
});
至于具体有哪些事件，可以源码里搜索下，我也有点不大记得了。