企業級自定義表單引擎解決方案（四）——視圖模型管理

• .net core研發的低代碼自定義表單引擎，采用強大的規則引擎将所有的業務串聯起來的，和其他低代碼平台是有本質的差別的，目标是完全解放繁瑣的CRUD工作，其他很多稱為低代碼的不管界面介紹得多炫酷，本質上還是解決複制粘貼的問題。
• 正常的業務，在需求以及資料庫設計完成之後，可能就僅僅在界面上幾分鐘的配置就能夠完成所有的開發、測試、部署工作，最後使用者直接使用，完全解放繁瑣的CRUD工作。
• 表單模闆能夠快速建立正常的業務子產品，系統盡量将正常的業務功能做成模闆，友善快速地建立業務子產品功能，選擇一個模闆之後，會将模闆對應的表單、子表單、子視圖、控件等所有自定義表單相關的定義全部自動建立出來。

實體模型，視圖模型，表單模型，表單規則引擎，這幾部分内容是自定義表單核心内容，之前的文章已經介紹了實體模型，這篇文章介紹一下視圖模型管理（實體模型設計請參考：企業級自定義表單引擎解決方案（三）——實體對象模型設計）。

　　我們平時見到的一些管理系統或者多數程式員做的一些CRUP操作，比如我們接觸最多的清單管理、表單Form管理、樹管理等，這些功能在一個背景管理系統中最為常見也最為繁瑣，對于一個背景管理類的系統來說，可能60%左右都在做這樣一些繁瑣且無聊的工作，其實這些功能我們可以進行歸納總結，進行抽象，清單管理無非就是各種基本查詢字段定義、進階查詢定義、基礎的一些功能按鈕、比如新增或者導入導出Excel等、列管理、排序分頁等，對于表單Form管理，無非就是字段排序顯示、字段用什麼控件顯示、儲存時驗證、新增還是修改等，這些功能我們可以按照大的方面抽象，實際使用的時候，要什麼功能就打開什麼功能，更者我們可以做成模版，常用的功能根據模版自動生成，配置的大多數過程都可以省略。

　　實體模型管理就是對這些具體典型功能的抽象，真實業務根據實體模型動态生成具體業務功能子產品。

　　先上一張整體設計圖

低代碼視圖模型

視圖關鍵字段說明：

　　ViewType（視圖分類）：視圖分為清單視圖、表單視圖、樹視圖、報表面闆等，後面還可以靈活的添加其他類型的視圖。

　　Version（版本）：每一次修改視圖的任何資訊，都會重新生成一個版本号，浏覽器存儲視圖資訊，每打開一個頁面，會将本地表單版本和視圖版本傳遞到服務端比較版本号，如果版本号發生變化，重新請求視圖資料（一般系統互動後，視圖及表單定義資訊很少會發生變化）。

　　PropertySettings（視圖屬性）：Json資料，存儲前端的一些樣式，比如清單視圖，存儲前端表格控件的一些屬性，前端渲染時，讀取屬性并應用到控件中，一般需要結合具體使用的前端架構設定，我這裡使用的是ant vue。

RelationInfos（關聯資訊）：視圖可能會關聯其他視圖，比如表單視圖中，某個字段的資料從其他視圖擷取，這裡會把關聯視圖的Id關聯到此視圖中。

Rules（規則）：Json資料，定義視圖的規則，如點選編輯按鈕，打開對話框、擷取表單資料、将表單資料綁定到表單視圖中，規則是非常核心的一塊内容，後續單獨介紹。

WrapInfos（視圖包裝器）：視圖用顯示在對框框中，視圖顯示在特定樣式Div中或者Box中，前端在渲染視圖時，如果有包裝器，會用包裝器包裝視圖之後再渲染。

Controls（視圖控件）：不同的視圖控件顯示的區域不一樣，需結合具體的視圖定義控件，前端渲染不同視圖時，讀取不同類型的視圖控件，在特定的區域顯示視圖控件。

Extension1、2、3、4（擴充字段）：對于不同的視圖，存儲不同的内容，比如清單視圖，存儲查詢資訊、視圖特定列定義資訊、表單視圖則存儲表單行定義資訊。根據不同的視圖類型使用不同的擴充字段。

清單視圖（ListView）

清單視圖及為傳統的表格管理，表格包含表格内容、查詢、進階查詢、分頁、操作按鈕、列格式化顯示、行按鈕等的管理

清單視圖正常資料渲染過程： 定義頁碼改變事件，事件執行的規則為調用後端的PageList方法，參數從頁碼控件、隐藏參數查詢、普通查詢、進階查詢、表格表頭排序動态拼接，組裝成查詢參數，然後再執行綁定資料規則（擷取參數過程清單視圖已經封裝，直接配置使用即可），将查詢結果綁定到ant表格控件。另外，在視圖加載、查詢按鈕點選、進階查詢查詢、點選排序表頭、彈出子表單或子視圖對話框确認事件中，都會直接綁定到執行頁碼改變事件，進而執行資料渲染過程。（主要是用規則引擎将所有動作串聯起來，規則引擎參見規則引擎部分文檔） 。單表的資料一般比較好設定，多表關聯時，需要定義别名以及關聯Sql語句等，如一對一關系配置執行後端方法配置：{"aplicationCode":"Default","isTransaction":true,"methods":[{"ruleId":1,"objectName":"OTO1","methodId":"MultiPageList","transfors":[{"transType":"query","aliasInfos":"OTO1:a;OTO2:b","joinInfos":"OTO1 a LEFT JOIN OTO2 b ON a.Id=b.Id"}]}]}，多表查詢映射出來的資料每個字段都會增加“_别名”處理，如id_a,userName_b等。

屬性設定

屬性正常設定即為設定ant的table控件，另外附加擴充的一些自定義設定，ant的Table設定參考Table元件設定，其他一些擴充字段如下：

1. tableDiv

   設定a-table外層的div樣式，預設樣式為：'min-height: 560px'

2. rowKey

   前端表格的行主鍵，一般情況為"id"，可以不設定，當查詢出來的清單資料主鍵不為id是，需要設定，如：id_a

3. tableType

   自定義擴充字段，多數情況不需要設定，如果是樹清單，需要設定為“tree”

4. columns

   參見Table元件設定，定義表格列

5. colOperateWidth

   定義清單操作列的寬度，當清單操作控件或者清單更多控件定義了，清單中的操作列才會顯示。

6. excelTemplate

   導入導出Excel配置模版資訊，參見附錄【導入導出Excel模版】，如：[{"name":"電話","field":"phoneNumber","fieldType":5,"isRequred":true,"validateType":99,"validateValue":"[{'customerVal':'Phone','trigger':'blur'}]"},{"name":"學曆","field":"education","fieldType":5,"validateType":11}]

7. excelDicts

   字段字典映射集合資料，表示Excel中用到的資料字典映射資訊，定義哪個字段用到哪個資料字典，如：[{"dict":"sex","field":"sex"},{"dict":"edu","field":"education"},{"dict":"title","field":"positionalTitle"}]

8. excelName

   導入導出Excel檔案名稱，如：人員管理測試Excel資料

9. uniqKey

   導入時唯一字段檢測（這裡的字段為資料庫字段，注意不是轉換為駝峰命名之後的字段，多個字段組合用;号隔開），如：UserName。

10. eval_query

    執行後端方法擷取查詢參數後執行的JS腳本，自定義擴充處理查詢條件，本質上執行eval函數，特殊場景使用，比如執行查詢之前，将查詢條件做自定義特殊處理，如：界面查詢條件隻查詢年月，到後端映射為時間段查詢sqlWhere.children.forEach(r=>{if(r.field==='checkTime'){r.value=[r.value.format('yyyy-MM')+'-01 00:00:00',r.value.add(1,'month').format('yyyy-MM')+'-01 00:00:00']}})，參考附錄：【自定義查詢條件】

11. defaultSorting

    預設後端查詢方法排序，如：checkTime desc,stockCheckType asc等

列管理

對清單區域特定列資料的格式化顯示

• 綁定字段

  查詢出來的資料特定字段

• 元件名稱

  col-tbl-text或者col-tbl-icon

• 編輯元件

  未實作此功能，原本定義為清單視圖可直接在表格中編輯，現取消此功能。

• 元件屬性設定

1. 格式化顯示特定行列資料，可使用的上下文參數：text（特定行特定列的原始文本）、record（特定行的整行資料對象），index（行索引）
2. col-tbl-text控件主要是針對文本格式的轉換，動态調用js的eval方法，定義eval_render值，内容為動态執行的js語句，如： {"eval_render":"text.substring(0, 19).replace('T', ' ')"} ，将時間字段格式化顯示。

3. col-tbl-icon控件主要是針對字典或者需要定義圖示顯示的列，主要填寫内容：icons(圖示格式顯示)、texts(文本格式顯示)、dict(資料字典名稱)、isMulti(資料字典時使用，是否多選擇，資料字典多選時，不填寫icons，構造出"字典項1;字典項2"的内容)、showTitle(是否顯示文本)，icons的配置參考前端網站a-icon的配置,texts配置為span的配置。

   ),showTitle(是否顯示文本)幾個字段，icons的配置參考前端網站a-icon的配置,texts配置為span的配置。

4. 例1（隻顯示圖示，不顯示文本，其中key為字段值，config為根據特定值做特定的配置）：{"icons":[{"key":"female","config":{"type":"woman","style":"font-size:14px;font-weight:600;color:rgb(255, 112, 112);","title":"女"}},{"key":"male","config":{"type":"man","style":"font-size:14px;font-weight:600;color:#13c2c2;","title":"男"}}],"showTitle":false}
5. 例2（同時顯示圖示和文本，key為空，辨別比對任意文本）：{"icons":[{"key":"","config":{"type":"phone","style":"font-size:14px;font-weight:600;color:#13c2c2;"}}],"texts":[{"key":"","config":{"style":"font-size:14px;font-weight:600;color:#13c2c2;"}}],"showTitle":true}

6. 例3（資料字典，不帶圖示，格式化顯示）：{"texts":[{"key":"master","config":{"style":"font-size: 14px;font-weight: 400;color: rgb(19 113 194);"}},{"key":"doctor","config":{"style":"font-size: 14px;font-weight: 400;color: rgb(70 194 19);"}},{"key":"","config":{"style":"font-size: 14px;font-weight: 400;color: rgb(194 189 19);"}}],"dict":"edu","showTitle":true}

   特殊說明：如果通過模闆自動生成，如果字段類型是bool,date,datetime，或者定義了dict，系統會自動添加格式化列顯示。

查詢（查詢涉及到各種控件的使用，參見Wike文檔【自定義表單控件使用說明】描述）

查詢主要定義執行後端方法PageList或者ListWhere前，根據使用者輸入的查詢條件，動态構造查詢樹對象，參見Wike附錄【自定義查詢條件】

• 查詢類型

  普通查詢(清單查詢區域看到的查詢控件)、進階查詢(點選查詢區域最右側“更多”按鈕顯示的進階查詢功能)、隐藏查詢(使用者看不到，通過規則引擎的方式給清單查詢指派)

• 查詢字段

  字段名稱

• 允許查詢的條件

  普通查詢和隐藏查詢條件隻填寫一個，與後面的預設條件一緻，進階查詢條件可以選擇多個供使用者選擇使用，選擇查詢條件時，需要适配使用的控件以及字段類型，比如a-input控件選擇查詢條件為In，這種在運作時會報錯。

• 預設查詢條件

  單選

• 查詢源（已廢棄）

  配合元件使用，調用遠端方法，擷取元件需要的資料源，資料源統計傳回帶name和value字段的集合。

• 元件名稱：

1. 普通查詢見附錄【自定義表單控件使用說明】描述

2. 進階查詢

   進階查詢控件的使用方式與普通查詢比較類型，請參見 > 體驗網站> 控件綜合應用

TextBox，如果查詢條件為Between，則構造兩個文本框輸入，否則構造一個文本框輸入

SingleDropDown和MultipleDropDown，下拉單選或者下拉多選

TreeSingleDropDown和TreeMultipleDropDown，下拉單選或者下拉多選樹

SingleDropDownAndTextBox和MultipleDropDownAndTextBox，下拉單選或者下拉多選，允許使用者輸入查詢條件搜尋

SingleTile和Radio，瓦片和Radio單選

DateTime，如果查詢條件為Between，則構造日期範圍選擇控件，否則構造日期控件。

col-form-user，系統使用者查詢選擇控件

下拉多選的地方，查詢條件多半為In或者NotIN

編輯視圖（ItemView）

• 行管理

  比較好了解，比較簡單，隻需要定義排序集合，也可以定義行的Div樣式設定。

• 列管理

視圖行：列所在的行

列類型：Control，View或者Form，當選擇View或者Form時，在此列渲染子表單或者子視圖

對象Id：如果列類型為View或者Form，設定為View的Id或者Form的Id

驗證：如果是Control，可以定義驗證規則，參見附錄【表單驗證】，如：[ { "required": true, "message": "請填寫此項資料", "trigger": "blur" }]

綁定值：如果是Control，綁定到的object對象字段

屬性：這裡是ant-design的Item屬性設定，不是控件的屬性設定

Wrap資訊：參見【公共配置Wrap管理】

Label顯示：Lable顯示

Label屬性：一般不填寫，設定Label的屬性

控件和控件設定：見附錄【自定義表單控件使用說明】描述

樹視圖（TreeView）

同清單視圖配置基本相同，隻是規則執行後端方法時，執行的是TreeListWhere等樹相關的方法，另外界面的一些控件就沒有了，比如分頁，導入導出Excel等。基本的清單視圖了解之後，參考 > 示例網站 > 模闆運作時 > 單樹Tree_模闆

本地清單視圖（ListLocalView）

同清單視圖配置基本相同，隻是新增、修改、删除都是針對本地表格資料進行的操作，不執行後端方法，參見 > 示例網站 > 模闆運作時 > 本地單表_模闆，以及參考 > 示例網站 > 模闆運作時 > 1對多2Collapse_模闆

低代碼自定義表單引擎絕對不是簡單幾個字就能夠概括的，是一個非常龐大技術知識體系。

低代碼自定義表單引擎、流程引擎、QT開發架構，整整花了兩年的時間，當然都是工作之外的時間來做的，真的很辛苦，當然自己的出發點也沒那麼高尚，想要給正在到來的大齡程式員自己找到另外的一條出路，也是自己想要深入的方向，也給想要往這方面發展的同行一些自己的微網誌之力，自定義表單引擎已經開源出來了，後續會不斷優化；QT開發架構也肯定會開源出來，裡面也用到了很多低代碼的思想，QT開發根本沒有像樣的開源開發架構（我同學是QT界的大佬，之前說有很多項目做，是以也是花費很多時間和精力在上面的，結果疫情也好、經濟環境也好，并不理想）；工作流引擎這塊暫時沒有打算開源，後續看情況。

後續會陸續在頭條上寫一些文章，直接看代碼基本很難整體了解這塊的設計，文章前面部分主要是一些設計思想，後面會偏具體的一些技術以及場景應用。

冠未去，美帝相向，于華夏之子，吾輩當自強。

wike文檔位址：https://gitee.com/kuangqifu/sprite/wikis/pages

後端開源位址：https://gitee.com/kuangqifu/sprite

前端開源位址：https://gitee.com/kuangqifu/spritefronts