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)求查詢(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)管理所有的屬性表單都是固定的,不支持用戶做任何自定義修改,但是,這無(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è)字
圖片新聞
-
機(jī)器人奧運(yùn)會(huì)戰(zhàn)報(bào):宇樹(shù)機(jī)器人摘下首金,天工Ultra搶走首位“百米飛人”
-
存儲(chǔ)圈掐架!江波龍起訴佰維,索賠121萬(wàn)
-
長(zhǎng)安汽車(chē)母公司突然更名:從“中國(guó)長(zhǎng)安”到“辰致科技”
-
豆包前負(fù)責(zé)人喬木出軌BP后續(xù):均被辭退
-
字節(jié)AI Lab負(fù)責(zé)人李航卸任后返聘,Seed進(jìn)入調(diào)整期
-
員工持股爆雷?廣汽埃安緊急回應(yīng)
-
中國(guó)“智造”背后的「關(guān)鍵力量」
-
小米汽車(chē)研發(fā)中心重磅落地,寶馬家門(mén)口“搶人”
最新活動(dòng)更多
-
10月23日火熱報(bào)名中>> 2025是德科技創(chuàng)新技術(shù)峰會(huì)
-
10月23日立即報(bào)名>> Works With 開(kāi)發(fā)者大會(huì)深圳站
-
10月24日立即參評(píng)>> 【評(píng)選】維科杯·OFweek 2025(第十屆)物聯(lián)網(wǎng)行業(yè)年度評(píng)選
-
11月27日立即報(bào)名>> 【工程師系列】汽車(chē)電子技術(shù)在線大會(huì)
-
12月18日立即報(bào)名>> 【線下會(huì)議】OFweek 2025(第十屆)物聯(lián)網(wǎng)產(chǎn)業(yè)大會(huì)
-
精彩回顧立即查看>> 【限時(shí)福利】TE 2025國(guó)際物聯(lián)網(wǎng)展·深圳站
推薦專(zhuān)題
- 1 人形機(jī)器人,正狂奔在批量交付的曠野
- 2 宇樹(shù)機(jī)器人撞人事件的深度剖析:六維力傳感器如何成為人機(jī)安全的關(guān)鍵屏障
- 3 解碼特斯拉新AI芯片戰(zhàn)略 :從Dojo到AI5和AI6推理引擎
- 4 AI版“四萬(wàn)億刺激”計(jì)劃來(lái)了
- 5 2025年8月人工智能投融資觀察
- 6 7 a16z最新AI百?gòu)?qiáng)榜:硅谷頂級(jí)VC帶你讀懂全球生成式AI賽道最新趨勢(shì)
- 8 Manus跑路,大廠掉線,只能靠DeepSeek了
- 9 一家被嚴(yán)重低估的國(guó)產(chǎn)AI巨頭
- 10 地平線的野心:1000萬(wàn)套HSD上車(chē)