工作流表单中编辑与查看模式控制实现

Activiti

1、功能背景

a.在工作流表单中，输入控件的编辑权限应根据业务要求灵活控制，每个工作流处理环节都可能有自己可输入的字段，页面控制当前环节只允许录入自己可被输入的字段，其他字段应以查看模式展示.
b.在查看待办时可输入和修改自己有权限的字段，但是在查看已办时，则整体表单进入查看模式。

总结，流程表单中的每个字段都有可能被某一个或者个多个环节进行编辑，除了这些授予编辑权限的环节，其他环节都是不可编辑的，总的来说，页面字段的可编辑权限控制的粒度是流程环节。

2、功能设计

基于流程表单中每个可输入控件，搭配流程环节进行控制，可通过 输入控件自定义属性来实现，例如如下：

<input id="name" name="name" data-edit="提出申请,项目经理审批" />     
<input id="age" name="age" data-edit="|" />                        
<input id="subtext" name="subtext" data-edit="*" />                        

以上代码中，data-edit="提出申请,项目经理审批" 代表 此字段在 提出申请、项目经理审批 这两个环节可被编辑，data-edit="|" 代表在待办状态是可被编辑，data-edit="*" 代表在任意状态都可被编辑。

这样控制，是以最简单灵活的方式去实现，而且便于扩展，看到字段就一眼可以看出他的控制逻辑。

3、功能实现

页面引入base.form.js即可，可根据具体业务逻辑局部修改，代码如下：

var commonJs={
   viewForm:function(){
   //查看已办状态时(status=finish):所有输入框 切换为 span 状态，操作对象隐藏
   //办理待办状态时（status=todo）:操作对象 data-edit属性 与 当前环节名称相同时可操作，否则不可操作。
   //备注：data-edit 为 可编辑环节， data-edit为空时也可编辑。
    var activityName=$("input[name='act.taskName']").val();//当前所在环节
    var status=$("input[name='act.status']").val();//当前处理形式
      //如果当前环节为空，则代表是第一个录入环节，直接跳过处理。
      if(activityName=='' && status!='finish'){
       return;
      }
       //select2
      $("select[class*=select2-offscreen]").each(function(){
	     var ifView=commonJs.ifView(this,activityName,status);
        if(ifView){
		     var name=$(this).attr("name");
		     var value=$(this).find("option:selected").val();
		     var text=$(this).find("option:selected").text();
		     var colBox=$(this).closest("div[class*='col-']");
		     commonJs.setView(colBox,name,value,text);
		 }
	  });
       //Input 输入框
	    $("input[type=text][name],textarea").each(function(){
        //
        var ifView=commonJs.ifView(this,activityName,status);
        if(ifView){
            var text=$(this).val();
	   		var colBox=$(this).closest("div[class*='col-']");
            commonJs.setView(colBox,$(this).attr("name"),$(this).val(),null);
        }
      });
      //按钮
      $("a[class=btn],input[type=button],input[type=submit],button").each(function(){
	       var ifView=commonJs.ifView(this,activityName,status);
	       if(ifView){
	         $(this).remove();
	       }
	  });
	  //其他
	  $("*[data-edit]").each(function(){
         var ifView=commonJs.ifView(this,activityName,status);
         if(ifView){
             $(this).remove();
	       }
	  });
   },
   //此方法用于判断单个控件是否可被隐藏,判断前提是：activityName不为空
   ifView:function(node,activityName,status){
       var dataEdit=$(node).attr("data-edit");
	   if(typeof(dataEdit) != "undefined" 
	       && (
	         dataEdit=="*"  //data-edit=* ,所有环节 都可操作 
	         || (dataEdit=="|" && status=="todo" ) //data-edit=|,待办可操作，已办不可操作
	         || ($.inArray(activityName, dataEdit.split(','))>=0 && (status=="todo" || status=="edit") ) //data-edit=处理环节名，指定环节名在待办时可操作
	       )
	     ){
	      return false;//可编辑
	   }else{
	      return true;//不可编辑
	   }
   },
   //此方法用于设置隐藏，并移动隐藏域的位置
   setView:function(colBox,name,value,text){
     //判断colBox下是否有隐藏文本域，如果有则移动
     var hiddenList=colBox.find("input[type=hidden][name]");
     colBox.addClass("form-label").children().remove();
     hiddenList.each(function(){
          colBox.append($(this));
     });
     colBox.append("<input type='hidden' name='"+name+"' value='"+value+"' /><span>"+(text==null?value==null?'':value:text)+"</span>");
   }
 }
 $(document).ready(function() {
   commonJs.viewForm();
 }
 );