activiti自己定义流程之整合（二）：使用angular js整合ueditor创建表单

基础环境搭建完成，接下来就该正式着手代码编写了，在说代码之前。我认为有必要先说明一下activit自己定义流程的操作。

抛开自己定义的表单不谈。通过之前的了解，我们知道一个新的流程開始。是在启动流程实例（processIntence）的时候，而流程实例依赖于流程定义（processDefinition）。流程定义又依赖于流程模型（model）。

我们用到的自己定义表单须要在创建模型，画模型图的时候就指定表单的名称formKey。须要保证这个formKey和我们创建的表单名称一致。

表单并不在创建模型的时候使用。而是在部署的时候用到，因此仅仅要是在部署流程定义之前创建自己定义表单，那么不管是先创建模型还是先创建表单。仅仅要名称一致即可。

那么我这里就先创建表单。由于我认为这种话，在创建模型时能够预览，更能保证创建模型的正确性（尽管模型也能够改动）；

与之前的自己定义表单稍有不同的是，在这个整合的样例中，我用的是angularjs，同一时候预览时也用到了jquery中的dialog对话框的功能，也就须要比之前导入很多其它前端的js。他们例如以下图所看到的。

须要注意的是，dialog的样式在jquery-ui.js中控制。这个也是网上下载的。

前端首页index.html代码例如以下，由于angular js为单页面应用，因此实际上仅仅有一个html声明，全部的js以及css文件也都须要在index.html中一開始就导入进来：

[html] view
plain copy

1. <!DOCTYPE html>
2. <html ng-app="activitiApp">
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5. <link href="./activi_css/activi.css" rel="stylesheet"/>
6. <script type="text/javascript">
7. var _root=‘http://form/index.php?s=/‘,_controller = ‘index‘;
8. </script>
9. <script src="./angular-1.4.0-rc.2/angular.js"></script>
10. <script src=‘./angular-1.4.0-rc.2/angular-ui-router.js‘></script>
11. <script src=‘./activi_js/app.js‘></script>
12. <script src=‘./activi_js/createCtr.js‘></script>
13. <script src=‘./activi_js/modelCtr.js‘></script>
14. <script src=‘./activi_js/processCtr.js‘></script>
15. <script src=‘./activi_js/taskCtr.js‘></script>
16. <script src=‘./activi_js/findFirstTaskCtr.js‘></script>
17. <script src=‘./activi_js/loginCtr.js‘></script>
18. <script src=‘./activi_js/hisTaskCtr.js‘></script>
19. <script src=‘./activi_js/completeTaskCtr.js‘></script>
20. <script src=‘./activi_js/completeTaskTo1Ctr.js‘></script>
21. <script src="./my_js/updateFormCtr.js"></script>
22. <script src="./my_js/formListCtr.js"></script>
23. <!-- 导入form相关的js -->
24. <!--  <meta name="viewport" content="width=device-width, initial-scale=1.0">
25. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
26. <link href="form_css/bootstrap/css/bootstrap.css?2023" rel="stylesheet" type="text/css" />
27. <link href="form_css/site.css?2023" rel="stylesheet" type="text/css" />-->
28. <link href="form_css/jquery-ui.css" rel="stylesheet" type="text/css" />
29. <link href="my_css/a.css" rel="stylesheet" type="text/css" />
30. <script type="text/javascript">
31. var _root=‘http://form/index.php?s=/‘,_controller = ‘index‘;
32. </script>
33. <script src="form_js/jquery-1.7.2.min.js?2023"></script>
34. <script src="form_js/common.js"></script>
35. <script src="form_js/jquery-ui.js"></script>
36. <script src="form_js/jquery.form.js"></script>
37. <script src="form_js/ajax.js"></script>
38. <script src="form_js/common/plugins/validate/jquery.validate.pack.js"></script>
39. <script src="form_js/jquery.datetimepicker.js"></script>
40. <script src="form_js/ueditor/ueditor.config.js?2023"></script>
41. <script src="form_js/ueditor/ueditor.all.js?2023"> </script>
42. <script src="form_js/ueditor/lang/zh-cn/zh-cn.js?2023"></script>
43. <script src="form_js/ueditor/formdesign/leipi.formdesign.v4.js?2023"></script>
44. <!-- 导入form相关的js -->
45. </head>
46. <body style="width:100%;height:400px;margin:0;background-color:#fff">
47. <div style="height:70px;width:100%;border:1px solid #ccf">
48. <img id="rdiv" src="./images/activiti.png" style="width:30%;height:98%"/>
49. <a href="script:;" ng-show="userName!=undefined" style="margin-right:10px;float:right;margin-top:25px;" ng-click="logOut();">
50. [退出登陆]
51. </a>
52. <font ng-show="userName!=undefined" style="margin-right:10px;float:right;margin-top:25px;">当前登陆用户：{{userName}}</font>
53. </div>
54. <div style="width:100%;position: absolute;height:auto">
55. <div style="height:630px;width:12%;font-size:36px;position:relative;float:left;border:1px solid #ccf" ng-show="userName!=undefined">
56. <table style="width:100%;text-align:center;margin-top:0px" cellSpacing="5px" cellPadding="0px">
57. <tr>
58. <td style="background-color:#aac;"><a href="#/create">创建模型</a></td>
59. </tr>
60. <tr>
61. <td style="background-color:#acd;"> <a href="#/modelList">模型列表</a></td>
62. </tr>
63. <tr>
64. <td style="background-color:#aac;"><a href="#/processList">流程列表</a></td>
65. </tr>
66. <tr>
67. <td style="background-color:#acd;"><a href="#/findFirstTask">我的申请</a></td>
68. </tr>
69. <tr>
70. <td style="background-color:#aac;"><a href="#/taskList">我的任务</a></td>
71. </tr>
72. <tr>
73. <td style="background-color:#acd;"><a href="#/hisTask">历史任务</a></td>
74. </tr>
75. <tr>
76. <td style="background-color:#aac;"><a href="#/createForm">创建表单</a></td>
77. </tr>
78. <tr>
79. <td style="background-color:#acd;"><a href="#/formList">表单列表</a></td>
80. </tr>
81. </table>
82. </div>
83. <div ui-view="view" ></div>
84. </div>
85. </body>
86. </html>

Angular js 控制路由跳转app.js代码：

[javascript] view
plain copy

1. var app=angular.module(‘activitiApp‘,[‘ui.router‘]);
2. app.run(function($rootScope) {
3. $rootScope.logOut=function(){
4. $http.post("./loginOut.do").success(function(loginOutResult){
5. $rootScope.userName=undefined;
6. $location.path("/login");
7. });
8. }
9. });
10. app.config(function($stateProvider,$urlRouterProvider){
11. $stateProvider
12. .state(‘createForm‘, {
13. url: "/createForm",
14. views: {
15. ‘view‘: {
16. templateUrl: ‘my_views/updateForm.html‘,
17. controller: ‘updateFormCtr‘
18. }
19. }
20. });
21. });

新增form表单的页面updateForm.html代码例如以下，要注意的是。这个页面也是有ueditor插件中的index.html改变过来的：

[html] view
plain copy

1. <div id="formDiv" style="margin-top:20px;margin-left:50px;height:550px;width:70%;font-size:18px;position:relative;float:left;">
2. <div class="container">
3. <form method="post" id="saveform" name="saveform" action="/index.php?s=/index/parse.html">
4. <input type="hidden" name="fields" id="fields" value="0">
5. <div style="width:98%;height:500px;margin-top:20px;border:3px solid grey">
6. <p style="margin-top:10px;font-size:30px" >表单名称：<input type="text" id="formType"></input></p>
7. <hr style="height:5px;border:none;border-top:5px ridge green;"/>
8. <p style="margin-top:10px;font-size:30px" >表单设计：</p>
9. <div >
10. <p style="left:30px">
11. <button type="button" ng-click="leipiFormDesign.exec(‘text‘);" class="btn btn-info">文本框</button>
12. <button type="button" ng-click="leipiFormDesign.exec(‘textarea‘);" class="btn btn-info">多行文本</button>
13. <button type="button" ng-click="leipiFormDesign.exec(‘select‘);" class="btn btn-info">下拉菜单</button>
14. <button type="button" ng-click="leipiFormDesign.exec(‘radios‘);" class="btn btn-info">单选框</button>
15. <button type="button" ng-click="leipiFormDesign.exec(‘checkboxs‘);" class="btn btn-info">复选框</button>
16. <button type="button" ng-click="leipiFormDesign.exec(‘listctrl‘);" class="btn btn-info">列表控件</button>
17. <button type="button" ng-click="leipiFormDesign.findForm();" class="btn btn-info">form</button>
18. </p>
19. </div>
20. <!-- afsddddddddd -->
21. <div >
22. <script id="myFormDesign" type="text/plain" style="width:99.8%;">
23. </script>
24. </div>
25. </div>
26. <!-- afsddddddddd -->
27. <div class="row">
28. </div><!--end row-->
29. </form>
30. </div><!--end container-->
31. </div>

相应的js代码updateFormCtr.js。这里尤其须要注意的是leipiFormDesign.exec这种方法原本是ueditor插件中的，假设不做改动直接拿过来的话，在上便的页面中是无法调用的。angularjs须要注意作用域的问题。因此在相应的js中须要改成$scope. leipiFormDesign；除此之外，在保存和预览时基本没有什么变化。dialog对话框也是在兴许流程中使用到：

[javascript] view
plain copy

1. angular.module(‘activitiApp‘)
2. .controller(‘updateFormCtr‘, [‘$rootScope‘,‘$scope‘,‘$http‘,‘$location‘,‘$state‘, function($rootScope,$scope,$http,$location,$state){
3. $http.post("createFlush.do").success(function(result){
4. if(result.isLogin==="yes"){
5. $rootScope.userName=result.userName;
6. }else{
7. $location.path("/login");
8. }
9. });
10. //预览
11. UE.registerUI(‘button_preview‘,function(editor,uiName){
12. if(!this.options.toolleipi)
13. {
14. return false;
15. }
16. //注冊button运行时的command命令。使用命令默认就会带有回退操作
17. editor.registerCommand(uiName,{
18. execCommand:function(){
19. try {
20. $scope.leipiFormDesign.fnReview();
21. } catch ( e ) {
22. alert(‘leipiFormDesign.fnReview 预览异常‘);
23. }
24. }
25. });
26. //创建一个button
27. var btn = new UE.ui.Button({
28. //button的名字
29. name:uiName,
30. //提示
31. title:"预览",
32. //须要加入的额外样式。指定icon图标，这里默认使用一个反复的icon
33. cssRules :‘background-position: -420px -19px;‘,
34. //点击时运行的命令
35. onclick:function () {
36. //这里能够不用运行命令,做你自己的操作也可
37. editor.execCommand(uiName);
38. }
39. });
40. //由于你是加入button,所以须要返回这个button
41. return btn;
42. });
43. //保存
44. UE.registerUI(‘button_save‘,function(editor,uiName){
45. if(!this.options.toolleipi)
46. {
47. return false;
48. }
49. //注冊button运行时的command命令。使用命令默认就会带有回退操作
50. editor.registerCommand(uiName,{
51. execCommand:function(){
52. try {
53. $scope.leipiFormDesign.fnCheckForm(‘save‘);
54. } catch ( e ) {
55. alert(‘leipiFormDesign.fnCheckForm("save") 保存异常‘);
56. }
57. }
58. });
59. //创建一个button
60. var btn = new UE.ui.Button({
61. //button的名字
62. name:uiName,
63. //提示
64. title:"保存表单",
65. //须要加入的额外样式，指定icon图标。这里默认使用一个反复的icon
66. cssRules :‘background-position: -481px -20px;‘,
67. //点击时运行的命令
68. onclick:function () {
69. //这里能够不用运行命令,做你自己的操作也可
70. editor.execCommand(uiName);
71. }
72. });
73. //由于你是加入button,所以须要返回这个button
74. return btn;
75. });
76. //整合设计器
77. var leipiEditor = UE.getEditor(‘myFormDesign‘,{
78. toolleipi:true,//是否显示。设计器的 toolbars
79. textarea: ‘design_content‘,
80. //这里能够选择自己须要的工具button名称,此处仅选择例如以下五个
81. toolbars:[[
82. ]],
83. //关闭字数统计
84. wordCount:false,
85. //关闭elementPath
86. elementPathEnabled:false,
87. //默认的编辑区域高度
88. initialFrameHeight:260
89. //,iframeCssUrl:"css/bootstrap/css/bootstrap.css" //引入自身 css使编辑器兼容你站点css
90. //很多其它其它參数，请參考ueditor.config.js中的配置项
91. });
92. $scope.leipiFormDesign = {
93. findForm : function(){
94. window.location.href="my_views/formList.html";
95. },
96. /*运行控件*/
97. exec : function (method) {
98. leipiEditor.execCommand(method);
99. },
100. /*
101. Javascript 解析表单
102. template 表单设计器里的Html内容
103. fields 字段总数
104. */
105. parse_form:function(template,fields)
106. {
107. //正则  radios|checkboxs|select 匹配的边界 |--|  由于当使用 {} 时js报错
108. var preg =  /(\|-<span(((?

     !<span).)*leipiplugins=\"(radios|checkboxs|select)\".*?

     )>(.*?)<\/span>-\||<(img|input|textarea|select).*?(<\/select>|<\/textarea>|\/>))/gi,preg_attr =/(\w+)=\"(.?|.+?)\"/gi,preg_group =/<input.*?\/>/gi;

109. if(!fields) fields = 0;
110. var template_parse = template,template_data = new Array(),add_fields=new Object(),checkboxs=0;
111. var pno = 0;
112. template.replace(preg, function(plugin,p1,p2,p3,p4,p5,p6){
113. var parse_attr = new Array(),attr_arr_all = new Object(),name = ‘‘, select_dot = ‘‘ , is_new=false;
114. var p0 = plugin;
115. var tag = p6 ? p6 : p4;
116. //alert(tag + " \n- t1 - "+p1 +" \n-2- " +p2+" \n-3- " +p3+" \n-4- " +p4+" \n-5- " +p5+" \n-6- " +p6);
117. if(tag == ‘radios‘ || tag == ‘checkboxs‘)
118. {
119. plugin = p2;
120. }else if(tag == ‘select‘)
121. {
122. plugin = plugin.replace(‘|-‘,‘‘);
123. plugin = plugin.replace(‘-|‘,‘‘);
124. }
125. plugin.replace(preg_attr, function(str0,attr,val) {
126. if(attr==‘name‘)
127. {
128. if(val==‘leipiNewField‘)
129. {
130. is_new=true;
131. fields++;
132. val = ‘data_‘+fields;
133. }
134. name = val;
135. }
136. if(tag==‘select‘ && attr==‘value‘)
137. {
138. if(!attr_arr_all[attr]) attr_arr_all[attr] = ‘‘;
139. attr_arr_all[attr] += select_dot + val;
140. select_dot = ‘,‘;
141. }else
142. {
143. attr_arr_all[attr] = val;
144. }
145. var oField = new Object();
146. oField[attr] = val;
147. parse_attr.push(oField);
148. })
149. /*alert(JSON.stringify(parse_attr));return;*/
150. if(tag ==‘checkboxs‘) /*复选组  多个字段 */
151. {
152. plugin = p0;
153. plugin = plugin.replace(‘|-‘,‘‘);
154. plugin = plugin.replace(‘-|‘,‘‘);
155. var name = ‘checkboxs_‘+checkboxs;
156. attr_arr_all[‘parse_name‘] = name;
157. attr_arr_all[‘name‘] = ‘‘;
158. attr_arr_all[‘value‘] = ‘‘;
159. attr_arr_all[‘content‘] = ‘<span leipiplugins="checkboxs"  title="‘+attr_arr_all[‘title‘]+‘">‘;
160. var dot_name =‘‘, dot_value = ‘‘;
161. p5.replace(preg_group, function(parse_group) {
162. var is_new=false,option = new Object();
163. parse_group.replace(preg_attr, function(str0,k,val) {
164. if(k==‘name‘)
165. {
166. if(val==‘leipiNewField‘)
167. {
168. is_new=true;
169. fields++;
170. val = ‘data_‘+fields;
171. }
172. attr_arr_all[‘name‘] += dot_name + val;
173. dot_name = ‘,‘;
174. }
175. else if(k==‘value‘)
176. {
177. attr_arr_all[‘value‘] += dot_value + val;
178. dot_value = ‘,‘;
179. }
180. option[k] = val;
181. });
182. if(!attr_arr_all[‘options‘]) attr_arr_all[‘options‘] = new Array();
183. attr_arr_all[‘options‘].push(option);
184. //if(!option[‘checked‘]) option[‘checked‘] = ‘‘;
185. var checked = option[‘checked‘] !=undefined ? ‘checked="checked"‘ : ‘‘;
186. attr_arr_all[‘content‘] +=‘<input type="checkbox" name="‘+option[‘name‘]+‘" value="‘+option[‘value‘]+‘"  ‘+checked+‘/>‘+option[‘value‘]+‘ ‘;
187. if(is_new)
188. {
189. var arr = new Object();
190. arr[‘name‘] = option[‘name‘];
191. arr[‘leipiplugins‘] = attr_arr_all[‘leipiplugins‘];
192. add_fields[option[‘name‘]] = arr;
193. }
194. });
195. attr_arr_all[‘content‘] += ‘</span>‘;
196. //parse
197. template = template.replace(plugin,attr_arr_all[‘content‘]);
198. template_parse = template_parse.replace(plugin,‘{‘+name+‘}‘);
199. template_parse = template_parse.replace(‘{|-‘,‘‘);
200. template_parse = template_parse.replace(‘-|}‘,‘‘);
201. template_data[pno] = attr_arr_all;
202. checkboxs++;
203. }else if(name)
204. {
205. if(tag ==‘radios‘) /*单选组  一个字段*/
206. {
207. plugin = p0;
208. plugin = plugin.replace(‘|-‘,‘‘);
209. plugin = plugin.replace(‘-|‘,‘‘);
210. attr_arr_all[‘value‘] = ‘‘;
211. attr_arr_all[‘content‘] = ‘<span leipiplugins="radios" name="‘+attr_arr_all[‘name‘]+‘" title="‘+attr_arr_all[‘title‘]+‘">‘;
212. var dot=‘‘;
213. p5.replace(preg_group, function(parse_group) {
214. var option = new Object();
215. parse_group.replace(preg_attr, function(str0,k,val) {
216. if(k==‘value‘)
217. {
218. attr_arr_all[‘value‘] += dot + val;
219. dot = ‘,‘;
220. }
221. option[k] = val;
222. });
223. option[‘name‘] = attr_arr_all[‘name‘];
224. if(!attr_arr_all[‘options‘]) attr_arr_all[‘options‘] = new Array();
225. attr_arr_all[‘options‘].push(option);
226. //if(!option[‘checked‘]) option[‘checked‘] = ‘‘;
227. var checked = option[‘checked‘] !=undefined ? ‘checked="checked"‘ : ‘‘;
228. attr_arr_all[‘content‘] +=‘<input type="radio" name="‘+attr_arr_all[‘name‘]+‘" value="‘+option[‘value‘]+‘"  ‘+checked+‘/>‘+option[‘value‘]+‘ ‘;
229. });
230. attr_arr_all[‘content‘] += ‘</span>‘;
231. }else
232. {
233. attr_arr_all[‘content‘] = is_new ?

     plugin.replace(/leipiNewField/,name) : plugin;

234. }
235. template = template.replace(plugin,attr_arr_all[‘content‘]);
236. template_parse = template_parse.replace(plugin,‘{‘+name+‘}‘);
237. template_parse = template_parse.replace(‘{|-‘,‘‘);
238. template_parse = template_parse.replace(‘-|}‘,‘‘);
239. if(is_new)
240. {
241. var arr = new Object();
242. arr[‘name‘] = name;
243. arr[‘leipiplugins‘] = attr_arr_all[‘leipiplugins‘];
244. add_fields[arr[‘name‘]] = arr;
245. }
246. template_data[pno] = attr_arr_all;
247. }
248. pno++;
249. })
250. var parse_form = new Object({
251. ‘fields‘:fields,//总字段数
252. ‘template‘:template,//完整html
253. ‘parse‘:template_parse,//控件替换为{data_1}的html
254. ‘data‘:template_data,//控件属性
255. ‘add_fields‘:add_fields//新增控件
256. });
257. return JSON.stringify(parse_form);
258. },
259. /*type  =  save 保存设计 versions 保存版本号  close关闭 */
260. fnCheckForm : function ( type ) {
261. var formType=document.getElementById("formType").value;
262. if(leipiEditor.queryCommandState( ‘source‘ ))
263. leipiEditor.execCommand(‘source‘);//切换到编辑模式才提交。否则有bug
264. if(leipiEditor.hasContents()){
265. leipiEditor.sync();/*同步内容*/
266. //--------------下面仅參考-----------------------------------------------------------------------------------------------------
267. var type_value=‘‘,formid=0,fields=$("#fields").val(),formeditor=‘‘;
268. if( typeof type!==‘undefined‘ ){
269. type_value = type;
270. }
271. console.log(document.getElementById("formType"));
272. //获取表单设计器里的内容
273. formeditor=leipiEditor.getContent();
274. //解析表单设计器控件
275. var parse_form = this.parse_form(formeditor,fields);
276. //异步提交数据
277. $.ajax({
278. type: ‘POST‘,
279. url : ‘./addForm.do‘,
280. dataType : ‘html‘,
281. async:false,
282. //contentType: ‘application/json;charset=utf-8‘,
283. data : {‘type‘ : type_value,‘formid‘:formid,‘parse_form‘:parse_form,"formType":formType},
284. success : function(data){
285. alert("保存成功");
286. window.location.href ="#/formList";
287. }
288. });
289. } else {
290. alert(‘表单内容不能为空！

     ‘)

291. $(‘#submitbtn‘).button(‘reset‘);
292. return false;
293. }
294. } ,
295. /*预览表单*/
296. fnReview : function (){
297. console.log("111");
298. if(leipiEditor.queryCommandState( ‘source‘ ))
299. leipiEditor.execCommand(‘source‘);/*切换到编辑模式才提交。否则部分浏览器有bug*/
300. if(leipiEditor.hasContents()){
301. console.log("222");
302. leipiEditor.sync();       /*同步内容*/
303. //--------------下面仅參考-------------------------------------------------------------------
304. /*设计form的target 然后提交至一个新的窗体进行预览*/
305. var type_value=‘‘,formid=0,fields=$("#fields").val(),formeditor=‘‘;
306. var formType=document.getElementById("formType").value;
307. if( typeof type!==‘undefined‘ ){
308. type_value = type;
309. }
310. console.log("333");
311. //获取表单设计器里的内容
312. formeditor=leipiEditor.getContent();
313. //解析表单设计器控件
314. var parse_form = this.parse_form(formeditor,fields);
315. var forms=JSON.parse(parse_form);
316. console.log(forms);
317. console.log(typeof forms);
318. console.log(forms.template);
319. var forms1=forms.template;
320. win_parse=window.open(‘‘,‘‘,‘width=800,height=400,alwaysRaised=yes,top=100,left=200‘);
321. //win_parse=window.open(‘‘,‘mywin‘,"menubar=0,toolbar=0,status=0,resizable=1,left=0,top=0,scrollbars=1,width=" +(screen.availWidth-10) + ",height=" + (screen.availHeight-50) + "\"");
322. var str=‘<div style="width:500px;height:300px;border:1px solid grey">‘+forms1+‘</div>‘;
323. win_parse.document.write(forms1);
324. win_parse.focus();
325. } else {
326. alert(‘表单内容不能为空！‘);
327. return false;
328. }
329. }
330. };
331. }])

相对于前台而言。后台在这里就没有什么变化了。能够參考之前的自己定义表单。代码便不再罗列。