Skip to content

AI 表单集成

概述

本文介绍通过 AI 编程工具生成的表单,如何集成流程引擎。 本示例全部基于 Cursor 编程工具实现,演示从 0 到 1 的完整过程。

如果使用TRAE工具,也可点击查看效果:AI表单集成-TRAE

集成落地后可实现两类场景零代码改造、即时生效:

1.流程结构调整、流程节点字段权限变更:无需改动业务表单代码,配置后立即生效;

2.业务表单字段信息更新:仅需重新同步表单、调整节点字段权限,集成底层代码无需修改,配置完成直接生效。

一、创建业务系统

在本地创建文件夹 springboot_form,向 AI 发送以下指令:

text
这个是个空的文件夹,帮我生成一个 springboot2.7.8 的工程,里面包括登录、首页这些基础简单的功能即可。
用户包含 admin / user01 ~ user20,密码均为 1234

注意

已有业务系统可跳过此步骤。

示例用户是为了与流程引擎保持一致,业务系统集成时需要与流程引擎做组织机构同步。

业务系统启动后登录页:

img.png

登录成功后,进入首页:

img_1.png

二、更新接口手册

为方便 Cursor 读取流程引擎接口文档,可将流程引擎手册更新到项目指定目录。示例目录为:

src/main/resources/static/doc

下载文件:doc.zip

三、AI 生成表单

说明

此步骤仅用于查看 AI 生成的表单效果,实际开发中请自行修改表单内容或直接使用已有表单,忽略此步骤。

指令:

text
写个合同管理的增删改查

运行结果:

img_2.png

img_3.png

img_4.png

四、同步表单信息

将业务系统表单信息同步到流程引擎中,用于流程引擎中设置表单权限。(仅读取表单信息,不存储业务数据)

指令:

text
按照文档 customForm.md 中的自定义表单新增接口,将合同表单信息推送至流程引擎,formGroup=AI表单
推送入口放在新建合同按钮旁边
我使用的流程引擎地址为 http://127.0.0.1:8082/horizon-workflow-boot/,
accessToken 获取参考手册:static/doc/get-token.md
接口调用时,后台需打印请求参数和返回参数,方便排查问题。

注意

如果使用的流程引擎产品未包含自定义表单接口(V9 以下版本),需要在流程引擎中更新接口代码:

【REST 接口】新增自定义表单接口,支持新增/更新

运行结果:

img_5.png

后台日志:

img_6.png

工作流中查看同步的表单信息:

img_7.png

五、流程建模

新建流程:

img_8.png

示例流程:

img_19.png

设置字段权限(任务 1 申请节点,设置字段必填、编辑、只读、隐藏效果):

img_17.png

审批节点设置:

img_18.png

六、集成流程引擎

指令:

text
启动新工作接口手册:startflow.md
创建接口手册:create-process.md
打开接口手册:open-process.md(打开接口和创建接口请求地址和返回参数是一样的,只是请求参数不一样)
提交等流程操作接口手册:submit-process.md
待办列表接口手册:todo-list.md

需要帮我实现与流程引擎的对接。前提是我已经将表单信息同步至流程引擎了。
1、先调用启动新工作接口,页面展示所有可发起的流程入口。
2、点击其中一个流程时,调用创建接口,并根据创建接口返回值跳转到表单页面,
   表单页面的字段根据返回值渲染为必填、编辑、只读、隐藏效果,操作按钮也要渲染出来。
3、点击操作按钮的各种提交退回等操作时,后台存储业务数据,并调用流程操作接口。
4、渲染待办列表页面。
5、点击待办列表某一条时,调用打开接口,同创建接口返回值一样,跳转页面并根据权限渲染页面。

以上就是一个完整的流程发起、提交、审批的过程了。

运行结果:

img_9.png

启动新工作

找到新建的流程:

img_10.png

创建流程

发起:

img_11.png

提交

点击提交: 由于后续节点未设置办理人,需要用户手动选择:

img_12.png

说明

选择人节点需根据实际情况,读取业务系统组织机构信息展示,供用户选择办理人。

我的待办

提交成功后,直接跳转至待办列表页面:

img_13.png

打开流程

点击办理,进入审批页面:

img_14.png

提交

再次提交 ,由于流程设置需要选择节点,会出现交互页面:

img_16.png

跳转等操作

由于流程操作使用同一接口、规则相同,其他按钮也直接生效,例如跳转:

img_15.png

七、新增其他表单

新增 IT 服务工单

指令:

text
按照合同与流程对接的实现,同样模式新增 IT 服务工单模块

运行结果:

img_21.png

新建工单流程

新建流程,并设置表单权限和字段权限: img_20.png

img_24.png

发起工单流程

img_22.png

img_23.png

八、流程跟踪

如果在表单页面需要显示流程跟踪图和操作记录,可直接嵌入流程引擎的页面:

指令:

text
在审批页面增加流程跟踪,流程跟踪嵌入流程引擎的页面地址:
/workflow/module/workflow/flow.info.html?workid=流程实例id&tenantCode=system&identfier=system

img_25.png

示例工程

以上功能已实现,完整示例工程下载:springboot_form.zip

在src/main/resources/application.yml中修改流程引擎地址