三、動態(tài)表單進階

為了簡化用戶操作，我們使用了可拖拽的頁面配置形式，用戶可以拖拽需要的控件或布局器到區(qū)域進行表單布局設計，還提供了可以手動配置每一個控件或布局器的屬性、數(shù)據(jù)源、樣式、事件（支持簡單代碼輸入）功能。

布局方面我們支持用戶以布局器（網(wǎng)格式）布局、標簽頁、折疊快、分割線四種形式，利用它們基本可以實現(xiàn)所有的表單布局。布局器是最基礎的布局組件，支持按照縱向列的形式來配置表單布局，配置好每列數(shù)并將所需的表單項拖進對應列即可。布局器是可以嵌套的，這樣一來，用戶可以自行配置各種形式的頁面布局。此外的標簽頁、折疊塊、分割線都是一些輔助的展示手段，這里不在多加說明。

關于表單項類型，新的動態(tài)表單除支持全部的基礎控件類型外，還支持將配置好的表單項導出為自定義控件以便復用。

剩下的問題就是表單校驗自定義和表單聯(lián)動自定義了，新的動態(tài)表單不再僅僅支持必填校驗，還支持用戶手動輸入正則表達式校驗，同時我們抽象了一些常用的正則表達式為默認選項供用戶選擇。自定義表單聯(lián)動上我們沿用了初版動態(tài)表單的思路，通過事件和數(shù)據(jù)模型監(jiān)聽實現(xiàn)，在此基礎上做了更加規(guī)范的處理，使用戶可手動修改配置。

完成配置后，就是對動態(tài)表單配置的解析，面對如此多的表單項類型，大量的if else代碼顯然是不合理的，我們改用配置文件的形式，將表單類型和對應控件一個個登記在表單項字典里，然后在渲染時通過component（VUE框架下）直接渲染。對于校驗規(guī)則，我們選擇在渲染表單前對動態(tài)表單配置進行遍歷，提取所有的校驗規(guī)則，在最層統(tǒng)一添加校驗，不再單獨的表單項上做校驗處理。此外還有下拉框等數(shù)據(jù)源需要向服務端發(fā)送請求的特殊控件，我們也封裝了基類去對用戶配置的url、參數(shù)等作統(tǒng)一規(guī)范化的處理，受篇幅限制這里不做詳細描述。

以上是普元DevOps6．1GA版本在動態(tài)表單方面做的完善，除動態(tài)表單，我們還增加了工作項狀態(tài)流轉自定義配置、工作項類型自定義、工作項增刪改表單自定義等一些列功能，保證用戶在工作項管理上實現(xiàn)完完全全的自定義，讓用戶真正的可以按照實際應用場景自定義工作項的管理方案。

關于作者：夏夏，前端工程師，參與普元DevOps產(chǎn)品開發(fā)，以及微服務、容器云等產(chǎn)品開發(fā)，負責前端頁面設計、架構搭建等工作。善于架構搭建、組件封裝及相關算法設計。