前言
“萬事俱備，就差一個程式員了”，這是一個網際網路圈裡很著名的一個梗。很好的诠釋了“全民網際網路+” 時代的瘋狂。在當今“企業數智化轉型“的大背景下，也有一個一個關于表單系統的梗，“所有系統都逐漸低代碼零代碼化，這一切就差一個“表單系統”。确實是如此，在多數的數智化應用軟體中，表單系統都是必不可少的基礎功能，更是低代碼零代碼的支撐性應用。本文是根據開源低代碼平台，《OneCode低代碼引擎》 1.0.6版本整理的功能來闡述表單系統的設計。 參考閱讀：《OneCode開源低代碼引擎白皮書》
一，表單系統簡介
表單系統是一個比較寬泛的定義，沒有特定的業務背景，但在大多數數智化業務系統中又有着比較高的應用頻率，如日常辦公中各種行政類單據如請假單、裝置申請單、用車申請單等；統計調查類單據，如人員資訊統計表、團建活動報名表、調查問卷等，在财務系統中，各類報帳單、涉稅報表等。但在數智化系統逐漸精細化複雜化的今天，表單系統也不在是簡單的針對資料的單存的電子記錄功能，而是更多的增強其“可控可管”的能力。比如：“請假單”則需要從“HR人力資源系統”中讀取員工假期使用情況，以及根據請假天數在“OA系統”中選擇合适的審批流程。而且表單的元件類型也不在局限于，單一輸入展現，而是內建更多的統計、計算以及與業務結合的組态控件等等。
二，OneCode 表單設計組成
onecode表單系統是建立在OneCode低代碼引擎的一個重要組成部分，由設計器，表單引擎、以及領域設計工具組成。
（1）可視化設計器
設計器是表單系統統一入口，onecode 設計器本身是一套開放的設計，使用者可以通過，OneCode語言指定擴充。設計器，采用的是拖拽引擎+插件的構造模型，使用者可以通過開放的低代碼協定編寫插件。支援JS和JAVA兩種擴充語言。樣式建構提供了标準CSS3編輯器，支援事件動作以及函數動态擴充。支援自定義函數庫擴充，支援阿裡字型圖檔等資源庫。
可視化設計器
（2）表單引擎
表單引擎由三塊自成體系的可獨立部署運作的部分組成。前端引擎負責界面模組化并按低代碼協定協定生成标準JSON，中背景OneCode通過讀取标準JSON協定，完成後端的視圖模組化，合并DSM後端服務模組化系統，完成完整的後端服務模組化應用，通過代碼工程完成前後端一體的出碼應用。JDSCloud是OneCode的協同支撐系統，除了正常的資源代碼空間管理外，提供了獨立的沙箱運作環境。為OneCode 提供工程化的仿真版本Ops等服務。
表單組成
（3）DDD領域設計工具
OneCode-DSM(以下簡稱DSM)工具集是建立是以OneCode低代碼引擎為基礎專注于低代碼模組化應用的高階模組化工具。在OneCode引擎中，出了為普通使用者提供無代碼的拖動設計器，低代碼的業務邏輯編排器，之外還提供了供專業業務領域專家的使用的DSM模組化工具。
領域工具
三，運作原理
(1) 拖拽自定義頁面
使用者通過，拖拽完成頁面模組化序列化為按标準協定序列化JSON檔案,後端OneCode服務支撐系統解析JSON檔案并混合DSM模組化資訊以及後端服務邏輯後，通過混合編譯，通過代碼工廠指定出碼模闆，完成前後端一體的編譯檔案。
運作原理
原型原理
(2) 從資料資料庫建構
(3) 手工撰寫OneCode代碼
OneCode 本身基于JAVA語言體系，是在Java Spring 注解基礎上的一套擴充子集，混合編譯引擎器通過擴充注解建構完整的Domain模型，通過讀取标準Spring 注解完成普通Web資料傳遞及排程過程，通過Domin域模型動态渲染JS檔案輸出為JSON傳遞給前端引擎建構頁面。
四，設計器功能介紹
（1）功能介紹
（2）物料庫
"物料"：低代碼引擎的核心目的之一是建設跨行業的低代碼架構，而每個行業由于其應用的領域不同，使用的人員以及方法方式不同，在一些底層元件方面會有會有加大差距。比如：政府業務中會大量使用的非規則表單元素，企業應用中各個行業自有的圖示體系，物聯網行業大量的裝置圖示圖檔以及實時聯網圖。
（3）元件庫
元件定義：可以用于低代碼平台的元件，包含了搭建體驗增強配置，可以在設計器中 進行拖拽、配置等操作。有兩種分類方式：按照場景可以分為基礎元件、業務元件、圖 表元件、布局元件和複合元件等。通常使用者可以自主完成相關設定，并根據業務特點在視圖引擎中進行自行擴充（後續章節中會示範實際注冊示例）
（4）樣式體系
DOM樹透視樣式盒
DOM樹透視
配圖示例代碼
{
"alias":"BuildTreeTreeView",
"key":"xui.UI.TreeView",
"host":this,
"properties":{
"name":"BuildTreeTreeGrid",
"items":[
{
"borderType":"none",
"caption":"JAVA樹",
"dynDestory":false,
"hidden":false,
"id":"getBuildTree",
"imageClass":"bpmfont bpmgongzuoliuxitongpeizhi",
"tagVar":{ }
}
],
"iniFold":false,
"dynDestory":true
},
"CS":{
"KEY":{
"color":"#000000",
"font-weight":"lighter",
"border-radius":"0px 2px 0px 0px"
},
"BAR":{
"font-family":"tahoma,geneva,sans-serif"
}
}
} 動态樣式盒
代碼配置示例
{
"alias":"xui_ui_cssbox1",
"key":"xui.UI.CSSBox",
"host":this,
"properties":{
"className":"xui-css-ame",
"normalStatus":{
"color":"#eeeeee",
"border-radius":"6px",
"box-shadow":"inset 0px 1px 0px #87C1DD",
"text-shadow":"0 1px 0 #297192",
"$gradient":{
"stops":[
{
"pos":"0%",
"clr":"#4BA3CC"
},
{
"pos":"70%",
"clr":"#3289B2"
}
],
"type":"linear",
"orient":"T"
},
"cursor":"pointer",
"border-top":"solid #3899C6 1px",
"border-right":"solid #3899C6 1px",
"border-bottom":"solid #3899C6 1px",
"border-left":"solid #3899C6 1px"
},
"hoverStatus":{
"border-radius":"0px 3px 0px 0px"
}
}
}
（5）事件架構
配置代碼示例：
{
"alias":"BuildTreeTreeView",
"key":"xui.UI.TreeView",
"host":this,
"properties":{
"name":"BuildTreeTreeGrid",
"items":[
{
"borderType":"none",
"caption":"JAVA樹",
"dynDestory":false,
"hidden":false,
"id":"getBuildTree",
"imageClass":"bpmfont bpmgongzuoliuxitongpeizhi",
"tagVar":{ }
}
],
"iniFold":false,
"dynDestory":true
},
"events":{
//擷取資料
"onGetContent":{
"actions":[
{
"args":[
"{page.ReloadChild.setQueryData()}",
null,
null,
"{args[1].tagVar}",
""
],
"desc":"設定擴充參數",
"method":"setQueryData",
"redirection":"other:callback:call",
"target":"ReloadChild",
"type":"control"
}
]
},
//資料項選擇
"onItemSelected":{
"actions":[
{
"args":[
"{args[1].id}"
],
"conditions":[
{
"symbol":"non-empty",
"right":"",
"conditionId":"_nonempty_{args[1].className}",
"left":"{args[1].className}"
}
],
"desc":"删除存在頁",
"method":"removeItems",
"target":"BuildTreeTab",
"type":"control"
}
]
}
}
} （6）動作編排架構
在OneCode白皮書中參數了OneCode工作原理，其中有一個章節就是允許使用者将邏輯片段以及動作函數序列化為特定的JSON字元串。動作（邏輯）概覽則是針對邏輯片段可視化的入口工具。打開任意頁面便可以直覺的将該頁面的代碼片段以直覺的方式展現出來。并且可以直接插入，編輯事件，修改動作。同時也可以在調試期動态的中斷、跳出終止等功能。
五，表單設計
（1）頁面布局
表單系統，依然采用的是，OneCode低代碼引擎的布局結構。使用工程結構來完成項目代碼的管理及複用。
在主體布局上預設采用的表格布局，支援行列的自由拖動，以及行列合并操作。
允許以，整行、整列、獨立單元格獨立設定樣式。
OneCode也提供了，常用的嵌套布局容器元件。友善進行複雜頁面組合。
（2）表單輸入
基于OneCode的通用輸入控件，是經過OneCode封裝後統一輸出的，包括前端使用者展現控制以及OneCode後端定義文法及DSM工具。
輸入域事件
（3）表單資料互動
表單互動AJAX設定
後端聚合配置
（六）資料清單
在表單系統中，清單是使用者互動一個基礎入口。除了承擔資料查詢及展現的功能外，還是多表多行資料批量送出的一個入口。
（1）清單設計器
設計器概覽圖
屬性集合
(2) OneCode清單領域模型
清單OneCode 轉換對比
領域模型分析
常用菜單注解
| 注解 | 位置 | 示例 |
| @ToolBarMenu | 容器頂部工具欄 | @ToolBarMenu(hAlign = HAlignType.left, handler = false, menuClass = JavaRepositoryEditorTools.class) |
| @MenuBarMenu | 頂部菜單欄 | @MenuBarMenu(menuType = CustomMenuType.sub, caption = "建立", imageClass = "xuicon xui-uicmd-add", index = 5) |
| @BottomBarMenu | 容器底部按鈕欄 | @BottomBarMenu(menuClass = CustomBuildAction.class) |
| @PageBar | 分頁欄 | @PageBar(pageCount = 100) |
| @GridRowCmd | 清單行操作按鈕欄 | @GridRowCmd(tagCmdsAlign = TagCmdsAlign.left, menuClass = {AttachMentService.class}) |
| @RightContextMenu | 右鍵菜單欄 | @RightContextMenu(menuClass = JavaViewPackageMenu.class) |
@Controller
@RequestMapping(value = {"/java/agg/context/"})
@MenuBarMenu(menuType = CustomMenuType.component, caption = "菜單")
@Aggregation(type = AggregationType.menu)
public class JavaAggPackageMenu {
@RequestMapping(method = RequestMethod.POST, value = "paste")
@CustomAnnotation(imageClass = "spafont spa-icon-paste", index = 1, caption = "粘貼")
@APIEventAnnotation(customRequestData = {RequestPathEnum.treeview, RequestPathEnum.sTagVar}, callback = CustomCallBack.TreeReloadNode)
public @ResponseBody
TreeListResultModel<List<JavaAggTree>> paste(String sfilePath, String packageName, String domainId, String projectName) {
TreeListResultModel<List<JavaAggTree>> result = new TreeListResultModel<List<JavaAggTree>>();
try {
DSMFactory dsmFactory = DSMFactory.getInstance();
File desFile = new File(sfilePath);
DomainInst domainInst = dsmFactory.getAggregationManager().getDomainInstById(domainId);
JavaSrcBean srcBean = dsmFactory.getTempManager().genJavaSrc(desFile, domainInst, null);
DSMFactory.getInstance().getBuildFactory().copy(srcBean, packageName);
result.setIds(Arrays.asList(new String[]{domainId + "|" + packageName}));
} catch (Exception e) {
e.printStackTrace();
}
return result;
}
@RequestMapping(method = RequestMethod.POST, value = "reLoad")
@CustomAnnotation(imageClass = "xuicon xui-refresh", index = 1, caption = "重新整理")
@APIEventAnnotation(customRequestData = RequestPathEnum.treeview, callback = CustomCallBack.TreeReloadNode)
public @ResponseBody
TreeListResultModel<List<JavaAggTree>> reLoad(String packageName, String domainId, String filePath) {
TreeListResultModel<List<JavaAggTree>> result = new TreeListResultModel<List<JavaAggTree>>();
String id = domainId + "|" + packageName;
result.setIds(Arrays.asList(new String[]{id}));
return result;
}
}
行子域
| 注解名稱 | 用途 | 執行個體 |
| @GridRowCmd | 表格行按鈕 | @GridRowCmd(tagCmdsAlign = TagCmdsAlign.left, menuClass = {DBColAction.class}) |
| @RowHead | 行頭配置 | @RowHead(selMode = SelModeType.none, gridHandlerCaption = "删除|排序", rowHandlerWidth = "10em", rowNumbered = false) |
@PageBar(pageCount = 100)
@RowHead(selMode = SelModeType.none, gridHandlerCaption = "删除|排序", rowHandlerWidth = "10em", rowNumbered = false)
@GridRowCmd(tagCmdsAlign = TagCmdsAlign.left, menuClass = {DBColAction.class})
@GridAnnotation(customService = {ColService.class}, customMenu = {GridMenu.Reload, GridMenu.Add}, event = CustomGridEvent.editor)
public class DbColGridView {
@CustomAnnotation(caption = "字段名", uid = true, required = true)
private String name;
@CustomAnnotation(caption = "類型", required = true)
private ColType type = ColType.VARCHAR;
@CustomAnnotation(caption = "長度", required = true)
private Integer length = 20;
@CustomAnnotation(caption = "數字精度")
private Integer fractions = 0;
@CustomAnnotation(caption = "是否主鍵")
private Boolean pk;
@CustomAnnotation(caption = "是否可為空")
private Boolean canNull = true;
@CustomAnnotation(colSpan = -1, caption = "注解", rowHeight = "100", required = true)
private String cnname;
} （3）配置運作執行個體：
配置項示例：
OneCode配置
按鈕綁定服務OneCode代碼
（七）圖表設計
（1）圖表設計器
（2）圖表配置器
（3）動作互動
（4）公式編輯器查詢綁定
（5）動畫綁定
（6）FusionChartsXT
(7) ECharts
(8) SVGPaper
）
（八）流程
表單應用，最常見的一種形式是與工作搭配獨立完成互動。onecode 流程系統是一個獨立的微服務系統，表單引擎通過webapi完成流程的排程功能。
（1）流程設計器
（2）流程配置
1， 單人、多人、會簽等常見需求
2， 辦理方式支援，搶占、順序、并行等多種方式
3， 辦理方式支援、辦理人、傳閱人、代簽等常見方式。
（3）表單流轉
（4）表單按鈕權限
（九）資料源處理
oneCode資料源采用的是DDD模型的倉儲模型設計。并通過代碼工廠配置模版完成出碼設計。
(1) 倉儲概覽
(2) 資料庫配置
(3) 實體關系
倉儲模組化的一個核心目的是将結構化的資料轉變為面向對象的模式，而這其中非常重要的一點則是實體關系的處理，DSM設計中針對資料庫表允許使用者在導入資料庫後再次進行實體關系模組化，将資料庫表按 1:1 ,1:N, N:N模型建立關系。完成模組化後在出碼的過程中會根據業務模闆設定，進行實體模型的轉變，在實體代碼中以 @Ref 關系标簽完成模組化應用。
| 資料庫模型關系 | 實體關系 | 實體注解配置 |
| 1:N | 一對多 | @Ref(ref = RefType.o2m) |
| N:N | 多對多 | @Ref(ref = RefType.m2m) |
| 1:1 | 一對一 | @Ref(ref = RefType.o2o) |
| 引用 | @Ref(ref = RefType.ref) | |
| 查找 | @Ref(ref = RefType.) |
(4) 倉儲模組化模闆
（5）倉儲模型常用注解
| 注解名稱 | 用途 | 執行個體 |
| @DBTable | 資料庫表映射配置主要包含了，資料源辨別，表名稱以及主鍵資訊 | @DBTable(configKey="fdt"，tableName="FDT_LINGDAO",primaryKey="uuid") |
| @DBField | 資料庫字段配置 | @DBField(cnName="建立時間",length=0,dbType=ColType.DATETIME,dbFieldName="createtime") |
| @Uid | 實體字段，在資料庫實體中一般辨別為主鍵，在DDD模型中作為唯一值 | @Uid |
| @Pid | 父級元件字段，通常在關系實體中用于辨別父級對象的主鍵 | @Pid |
| @CustomAnnotation | 常用實體注解,注解屬性中會包括，字段的展示類型，可讀屬性，展示注解等。 | @CustomAnnotation(caption="職務") |
| @Caption | 标題注解一般作用在表格行資料的展示中作為預設顯示字段，如Person （人員對象中）會将name作為預設展示選項 | @Caption |
| @Ref | 實體關系屬性 | @Ref(ref = RefType.m2m, view = ViewType.grid) |
| @APIEventAnnotation | API服務注解，是對外服務的辨別。添加該注解後，在後續的模型模組化中會對應轉換為Web API服務 | @APIEventAnnotation(bindMenu = {CustomMenuItem.search}) |
（十）工程釋出總覽
（1）釋出服務組成
工程釋出，需要三方面的資源做支撐，分别是使用者通過設計完成的頁面及功能互動，通過特定的特定的出碼模闆完成相應的技術棧前端轉換形成的前端頁面目錄。而後端應用則根據則是使用者通過基礎資料模組化形成的領域模型檔案，這些領域模型檔案通常會按照，資源庫、支撐域工程域等模型方式來獨立打包友善後期版本管理及個體更新。另外第三塊則是友善工程啟動運作以及通路控制，對外暴露監控等相關的工程配置資訊。
（2）釋出配置
釋出本地
釋出遠端
工程配置
（3）前端庫
（4）後端服務
（5）通用域打包