SimpleFlowChart是一款vue的流程图组件插件-BFW插件库

SimpleFlowChart是一款vue的流程图组件插件

SimpleFlowChart是一款vue的审批流程图组件插件，支持cdn与nodejs引入使用，支持条件节点。

安装方式：

nodejs

npm i @wanglin1994/simple-flow-chart

引入

import SimpleFlowChart from '@wanglin1994/simple-flow-chart'

Vue.use(SimpleFlowChart, {
notRegisterNodeContent: false, // 如果需要自己编写节点内容组件，设为true
notRegisterNodeTypeContent: false // 如果需要自己编写添加节点的悬浮面板组件，设为true
})

Cdn

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/SimpleFlowChart.umd.min.js"></script>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/SimpleFlowChart.css">

Vue.use(SimpleFlowChart)
Vue.component( "SimpleFlowChart", SimpleFlowChart.default) 
Vue.component( "SFCNode", SimpleFlowChart.Node)

属性

<SimpleFlowChart v-model="data"></SimpleFlowChart>
SimpleFlowChart组件还支持以下属性：

customCreateNode
类型：Function

是否必传：否

回调参数：nodeList（当前被点击添加新节点的节点所在节点列表）, nodeData（当前被点击添加新节点的节点）, type（悬浮面板里点击要添加的节点类型数据）

自定义创建新节点，当点击添加节点的时候会调用该函数，需要返回一个要添加的新节点的数据结构。

customCreateConditionBranchNode

类型：Function

是否必传：否

回调参数：nodeData

自定义创建新的分支节点。需要返回一个要添加的新节点的数据结构。

beforeDeleteNode

类型：Function

是否必传：否

回调参数：nodeList, childrenList, belongConditionNodeData, nodeData

删除节点前的回调函数，需要返回一个Promise，如果结果是resolve ，那么会执行删除，否则什么也不做。如果需要进行删除前的二次确认那么这个函数是你需要的。

background

类型：String

是否必传：否

默认值：rgba(0, 0, 0, 0.03)

画布背景颜色。

readonly

类型：Boolean

是否必传：否

默认值：false

是否只读。

nodeTypeList

类型：Array

是否必传：否

默认可以添加的节点列表数据如下：

[
  {
    name: '普通节点',
    list: [
      {
        type: 'normal',
        name: '普通节点'
      }
    ]
  },
  {
    name: '分支节点',
    list: [
      {
        type: 'condition',
        name: '条件分支'
      }
    ]
  }
]

你可以通过该属性自定义可添加的节点类型列表。

vertical

类型：Boolean

是否必传：否

是否垂直显示。

showScaleBar

类型：Boolean

是否必传：否

是否显示右上角的放大缩小控件。

customCreateNodeId

类型：Function

是否必传：否

自定义创建节点的唯一的id。

事件

SimpleFlowChart组件上可以监听如下事件：

add-node
数据：newNode

添加完新节点后触发。

delete-node
数据：nodeData

删除一个节点后触发。

add-condition-branch
数据：newNode

添加完新的分支节点后触发。

node-content-click
数据：nodeData、nodeList

一个节点被点击时触发，一般用于配置某个节点数据时使用。

自定义节点、

如果想自定义节点的样式，首先需要在注册组件时传入如下选项：

Vue.use(SimpleFlowChart, {
notRegisterNodeContent: true, // 如果需要自己编写节点内容组件，设为true
})
然后你就可以自己编写一个节点内容的组件了，组件的名称，也就是name必须为SFCNodeContent，然后再使用前先全局注册即可。

组件的数据可以通过名为data的props来接收。

自定义节点添加悬浮面板

如果想自定义添加节点类型的悬浮选择面板，首先需要在注册组件时传入如下选项：

Vue.use(SimpleFlowChart, {
notRegisterNodeContent: true,
})
然后你就可以自己编写一个组件了，组件的名称，也就是name必须为SFCNodeTypeContent，然后再使用前先全局注册即可。

完整示例代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue.2.7.14.js"></script>

    <style>
        .submitbtn{
            position: fixed;
            top: 10px;
            left: 10px;
           
            background:#3366CC ;
            padding: 10px;
            color: white;
    
            z-index: 111;
        }
    </style>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/SimpleFlowChart.umd.min.js"></script>


    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/SimpleFlowChart.css">

</head>

<body>



    <div id="app" style="height:100vh;">



    </div>

    <script>
        Vue.use(SimpleFlowChart)
        Vue.component( "SimpleFlowChart", SimpleFlowChart.default) 
        Vue.component( "SFCNode", SimpleFlowChart.Node) 
        var app = new Vue({
          el: '#app',
          data : function() {
                			return {
                			    nodetypelist:[
          {
            name: '普通节点',
            list: [
              {
                type: 'normal',
                name: '普通节点'
              }
            ]
          },
          
        ],
                				testdata: [{
                               type: 'start',
                               title: '开始',
                           }, {
                               type: 'normal',
                               title: '申请人',
                               content: '员工',
                                 children: []
                           }, {
                               type: 'normal',
                               title: '审批人',
                               content: '主管',
                                children: []
                           }, {
                               type: 'end',
                                title: '结束',
                           }]
                				
                				
                				
                			
                			};
                		},
        
          methods: {
              submit(){
                  alert(JSON.stringify(this.testdata));
              },
                            change(nodeData,nodeList){
                                console.log(nodeData);
                                nodeData.title="123";
                            }
                		},
          template: '<div class="flowChartContainer"><SimpleFlowChart style="height:100vh;" @node-content-click="change" v-model="testdata"  vertical  /><div class="sfcActionScaleBtn submitbtn" @click="submit">提交</div></div>'
        })
    </script>

</body>

</html>

源码地址：https://github.com/wanglin2/simple-flow-chart