logicflow流程图进阶教程（附demo）

开源

个人开源的leno-admin后台管理项目，前端技术栈：reactHooks、ant-design；后端技术栈：koa、mysql、redis，整个项目包含web端、electron客户端、mob移动端、template基础模板，能够满足你快速开发一整套后台管理项目；如果你觉得不错，就为作者点个✨star✨吧，你的支持就是对我最大的鼓励；

演示地址

文档地址

源码github地址

logicflow线上Demo

本文是为衔接上一篇文章，上一篇文章地址主要是讲了logicflow基本使用，比如：画板、节点的设置，一些基本的功能项配置，还有下载等功能，但是并未将如何给节点和线条绑定事件，并且将用户填写的数据添加到节点和线当中，最后保存时获取画板内的数据，传输给后端，所以在此将上篇文章的坑填一填~✨

一、数据获取

1-1、getGraphData()

getGraphData是logicFlow官方提供用于获取流程绘图上的数据，使用一般是 lf.getGraphData(); 使用后其会返回一个对象，然后会有两个属性，nodes就是流程图上的节点，edges就是流程图上的线条；

{
    "nodes": [
        {
            "id": "a78d6eb7-e64a-47bf-bb72-423bd2af1189", 
            "type": "start", // 之前 nodeList 里面定义的节点type类型
            "x": 450,
            "y": 230,
            "properties": {} // 官方预留让我们保存数据的对象属性
        },
        {
            "id": "9fbafc58-0baf-46c3-abc9-8f23b52957a6",
            "type": "rect",
            "x": 600,
            "y": 230,
            "properties": {}
        }
    ],
    "edges": [
        {
            "id": "965a0001-78cb-426e-abc0-3e69f34b2e98",
            "type": "polyline", 
            "sourceNodeId": "a78d6eb7-e64a-47bf-bb72-423bd2af1189", // 出发节点的id
            "targetNodeId": "9fbafc58-0baf-46c3-abc9-8f23b52957a6", // 目的地节点的id
            "startPoint": {
                "x": 470,
                "y": 230
            },
            "endPoint": {
                "x": 550,
                "y": 230
            },
            "properties": {},
            "pointsList": [
                {
                    "x": 470,
                    "y": 230
                },
                {
                    "x": 550,
                    "y": 230
                }
            ]
        }
    ]
}

1-2、setProperties()

参数的接收:setProperties(id: string, properties: Object): void，第一个是传入节点或线的id，第二个是你需要存储的数据；

配置的再次获取流程图数据：

{
    "id": "9fbafc58-0baf-46c3-abc9-8f23b52957a6",
    "type": "rect",
    "x": 600,
    "y": 230,
    "properties": {
        "nodeCode": "测试"
    }
}

我们现在可以拿到流程图上的数据量，接下来就是为节点和线条绑定事件~

二、事件绑定

2-1、node:click & edge:click 事件

官方为我们提供了很多节点和线条的事件，其中node:click & edge:click分别是节点的单击触发事件，线条的单击触发事件，我们在lfEventFn中绑定这些监听事件即可：

    lfEventFn() { 
      // 点击节点绑定事件
      this.lf.on('node:click', ({ data }) => {
        console.log(147, data.id)
        this.currentId = data.id
        this.drawer = true
      })
      // 点击边绑定事件
      this.lf.on('edge:click', ({ data }) => {
        console.log(147, data.id)
        this.currentId = data.id
        this.drawer = true
      })
    },

触发事件后，会返回 data, e, position 三个数据项，id就在data当中，获取即可

2-2、设置侧边弹窗，为节点线设置数据

HTML

    <!-- 事件绑定 -->
    <el-drawer
      title="流程配置"
      :visible.sync="drawer"
      direction="rtl"
      :modal="false"
      :modal-append-to-body="false"
      size="24%"
    >
      <el-form ref="queryForm" :model="queryForm" size="small" :inline="true">
        <el-form-item label="节点编码" prop="nodeCode">
          <el-input
            v-model="queryForm.nodeCode"
            placeholder="请输入节点编码"
            clearable
          />
        </el-form-item>
      </el-form>
    </el-drawer>

// 监听侧边抽屉状态：如果为true则将流程图内的数据会先，如果为false的话就保存用户填写的数据到properties内
  watch: {
    drawer: {
      handler(newVal, oldVal) {
        // 回显
        if (newVal) {
          const res = this.lf.getProperties(this.currentId)
          console.log(107, res)
          this.queryForm = res
        }
        // 保存
        if (!newVal) {
          this.lf.setProperties(this.currentId, this.queryForm)
        }
      }
    }
  },
  
  // 绑定点和线的单击事件
      lfEventFn() {
      // 点击节点绑定事件
      this.lf.on('node:click', ({ data }) => {
        console.log(173, data.id)
        this.currentId = data.id
        this.drawer = true
      })
      // 点击边绑定事件
      this.lf.on('edge:click', ({ data }) => {
        console.log(179, data.id)
        this.currentId = data.id
        this.drawer = true
      })
    },
    
 // 存储流程图上的数据
     saveClosePage() {
      this.lf.extension.control.addItem({
        iconClass: 'el-icon-files',
        title: '',
        text: '保存',
        onClick: (lf, ev) => {
          // 获取最新页面上的节点和线数据 getGraphData()
          console.log(148, lf.getGraphData())
        }
      })

最后就剩下将数据传给后端即可啦~

三、其他

可以去官网看下详情的api配置项，非常丰富

logic-flow 官网地址

demo代码地址

四、结语

这两篇文章仅仅是满足入门，还有很多地方没有涉及到，这就需要大家自己去官网上查看深入了解啦；还有本篇文章的demo有些简陋😂(主要是写文章确实有点累，偷点点懒)