%20(2).svg)
项目简介
本项目是基于JavaScript的流程图编辑系统，具备强大且便捷的流程图创建、编辑和浏览功能。支持多种现代浏览器，能满足不同用户在流程可视化方面的需求，可应用于工作流设计、业务流程展示等多个领域。
项目的主要特性和功能
- 多浏览器支持：支持IE8+及现代浏览器，兼容性广泛。
- 多种流程图模式：支持横向和纵向流程图，根据开始节点和结束节点的位置自动调整模式，不同模式下连线展示方式不同。
- 编辑与浏览模式：具备流程模版的编辑和浏览模式。编辑模式有工具栏菜单用于创建节点和连线；浏览模式会显示流程图并自动调整画布大小。
- 验证与显示功能：支持节点、连线的验证显示，连线的条件显示，以及浏览模式节点的Tooltip显示。
- 自定义配置：支持全局和实例配置工具栏节点、连线皮肤、事件等相关配置项。
安装使用步骤
环境准备
假设用户已下载本项目的源码文件，且拥有支持JavaScript的浏览器环境。
配置基础信息
- 配置基础路径，以
/结束，示例：javascript $.workflow.config.basePath = "XXXX/"; - 配置id，确保唯一性，示例：
javascript $.workflow.config.guid='xxxxxx' - 增加流程状态，流程状态默认有
RUN（执行中）和COMPLETE（完成），可自定义，示例：javascript $.workflow.config.state.RUN = { fill: "270-#fffce1-#ffff99", stroke: "#edd770" }
配置事件
按需配置流程节点的切换、验证、连线移动结束、选中事件等，示例：
javascript
// 流程节点的切换事件
$.workflow.config.event.toggle = function (pid, prevProps, currProps, props){}
// 流程节点的验证事件
$.workflow.config.event.validate = function (pid, props){}
// 流程连线移动结束事件
$.workflow.config.event.lineMoveEnd = function (pid, currProps, props, direction){}
// 流程选中事件
$.workflow.config.event.selectTemplate = function (pid, props){}
配置自定义皮肤
可对节点和连线样式进行自定义配置，示例：
javascript
// 配置节点样式
$.extend(true, $.workflow.config.rect, {
attr: {
r: 8,
fill: "270-#fff-#d7d7d7",
stroke: '#ccc',
"stroke-width": 1,
"stroke-width-active": 2,
"stroke-active": '#0099cc'
}
});
// 配置连线样式
$.extend(true, $.workflow.config.path, {
attr: {
stroke: '#0099ff',
"stroke-width": 2,
"stroke-width-active": 3,
"arrow-end": 'block'
},
rect: {
attr: {
width: 4,
height: 4,
fill: "#0066cc",
stroke: "#0066cc",
"stroke-width": 1,
cursor: "opinter"
}
}
});
配置自定义工具栏
配置自定义节点和对应的事件，示例：
javascript
// 配置工具栏自定义节点
$.extend(true, $.workflow.config.tools.states, {
load: {
showType: 'image',
type: 'load',
name: '<<load>>',
text: {
text: '加载'
},
img: {
src: './images/load.png',
width: 16,
height: 16
},
nodeType: null
},
view: {
showType: 'image',
type: 'view',
name: '<<view>>',
text: {
text: '浏览'
},
img: {
src: './images/view.png',
width: 16,
height: 16
},
nodeType: null
},
save: {
showType: 'image',
type: 'save',
name: '<<save>>',
text: {
text: '保存'
},
img: {
src: '~/images/save.png',
width: 16,
height: 16
},
nodeType: null
}
});
// 配置工具栏事件
$.extend(true, $.workflow.config.tools.event, {
load: function (pid, props) {
opt.restore = restore2;
$("#paper").workflow(opt);
},
view: function (pid, props) {
opt.editable = false;
$("#paper").workflow(opt);
},
save: function (pid, props) {
var restore = $("#paper").workflow('save');
}
});
创建流程图
配置实例相关信息，然后创建流程图，示例：
javascript
// 节点数据
var restore = {
"Name": "并行或流程",
"DisplayName": "并行或流程",
"Description": "",
"NodeList": [
// 节点数据内容
],
"LinkList": [
// 连线数据内容
]
}
// 配置项
var opt = {
pid: "pid",
basePath: './workflow-editor/',
tools: {
states: {
// 工具栏自定义节点配置
},
event: {
// 工具栏事件配置
}
},
restore: restore
};
$("#paper").workflow(opt);
完成上述步骤后，在浏览器中打开相应页面，即可开始使用流程图编辑系统。
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】