前言

“萬(wàn)事俱備，就差一個(gè)程序員了”，這是一個(gè)互聯(lián)網(wǎng)圈里很著名的一個(gè)梗。很好的詮釋了“全民互聯(lián)網(wǎng) ” 時(shí)代的瘋狂。在當(dāng)今“企業(yè)數(shù)智化轉(zhuǎn)型“的大背景下，也有一個(gè)一個(gè)關(guān)于表單系統(tǒng)的梗，“所有系統(tǒng)都逐步低代碼零代碼化，這一切就差一個(gè)“表單系統(tǒng)”。確實(shí)是如此，在多數(shù)的數(shù)智化應(yīng)用軟件中，表單系統(tǒng)都是必不可少的基礎(chǔ)功能，更是低代碼零代碼的支撐性應(yīng)用。本文是根據(jù)開(kāi)源低代碼平臺(tái)，《OneCode低代碼引擎》 1.0.6版本整理的功能來(lái)闡述表單系統(tǒng)的設(shè)計(jì)。 參考閱讀：《OneCode開(kāi)源低代碼引擎白皮書(shū)》

一，表單系統(tǒng)簡(jiǎn)介

表單系統(tǒng)是一個(gè)比較寬泛的定義，沒(méi)有特定的業(yè)務(wù)背景，但在大多數(shù)數(shù)智化業(yè)務(wù)系統(tǒng)中又有著比較高的應(yīng)用頻率，如日常辦公中各種行政類(lèi)單據(jù)如請(qǐng)假單、設(shè)備申請(qǐng)單、用車(chē)申請(qǐng)單等；統(tǒng)計(jì)調(diào)查類(lèi)單據(jù)，如人員信息統(tǒng)計(jì)表、團(tuán)建活動(dòng)報(bào)名表、調(diào)查問(wèn)卷等，在財(cái)務(wù)系統(tǒng)中，各類(lèi)報(bào)銷(xiāo)單、涉稅報(bào)表等。但在數(shù)智化系統(tǒng)逐步精細(xì)化復(fù)雜化的今天，表單系統(tǒng)也不在是簡(jiǎn)單的針對(duì)數(shù)據(jù)的單存的電子記錄功能，而是更多的增強(qiáng)其“可控可管”的能力。比如：“請(qǐng)假單”則需要從“HR人力資源系統(tǒng)”中讀取員工假期使用情況，以及根據(jù)請(qǐng)假天數(shù)在“OA系統(tǒng)”中選擇合適的審批流程。而且表單的組件類(lèi)型也不在局限于，單一輸入展現(xiàn)，而是集成更多的統(tǒng)計(jì)、計(jì)算以及與業(yè)務(wù)結(jié)合的組態(tài)控件等等。

二，OneCode 表單設(shè)計(jì)組成

onecode表單系統(tǒng)是建立在OneCode低代碼引擎的一個(gè)重要組成部分，由設(shè)計(jì)器，表單引擎、以及領(lǐng)域設(shè)計(jì)工具組成。

（1）可視化設(shè)計(jì)器

設(shè)計(jì)器是表單系統(tǒng)統(tǒng)一入口，onecode 設(shè)計(jì)器本身是一套開(kāi)放的設(shè)計(jì)，用戶(hù)可以通過(guò)，OneCode語(yǔ)言指定擴(kuò)展。設(shè)計(jì)器，采用的是拖拽引擎 插件的構(gòu)造模型，用戶(hù)可以通過(guò)開(kāi)放的低代碼協(xié)議編寫(xiě)插件。支持JS和Java兩種擴(kuò)展語(yǔ)言。樣式構(gòu)建提供了標(biāo)準(zhǔn)CSS3編輯器，支持事件動(dòng)作以及函數(shù)動(dòng)態(tài)擴(kuò)展。支持自定義函數(shù)庫(kù)擴(kuò)展，支持阿里字體圖片等資源庫(kù)。

可視化設(shè)計(jì)器

（2）表單引擎

表單引擎由三塊自成體系的可獨(dú)立部署運(yùn)行的部分組成。前端引擎負(fù)責(zé)界面建模并按低代碼協(xié)議協(xié)議生成標(biāo)準(zhǔn)JSON，中后臺(tái)OneCode通過(guò)讀取標(biāo)準(zhǔn)JSON協(xié)議，完成后端的視圖建模，合并DSM后端服務(wù)建模系統(tǒng)，完成完整的后端服務(wù)建模應(yīng)用，通過(guò)代碼工程完成前后端一體的出碼應(yīng)用。JDSCloud是OneCode的協(xié)同支撐系統(tǒng)，除了常規(guī)的資源代碼空間管理外，提供了獨(dú)立的沙箱運(yùn)行環(huán)境。為OneCode 提供工程化的仿真版本Ops等服務(wù)。

表單組成

?

（3）DDD領(lǐng)域設(shè)計(jì)工具

OneCode-DSM(以下簡(jiǎn)稱(chēng)DSM)工具集是建立是以O(shè)neCode低代碼引擎為基礎(chǔ)專(zhuān)注于低代碼建模應(yīng)用的高階建模工具。在OneCode引擎中，出了為普通用戶(hù)提供無(wú)代碼的拖動(dòng)設(shè)計(jì)器，低代碼的業(yè)務(wù)邏輯編排器，之外還提供了供專(zhuān)業(yè)業(yè)務(wù)領(lǐng)域?qū)＜业氖褂玫腄SM建模工具。

領(lǐng)域工具

?

?

三，運(yùn)行原理

(1) 拖拽自定義頁(yè)面

用戶(hù)通過(guò)，拖拽完成頁(yè)面建模序列化為按標(biāo)準(zhǔn)協(xié)議序列化JSON文件,后端OneCode服務(wù)支撐系統(tǒng)解析JSON文件并混合DSM建模信息以及后端服務(wù)邏輯后，通過(guò)混合編譯，通過(guò)代碼工廠指定出碼模板，完成前后端一體的編譯文件。

運(yùn)行原理

?

原型原理

?

?

(2) 從數(shù)據(jù)數(shù)據(jù)庫(kù)構(gòu)建

?

?

(3) 手工撰寫(xiě)OneCode代碼

OneCode 本身基于JAVA語(yǔ)言體系，是在Java Spring 注解基礎(chǔ)上的一套擴(kuò)展子集，混合編譯引擎器通過(guò)擴(kuò)展注解構(gòu)建完整的Domain模型，通過(guò)讀取標(biāo)準(zhǔn)Spring 注解完成普通Web數(shù)據(jù)交付及調(diào)度過(guò)程，通過(guò)Domin域模型動(dòng)態(tài)渲染JS文件輸出為JSON交付給前端引擎構(gòu)建頁(yè)面。

?

四，設(shè)計(jì)器功能介紹

（1）功能介紹

（2）物料庫(kù)

?

"物料"：低代碼引擎的核心目的之一是建設(shè)跨行業(yè)的低代碼框架，而每個(gè)行業(yè)由于其應(yīng)用的領(lǐng)域不同，使用的人員以及方法方式不同，在一些底層組件方面會(huì)有會(huì)有加大差距。比如：政府業(yè)務(wù)中會(huì)大量使用的非規(guī)則表單元素，企業(yè)應(yīng)用中各個(gè)行業(yè)自有的圖標(biāo)體系，物聯(lián)網(wǎng)行業(yè)大量的設(shè)備圖標(biāo)圖片以及實(shí)時(shí)聯(lián)網(wǎng)圖。

（3）組件庫(kù)

組件定義：可以用于低代碼平臺(tái)的組件，包含了搭建體驗(yàn)增強(qiáng)配置，可以在設(shè)計(jì)器中 進(jìn)行拖拽、配置等操作。有兩種分類(lèi)方式：按照?qǐng)鼍翱梢苑譃榛A(chǔ)組件、業(yè)務(wù)組件、圖 表組件、布局組件和復(fù)合組件等。通常用戶(hù)可以自主完成相關(guān)設(shè)定，并根據(jù)業(yè)務(wù)特點(diǎn)在視圖引擎中進(jìn)行自行擴(kuò)展（后續(xù)章節(jié)中會(huì)演示實(shí)際注冊(cè)示例）

?

（4）樣式體系

DOM樹(shù)透視樣式盒

DOM樹(shù)透視

?

?

配圖示例代碼

{ "alias":"BuildTreeTreeView", "key":"xui.UI.TreeView", "host":this, "properties":{ "name":"BuildTreeTreeGrid", "items":[ { "borderType":"none", "caption":"JAVA樹(shù)", "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" } } }

動(dòng)態(tài)樣式盒

代碼配置示例

{ "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樹(shù)", "dynDestory":false, "hidden":false, "id":"getBuildTree", "imageClass":"bpmfont bpmgongzuoliuxitongpeizhi", "tagVar":{ } } ], "iniFold":false, "dynDestory":true }, "events":{ //獲取數(shù)據(jù) "onGetContent":{ "actions":[ { "args":[ "{page.ReloadChild.setQueryData()}", null, null, "{args[1].tagVar}", "" ], "desc":"設(shè)置擴(kuò)展參數(shù)", "method":"setQueryData", "redirection":"other:callback:call", "target":"ReloadChild", "type":"control" } ] },//數(shù)據(jù)項(xiàng)選擇 "onItemSelected":{ "actions":[ { "args":[ "{args[1].id}" ], "conditions":[ { "symbol":"non-empty", "right":"", "conditionId":"_nonempty_{args[1].className}", "left":"{args[1].className}" } ], "desc":"刪除存在頁(yè)", "method":"removeItems", "target":"BuildTreeTab", "type":"control" } ] } } }

（6）動(dòng)作編排框架

? 在OneCode白皮書(shū)中參數(shù)了OneCode工作原理，其中有一個(gè)章節(jié)就是允許用戶(hù)將邏輯片段以及動(dòng)作函數(shù)序列化為特定的JSON字符串。動(dòng)作（邏輯）概覽則是針對(duì)邏輯片段可視化的入口工具。打開(kāi)任意頁(yè)面便可以直觀的將該頁(yè)面的代碼片段以直觀的方式展現(xiàn)出來(lái)。并且可以直接插入，編輯事件，修改動(dòng)作。同時(shí)也可以在調(diào)試期動(dòng)態(tài)的中斷、跳出終止等功能。

?

?

五，表單設(shè)計(jì)

（1）頁(yè)面布局

表單系統(tǒng)，依然采用的是，OneCode低代碼引擎的布局結(jié)構(gòu)。使用工程結(jié)構(gòu)來(lái)完成項(xiàng)目代碼的管理及復(fù)用。

?在主體布局上默認(rèn)采用的表格布局，支持行列的自由拖動(dòng)，以及行列合并操作。

?

允許以，整行、整列、獨(dú)立單元格獨(dú)立設(shè)置樣式。

?

OneCode也提供了，常用的嵌套布局容器組件。方便進(jìn)行復(fù)雜頁(yè)面組合。

?

（2）表單輸入

基于OneCode的通用輸入控件，是經(jīng)過(guò)OneCode封裝后統(tǒng)一輸出的，包括前端用戶(hù)展現(xiàn)控制以及OneCode后端定義語(yǔ)法及DSM工具。

?

?

?

?

?

?

?

?

?

輸入域事件

?

?

（3）表單數(shù)據(jù)交互

表單交互AJAX設(shè)定

?

?后端聚合配置

?

?

?

（六）數(shù)據(jù)列表

在表單系統(tǒng)中，列表是用戶(hù)交互一個(gè)基礎(chǔ)入口。除了承擔(dān)數(shù)據(jù)查詢(xún)及展現(xiàn)的功能外，還是多表多行數(shù)據(jù)批量提交的一個(gè)入口。

（1）列表設(shè)計(jì)器

設(shè)計(jì)器概覽圖

?

?

屬性集合

?

(2) OneCode列表領(lǐng)域模型

列表OneCode 轉(zhuǎn)換對(duì)比

?

?

領(lǐng)域模型分析

?

?

?

?

常用菜單注解

注解	位置	示例
@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	分頁(yè)欄	@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; } }

?

行子域

?

?

?

注解名稱(chēng)	用途	實(shí)例
@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 = "類(lèi)型", required = true) private ColType type = ColType.VARCHAR; @CustomAnnotation(caption = "長(zhǎng)度", required = true) private Integer length = 20; @CustomAnnotation(caption = "數(shù)字精度") 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）配置運(yùn)行實(shí)例：

?

配置項(xiàng)示例：

?

OneCode配置

?

按鈕綁定服務(wù)OneCode代碼

?

（七）圖表設(shè)計(jì)

（1）圖表設(shè)計(jì)器

?

（2）圖表配置器

?

?

（3）動(dòng)作交互

?

（4）公式編輯器查詢(xún)綁定

?

（5）動(dòng)畫(huà)綁定

?

（6）FusionChartsXT

?

?

?

(7) ECharts

?

?

(8) SVGPaper

?

）

?

（八）流程

表單應(yīng)用，最常見(jiàn)的一種形式是與工作搭配獨(dú)立完成交互。onecode 流程系統(tǒng)是一個(gè)獨(dú)立的微服務(wù)系統(tǒng)，表單引擎通過(guò)webapi完成流程的調(diào)度功能。

（1）流程設(shè)計(jì)器

?

（2）流程配置

?

?

?

1， 單人、多人、會(huì)簽等常見(jiàn)需求

2， 辦理方式支持，搶占、順序、并行等多種方式

3， 辦理方式支持、辦理人、傳閱人、代簽等常見(jiàn)方式。

（3）表單流轉(zhuǎn)

?

?

（4）表單按鈕權(quán)限

?

?

?

?

（九）數(shù)據(jù)源處理

oneCode數(shù)據(jù)源采用的是DDD模型的倉(cāng)儲(chǔ)模型設(shè)計(jì)。并通過(guò)代碼工廠配置模版完成出碼設(shè)計(jì)。

(1) 倉(cāng)儲(chǔ)概覽

?

(2) 數(shù)據(jù)庫(kù)配置

?

?

(3) 實(shí)體關(guān)系

?

倉(cāng)儲(chǔ)建模的一個(gè)核心目的是將結(jié)構(gòu)化的數(shù)據(jù)轉(zhuǎn)變?yōu)槊嫦驅(qū)ο蟮哪Ｊ?，而這其中非常重要的一點(diǎn)則是實(shí)體關(guān)系的處理，DSM設(shè)計(jì)中針對(duì)數(shù)據(jù)庫(kù)表允許用戶(hù)在導(dǎo)入數(shù)據(jù)庫(kù)后再次進(jìn)行實(shí)體關(guān)系建模，將數(shù)據(jù)庫(kù)表按 1:1 ,1:N, N:N模型建立關(guān)系。完成建模后在出碼的過(guò)程中會(huì)根據(jù)業(yè)務(wù)模板設(shè)定，進(jìn)行實(shí)體模型的轉(zhuǎn)變，在實(shí)體代碼中以 @Ref 關(guān)系標(biāo)簽完成建模應(yīng)用。

數(shù)據(jù)庫(kù)模型關(guān)系	實(shí)體關(guān)系	實(shí)體注解配置
1:N	一對(duì)多	@Ref(ref = RefType.o2m)
N:N	多對(duì)多	@Ref(ref = RefType.m2m)
1:1	一對(duì)一	@Ref(ref = RefType.o2o)
	引用	@Ref(ref = RefType.ref)
	查找	@Ref(ref = RefType.)

(4) 倉(cāng)儲(chǔ)建模模板

?

?

（5）倉(cāng)儲(chǔ)模型常用注解

注解名稱(chēng)	用途	實(shí)例
@DBTable	數(shù)據(jù)庫(kù)表映射配置主要包含了，數(shù)據(jù)源標(biāo)識(shí)，表名稱(chēng)以及主鍵信息	@DBTable(configKey="fdt"，tableName="FDT_LINGDAO",primaryKey="uuid")
@DBField	數(shù)據(jù)庫(kù)字段配置	@DBField(cnName="創(chuàng)建時(shí)間",length=0,dbType=ColType.DATETIME,dbFieldName="createtime")
@Uid	實(shí)體字段，在數(shù)據(jù)庫(kù)實(shí)體中一般標(biāo)識(shí)為主鍵，在DDD模型中作為唯一值	@Uid
@Pid	父級(jí)組件字段，通常在關(guān)系實(shí)體中用于標(biāo)識(shí)父級(jí)對(duì)象的主鍵	@Pid
@CustomAnnotation	常用實(shí)體注解,注解屬性中會(huì)包括，字段的展示類(lèi)型，可讀屬性，展示注解等。	@CustomAnnotation(caption="職務(wù)")
@Caption	標(biāo)題注解一般作用在表格行數(shù)據(jù)的展示中作為默認(rèn)顯示字段，如Person （人員對(duì)象中）會(huì)將name作為默認(rèn)展示選項(xiàng)	@Caption
@Ref	實(shí)體關(guān)系屬性	@Ref(ref = RefType.m2m, view = ViewType.grid)
@APIEventAnnotation	API服務(wù)注解，是對(duì)外服務(wù)的標(biāo)識(shí)。添加該注解后，在后續(xù)的模型建模中會(huì)對(duì)應(yīng)轉(zhuǎn)換為Web API服務(wù)	@APIEventAnnotation(bindMenu = {CustomMenuItem.search})

（十）工程發(fā)布總覽

（1）發(fā)布服務(wù)組成

?

工程發(fā)布，需要三方面的資源做支撐，分別是用戶(hù)通過(guò)設(shè)計(jì)完成的頁(yè)面及功能交互，通過(guò)特定的特定的出碼模板完成相應(yīng)的技術(shù)棧前端轉(zhuǎn)換形成的前端頁(yè)面目錄。而后端應(yīng)用則根據(jù)則是用戶(hù)通過(guò)基礎(chǔ)數(shù)據(jù)建模形成的領(lǐng)域模型文件，這些領(lǐng)域模型文件通常會(huì)按照，資源庫(kù)、支撐域工程域等模型方式來(lái)獨(dú)立打包方便后期版本管理及個(gè)體更新。另外第三塊則是方便工程啟動(dòng)運(yùn)行以及訪問(wèn)控制，對(duì)外暴露監(jiān)控等相關(guān)的工程配置信息。

（2）發(fā)布配置

發(fā)布本地

?

發(fā)布遠(yuǎn)程

?

工程配置

?

（3）前端庫(kù)

?

?

（4）后端服務(wù)

（5）通用域打包