DevOps項(xiàng)目中動(dòng)態(tài)表單的發(fā)展史
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展示給用戶,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)用戶修改表單中某一選項(xiàng)時(shí),表單顯示的內(nèi)容有所變化,如圖顯示,當(dāng)用戶選擇不同的介質(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)容取決于用戶選擇了哪個(gè)代碼庫(kù),此處就需要前端檢測(cè)用戶對(duì)代碼庫(kù)的選擇,然后將選定后的數(shù)據(jù)作為參數(shù)向后端發(fā)送請(qǐng)求查詢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)管理所有的屬性表單都是固定的,不支持用戶做任何自定義修改,但是,這無(wú)法滿足市場(chǎng)的需求,不同的應(yīng)用場(chǎng)景對(duì)任務(wù)管理的要求是不一樣的,比如原有的工作項(xiàng)僅支持故事、任務(wù)、Bug三種類(lèi)型的工作項(xiàng)管理,每種類(lèi)型的屬性也是固定的,這樣的用戶體驗(yàn)較差,某些場(chǎng)景下用戶可能需要更多類(lèi)型的工作項(xiàng),用戶更喜歡將“故事”叫做“需求”,等等這一系列的需求,經(jīng)過(guò)討論分析,我們決定使用動(dòng)態(tài)表單來(lái)實(shí)現(xiàn)這一功能。而原有的動(dòng)態(tài)表單設(shè)置,雖然能滿足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)自定義

發(fā)表評(píng)論
請(qǐng)輸入評(píng)論內(nèi)容...
請(qǐng)輸入評(píng)論/評(píng)論長(zhǎng)度6~500個(gè)字
最新活動(dòng)更多
-
6月20日立即下載>> 【白皮書(shū)】精準(zhǔn)測(cè)量 安全高效——福祿克光伏行業(yè)解決方案
-
7月3日立即報(bào)名>> 【在線會(huì)議】英飛凌新一代智能照明方案賦能綠色建筑與工業(yè)互聯(lián)
-
7月22-29日立即報(bào)名>> 【線下論壇】第三屆安富利汽車(chē)生態(tài)圈峰會(huì)
-
7.30-8.1火熱報(bào)名中>> 全數(shù)會(huì)2025(第六屆)機(jī)器人及智能工廠展
-
7月31日免費(fèi)預(yù)約>> OFweek 2025具身機(jī)器人動(dòng)力電池技術(shù)應(yīng)用大會(huì)
-
免費(fèi)參會(huì)立即報(bào)名>> 7月30日- 8月1日 2025全數(shù)會(huì)工業(yè)芯片與傳感儀表展
推薦專題
- 1 AI 眼鏡讓百萬(wàn) APP「集體失業(yè)」?
- 2 大廠紛紛入局,百度、阿里、字節(jié)搶奪Agent話語(yǔ)權(quán)
- 3 深度報(bào)告|中國(guó)AI產(chǎn)業(yè)正在崛起成全球力量,市場(chǎng)潛力和關(guān)鍵挑戰(zhàn)有哪些?
- 4 上海跑出80億超級(jí)獨(dú)角獸:獲上市公司戰(zhàn)投,干人形機(jī)器人
- 5 一文看懂視覺(jué)語(yǔ)言動(dòng)作模型(VLA)及其應(yīng)用
- 6 國(guó)家數(shù)據(jù)局局長(zhǎng)劉烈宏調(diào)研格創(chuàng)東智
- 7 下一代入口之戰(zhàn):大廠為何紛紛押注智能體?
- 8 百億AI芯片訂單,瘋狂傾銷(xiāo)中東?
- 9 Robotaxi新消息密集釋放,量產(chǎn)元年誰(shuí)在領(lǐng)跑?
- 10 格斗大賽出圈!人形機(jī)器人致命短板曝光:頭腦過(guò)于簡(jiǎn)單