【表單系統(tǒng)】OneCode在復(fù)雜場(chǎng)景下的表單解決方案
當(dāng)前位置：點(diǎn)晴教程→知識(shí)管理交流
→『 技術(shù)文檔交流 』
前言表單在我們的日常工作中經(jīng)常會(huì)用到，一個(gè)優(yōu)質(zhì)的表單可以提高我們的工作效率，完成一些更多的業(yè)務(wù)，提高產(chǎn)品體驗(yàn)，在實(shí)際應(yīng)用中，根據(jù)不同場(chǎng)景表單、表格、圖表，其中表單涉及到聯(lián)動(dòng)、校驗(yàn)、布局等復(fù)雜場(chǎng)景，經(jīng)常是開(kāi)發(fā)者的需要耗費(fèi)精力去解決的點(diǎn)。本文作為《OneCode表單系統(tǒng)》介紹的續(xù)篇，將著重介紹OneCode在復(fù)雜場(chǎng)景下的表單解決方案。 一，復(fù)雜表單系統(tǒng)難點(diǎn)1，數(shù)據(jù)動(dòng)態(tài)聯(lián)動(dòng)數(shù)據(jù)聯(lián)動(dòng)是表單系統(tǒng)中最常見(jiàn)的動(dòng)態(tài)組件，在組件定義過(guò)程中會(huì)預(yù)先設(shè)定好關(guān)聯(lián)規(guī)則，當(dāng)規(guī)則中對(duì)應(yīng)的元素發(fā)生變化時(shí)會(huì)處罰與之相關(guān)聯(lián)的數(shù)據(jù)自動(dòng)執(zhí)行變化。我們將這一類(lèi)的組件根據(jù)場(chǎng)景不同進(jìn)行了以下3個(gè)方面的細(xì)分。 （1）常用字典表聯(lián)動(dòng)
用戶(hù)在做表單錄入時(shí)針對(duì)一些數(shù)據(jù)量比較大選擇項(xiàng)時(shí)通常會(huì)引導(dǎo)用戶(hù)通過(guò)分類(lèi)來(lái)完成， 例如在錄入用戶(hù)居住地時(shí)，會(huì)依次完成省、市、區(qū)三級(jí)的選擇這期間就是一個(gè)基本的聯(lián)動(dòng)關(guān)系，在不同的應(yīng)用場(chǎng)景中級(jí)聯(lián)的選項(xiàng)以及對(duì)應(yīng)的字典數(shù)據(jù)也會(huì)有所不同。我們將這一類(lèi)以分類(lèi)引導(dǎo)為主的關(guān)系型數(shù)據(jù)輸入統(tǒng)稱(chēng)為“常用字典表聯(lián)動(dòng)”； （2）表格計(jì)算聯(lián)動(dòng)
在實(shí)際應(yīng)用中還有一類(lèi)表格計(jì)算型數(shù)據(jù)聯(lián)動(dòng)也是非常常見(jiàn)的比如：在財(cái)務(wù)、建筑等系統(tǒng)中各種數(shù)據(jù)匯總表，在醫(yī)療系統(tǒng)中患者的藥品匯總單，等等都會(huì)涉及到表單輸入項(xiàng)的一些匯總求和等及時(shí)計(jì)算，我們將這一類(lèi)的聯(lián)動(dòng)統(tǒng)一歸類(lèi)為“表格計(jì)算”。 （3）自定義公式聯(lián)動(dòng)
在表單的實(shí)際應(yīng)用場(chǎng)景中，同樣的數(shù)據(jù)錄入往往會(huì)因?yàn)?，輸入的人員角色不同，權(quán)限不同以及表單數(shù)據(jù)狀態(tài)不同，而表現(xiàn)出不同的狀態(tài)，這些跟具體的業(yè)務(wù)場(chǎng)景以及數(shù)據(jù)內(nèi)容相關(guān)的數(shù)據(jù)聯(lián)動(dòng)，在實(shí)際開(kāi)發(fā)中一般會(huì)選擇類(lèi)似于exelc公式的動(dòng)態(tài)DSL語(yǔ)法來(lái)完成一些小型的腳本邏輯嵌入，我們將這一類(lèi)的聯(lián)動(dòng)需求統(tǒng)稱(chēng)為：“自定義公式聯(lián)動(dòng)”。 2， 數(shù)據(jù)效驗(yàn)在大多數(shù)的表單系統(tǒng)中面向的用戶(hù)是一些非專(zhuān)業(yè)的IT人員，在設(shè)計(jì)輸入選項(xiàng)時(shí)為避免用戶(hù)的輸入錯(cuò)誤需要針對(duì)用戶(hù)輸入的數(shù)據(jù)格式、大小、范圍等進(jìn)行一些基礎(chǔ)的校驗(yàn)，規(guī)范數(shù)據(jù)采集，避免數(shù)據(jù)問(wèn)題造成數(shù)據(jù)無(wú)效。在表單系統(tǒng)設(shè)計(jì)方面，一般會(huì)根據(jù)業(yè)務(wù)對(duì)象的數(shù)據(jù)類(lèi)型自動(dòng)完成一些基礎(chǔ)類(lèi)型的校驗(yàn)，同時(shí)根據(jù)業(yè)務(wù)的一些特殊場(chǎng)景也需要用戶(hù)自定義一些業(yè)務(wù)效驗(yàn)規(guī)則。
（1）基礎(chǔ)類(lèi)型效驗(yàn) 在基礎(chǔ)數(shù)據(jù)效驗(yàn)方面，通常會(huì)優(yōu)先一些基礎(chǔ)類(lèi)型的校驗(yàn)，比如：文本、數(shù)字、日期甚至在前端輸入控件上使用一些特定的輸入方式，規(guī)范用戶(hù)輸入，同時(shí)再輔助一些大小范圍等業(yè)務(wù)定義輔助校驗(yàn)。 （2）自定義效驗(yàn) 在實(shí)際的業(yè)務(wù)場(chǎng)景中，都需要根據(jù)具體的業(yè)務(wù)場(chǎng)景來(lái)擴(kuò)展數(shù)據(jù)效驗(yàn)。比如在一些建筑類(lèi)表單中運(yùn)用的土方計(jì)算、醫(yī)療應(yīng)用中專(zhuān)有的血壓、體溫等等數(shù)據(jù)都會(huì)根據(jù)，數(shù)據(jù)對(duì)象的不同而表現(xiàn)為不同的效驗(yàn)規(guī)則。 3，融合展現(xiàn)表單的基本功能是負(fù)責(zé)數(shù)據(jù)的輸入輸出，在輸入端面向數(shù)據(jù)錄入者提供交互頁(yè)面，在數(shù)據(jù)展示端則負(fù)責(zé)面向數(shù)據(jù)的接受者展示數(shù)據(jù)的結(jié)果。隨著業(yè)務(wù)場(chǎng)景的多樣化以及業(yè)務(wù)數(shù)據(jù)應(yīng)用的逐步深入。數(shù)據(jù)端輸入要求的精度以及便捷度在逐步提高，在數(shù)據(jù)的接收展示端也越來(lái)越多的要求數(shù)據(jù)呈現(xiàn)的多樣性。簡(jiǎn)單數(shù)據(jù)數(shù)字?jǐn)?shù)據(jù)表格已經(jīng)很難以承載日益復(fù)雜的數(shù)據(jù)模型展現(xiàn)。這就要求表單在數(shù)據(jù)展現(xiàn)層面支持多樣化的結(jié)果展示。這其中最為常用的幾塊包括：圖形、圖標(biāo)混排，更高層次的展現(xiàn)數(shù)據(jù)；將數(shù)據(jù)結(jié)果直接以版式文件模式展示方便最終結(jié)果的成文歸檔。支持?jǐn)?shù)據(jù)錄入、展示為一體的嵌套混搭展示，提供一體化的輸入輸入載體。 （1）圖形、圖表混排
（2）版式文件格式支持 在國(guó)內(nèi)很多的業(yè)務(wù)數(shù)據(jù)系統(tǒng)，來(lái)源于傳統(tǒng)的業(yè)務(wù)的無(wú)紙化辦公應(yīng)用，
（3）錄入展示混搭嵌套
4，智能輸入輔助在表單應(yīng)用中，有很大一部分是在高頻高強(qiáng)度輸入的強(qiáng)度使用的，比如醫(yī)療系統(tǒng)中醫(yī)師的病例診斷錄入，工商稅務(wù)等系統(tǒng)中直接面向個(gè)人或商戶(hù)的“窗口應(yīng)用”。這些應(yīng)用在設(shè)計(jì)上通常都需要一些常用場(chǎng)景的預(yù)設(shè)錄入，在操作者掌握一定的規(guī)則之后便可快捷方便的完成常用場(chǎng)景的快捷輸入以及數(shù)據(jù)的批量錄入。這就對(duì)表單系統(tǒng)提出了更高的要求。
（1）專(zhuān)業(yè)詞匯字典
（2）模糊智能推薦檢索
（3）個(gè)性化交互推薦操作
二，OneCode簡(jiǎn)介OneCode表單是基于OneCode開(kāi)源低代碼引擎，開(kāi)發(fā)的一款。面向復(fù)雜應(yīng)用的表單可視化解決方案產(chǎn)品。 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ù)。
（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建模工具。
三，OneCode標(biāo)準(zhǔn)表單輸入控件（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工具。
四，OneCode圖表支持1，圖表配置器
2， FusionChartsXT
(3) ECharts
(4) SVGPaper
五，OneCode 前端設(shè)計(jì)器UI組件擴(kuò)展（1）設(shè)計(jì)器功能介紹
（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"
}
}
}代碼配置示例 {
"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)作編排框架
動(dòng)作設(shè)計(jì)概覽 在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)的中斷、跳出終止等功能。
動(dòng)作概覽入口
動(dòng)作概覽功能 六，OneCode前后端一體化建模擴(kuò)展（1）運(yùn)行原理用戶(hù)通過(guò)，拖拽完成頁(yè)面建模序列化為按標(biāo)準(zhǔn)協(xié)議序列化JSON文件,后端OneCode服務(wù)支撐系統(tǒng)解析JSON文件并混合DSM建模信息以及后端服務(wù)邏輯后，通過(guò)混合編譯，通過(guò)代碼工廠指定出碼模板，完成前后端一體的編譯文件。
運(yùn)行原理
原型原理
(2) 一體化建模流程
（3）Java原生語(yǔ)言擴(kuò)展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è)面。
（4）領(lǐng)域建模工具
OneCode語(yǔ)法編輯
屬性配置
表單交互AJAX設(shè)定
后端聚合配置
（5）配置運(yùn)行實(shí)例：
配置項(xiàng)示例：
OneCode配置
按鈕綁定服務(wù)OneCode代碼
七，工程發(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ā)布遠(yuǎn)程
工程配置
（3）前端庫(kù)
（4）后端服務(wù)
（5）通用域打包
該文章在 2024/2/28 10:08:13 編輯過(guò) |
關(guān)鍵字查詢(xún)
相關(guān)文章
正在查詢(xún)... 
|
400 186 1886
