yz-flow v1.1.16

前言

提供一个黑盒子的载体，通过暴露方法，和属性，实现对流程图的操作

install

npm i yz-flow --save-dev

属性

事件

属性 详细信息

• menueList 左侧显示的菜单栏 type Array

• canvasMenuStyle 右击节点菜单的样式 type Array
  { text: '测试' 显示的名字 icon: 'am-icon-lcsj-shuxing' 显示的文字 }

• readerOnly 是否为只读 默认 false type Boolean

• canZoom 是否支持缩放 默认 false type Boolean

• loadComplete 数据是否加载完毕 type Boolean

• nodeList 节点数据 type Array

• lineList 连接线数据 type Array

• currentElement 当前操作节点的数据 type Object
  { node_result_id 线的id node_id 节点id node_standard_code 节点的编码 }

• dataFormat 数据格式 type Object { node: { sourceId: 'node_id', targetId: 'next_node_id', name: 'node_name', left: 'position_x', top: 'position_y', nodetype: 'node_type', standard: 'node_standard_code' }, line: { lineId: 'node_result_id', name: 'node_result_name' } }

• 右击菜单每个功能的暴出的属性 type Boolean

  • visableEditeLine
  • visableEditeNode
  • visableAuto

事件 格式

• addNode addNode (params, callback) = >{ callback(接口返回节点的数据) }
• changeNode addNode (params) = >{ }
• connectionLine (params, callback) = >{ callback(接口返回的数据) }
• delConnect (lineId, callback)= >{ callback(true|false)}
• delNode (nodeId, callback)= >{ callback(true|false)}

注意渲染数据必须时同步 先获取节点数据和线的数据再将 loadComplete 属性设置为true ，再渲染视图

自定义该组件样式的方案