流程 URL 表单实施介绍

请注意！

该方案适用于以 AgileBPM 为流程中心的对接方案，即以 AgileBPM 个人办公为处理流程入口的形式。若是以业务为中心，请参考流程服务接口对接文档去整合流程服务。

URL 表单需要配合 “URL 表单处理器” 一同使用，URL 表单会通过 URL + bizId（业务主键）去获取展示表单内容，通过表单处理器去持久化表单数据。

URL 表单交互时序图

URL 表单示例配置

我们本地开发环境可以通过示例配置参考了解 Url 表单的实施

PC 端 URL 地址,示例配置为：http://localhost:8086/demo/urlFormDemo?id={bizId}
表单处理器，示例配置为：@urlFormRpc.call("http://127.0.0.1:8080/ab-bpm/demo/applyOrder/formHandler")

配置完毕，就可以启动该流程体验下了 Url 表单了，接下来将会详细介绍每一步关键的实现。

URL 表单地址配置

url 地址支持添加变量，比如通过系统属性来动态配置不同环境的服务地址。示例：{bpmProperty.serverUrl} +/demo/urlFormDemo.html?id={bizId} 那么会获取系统属性 serverUrl的配置以及业务主键的值，然后对 URL 进行替换

url 地址支持的其他参数有

{bizId}：业务主键
{token}：请求 token
{bpmDefinition.xxx}：流程定义属性
{bpmInstance.xxx}：流程实例属性
{bpmProperty.xxx}：BPM 系统属性
{requestCookie.xxx}：请求 Cookie
{requestHeader.xxx}：请求 Header 参数

URL 表单页面开发

url 表单页面开发一般需要两部分，首先需要实现通过业务主键渲染 url 表单的逻辑，其次就是与流程处理页面交互了。下面详细介绍与流程页面交互部分。

流程处理页面（启动页、任务处理页、实例详情页）都是通过事件的方式与 url 表单页面交互的。可以参考 urlFormDemo.vue 页面，url 表单页面需要提供获取页面 JSON 事件，以及表单校验逻辑。

需要两步

向流程处理页面告知我是 URL 表单且存在事件交互

window.parent.postMessage({ type: 'callback', name: 'subIframeCallback' }, '*')

监听流程处理页面 getDataReady 事件，返回 URL 表单的 JSON 数据，以及表单校验的结果

window.onmessage = (e)=> {
    if( !e.data || e.data.type != 'getDataReady'){
        return;
    }

    // TODO 获取表单校验结果，并自行进行表单完整提示。
    let valid = true;

    // TODO 获取表单的JSON业务数据 formJson ，【必须复制】重要
    var formData = JSON.parse(JSON.stringify(  【formJson】  )) ;

    // 将结果通过事件形式 告知 流程处理页面，固定格式可不改
    window.parent.postMessage ( {
        type : 'getData' ,
        url : document.location.href ,
        // 校验结果 true / false
        valid : valid,
        // 校验信息，可为空
        errorMsg : errorMsg,
        // 表单数据
        data : formData
    }, data.url );
}

表单处理器配置

如果调用当前 SpringContext 中的 bean 时，可参考urlFormRpc实现

表单处理器调用远程接口示例：@urlFormRpc.call(#bpmProperty["serverUrl"] + "/test")

#bpmProperty["serverUrl"] 即系统属性，可获取系统配置的参数作为 URL 地址一部分。

表单处理器实现

表单处理器负责将 url 表单提供的 JSON，保存至业务系统。

URL 表单处理器调用参数为 BpmUrlFormSaveDTO

URL 表单保存业务数据 bpmUrlFormSaveDTO.getBizData() 后，需要构造BpmUrlFormResponseDTO并设置主键，返回给流程引擎。

Tips：BpmUrlFormResponseDTO 支持对流程引擎设置流程变量。

建议依赖轻量的流程模块客户端 Jar，可以方便直接使用相关 DTO

java

<dependency>
    <groupId>com.dstz</groupId>
    <artifactId>ab-wf-client</artifactId>
    <version>${project.version}</version>
</dependency>

URL 表单处理器示例：

java

@PostMapping("formHandler")
public ApiResponse<BpmUrlFormResponseDTO> formHandler(@RequestBody BpmUrlFormSaveDTO urlFormSaveDto) throws Exception {
	LOGGER.debug("DEMO 表单处理器执行保存动作===》{}", JsonUtils.toJSONString(urlFormSaveDto.getBizData()));
	// urlFormSaveDto.getBizData() 就是前端URL表单提供的JSON，也就是业务数据，需要自行保存
	BizApplyOrder order = JsonUtils.parseObject(JsonUtils.toJSONNode(urlFormSaveDto.getBizData()), BizApplyOrder.class) ;

	BpmUrlFormResponseDTO bpmUrlFormResponseDTO = new BpmUrlFormResponseDTO();

	// 第一次保存，构建业务主键关联
	if (StrUtil.isEmpty(order.getId())) {
		String id = IdGeneratorUtils.nextId();
		// 这里必须返回 业务主键
		bpmUrlFormResponseDTO.setBizId(id);
		order.setId(id);
		orderMananger.create(order);

		Map<String, Object> hashMap = new HashMap<>();
		hashMap.put("startVariable", order.getQdjl());
		// 启动时候设置一些流程变量，请看 act_ru_variable 表、在整个流程声明周期您都可以使用该流程变量，可以用于分支判断等等
		bpmUrlFormResponseDTO.setVariables(hashMap);
	} else {
		// 更新情况
		orderMananger.update(order);
		// 变量设置可忽略
		Map<String, Object> hashMap = new HashMap<>();
		hashMap.put("doTaskVariable", order.getQdjl() + "-" + urlFormSaveDto.getNodeKey());
		bpmUrlFormResponseDTO.setVariables(hashMap);
	}

	return ApiResponse.success(bpmUrlFormResponseDTO);
}

流程 URL 表单实施介绍 #

URL 表单 示例配置 #

URL 表单地址配置 #

URL 表单页面 开发 #