【更新】easyui版的工作流设计器源码

接上贴： http://www.iteye.com/topic/1114540

 

     好久没来更新，一直在忙公司的项目，应广大JQuery爱好者的要求，弄了个HTML版的设计器 目前只实现了UserTask节点，其他节点类似（请参照Activiti工作流引擎），一下代码仅供参考， 有兴趣可以一起交流。

 

2014年1月6日 更新

已实现：

1.根据Activit设计器实现了除User Task外的其余节点。

2.重构的JS脚本，更利于扩展。

未实现：

1.文档还没有来得及写。

2.子流程没有实现。

目前存在的问题：

1.由于是静态页面并且使用了easyui跨域脚本调用，Chrom浏览器安全级别的要求所以无法打开属性配置页面。如果放到站点中没有此问题。

2.时间有限，开发文档没有完成。

 

最新的代码见附件

 

评论

27 楼 晓天123 2018-04-30  

放到项目里运行，draw2D未定义的错误 

26 楼 reallikesoft 2015-02-07  

请问为什么打开没有sequence flow,无法连线啊

25 楼 zhujianpengzha 2014-12-11  

楼主好，这个web设计器里面，可以在用户任务里面添加动态表单，但是可以在Start开始节点上添加表单吗？我双击Start右侧没有出来对应的面板呀？

24 楼 lisonghua2010 2014-12-02  

zhujianpengzha 写道

楼主，我看了candidateUsersConfig.html 页面中，加载人员数据是这样写的，可是我没找见数据来源，是从哪个js，哪里请求得到的数据呢？

function loadTaskCandidateUsers(){
var candidateUsers = task.candidateUsers;
var candidate_users_grid_rows=[];
//alert(listeners.getSize());
for(var i=0;i<candidateUsers.getSize();i++){
var candidateUser = candidateUsers.get(i);
var user = {
id:candidateUser.userId,
sso:candidateUser.sso,
name:candidateUser.name,
action:''
};
candidate_users_grid_rows[i]=user;
};
//alert(listener_grid_rows);
var candidate_users_grid_data={
total:candidateUsers.getSize(),
rows:candidate_users_grid_rows
};
_task_candidate_users_list.datagrid('loadData',candidate_users_grid_data);
}

这个函数的数据源是js对象，是在内存中的

23 楼 zhujianpengzha 2014-12-01  

楼主，我看了candidateUsersConfig.html 页面中，加载人员数据是这样写的，可是我没找见数据来源，是从哪个js，哪里请求得到的数据呢？

function loadTaskCandidateUsers(){
var candidateUsers = task.candidateUsers;
var candidate_users_grid_rows=[];
//alert(listeners.getSize());
for(var i=0;i<candidateUsers.getSize();i++){
var candidateUser = candidateUsers.get(i);
var user = {
id:candidateUser.userId,
sso:candidateUser.sso,
name:candidateUser.name,
action:''
};
candidate_users_grid_rows[i]=user;
};
//alert(listener_grid_rows);
var candidate_users_grid_data={
total:candidateUsers.getSize(),
rows:candidate_users_grid_rows
};
_task_candidate_users_list.datagrid('loadData',candidate_users_grid_data);
}

22 楼 zhujianpengzha 2014-12-01  

十分感谢楼主耐心解答，我目前流程已经发布成功了，也可以启动流程了，还要请教个问题，流程每个节点怎么选择操作人？

21 楼 lisonghua2010 2014-11-28  

zhujianpengzha 写道

另外，我把设计器画好流程后得到的xml，放到项目里面，用repositoryService.createDeployment().addClasspathResource(url).deploy();方式发布，还是失败的，是xml格式有啥问题，还是我的用法错了？

这个是我的Service实现

public Deployment deployProcessDefDecriptor(String processName, String descriptor) {
		Deployment dm = extRepositoryService.createDeployment().name(processName + ".bar")
				.addString(processName + ".bpmn20.xml", descriptor).deploy();
		return dm;
	}

20 楼 zhujianpengzha 2014-11-27  

另外，我把设计器画好流程后得到的xml，放到项目里面，用repositoryService.createDeployment().addClasspathResource(url).deploy();方式发布，还是失败的，是xml格式有啥问题，还是我的用法错了？

19 楼 zhujianpengzha 2014-11-27  

楼主，你的service中，workflowManager.deployProcessDefDescriptor(processName, descriptor);  这个方法调用api中的哪个方法呀，我尝试调用repositoryService.createDeployment().addString(resourceName, text).deploy();
其中text是xml字符串，结果是流程定义保存不到数据库里面去，你是怎么做的呢？

18 楼 lisonghua2010 2014-11-26  

big_scorpio 写道

这样的话  如果要修改流程图，如何根据.xml映射到画布中？ 

需要将xml解析然后再动态显示流程图

17 楼 lisonghua2010 2014-11-26  

zhujianpengzha 写道

楼主，saveProcessDescriptor.action这个方法里面，调用的那个方法来保存流程呢？？

Map<String, Object> json = new HashMap<String, Object>();
		String xml = this.getRequest().getParameter("processDescriptor");
		String name = this.getRequest().getParameter("processName");
		String variables = this.getRequest().getParameter("processVariables");
		try {
			String defId = procdefService.deployProcessDefDescriptor(name, xml, variables);
			if (!StringUtils.isEmpty(defId))
				json.put("result", true);
			else
				json.put("result", false);
		} catch (Exception e) {
			e.printStackTrace();
			json.put("result", false);
			json.put("message", e.getMessage());
		}
		Struts2Utils.renderJson(json);

这是Action中的代码

public String deployProcessDefDescriptor(String processName, String descriptor, String variables) {
		String pid = workflowManager.deployProcessDefDescriptor(processName, descriptor);
		JSONArray jsonArray = JSONArray.fromObject(variables);
		for (int i = 0; i < jsonArray.size(); i++) {
			JSONObject variableJSONObj = jsonArray.getJSONObject(i);
			if (!variableJSONObj.isNullObject()) {
				Procvaraible varaible = new Procvaraible();
				varaible.setProcId(pid);
				varaible.setName(variableJSONObj.getString("name"));
				varaible.setType(variableJSONObj.getString("type"));
				varaible.setScope(variableJSONObj.getString("scope"));
				varaible.setDefaultValue(variableJSONObj.getString("defaultValue").equalsIgnoreCase("null") ? null
						: variableJSONObj.getString("defaultValue"));
				varaible.setRemark(variableJSONObj.getString("remark").equalsIgnoreCase("null") ? null
						: variableJSONObj.getString("remark"));
				procvaraibleManager.saveProcvaraible(varaible);
			}
		}
		return pid;
	}

这个是service的代码
其实就是调用activiti的流程部署接口把xml部署

16 楼 zhujianpengzha 2014-11-25  

楼主，saveProcessDescriptor.action这个方法里面，调用的那个方法来保存流程呢？？

15 楼 big_scorpio 2014-07-16  

这样的话  如果要修改流程图，如何根据.xml映射到画布中？ 

14 楼 lisonghua2010 2014-05-22  

jing1059373137 写道

你好，请问撤销，重做使用什么方法做的

用Draw2d里面提供的方法，非常简单：

function redo(){
	workflow.getCommandStack().redo();
}
function undo(){
	workflow.getCommandStack().undo();
}

13 楼 jing1059373137 2014-05-20  

你好，请问撤销，重做使用什么方法做的

12 楼 lisonghua2010 2014-04-11  

xiangyuely 写道

请问，页面中的xml如何导出成activiti可以使用的xml文件？

在定制器的画布旁边有一个Tab是XML这个xml实际上就字符串，只不过是格式化好的字符串，你把这个字符串提交到服务端，然后服务端把这个字符串通过调用Activiti的Api发布到数据库中就可以了，我会在未来的博文中讲到的！

11 楼 xiangyuely 2014-04-10  

请问，页面中的xml如何导出成activiti可以使用的xml文件？

10 楼 sunj2ee 2014-03-17  

感谢楼主分享

9 楼 lxhxklyy 2014-03-17  

mark，谢谢分享

8 楼 lisonghua2010 2013-01-10  

BeMyself_wangl 写道

代码还没仔细看，楼主请教下， 画线是采用什么的？
是不是svg +vml

不是，Draw2D一个JS会图库，跨浏览器的