1.框架介绍

andflow_js是一个H5流程设计前端组件，是作为流程系统前端的其中一部分。可以快速实现各类流程设计，也可以根据业务和外观需要自定义界面渲染以及显示风格的前端组件。目的是共同学习、交流心得。在andflow_js可以完成流程设计执行，同时我们还配套了一个基于Golang的流程执行引擎，以及VUE组件。

Demo首页： http://www.andflow.net

golang 流程引擎 : https://github.com/zone-7/andflow_go

VUE 组件使用DEMO: https://github.com/zone-7/andflow_vue_test

更多信息请关注微信公众号: andflow

文件结构

src 源代码
depends 依赖包
dist 目标代码
examples 例子

JS 压缩工具

https://closure-compiler.appspot.com/home

简单压缩

CSS 压缩工具

https://www.runoob.com/csspack

2.DEMO

3.开发说明

3.1 相关js依赖

jsplumb
canvg.js
html2canvas.min.js

3.2 开发

3.2.1引用依赖js

<script src="/static/plugins/jsplumb/js/jsplumb.min.js"></script>
<script src="/static/plugins/html2canvas/html2canvas.js"></script>
<script src="/static/plugins/canvg/canvg.js"></script>

3.2.2引用andflow_js相关css、js

    <link rel="stylesheet" href="/static/flow/css/andflow.css">
    <link rel="stylesheet" href="/static/flow/css/andflow_themes.css">
    <link rel="stylesheet" href="/static/flow/css/andflow_themes_action.css">

    <script src="/static/flow/js/andflow.js"></script>
    <script src="/static/flow/js/andflow_themes.js"></script>

3.2.3定义流程设计器的DOM

<div id="andflow" style="width: 800px;height: 600px;padding:0px;">
</div>

3.2.4初始化流程设计器

//流程组件过滤标签
var tags=['通用', '系统'];

//流程组件定义
var metadata=[
    {
        "name": "begin",
        "title": "开始",
        "des": "开始",
        "group": "通用",
        "tag": "通用",
        "css": "begin",
        "icon": "/static/flow/img/begin.png",
        "flow_code": "57edec62af8a42628714da6d1a045928",
        "params": [],
        "params_html": "",
        "params_script": ""
    },
    {
        "name": "end",
        "title": "结束",
        "des": "结束",
        "group": "通用",
        "tag": "通用",
        "css": "end",
        "icon": "/static/flow/img/end.png",
        "flow_code": "57edec62af8a42628714da6d1a045928",
        "params": [],
        "params_html": "",
        "params_script": ""
    },

    {
        "name": "script",
        "title": "执行脚本",
        "des": "",
        "group": "通用",
        "tag": "通用",
        "css": "",
        "icon": "/static/flow/img/script.png",
        "flow_code": "57edec62af8a42628714da6d1a045928",
        "params": [],
        "params_html": "",
        "params_script": ""
    },

    {
        "name": "cmd",
        "title": "系统命令",
        "des": "",
        "group": "系统",
        "tag": "系统",
        "css": "",
        "icon": "/static/flow/img/cmd.png",
        "flow_code": "57edec62af8a42628714da6d1a045928",
        "params": [
            {
                "name": "command",
                "title": "命令",
                "placeholder": "操作系统指令",
                "element": "textarea",
                "default": "",
                "attrs": {
                    "rows": "4"
                },
                "options": null,
                "option_mode": ""
            },
            {
                "name": "timeout",
                "title": "超时（毫秒）",
                "placeholder": "超时毫秒",
                "element": "input",
                "default": "10000",
                "attrs": {
                    "type": "number"
                },
                "options": null,
                "option_mode": ""
            },
            {
                "name": "cache",
                "title": "执行结果参数名",
                "placeholder": "执行结果存储到哪个参数变量",
                "element": "",
                "default": "",
                "attrs": null,
                "options": null,
                "option_mode": ""
            }
        ],
        "params_html": "",
        "params_script": ""
    }

] ;



//初始化流程模型
//这个部分也是设计完成之后的JSON，可以参考examples下的例子
var flowModel= {
    "code":"",
    "name":"",
    "show_action_body":"false",       //是否显示Body,默认true, flow_theme_icon比较有用
    "show_action_content":"true",     //是否显示节点内容,默认true
    "show_action_state_list":"false", //是否显示列表,默认false
    "theme":"flow_theme_default",     //节点风格,默认flow_theme_default
    "link_type":"Flowchart",          //连接线风格，默认Flowchart
   
    };

//设计器配置选项
var options={
    //组件过滤标签列表
    tags:tags,            
    //组件元素
    metadata:metadata,    
    //流程模型
    flowModel:flowModel,  
    //是否可编辑，默认true
    editable:true,        
    //是否显示工具栏，默认true 
    show_toolbar:true,    
    //是否显示缩略图
    show_thumbail:false,
    //是否显示标尺
    show_rulers:true,
    //组件栏样式，可选项：固定左边metadata_fix_left、浮在左边metadata_float_left、浮在顶部metadata_float_top
    metadata_style:"",
    render_action:function(metadata,action,html){ return html; },//节点渲染
    render_action_helper: function(metadata,html){return null},  //节点拖拉渲染
    render_state_list: function(datas){return null},             //流程状态列表渲染
    render_link:function(conn,linktype,linkdata){return null},   //连接线渲染

    //节点单击事件
    event_action_click:function(metadata,action){

        var oldid=$("#current_action_id").val();
        andflow.setActionSelected(oldid,false);

        $("#current_action_id").val(action.id);
        andflow.setActionSelected(action.id,true);

    },
    //节点双击事件
    event_action_dblclick:function(metadata,action){

        var content = prompt("set action content ");

        andflow.setActionContent(action.id,content);

    },
    //连线单击事件
    event_link_click: function (link) {
        alert("link  click");
    },
    //连线双击事件
    event_link_dblclick: function (link) {
        var label = prompt("set link label ");
        link.title=label;
        andflow.setLinkInfo(link);

    },
    //画图板单击事件
    event_canvas_click: function(e){
        var oldid=$("#current_action_id").val();
        andflow.setActionSelected(oldid,false);
        $("#current_action_id").val("");
    }
}

//初始化流程设计器实例
andflow.newInstance("andflow",options);
//显示流程设计器
andflow.showFlow();

4.参数

4.1.设计器选项options

名称	描述	值	默认值
tags	组件标签列表	数组	null
metadata	组件定义元数据	数组	null
flowModel	流程模型	object	null
editable	是否可设计	true/false	true
show_toolbar	是否显示工具栏	true/false	true
show_thumbnail	是否显示缩略图	true/false	false
show_rulers	是否显示标尺	true/false	true
show_grid	是否显示背景格子	true/false	true
drag_step	每次拖动的单步距离	number	10
lang	一些标题的方言	json	{ metadata_tag_all: '所有组件', delete_action_confirm: '确定删除该节点?', }
render_action	组件节点渲染函数	function(metadata,action,html){ return null; }	null
render_action_helper	组件节点拖拉过程渲染函数	function(metadata,html){ return null; }	null
render_endpoint	组件节点拖拉点渲染函数	function(metadata,action,html){ return null; }	null
render_removebtn	组件节点拖拉点渲染函数	function(metadata,action,html){ return null; }	null
render_link	组件节点连线渲染函数	function(conn,linktype,linkdata){return null}	null
event_action_click	节点单击事件	function(metadata,action){}	null
event_action_dblclick	节点双击事件	function(metadata,action){}	null
event_link_click	连线单击事件	function (link)	null
event_link_dblclick	连线双击事件	function (link)	null
event_canvas_click	画布单击事件	function (event)	null

4.1.1组件元数据定义metadata

metadata 参数用于定义流程设计器的组件列表

var metadata=[
    {
        "name": "begin",
        "title": "开始",
        "des": "开始",
        "group": "通用",
        "tag": "通用", 
        "icon": "/static/flow/img/begin.png", 
        "params": [
                {
                    "name": "command",
                    "title": "命令",
                    "placeholder": "操作系统指令",
                    "element": "textarea",
                    "default": "",
                    "attrs": {
                        "rows": "4"
                    },
                    "options": null,
                    "option_mode": ""
                },
        ],
        "params_html": "",
        "params_script": ""
    },
]

名称	描述	取值
name	组件名称	唯一字符串
title	组件标题	中英文标题
group	组件所属组别	中英文名称
tag	组件标签，用于过滤	中英文名称
css	组件样式	CSS样式名称
icon	组件图标	图标路径或者使用base64格式（例如 data:image/png;base64,....）
params	组件设计参数数组	这个部分可以自定义
params	组件设计参数数组	这个部分可以自定义
params_html	组件设计参数设置界面HTMl	这个部分可以自定义
params_script	组件设计参数设置界面javascript	这个部分可以自定义

4.1.2流程模型参数flowModel

用于默认显示的流程模型，也可以放空。

例如：

    var flowModel= {
        "code":"",
        "name":"",
        "show_action_body":"false",       //是否显示Body,默认true, flow_theme_icon比较有用
        "show_action_content":"true",     //是否显示节点内容,默认true
        "show_action_state_list":"false", //是否显示列表,默认false
        "theme":"flow_theme_default",     //节点风格,默认flow_theme_default
        "link_type":"Flowchart",          //连接线风格，默认Flowchart
        "params":[],
        // "actions":[{"id":"f7a6ec0031784f5a80d8633a6418fd52","left":"77px","top":"101px","name":"begin","params":{},"title":"开始","icon":"/static/flow/img/begin.png","width":"120px","height":"80px"},{"id":"793a2a11cf8b40e9afd8bd8f04405e64","left":"126px","top":"222px","name":"script","params":{},"title":"执行脚本","icon":"/static/flow/img/script.png","width":"120px","height":"80px"},{"id":"f558687ca5f34a6c89732eb50749a15a","left":"201px","top":"362px","name":"end","params":{},"title":"结束","icon":"/static/flow/img/end.png","width":"120px","height":"80px"}],
        // "links":[{"source_id":"f7a6ec0031784f5a80d8633a6418fd52","target_id":"793a2a11cf8b40e9afd8bd8f04405e64"},{"source_id":"793a2a11cf8b40e9afd8bd8f04405e64","target_id":"f558687ca5f34a6c89732eb50749a15a"}]
    };

流程模型对象内的相关参数为：

名称	描述	取值	默认
code	流程唯一编码	字符串	null
name	流程名称	字符串	null
theme	组件节点样式	flow_theme_default、flow_theme_icon、flow_theme_zone、flow_theme_box,也可以自定义	flow_theme_default
link_type	连线样式	Flowchart、Straight、Bezier、StateMachine	Flowchart
show_action_body	是否显示组件节点中的Body部分	“true"、“false"	"true"
show_action_content	是否显示组件节点中的内容	“true"、“false"	"true"
show_action_state_list	是否显示流程状态列表	“true"、“false"	"false"
actions	节点列表：可以在设计后自动生成	object	null
actions	连线列表：可以设计后自动生成	object	null

4.2 方法

名称	描述	参数	返回值	DEMO
andflow.showFlow();	显示流程模型	flowModel，可以为空	null
andflow.getFlow();	获取流程模型对象	null	flowModel
andflow.snap("流程");	截图	截图导出的文件名称	null
andflow.setTheme(theme);	设置组件节点样式名称	flow_theme_default、flow_theme_icon、flow_theme_zone、flow_theme_box、或者其他自定义	null	andflow.setTheme(theme); andflow.reflow();
andflow.setEditable(false);	设置是否可设计	true、false	null
andflow.reflow();	重新渲染设计器,在改变样式、风格之后需要执行这个函数。	null	null
andflow.getLinkInfo(sourceId, targetId);	获取连线信息	sourceId：起始节点ID, targetId：目的节点ID	连线信息
andflow.setLinkInfo(linkInfo);	设置连线信息	linkInfo连线信息	null
andflow.setLinkType(link_type);	设置连接线样式名称	Flowchart、Straight、Bezier、StateMachine	null	andflow.setLinkType(link_type); andflow.reflow();
andflow.getLinkLabel(source_id,target_id);	获取连线中间标签标题	sourceId：起始节点ID, targetId：目的节点ID	标签标题
andflow.setLinkLabel(source_id,target_id,title);	设置连线中间标签标题	sourceId：起始节点ID, targetId：目的节点ID,title:标题	null
andflow.removeLink(sourceId, targetId);	删除链接线	sourceId：起始节点ID, targetId：目的节点ID	null
andflow.removeLinkBySource(sourceId);	删除从SoureceID节点开始的所有链接线	sourceId：起始节点ID	null
andflow.removeLinkByTarget(targetId);	删除所有到达targetId节点的所有链接线	targetId：目标节点ID	null
andflow.getActionInfo(actionId);	获取节点配置信息	actionId：节点ID	节点信息
andflow.setActionInfo(actionInfo);	设置节点配置信息	actionInfo：节点信息	null
andflow.setActionTheme(actionId, theme);	设置节点样式	actionId: 节点ID theme:节点样式，action_theme_default,action_theme_icon,action_theme_zone,action_theme_box 等	null
andflow.setActionTitle(actionId,title);	设置节点标题	actionId: 节点ID，title:标题	null
andflow.getActionTitle(actionId);	获取节点标题	actionId: 节点ID	string
andflow.setActionContentVisible(true);	设置内容是否可见	true、false	null
andflow.getActionContent(actionId);	获取节点内容	actionId:节点ID	string
andflow.setActionContent(actionId, content, content_type);	设置内容	actionId:节点ID；content:内容; content_type:类型（"msg"、"html","chart"）	null
andflow.setActionParam(actionId,key,value);	设置节点参数。	actionId：节点ID,key：参数名,value：参数值	null
andflow.getActionParam(actionId,key);	设置节点参数。	actionId：节点ID,key：参数名	参数值
andflow.setActionBorderColor(actionId,color);	设置节点边框颜色。	actionId：节点ID,color: 颜色	null
andflow.setActionHeaderColor(actionId,color);	设置节点头部背景颜色。	actionId：节点ID,color: 颜色	null
andflow.setActionHeaderTextColor(actionId,color);	设置节点头部字体颜色。	actionId：节点ID,color: 颜色	null
andflow.setActionBodyColor(actionId,color);	设置节点内容背景颜色。	actionId：节点ID,color: 颜色	null
andflow.setActionBodyTextColor(actionId,color);	设置节点内容字体颜色。	actionId：节点ID,color: 颜色	null
andflow.removeAction(actionId);	删除节点	actionId：节点ID
andflow.getGroupInfo(groupId);	获取组配置信息	groupId：组ID	组信息
andflow.setGroupInfo(groupInfo);	设置组配置信息	groupInfo：组信息	null
andflow.getGroupTitle(groupId);	获取组标题	groupId：组ID	组标题
andflow.setGroupTitle(groupId,title);	设置组标题	groupId：组ID, title:组标题	null
andflow.setGroupBorderColor(groupId,color);	设置组边框颜色。	groupId:组ID,color: 颜色	null
andflow.setGroupHeaderColor(groupId,color);	设置组头部背景颜色。	groupId：组ID,color: 颜色	null
andflow.setGroupHeaderTextColor(groupId,color);	设置组头部字体颜色。	groupId：组ID,color: 颜色	null
andflow.setGroupBodyColor(groupId,color);	设置组内容背景颜色。	groupId：组ID,color: 颜色	null
andflow.setGroupBodyTextColor(groupId,color);	设置组内容字体颜色。	groupId：组ID,color: 颜色	null
andflow.removeGroup(groupId,deleteMembers);	删除组	groupId：组ID, deleteMembers: 是否删除子元素（true,false)	null
andflow.getListInfo(listId);	获取列表配置信息	listId: 列表ID	列表信息
andflow.setListInfo(listInfo);	设置列表配置信息	listInfo: 列表信息	null
andflow.getListTitle(listId);	获取列表标题	listId: 列表ID	列表标题
andflow.setListTitle(listId,title);	设置列表标题	listId: 列表ID, title:标题	null
andflow.setListBorderColor(listId,color);	设置列表边框颜色。	listId:列表ID,color: 颜色	null
andflow.setListHeaderColor(listId,color);	设置列表头部背景颜色。	listId: 列表ID,color: 颜色	null
andflow.setListHeaderTextColor(listId,color);	设置列表头部字体颜色。	listId: 列表ID,color: 颜色	null
andflow.setListBodyColor(listId,color);	设置列表内容背景颜色。	listId: 列表ID,color: 颜色	null
andflow.setListBodyTextColor(listId,color);	设置列表内容字体颜色。	listId:列表ID,color: 颜色	null
andflow.setListItemColor(listId,color);	设置列表元素背景颜色。	listId: 列表ID,color: 颜色	null
andflow.setListItemTextColor(listId,color);	设置列表元素字体颜色。	listId:列表ID,color: 颜色	null
andflow.removeList(listId);	删除列表	listId: 列表ID	null
andflow.getTipInfo(tipId);	获取标签配置信息	tipId：标签ID	标签信息
andflow.setTipInfo(tipInfo);	设置标签配置信息	tipInfo:标签信息	null
andflow.getTipTitle(tipId);	获取标签标题	tipId：标签ID	标签标题
andflow.setTipTitle(tipId,title);	设置标签标题	tipId：标签ID, title:标题	null
andflow.getTipContent(tipId);	获取标签内容	tipId：标签ID	标签内容
andflow.setTipContent(tipId,content);	设置标签内容	tipId：标签ID, content:内容	null
andflow.setTipBodyColor(tip,color);	设置标签背景颜色。	tipId：标签ID,color: 颜色	null
andflow.setTipBodyTextColor(tip,color);	设置标签内容字体颜色。	tipId：标签ID,color: 颜色	null
andflow.removeTip(tipId);	删除标签	tipId：标签ID	null

4.3 事件

事件	名称	事件函数签名	描述
event_action_click	节点单击	event_action_click(action_meta, action)	action_meta节点配置信息, action:节点信息
event_action_dblclick	节点双击	event_action_dblclick(action_meta, action)	action_meta节点配置信息, action:节点信息
event_action_remove	节点被删除	event_action_remove( action)	action:节点信息
event_link_click	连接线单击	event_link_click(linkinfo)	linkinfo:链接线信息
event_link_dblclick	连接线双击	event_link_dblclick(linkinfo)	linkinfo:链接线信息
event_link_remove	连接线被删除	event_link_remove(linkinfo)	linkinfo:链接线信息
event_canvas_click	设计面板单击	event_canvas_click(event)	event:事件
event_canvas_changed	设计面板被调整	event_canvas_changed()	null

Name		Name	Last commit message	Last commit date
Latest commit History 87 Commits
depends		depends
dist		dist
examples		examples
img		img
src		src
.DS_Store		.DS_Store
index.html		index.html
readme.md		readme.md

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

1.框架介绍

文件结构

JS 压缩工具

CSS 压缩工具

2.DEMO

3.开发说明

3.1 相关js依赖

3.2 开发

3.2.1引用依赖js

3.2.2引用andflow_js相关css、js

3.2.3定义流程设计器的DOM

3.2.4初始化流程设计器

4.参数

4.1.设计器选项options

4.1.1组件元数据定义metadata

4.1.2流程模型参数flowModel

4.2 方法

4.3 事件

About

Releases 3

Packages

Languages

zone-7/andflow_js

Folders and files

Latest commit

History

Repository files navigation

1.框架介绍

文件结构

JS 压缩工具

CSS 压缩工具

2.DEMO

3.开发说明

3.1 相关js依赖

3.2 开发

3.2.1引用依赖js

3.2.2引用andflow_js相关css、js

3.2.3定义流程设计器的DOM

3.2.4初始化流程设计器

4.参数

4.1.设计器选项options

4.1.1组件元数据定义metadata

4.1.2流程模型参数flowModel

4.2 方法

4.3 事件

About

Topics

Resources

Stars

Watchers

Forks

Releases 3

Packages 0

Languages

Packages