自定义流程图
功能
- 新增节点,新增可新增条件节点和流程节点
- 删除节点(选中后按删除键删除节点)或者点击删除icon删除
- 修改节点,点击查看后弹出抽屉进行节点属性的编辑
- 多选,按住shift键合并生成控制节点
- 反选,流程节点可反选,菜单中选择反选目标节点
- 保存位置,拖拽后保存位置
- 实现流程节点的颜色配置(失败/成功/正常)
- 流程图中是否可以点击canvas关闭抽屉
- 流程图界面的宽高配置
- 抽屉的宽度配置
- 返回了节点选择改变的事件
- 返回了更新节点数据的方法
- 返回了切换抽屉状态的方法
- 返回了获取当前流程图数据的方法
安装
推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用
npm i name -S
快速上手
<template>
<div id="app">
<FlowChart
ref="flowChart"
:data="data"
:height="height"
:width="width"
:closeSideBarClickCanvas="true"
:statusColor ="statusColor"
@node-selected="nodeSelecSted"
>
<!-- 插槽 -->
<template v-slot:sideBar>
<div class="rightMsg">
<div class="title">查看</div>
<input type="text" v-model="selectedNodes.label" placeholder="请输入标题">
<input type="text" v-model="selectedNodes.propertyOne" placeholder="节点属性">
<input type="text" v-model="selectedNodes.propertyTwo" placeholder="节点属性">
<input type="text" v-model="selectedNodes.propertyThree" placeholder="节点属性">
<input type="text" v-model="type" placeholder="各个项目中所存储的参数(类型)">
<input type="text" v-model="tell" placeholder="各个项目中所存储的参数(方式)">
<input type="text" v-model="people" placeholder="各个项目中所存储的参数(对象)">
<Button @click="saveNodeData">保存节点数据</Button>
<Button @click="closeSidebar">取消</Button>
</div>
</template>
</FlowChart>
<button @click="getData">保存流程图数据</button>
</div>
</template>
<script>
import FlowChart from './components/FlowChart.vue' // 引入组件
export default {
name: 'App',
components: {
FlowChart
},
data () {
return {
selectedNodes: {},
statusColor: { // 状态颜色得配置
success: { color: 'pink' }, // 成功
error: { color: 'yellow' }, // 失败
normal: { color: 'green' }, // 正常
start: { color: 'red' }, // 开始
end: { color: 'red' } // 结束
},
width: 1500, // 宽度
height: 600, // 高度
data: {}, // 流程图数据
type: '', // 各个项目中所需存储得字段
tell: '', // 各个项目中所需存储得字段
people: '' // 各个项目中所需存储得字段
}
},
methods: {
// 选择节点事件
nodeSelecSted (nodes) {
console.log(nodes)
this.selectedNodes = nodes // 拿到当前点击得节点数据
},
// 保存节点数据
saveNodeData () {
if (this.selectedNodes) {
this.selectedNodes.task = { // *各个项目需求中所存储得内容请放进task对象
type: this.type,
tell: this.tell,
people: this.people
}
this.$refs.flowChart.updateItem(this.selectedNodes) // 更新图表节点方法调用,传入更改后得节点信息
this.$refs.flowChart.toggleSidebar() // 调用更改抽屉状态的方法
}
},
// 更改抽屉关闭/打开状态
closeSidebar () {
this.$refs.flowChart.toggleSidebar()
},
// 获取流程图数据保存
getData () {
console.log(this.$refs.flowChart.getData()) // 获取流程图中数据调用getData()方法
}
}
}
</script>
API
FlowChart Attributes
参数 | 说明 | 类型 | 默认值 |
---|
width | 指定画布宽度,单位为 'px' | number | 1200 |
height | 指定画布高度,单位为 'px' | number | 600 |
sliderWidth | 指定抽屉宽度,单位为 'px' | number | 400 |
data | 显示的图表数据 配置项 | object | {nodes: [], edges: []} | closeSideBarClickCanvas |
closeSideBarClickCanvas | 是否可以通过点击 canvas 关闭抽屉 | boolean | true |
statusColor | 节点状态颜色 (success/error/normal/start/end) | object | {success: { color:'#67C23A' }, error: { color: '#F56C6C' }, normal: { color: '#409EFF' }start: { color: '#909399' }, start: { color: '#909399' }} |
data
- 数据格式如下,分为nodes(节点)和edges(关系),
data: {
nodes: [
{
id: 'start',
type: 'flowNode',
label: '开始',
state: 'start',
x: 100,
y: 100,
propertyOne: '节点属性',
propertyTwo: '节点属性',
propertyThree: '节点属性',
task: {}
},
{
id: 'xxx1',
type: 'flowNode',
label: '第一个节点',
state: 'normal',
x: 480,
y: 100,
propertyOne: '节点属性',
propertyTwo: '节点属性',
propertyThree: '节点属性',
task: {}
},
{
id: 'xxx2',
type: 'flowNode',
label: '第二个节点',
state: 'normal',
x: 480,
y: 140,
propertyOne: '节点属性',
propertyTwo: '节点属性',
propertyThree: '节点属性',
task: {}
}
],
edges: [
{
source: "start",
target: "xxx1"
},
{
source: "xxx1",
target: "xxx2"
}
]
}
- 如若当前节点的状态需要更改,请更改节点中字段state, state的值如下
成功:success
异常:error
正常:normal
开始:start
结束:end
- ID, TYPE, X, Y,不可修改
- 修改标题,请修改节点中label字段
- 节点属性分为三点,入需修改,请修改propertyOne,propertyTwo,propertyThree字段
- 各个项目中需求所需绑定改节点的数据,请添加进task,避免组件与业务混淆
FlowChart Events
事件名 | 说明 | 参数 |
---|
node-selected | 当用户手动点击当前节点查看按钮触发的事件 | node |
FlowChart Methods
方法名 | 说明 | 参数 |
---|
updateItem | 用于更新节点数据 | node |
toggleSidebar | 用于切换抽屉的状态 | - |
getData | 用于用户获取当前数据 | - |
FlowChart Slot
slot name | 说明 |
---|
sideBar | 抽屉的内容,如果需要编辑当前节点,需要自定义 dom ,并且提交数据的时候调用 updateItem 方法更新节点信息| |