Activiti 动态表单

最新推荐文章于 2024-08-10 00:48:36 发布

sdufexsh

最新推荐文章于 2024-08-10 00:48:36 发布

阅读量2.2w

点赞数 8

分类专栏： activiti

本文链接：https://blog.csdn.net/sdufexsh/article/details/83111965

版权

activiti 专栏收录该内容

1 篇文章 1 订阅

订阅专栏

根据动态表单定义前端渲染（开发人员自己写代码）

Activiti表单

动态表单
外置表单
普通表单

其中动态表单和外置表单是是Activiti提供的表单机制。

官方手册对表单的阐述

流程由流程参数驱动，Activiti支持复杂的对象（实现serializable接口），JPA实体，XML文档作为流程参数，上述三类参数在Activiti中以字符串的形式存储。

动态表单生成步骤

流程启动和UserTask任务需要用户参与，用户与流程的交互通过表单来实现。Activiti对外暴露“表单属性定义集合”，使得任何一种前端技术都能基于“表单属性定义集合”来动态生成表单，步骤如下：

在开始事件和UserTask元素上定义表单元素
通过activiti提供的API获取表单元素定义
前端动态生成表单（需要开发人员自己写代码实现）

获取开始事件上的表单数据：StartFormData FormService.getStartFormData(String processDefinitionId) 
获取任务元素上的表单数据：TaskFormdata FormService.getTaskFormData(String taskId)

动态表单中元素的定义

Activiti表单元素的字段

public interface FormProperty extends Serializable {

    public String getId();

    public String getName();

    public FormType getType();

    public String getValue();

    public boolean isReadable();

    public boolean isWritable();

    public boolean isRequired();
}

示例说明

动态表单依附于开始事件或UserTask元素，我们设计一个简单的请假审批流程，为开始事件和UserTask定义动态表单。

以reason为例。

1.在Expression和variable未定义的情况下，activiti会将流程参数reason的值作为该表单元素的值。

2.若定义variable为myReason，activiti会将流程参数myReason的值作为该表单元素的值。

3.若定义variable为#{mo.reason}，activiti会将流程参数mo中reason属性值的为该表单元素的值。

获取启动流程上定义的动态表单

    @RequestMapping(value = "/start/{procDefId}", method = RequestMethod.GET)
    public String start_page(@PathVariable("procDefId") String procDefId, Model model) {
        StartFormData startFormData = formService.getStartFormData(procDefId);
        List<FormProperty> formProperties = startFormData.getFormProperties();
        ProcessDefinition pd = startFormData.getProcessDefinition();
        model.addAttribute("list", formProperties);
        model.addAttribute("pd", pd);
        return "process/start_page";
    }

根据动态表单定义前端渲染（开发人员自己写代码）

 <form  method="post" action="<%=request.getContextPath()%>/process/start"> 
            <input type="hidden" name="procDefId" value="${procDefId}"/>
            <input type="hidden" name="data"  id="data"/>
            <div class="row form-group">
                <div class="col-md-1 align-right">事项名称</div>
                <div class="col-md-7">
                    <input  type="text"  name="procName" value="${proc.name}" 
                            class="width-100 form-control"  />
                </div>

            </div>
            <c:forEach items="${list}" var="prop">
                <!--设置隐藏域，统一处理-->
                <div class="row form-group">
                    <div class="col-md-1 align-right">${prop.name}</div>
                    <div class="col-md-7">
                        <c:choose>
                            <c:when test="${prop.type.name=='string'}">
                                <input  type="text" id="${prop.id}" name="${prop.id}" value="${prop.value}" 
                                        class="width-100 form-control"  />
                            </c:when>
                            <c:when test="${prop.type.name=='date'}">
                                <div class="input-group">
                                    <input  type="text" id="${prop.id}"  name="${prop.id}" value="${prop.value}"  
                                            class="width-100 form-control date-picker-o"  data-date-format="${prop.type.getInformation('datePattern')}"/>

                                    <span class="input-group-addon">
                                        <i class="fa fa-calendar bigger-110"></i>
                                    </span>
                                </div>

                            </c:when>
                            <c:when test="${prop.type.name=='enum'}">
                                <select id="${prop.id}" name="${prop.id}">
                                    <option value="-1">----请选择---</option>
                                    <c:forEach  items="${prop.type.getInformation('values')}" var="item">
                                        <option value="${item.key}">${item.value}</option>
                                    </c:forEach>
                                </select>
                            </c:when>

                            <c:when test="${prop.type.name=='boolean'}">
                                <input  type="checkbox" id="${prop.id}" name="${prop.id}" value="${prop.value}" />
                            </c:when>
                        </c:choose>

                    </div>
                </div>
            </c:forEach>
            <div class="row form-group align-right col-md-8">
                <button class="btn btn-primary" id="startBtn">启动流程</button>
            </div>
        </form>

做过web开发的同学一定都清楚，表单和后台的传值是依靠表单的name属性，那么会产生一个问题，不同的表单表单元素不同，难道要为每一个动态表单写一个后台接口吗？

答案是：不必要，若每个动态表单都写一个后台接口，则失去了动态表单存在的意义。这意味需要我们做统一化处理，即前台将表单中元素的取值使用一个参数传入到后台，后台使用一个参数来接收。

我的做法是在表单中设置一个隐藏域，在点击启动流程按钮的时候，将表单序列化后的取值赋值给该隐藏域，后台做统一的处理。

表单效果（前端使用了bootstarp框架）

获取待办任务

待办任务列表

获取UserTask上定义的动态表单

    @RequestMapping("/task/{taskId}")
    public String taskPage(@PathVariable("taskId") String taskId, Model model) {
        Task task = this.taskService.createTaskQuery().taskId(taskId).singleResult();
        String processInstanceId = task.getProcessInstanceId();
        TaskFormData taskFormData = this.formService.getTaskFormData(taskId);
        ProcessInstance pi = this.runtimeService.createProcessInstanceQuery().processInstanceId(processInstanceId).singleResult();
        List<FormProperty> list = taskFormData.getFormProperties();
        model.addAttribute("list", list);
        model.addAttribute("task", task);
        model.addAttribute("pi", pi);
        return "process/task_page";
    }

表单元素的值是对应的流程参数的值。表单元素的值是对应的流程参数的值。表单元素的值是对应的流程参数的值。--重要的话说三遍。