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

Posted cynchanpin

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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.    
  84.  <div ui-view="view" ></div>  
  85.  </div>  
  86. </body>  
  87. </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.     
  22.     
  23. });    


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

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

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

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

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

  266.                 }  
  267.                 template = template.replace(plugin,attr_arr_all[‘content‘]);  
  268.                 template_parse = template_parse.replace(plugin,‘{‘+name+‘}‘);  
  269.                 template_parse = template_parse.replace(‘{|-‘,‘‘);  
  270.                 template_parse = template_parse.replace(‘-|}‘,‘‘);  
  271.                 if(is_new)  
  272.                 {  
  273.                     var arr = new Object();  
  274.                     arr[‘name‘] = name;  
  275.                     arr[‘leipiplugins‘] = attr_arr_all[‘leipiplugins‘];  
  276.                     add_fields[arr[‘name‘]] = arr;  
  277.                 }  
  278.                 template_data[pno] = attr_arr_all;     
  279.             }  
  280.             pno++;  
  281.         })  
  282.         var parse_form = new Object({  
  283.             ‘fields‘:fields,//总字段数  
  284.             ‘template‘:template,//完整html  
  285.             ‘parse‘:template_parse,//控件替换为{data_1}的html  
  286.             ‘data‘:template_data,//控件属性  
  287.             ‘add_fields‘:add_fields//新增控件  
  288.         });  
  289.         return JSON.stringify(parse_form);  
  290.     },  
  291.     /*type  =  save 保存设计 versions 保存版本号  close关闭 */  
  292.     fnCheckForm : function ( type ) {  
  293.         var formType=document.getElementById("formType").value;  
  294.         if(leipiEditor.queryCommandState( ‘source‘ ))  
  295.             leipiEditor.execCommand(‘source‘);//切换到编辑模式才提交。否则有bug     
  296.         if(leipiEditor.hasContents()){  
  297.             leipiEditor.sync();/*同步内容*/  
  298.             //--------------下面仅參考-----------------------------------------------------------------------------------------------------  
  299.             var type_value=‘‘,formid=0,fields=$("#fields").val(),formeditor=‘‘;  
  300.   
  301.   
  302.             if( typeof type!==‘undefined‘ ){  
  303.                 type_value = type;  
  304.             }  
  305.             console.log(document.getElementById("formType"));  
  306.             //获取表单设计器里的内容  
  307.             formeditor=leipiEditor.getContent();  
  308.             //解析表单设计器控件  
  309.             var parse_form = this.parse_form(formeditor,fields);  
  310.              //异步提交数据  
  311.              $.ajax({  
  312.                 type: ‘POST‘,  
  313.                 url : ‘./addForm.do‘,  
  314.                 dataType : ‘html‘,  
  315.                 async:false,  
  316.                 //contentType: ‘application/json;charset=utf-8‘,  
  317.                 data : {‘type‘ : type_value,‘formid‘:formid,‘parse_form‘:parse_form,"formType":formType},        
  318.                 success : function(data){  
  319.                     alert("保存成功");  
  320.                     window.location.href ="#/formList";  
  321.                 }  
  322.             });  
  323.               
  324.         } else {  
  325.             alert(‘表单内容不能为空！

    ‘)  

  326.             $(‘#submitbtn‘).button(‘reset‘);  
  327.             return false;  
  328.         }  
  329.     } ,  
  330.     /*预览表单*/  
  331.     fnReview : function (){  
  332.         console.log("111");  
  333.         if(leipiEditor.queryCommandState( ‘source‘ ))  
  334.             leipiEditor.execCommand(‘source‘);/*切换到编辑模式才提交。否则部分浏览器有bug*/  
  335.         if(leipiEditor.hasContents()){  
  336.             console.log("222");  
  337.             leipiEditor.sync();       /*同步内容*/  
  338.             //--------------下面仅參考-------------------------------------------------------------------  
  339.             /*设计form的target 然后提交至一个新的窗体进行预览*/  
  340.             var type_value=‘‘,formid=0,fields=$("#fields").val(),formeditor=‘‘;  
  341.             var formType=document.getElementById("formType").value;  
  342.             if( typeof type!==‘undefined‘ ){  
  343.                 type_value = type;  
  344.             }  
  345.             console.log("333");  
  346.             //获取表单设计器里的内容  
  347.             formeditor=leipiEditor.getContent();  
  348.             //解析表单设计器控件  
  349.             var parse_form = this.parse_form(formeditor,fields);  
  350.             var forms=JSON.parse(parse_form);  
  351.             console.log(forms);  
  352.             console.log(typeof forms);  
  353.             console.log(forms.template);  
  354.             var forms1=forms.template;  
  355.                 win_parse=window.open(‘‘,‘‘,‘width=800,height=400,alwaysRaised=yes,top=100,left=200‘);  
  356.                 //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) + "\"");  
  357.                 var str=‘<div style="width:500px;height:300px;border:1px solid grey">‘+forms1+‘</div>‘;  
  358.                 win_parse.document.write(forms1);  
  359.                 win_parse.focus();       
  360.         } else {  
  361.             alert(‘表单内容不能为空！‘);  
  362.             return false;  
  363.         }  
  364.     }  
  365.   };  
  366.  }])  


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





































以上是关于activiti自己定义流程之整合：使用angular js整合ueditor创建表单的主要内容，如果未能解决你的问题，请参考以下文章

activiti自己定义流程之整合：整合自己定义表单部署流程定义

activiti自己定义流程之整合：整合自己定义表单创建模型

activiti自己定义流程之Spring整合activiti-modeler实例：环境搭建

activiti自己定义流程之自己定义表单：创建表单

activiti自己定义流程之自己定义表单：环境配置

BOS项目 第10天（activiti工作流第二天，流程变量组任务排他网关spring整合activiti项目中实现流程定义管理）