DevOps項(xiàng)目中動態(tài)表單的發(fā)展史

2021-01-19 11:17

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

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

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

關(guān)于表單項(xiàng)類型，新的動態(tài)表單除支持全部的基礎(chǔ)控件類型外，還支持將配置好的表單項(xiàng)導(dǎo)出為自定義控件以便復(fù)用。

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

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

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

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

<上一頁 1 2 3