一、前言
有一个需求,想实现从页面上传一个excel文件,点击提交,就转发给forma模块,然后用户在forma模块里,确认下自动填写的信息是否正确,正确的话就点击保存,存入数据库;不正确的话可以修改,修改正确后保存入库。
这个功能,想用intra-mart框架实现,框架自带低代码平台模块,logicDesigner和forma等。
logicDesigner大概就相当于一个接口,写完后有一个url地址,可以传参数调用,内部自己写好处理逻辑后,可以返回值。
forma就相当于一个表单模块,自己拖组件画好页面后,可以一键生成数据库;访问时也是通过url访问,但是会展示一个页面,在页面上填好参数,点击保存,就会把数据保存到数据库。
二、思路
由于是低代码平台,只能用提供的组件实现,不能全用代码搞定,有些地方是不太灵活的;写软件效率高了,灵活度低了。
forma就是一个像表单的页面,不能直接加上传excel文件并处理、自动填好的逻辑;
logicDesigner是一个接口,有入参出参,可以写内部处理逻辑,但是要与forma对接起来才行(虽然可以写逻辑、读取excel直接sql入库,但是就是想用forma、人工确认下数据是否正确,再决定是否入库)。
最后实现的是,先用bloomMaker写一个上传页面,然后页面调用logicDesigner执行处理逻辑,logicDesigner里再启动一个BPM任务,BPM里把任务分派给指定用户,指定用户处理BPM任务时、打开forma确认,此时forma里就有已经填好的数据了;用户可以确认数据是否正确、决定是否入库。
整个流程用到了bloomMaker,logicDesigner,BPM,forma。
三、实现步骤与代码
1.bloomMaker
这个是intra-mart框架里的一个模块,可以用来低代码开发页面。
首先创建一个imui页面,如下:
(1)声明变量和常量
然后声明下变量和常量(就和代码里声明一样,自己起名字就行):
{
"requestData": {
"fileKey": "",
"note": ""
},
"respCode": 0,
"respMsg": ""
}
这个是变量,选择json格式填进去就行;
点击请求按钮,就会把requestData
发送给logicDesigner,后面会提到;
respCode是logicDesigner处理完毕后返回的值,例如200;
respMsg是logicDesigner处理完毕后返回的消息体;
{
"ENDPOINT_URL": "logic/api/logic_designer/upload_geren_qqs",
"SUCCESS": "ファイルアップロード成功、BPMのタスクに確認してください",
"ERROR": "エラー発生",
"ERROR2": "ファイルの様式は正しくありません"
}
这个是常量,ENDPOINT_URL
是logicDesigner的url,根据需要自己改;
其它的就是些提示信息。
(2)页面布局
然后页面中拖进去的组件是这些:
先拖进去一个表单容器,里面有标题、两行;
第一行第二列拖进去一个文件上传组件,value需要填成$variable.requestData.fileKey
;
$
是jquery,variable
是变量,这个是框架起的,不能改;后面两个就是自己变量的名字;
这个东西,当点击这个按钮上传完毕文件后,框架就会给这个变量赋值,是一个128长度的文件唯一编号;后续会用。
第二行第二列拖进去一个文本框,value需要选择变数值
,值为$variable.requestData.note
;
这个东西,当用户在文本框输入内容时,框架就会给这个变量赋值,值为文本框的内容。
“登录”按钮,绑定的事件是register(自己起名字的一个动作),如下:
这个后面会写到。
(3)编写按钮事件
画面右侧,选择アクション
(动作),上面是新建按钮;下面是已经写好了一个,出现的修改按钮。
创建了一个名字是register
的动作,左边选的是给某个url发请求,拖到右边;
右边url里写的就是常量$constant.ENDPOINT_URL
,这个就是自己创建的常量;
方法post,请求体用$variable.requestData
;
接收返回报文时,用$variable.respCode
存储响应值,用$variable.respMsg
存储响应体。
如果想加成功/失败消息提示,也可以加,不是重点,这里不写了。(注意失败提示需要加在右上方的发生错误时
标签里)。
2.logicDesigner
这个模块可以低代码编写接口处理逻辑,收到入参、处理、返回出参。
首先创建一个逻辑流。
(1)定义入参出参、常量
入参的json格式是:
{
"fileKey": "",
"note": ""
}
注意入参,之前bloomMaker传来的报文是requestData
对应的值,值就是这个json格式的,所以这样就能接收到。
出参其实可以不写,这个逻辑里没有用到,写多了。
这个是写入参出参的截图(左边两个参数,不用管右边输出部分的参数,写多了),如果用json格式会比较方便,如果手动写,注意:
选了配列型にする
,就能把这个变量变成数组;
选了配下に配置する
,就能在这个变量下新建子变量。
变量这次没有用到,常量如下:
PublicStoragePath
的值是ReqGeRen_Path/
,可以随便写个路径,缓存文件用;
bpm_key
的值是upload_geren_qqs
,这个是BPM流程的ID,需要与自己创建的保持一致,后面会写到;
timeZone
的值是Asia/Tokyo
,根据时区需要写,处理表格会用。
(2)画流程图
把左边需要的组件,拖到右边,连好线。
下面是详细说明:
●第一个开始,不用写;
●第二个是IM-BloomMaker
里的ファイル情報の登録
,作用是文件持久化;
本来上传的文件,会在Session Scope Storage
里,当用户退出就消失了;
执行这个就能把文件存到数据库;
双击打开,把入参fileKey
链接到key
上,这样才能使用。
fileKey是bloomMaker框架上传文件时自动生成的那个变量。
●第三个是IM-BloomMaker
里的ファイル情報の取得
,用来获取文件详细信息;
双击打开,把fileKey
链接到key
上,意思是读取这个文件的信息。
●第四个是一个自定义的sql任务,执行后把文件信息入库:
从左边栏目找到增加用户定义:
里面有制作SQL定义:
点击后会打开新建页面,先写入参,这个出参不能编辑,只能写入参:
入参的json格式如下:
{
"id": "",
"file_key": "",
"file_name": "",
"note": "",
"create_date": null
}
这些入参是sql语句用的;id
用框架的id,create_date
是时间戳格式,也用框架的;
file_key
、note
是bloomMaker传来的;
file_name
是读取到的。
继续编写下面的,数据库类型选择一个,看自己配了几个数据库链接,这里是tenant
的数据库;
选执行sql类型是insert;
sql语句如下:
INSERT INTO gsd_upload_file
(id, file_key, file_name, note, create_date)
VALUES
(/*id*/'testId', /*file_key*/'testK', /*file_name*/'testName', /*note*/'testNote', /*create_date*/'2025-01-01')
其中/**/
部分,里面的内容对应入参变量,框架执行sql时就会填写为入参值了;''
里的是默认值,有入参用入参,没有就用默认值。
把这个组件保存好,连线后,双击打开:
给入参赋值的连线如图,其中,在左上下拉菜单里,可以找到session情报
和之前获取文件的组件im_bmGetFileInfo1
(第三步的组件),点击追加,就会出现在左边;
在右上的下拉菜单里,可以找到identifier
,点击按钮加入,这个就是框架生成的id参数;
然后连线,fileKey和note是入参,id是系统生成的,file_name是第三步组件取得的文件名,create_date是session里取得的当前时间。
●第五个是ストレージ操作
里的ストレージ出力(バイナリ)
,作用是把二进制格式的文件内容保存到storage缓存里。
双击打开,入参连线如图;
其中storage
传入了一个string格式的路径,用到了concat拼接常量PublicStoragePath和变量fileKey,拼好后就是ReqGeRen_Path/ladskjlafkejwf...
这样的,意思是把文件缓存到这个路径下(文件名起成fileKey);
binary
是文件内容,把第三步读取到的文件内容contents
赋值过去。
●第六个是Excel入力定義編集
,也是自定义的。
从左边栏目找到增加用户定义:
里面有新建Excel输入处理逻辑:
打开页面后,这个组件的输入输出都不能手动编辑,需要修改其它信息、才会自动生成输出参数;
输入下方内容,这里选择的是读取哪个sheet,左边是指定sheet名字,这里选的是右边,指定sheet序号(从零开始);
继续向下:
这个填的就是怎么处理excel表了,例如,选择第0个sheet表,B2格子,进行读取,然后输出的变量叫req_no
,格式是string
;
还可以把excel格子读取成list,如图,选第0个sheet,从B列到E列,从18行开始向下读取,当格子内容全部为空时停止读取;
然后返回的list名字为req_table
,返回的变量名字叫tb1_textbox1
,类型string
,等。
保存后,这个组件的输出就自动生成好了,拖入右边,连好线,双击打开,先配置好入参:
需要传入file
路径,这里就是PublicStoragePath
与fileKey
拼接的字符串,第五步执行后就会把文件保存到这个位置,可以读取到;
targetTimezone
是时区,使用了常量Asia/Tokyo
;
密码没有传,测试excel文件没有加密。
●第七个是开启BPM工作流,执行后创建BPM任务,提醒指定用户继续处理。
拖入面板,连好线后,双击打开,配置入参:
先把第六步处理好后的结果加入到左边(这个就是第六步的出参),然后连线到右边variables
,表示把整个变量给到BPM,供后续使用;
processDefinitionKey
传的是常量,表示启动哪个BPM,这个需要与后续创建的BPM模版对应。
●第八个是终了,这个也可以填些出参的,调用logicDesigner处理结束后,就会返回出参。
这个例子里不需要写,跳过。(想写出参时,也得先定义出参变量才行,然后双击打开,填写出参变量赋值连线)
3.BPM
个人感觉这个就是像任务流的一个东西,可以指定用户,层层处理,层层审批。
logicDesigner执行完毕后,会创建一个BPM进程。
所以要先写一个BPM模版,才能被调用。
打开サイトマップ
-プロセスデザイナ
(网站地图-进程设计),这里创建一个プロセス
(进程模版)。
创建后,先点击画面空白区域,在右边填写下:
这里写了进程定义key是upload_geren_qqs
,上方logicDesigner就是根据这个值来开启这个BPM进程;
处理对象用户,记得添加上允许开启进程的用户。
然后拖组件,如图:
一个开始,一个用户任务,一个结束。
点击用户任务,在右边配置:
可以配置一个负责人,多个有权限处理这个进程的人;
重点是配置下フォームキー
,值为forma:seikyusyo
,意思是这个任务会打开名叫seikyusyo的forma页面。
logicDesigner中,给这个BPM进程的variables
传递了一个json对象,json对象中就是从excel里读取并处理好的内容,json里变量的key与forma页面元素一一对应;
然后这个forma就可以自动填写完毕,用户浏览后确认是否入库即可。
先用检查模式保存,才能发布;
用这个deploy发布,才能使用。
4.forma
这个东西可以低代码开发表单页面,一键生成数据库,自带新增、修改、查询页面。
需要注意的点就是,创建后的id与BPM里的forma:
对应,需要先选テーブル設定
创建好数据库表,选権限設定
设置好可以使用的用户;
メニュー設定
可以设置这个forma的入口按钮,有新增页面和一览页面两种。(其实就是两个url+入参,正常创建好的forma可以用这两个入口使用);
内容样例如下:
例如,想自动给这个input赋值,就要注意这个id,现在是project_name
,前面BPM的variables
里的json对象,json对象是有这个数据的,例如:
{
...
"project_name":"abc",
"req_table": [
{
"tb1_textbox4": "100.0",
"tb1_textbox3": "100.0",
"tb1_textbox2": "100.0",
"tb1_textbox1": "b"
},
{
"tb1_textbox4": "200.0",
"tb1_textbox3": "200.0",
"tb1_textbox2": "200.0",
"tb1_textbox1": "a"
},
...
}
这样,就可以自动给这个值填进去, "project_name":"abc"
同理,想给forma的table填值,也是table的id、每列的id与json里的数据要对应好。
四、演示效果
1.用户先访问bloomMaker页面,点击按钮上传excel后,点击登录按钮,就能触发logicDesigner后续处理。
2.logicDesigner会开启一个BPM进程,用户可以在BPM-任务一览里查看到:
这里就能看到,属于自己的任务,可以点击按钮进行处理。
3.点击处理按钮后,就会跳转到forma页面,forma页面里的信息是自动填写好的:
用户自行确认,如果有需要修改的地方就修改,最后点击登录按钮,就能保存入库。
五、总结
细节有点多,可能写的有些乱。
总之就是,intra-mart框架里,想实现上传excel表格、用表格内容自动填写好forma页面、用户手动确认是否入库功能的话,就可以参考这个例子。
先用bloomMaker写入口页面,然后触发logicDesigner逻辑,读取excel,转换为json格式传给BPM;
BPM收到后,给一个指定用户分派任务,用户处理这个任务时,打开forma页面,此时forma页面是填写完毕的,确认是否修改、是否入库即可。
六、备注
1.bloommaker与logicDesigner,写好后还需要分别创建路由设置才行,路由设置就是自己写一个url、配好自己写好的组件,就可以访问到了;
注意还得给路由设置好权限,允许自己访问,才能测试。
2.BPM则是要设置好哪个用户能开始这个任务、哪个用户能处理这个任务。
BPM每次改动后,都得选deploy,重新部署一个可执行包。
3.forma也要设置好、哪个用户能访问这个forma页面。