yz-flow

前言

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

install

npm i yz-flow --save-dev

属性

参数	说明	类型	可选值	默认值
menueList	左侧显示的菜单栏	Array	无	无
readerOnly	是否为只读	Boolean	true,false	false
canZoom	是否缩放	Boolean	true,false	false
loadComplete	首次加载数据是否加载完毕	Boolean	true,false	false
nodeList	节点数据	Array	无	无
lineList	线的数据	Array	无	无
currentElement	当前操作的节点数据	Object	{}	{}
dataFormat	定义数据格式	Object	{}	default
visableEditeLine	父级监听该值，判断是否编辑当前的线	true,false	false	false
visableEditeNode	父级监听该值，判断是否编辑当前的节点	true,false	false	false
visableAuto	父级监听该值，判断是否编辑自动表单	true,false	false	false

事件

事件	说明	参数值
addNode	添加节点	params, callback
changeNode	改变该节点	params
connectionLine	节点连线	params, callback
delConnect	删除连线	lineId, callback
delNode	删除节点	nodeId, callback

属性 详细信息

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

[ { nodetype: 1, 可以相同 standard: 1001, 唯一值 isShow: true, 是否显示 name: '测试', 显示名称 icon: 'am-icon-lcsj-shixiangshouli' 显示字体图标 } ] * 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 ，再渲染视图

自定义该组件样式的方案

.flow >>> .menu-item{ color: red!important; }