訂閱
糾錯(cuò)
加入自媒體

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

2021-01-19 11:17
EAWorld
關(guān)注

isRequired用于配制表單校驗(yàn),標(biāo)識(shí)該項(xiàng)是否為必填項(xiàng);

valueProvider是一個(gè)非常重要的配置,也相對(duì)復(fù)雜,他是一個(gè)JSON串,對(duì)于下拉框這種需要發(fā)送請(qǐng)求向服務(wù)端獲取下拉框所需要的選項(xiàng)的表單項(xiàng)至關(guān)重要,同時(shí)也關(guān)系到表單聯(lián)動(dòng)的實(shí)現(xiàn),其中的url代表向服務(wù)端發(fā)送請(qǐng)求所所使用的url是什么;

valueField表示獲取到的展示數(shù)據(jù)用哪一項(xiàng)來(lái)作為id;

labelField表示哪一項(xiàng)來(lái)作為label展示給用戶(hù),multiSelect代表下拉框是否可以多選;

eventName表示當(dāng)這一項(xiàng)的值發(fā)生改變后,會(huì)觸發(fā)前端某個(gè)寫(xiě)好的事件做相應(yīng)的處理,eventName的值就是事件名,而事件的定義由前端來(lái)實(shí)現(xiàn)。

表單聯(lián)動(dòng)主要有兩種方式:

第一種是當(dāng)用戶(hù)修改表單中某一選項(xiàng)時(shí),表單顯示的內(nèi)容有所變化,如圖顯示,當(dāng)用戶(hù)選擇不同的介質(zhì)策略時(shí),顯示的表單項(xiàng)也是不同的。

針對(duì)這一功能,我們目前采用的解決方案是,當(dāng)表單項(xiàng)改變時(shí),觸發(fā)通過(guò)eventName設(shè)置的處理事件,當(dāng)數(shù)據(jù)項(xiàng)發(fā)生改變時(shí),針對(duì)不同的數(shù)據(jù)情況顯示或隱藏表單項(xiàng),這一功能需要前端事先寫(xiě)好處理事件然后將事件名告知后端,后端將事件名設(shè)置到需要的表單項(xiàng)上去。

第二種是數(shù)據(jù)聯(lián)動(dòng),表單中包含代碼庫(kù)和branch/tag/commitId兩個(gè)輸入項(xiàng),顯然后者的顯示內(nèi)容取決于用戶(hù)選擇了哪個(gè)代碼庫(kù),此處就需要前端檢測(cè)用戶(hù)對(duì)代碼庫(kù)的選擇,然后將選定后的數(shù)據(jù)作為參數(shù)向后端發(fā)送請(qǐng)求查詢(xún)branch/tag/commitId項(xiàng)的列表,為了解決這一問(wèn)題,要求在配置動(dòng)態(tài)表單的數(shù)據(jù)獲取url時(shí)將需要的參數(shù)以冒號(hào)加對(duì)應(yīng)表單項(xiàng)的字段名形式配置,示例:/repo/commit?repoId=:repoId。前端會(huì)將表單解析為一個(gè)完整的數(shù)據(jù)對(duì)象,其中每一個(gè)屬性代表一個(gè)表單項(xiàng),屬性名采用attrId,解析后的數(shù)據(jù)對(duì)象如圖所示,動(dòng)態(tài)表單會(huì)將數(shù)據(jù)對(duì)象完整的傳遞給每一個(gè)表單項(xiàng),當(dāng)repoId發(fā)生改變時(shí),branchId的對(duì)應(yīng)的表單項(xiàng)會(huì)監(jiān)聽(tīng)到數(shù)據(jù)對(duì)象的變化,并對(duì)其屬性進(jìn)行遍歷,如果有其url屬性所需的屬性時(shí)會(huì)重寫(xiě)branchId的url屬性并且向服務(wù)端發(fā)送新的請(qǐng)求獲取數(shù)據(jù)源。

前面說(shuō)過(guò)isRequired屬性用于設(shè)置是否為必填,前端也是僅在表單項(xiàng)上加上了required(VUE框架下)的配置而已,并沒(méi)有做更多的復(fù)雜校驗(yàn)。

二、問(wèn)題和新需求

隨著DevOps市場(chǎng)需求升級(jí),我們收到了一個(gè)足以引起DevOps動(dòng)態(tài)表單徹頭徹尾改變的需求——工作項(xiàng)動(dòng)態(tài)表單化配置,項(xiàng)目管理是DevOps的重要功能之一,6.1GA版本前的任務(wù)項(xiàng)管理所有的屬性表單都是固定的,不支持用戶(hù)做任何自定義修改,但是,這無(wú)法滿(mǎn)足市場(chǎng)的需求,不同的應(yīng)用場(chǎng)景對(duì)任務(wù)管理的要求是不一樣的,比如原有的工作項(xiàng)僅支持故事、任務(wù)、Bug三種類(lèi)型的工作項(xiàng)管理,每種類(lèi)型的屬性也是固定的,這樣的用戶(hù)體驗(yàn)較差,某些場(chǎng)景下用戶(hù)可能需要更多類(lèi)型的工作項(xiàng),用戶(hù)更喜歡將“故事”叫做“需求”,等等這一系列的需求,經(jīng)過(guò)討論分析,我們決定使用動(dòng)態(tài)表單來(lái)實(shí)現(xiàn)這一功能。而原有的動(dòng)態(tài)表單設(shè)置,雖然能滿(mǎn)足CICD的任務(wù)配置,但它如果用于工作項(xiàng)管理配置,其缺點(diǎn)也是不可忽視的。因此我們決定重新制作一款更強(qiáng)大更靈活的動(dòng)態(tài)表單。

新的動(dòng)態(tài)表單需要具備如下幾個(gè)主要基本功能:

支持可視化頁(yè)面配置表單

布局自定義

表單項(xiàng)類(lèi)型自定義

表單校驗(yàn)自定義

表單聯(lián)動(dòng)自定義

聲明: 本文由入駐維科號(hào)的作者撰寫(xiě),觀點(diǎn)僅代表作者本人,不代表OFweek立場(chǎng)。如有侵權(quán)或其他問(wèn)題,請(qǐng)聯(lián)系舉報(bào)。

發(fā)表評(píng)論

0條評(píng)論,0人參與

請(qǐng)輸入評(píng)論內(nèi)容...

請(qǐng)輸入評(píng)論/評(píng)論長(zhǎng)度6~500個(gè)字

您提交的評(píng)論過(guò)于頻繁,請(qǐng)輸入驗(yàn)證碼繼續(xù)

  • 看不清,點(diǎn)擊換一張  刷新

暫無(wú)評(píng)論

暫無(wú)評(píng)論

    掃碼關(guān)注公眾號(hào)
    OFweek人工智能網(wǎng)
    獲取更多精彩內(nèi)容
    文章糾錯(cuò)
    x
    *文字標(biāo)題:
    *糾錯(cuò)內(nèi)容:
    聯(lián)系郵箱:
    *驗(yàn) 證 碼:

    粵公網(wǎng)安備 44030502002758號(hào)