Activiti_modeler 5.22(在线流程编辑器的自定义选择表单样式修改) （二）

效果展示

说明：前端用到是 angular1.2.13 + bootstrap 3.1.1  

 

代码分析

                    	

	                        

	                             

	                                {{ property.title }} :
	                                {{ property.title }} ({{'PROPERTY.REMOVED' | translate}}) :
	                                
	                                    
	                                    
	                                    
	                                
	                            
	                        
	                    

展示区域 是默认读取状态，点击之后切换为write(可编辑)  状态 ,根据设置好的类型 类型 调取对应的路由配置的页面 

类型规范在 stencilset.json  页面配置在 editor-app/configuration/properties.js

默认的是没有下拉类型的我们自己添加

stencilset.json 自定义表单字段设置为 

 {
    "name" : "formkeydefinitionpackage",
    "properties" : [ {
      "id" : "formkeydefinition",
      "type" : "select",
      "title" : "自定义表单",
      "value" : "",
      "description" : "用户任务表单编号",
      "popular" : true
    } 

 

展示还是用原来的但是编辑我们用自定义的下拉来选择 新建页面 form-select.html，

properties.js添加路由信息 

 

    "select":{
        "readModeTemplateUrl": "editor-app/configuration/properties/default-value-display-template.html",
        "writeModeTemplateUrl": "editor-app/configuration/properties/form-select.html"
    },

编写控制器 properties-form-controller.js

var KisBpmFormSelectPropertiesCtrl = [ '$scope', '$http', function($scope, $http) {

    $scope.valueFlushed = false;
    $scope.sites=[];
    /*后台接口地址没有捕获异常*/
    $http.get("myForm").success(function (data, status, headers, config){
        $scope.sites=data;
    })
    $scope.$watch('selectedSite',function(newValue,oldValue) {
        $scope.valueFlushed = true;
        if (newValue.formName) {
            $scope.property.value = newValue.formName.replace(/(<([^>]+)>)/ig,"");
        }
        $scope.updatePropertyInModel($scope.property);
    });
}];

引入才能生效哦 modeler.html引入：

人员配置可以通过参数设置和监听实现  表单用已有的就可以