前段时间看到GoJs 产品绘制workflow有自动化布局、展示风格简洁优点，缺点是收费产品。参考json格式数据结构，nodeDataArray与linkDataArray两个数据完成了流程数据存储，结合vue-workflow-chart与通用json-rest-api存储实现完整工作流核心功能

节点维护

workflow数据存储由节点数组、关系数组和样式数组构成，基础数据格式为：

{  "states": [{      "id": "start",      "label": "开始"    }, {      "id": "end",      "label": "结束"    }],    "transitions": [{      "id": "Dz2un1r",      "label": "ask for auditing",      "target": "start",      "source": "end"    }]}

逻辑控制为节点添加上级、下级和同级，删除节点删除相应的关系数组值

路由名称打开页面

在流程列表页面打开Dashboard页面，并传递 id 值

流程设计页面获取route中的query参数

created() {    this.id = this.$route.query.id    if (this.id) {      api.getFlow(this.id).then(({data}) => {        this.states = data.items.v.states;        this.transitions = data.items.v.transitions        this.name = data.items.v.name      });    }else{      this.states=[{id: "start", label: "开始"}, {id: "end", label: "结束"}]      this.transitions = [{"id": "Dz2un1r","source": "start","target": "end"}]    }  },

js生成ID

getId(){      return Math.random().toString(32).substr(2)    }

js取当前时间戳

getId(){      return Math.random().toString(32).substr(2)    },    getTime(){      var date = new Date();      return date.getFullYear() + '-' + (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-'      + (date.getDate()<10?'0'+date.getDate():date.getDate()) + ' ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds()    },

子父组件之间传值

用户组件

                                    methods: {      handleUser(user) {        this.$emit('handleUser',user)  // 向父组件传值      }    }

节点设置界面中使用了选择用户组件；界面中引用user组件

接受用户组件中定义的handleUser传递的user json对象

import user from "../../components/user.vue"export default {  name: "App",  components: {    WorkflowChart,    user,  },  methods: {    setUser(user){      this.state.label = user.name      this.updateState()    },  }} 

界面中if else控制

     添加下级     添加上级