jkstack-flow-chart

自定义流程图

$3

- 新增节点，新增可新增条件节点和流程节点
- 删除节点
- 修改节点，点击查看后弹出抽屉进行节点属性的编辑
- 多选，按住shift键合并生成控制节点
- 反选，流程节点可反选，菜单中选择反选目标节点
- 保存位置，拖拽后保存位置
- 缩放和画布拖拽
- 实现流程节点的颜色配置（失败/成功/正常/开始/结束）
- 流程图中是否可以点击mask关闭抽屉
- 流程图界面的mask颜色配置
- 流程图界面的宽高配置
- 抽屉的宽度配置
- 返回了节点选择改变的事件
- 返回了更新节点数据的方法
- 返回了切换抽屉状态的方法
- 返回了获取当前流程图数据的方法
- 新增删除反选按钮是否展示的配置
- 新增菜单中条件节点的配置
- 新增菜单中选项文案的配置
- 删除节点的方法
- 所有前置节点的方法

$3

推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用

npm i jkstack-flow-chart

$3

#### 根据需要可以选择再文件中引入，或者全局引入

##### 1.文件引入，在使用得vue文件中引入

``vue


`

##### 2.全局引入，在main.js中全局引入

`vue

import FlowChart from 'jkstack-flow-chart' // 引入组件
import 'jkstack-flow-chart/dist/flow-chart.css' // 引入组件样式

Vue.use(FlowChart)

`

$3

`vue







`

$3

##### FlowChart Attributes

| 参数 | 说明 | 类型 | 默认值 |
| -------------------- | ---------------------------------------------------------------- | ------ | ---------------------- |
| width | 指定画布宽度，单位为 'px' | number | 1200 |
| height | 指定画布高度，单位为 'px' | number | 600 |
| sliderWidth | 指定抽屉宽度，单位为 'px' | number | 400 |
| data | 显示的图表数据 配置项 | object | {nodes: [], edges: []} |
| closeSideBarClickMask| 是否可以通过点击 mask 关闭抽屉 | boolean | true |
| maskColor | mask遮罩层的颜色 | string | rgba(0,0,0,0.3) |
| statusColor | 节点状态颜色 (success/error/normal/start/end) | object | 默认值|
| showBackBtn | 是否展示反选按钮 | boolean | true |
| showAddBtn | 是否展示新增按钮 | boolean | true |
| showDelBtn | 是否展示删除按钮 | boolean | true |
| showViewBtn | 是否展示查看按钮 | boolean | true |
| addFlowNodeText | 新增菜单中新增流程节点得文案 | string | 新建流程节点 |
| addShowSwitchNode | 新增菜单中是否展示‘新增条件节点’ | boolean | true |
| addSwitchNodeText | 新增菜单中新增条件节点得文案 | string | 新建条件节点 |


###### 节点状态颜色默认值
`js
statusColor: {
success: { color: '#67C23A' },
error: { color: '#F56C6C' },
normal: { color: '#409EFF' },
start: { color: '#909399' },
end: { color: '#909399' }
}
`


##### FlowChart Events

| 事件名 | 说明 | 参数 |
| --------------- | ---------------------------------------------------------------- | ---- |
| node-selected | 当用户手动点击当前节点查看按钮触发的事件 | node |
| node-add | 当用户手动点击新增节点和合并控制节点时触发的事件 | node |
| node-delete | 当用户手动删除节点时触发的事件 | - |

##### FlowChart Methods

| 方法名 | 说明 | 参数 |
| --------------- | --------------------------------------------- | ------ |
| deleteItem | 用于删除关联的节点 | nodeId |
| updateItem | 用于更新节点数据 | node |
| getAllPreNodeList| 用于返回所有前置节点 | nodeId |
| fitView | canvas适应视口 | padding: [top, right, bottom, left] |
| toggleSidebar | 用于切换抽屉的状态 | - |
| getData | 用于用户获取当前数据 | - |


##### FlowChart Slot

| slot name | 说明 |
| --------------- | -------------------------------------------------------------------------------------------- |
| sideBar | 抽屉的内容，如果需要编辑当前节点，需要自定义 dom ，并且提交数据的时候调用 updateItem 方法更新节点信息｜



##### data
- 数据格式如下，分为nodes(节点)和edges(关系)，

`js
data: {
nodes: [
{
id: 'start',
type: 'flowNode',
label: '开始',
state: 'start',
x: 100,
y: 100,
propertyOne: '节点属性',
propertyTwo: '节点属性',
propertyThree: '节点属性',
task: {}
},
{
id: 'xxx1',
type: 'switchNode',
label: '第一个节点',
state: 'normal',
x: 480,
y: 100,
propertyOne: '节点属性',
propertyTwo: '节点属性',
propertyThree: '节点属性',
task: {}
},
{
id: 'xxx2',
type: 'controlNode',
label: '第二个节点',
state: 'normal',
x: 480,
y: 140,
propertyOne: '节点属性',
propertyTwo: '节点属性',
propertyThree: '节点属性',
task: {}
}
],
edges: [
{
source: "start",
target: "xxx1",
type: "customEdge"
},
{
source: "xxx1",
target: "xxx2",
type: "customBackEdge"
}
]
}
``



#### 节点（nodes）

| 属性 | 说明 | 备注 |
| ------------------------------------- | ------------------------------------------------------------------ | ------- |
| id | 节点得唯一标识 | 不可更改 |
| type | 节点类型(流程节点:flowNode/条件节点:switchNode/控制节点:controlNode) | 不可更改 |
| label | 节点标题 | - |
| state | 节点状态(成功：success/异常：error/正常：normal/开始：start/结束：end) | - |
| x | 相对canvas得X坐标 | 不可更改 |
| y | 相对canvas得y坐标 | 不可更改 |
| propertyOne/propertyTwo/propertyThree | 节点属性 | - |
| task | 根据需求所需绑定该节点得属性，请添加进task,避免组件与业务混淆 | - |
| anchorPoints | 节点入口/数组 | 不可更改 |
| style | 节点样式/对象 | 不可更改 |


#### 边（edges）

| 属性 | 说明 | 备注 |
| ----------------- | ----------------------------------------------------- | ------- |
| source | 源ID | 不可更改 |
| target | 目标ID | 不可更改 |
| targetAnchor | 源坐标索引值 | 不可更改 |
| sourceAnchor | 目标坐标索引值 | 不可更改 |
| type | 类型(自定义边：customEdge/自定义反选边：customBackEdge) | 不可更改 |
| style | 边样式 | 不可更改 |
| startPoint | 源出口坐标 | 不可更改 |
| endPoint | 目标入口坐标 | 不可更改 |