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

效果展示

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

 

代码分析

                    	<div class="selected-item-body">
	                        <div>
	                             <div class="property-row" ng-repeat="property in selectedItem.properties"
	                                ng-click="propertyClicked($index)" ng-class="{'clear' : $index%2 == 0}">
	                                <span class="title" ng-if="!property.hidden">{{ property.title }}&nbsp;:</span>
	                                <span class="title-removed" ng-if="property.hidden"><i>{{ property.title }}&nbsp;({{'PROPERTY.REMOVED' | translate}})&nbsp;:</i></span>
	                                <span class="value">
	                                    <ng-include
	                                        src="getPropertyTemplateUrl($index)" ng-if="!property.hasReadWriteMode"></ng-include>
	                                    <ng-include src="getPropertyReadModeTemplateUrl($index)"
	                                        ng-if="property.hasReadWriteMode && property.mode == 'read'"></ng-include>
	                                    <ng-include src="getPropertyWriteModeTemplateUrl($index)"
	                                        ng-if="property.hasReadWriteMode && property.mode == 'write'"></ng-include>
	                                </span>
	                            </div>
	                        </div>
	                    </div>

展示区域 是默认读取状态，点击之后切换为write  状态 ,根据 类型 调取配置的页面 

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

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

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

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

properties.js添加路由信息

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

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

<div class="form-group" ng-controller="KisBpmFormSelectPropertiesCtrl">
    <select ng-model="selectedSite" ng-options="y.formName for (x, y) in sites">
    </select>
</div>

编写控制器

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引入：

<script src="editor-app/configuration/properties-form-controller.js" type="text/javascript"></script>

没学过 angular  学习只为修改这个页面还请见谅， 下期更新人员配置自定义