jkstack-flow-chart

自定义流程图

功能

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

安装

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

npm i jkstack-flow-chart

引入

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

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

<script>
import FlowChart from 'jkstack-flow-chart' // 引入组件
import 'jkstack-flow-chart/dist/flow-chart.css' // 引入组件样式
 
export default {
  components: {
    FlowChart
  }
}
</script>
 

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

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

快速上手

<template>
  <div id="app">
    <FlowChart
      ref="flowChart"
      :data="data"
      :height="height"
      :width="width"
      :closeSideBarClickMask="false"
      :maskColor="maskColor"
      :statusColor ="statusColor"
      addFlowNodeText="流程节点"
      addSwitchNodeText="条件节点"
      :showDelBtn="true"
      :showAddBtn="true"
      :showBackBtn="false"
      :shoViewBtn="false"
      :addShowSwitchNode="false"
      @node-selected="nodeSelecSted"
      @node-add="nodeAdd"
      @node-delete="nodeDel"
    >
    <!-- 插槽 -->
      <template v-slot:sideBar>
        <div class="rightMsg">
          <div v-if="selectedNodes.type === 'flowNode'">
            <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>
          <div v-if="selectedNodes.type === 'switchNode'">
            <div class="title">条件节点</div>
            <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>
          <div v-if="selectedNodes.type === 'controlNode'">
            <div class="title">控制节点</div>
            <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>
        </div>
      </template>
    </FlowChart>
    <button @click="getData">保存流程图数据</button>
  </div>
</template>
 
<script>
import FlowChart from './components/FlowChart.vue' // 引入组件
// import FlowChart from 'jkstack-flow-chart' // 引入组件
// import 'jkstack-flow-chart/dist/flow-chart.css' // 引入组件
 
export default {
  name: 'App',
  components: {
    FlowChart
  },
  data () {
    return {
      selectedNodes: {},
      statusColor: { // 状态颜色得配置
        success: { color: '#67C23A' }, // 成功
        error: { color: '#F56C6C' }, // 失败
        normal: { color: '#409EFF' }, // 正常
        start: { color: '#909399' }, // 开始
        end: { color: '#909399' } // 结束
      },
      width: 1500, // 宽度
      height: 600, // 高度
      maskColor: 'rgba(255, 255, 255, 0.7)', // mask颜色
      data: {}, // 流程图数据
      type: '', // 各个项目中所需存储得字段
      tell: '', // 各个项目中所需存储得字段
      people: '' // 各个项目中所需存储得字段
    }
  },
  methods: {
    // 选择节点事件
    nodeSelecSted (node) {
      this.selectedNodes = node // 拿到当前点击得节点数据
    },
    // 新增节点事件
    nodeAdd (node) {
      console.log('新增', node)
      this.selectedNodes = node
    },
    // 删除节点事件
    nodeDel (node) {
      console.log('删除', node)
    },
    // 保存节点数据
    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>
 
<style lang="scss" scoped>
#app{
  width: 1500px;
  border:1px solid #fff;
  border-radius: 5px;
  margin: 20px auto;
}
.rightMsg{
  padding: 20px;
  box-sizing: border-box;
}
.title{
  font-size: 15px;
  margin-bottom: 10px;
  color: #666;
}
input{
  width: 100%;
  border: 1px solid #efefef;
  line-height: 35px;
  padding: 0 10px;
  box-sizing: border-box;
  border-radius: 8px;
  font-size: 14px;
  outline: none;
}
textarea{
  width: 100%;
  border: 1px solid #efefef;
  line-height: 35px;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 8px;
  font-family: '微软雅黑';
  font-size: 14px;
  outline: none;
}
button{
  width: 120px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  background: #3388FF;
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  margin: 10px 20px;
}
</style>
 
 

API

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	新建条件节点

节点状态颜色默认值

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(关系)，

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	目标入口坐标	不可更改