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展示給用戶(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)自定義

發(fā)表評(píng)論
請(qǐng)輸入評(píng)論內(nèi)容...
請(qǐng)輸入評(píng)論/評(píng)論長(zhǎng)度6~500個(gè)字
最新活動(dòng)更多
-
3月27日立即報(bào)名>> 【工程師系列】汽車(chē)電子技術(shù)在線大會(huì)
-
4月30日立即下載>> 【村田汽車(chē)】汽車(chē)E/E架構(gòu)革新中,新智能座艙挑戰(zhàn)的解決方案
-
5月15-17日立即預(yù)約>> 【線下巡回】2025年STM32峰會(huì)
-
即日-5.15立即報(bào)名>>> 【在線會(huì)議】安森美Hyperlux™ ID系列引領(lǐng)iToF技術(shù)革新
-
5月15日立即下載>> 【白皮書(shū)】精確和高效地表征3000V/20A功率器件應(yīng)用指南
-
5月16日立即參評(píng) >> 【評(píng)選啟動(dòng)】維科杯·OFweek 2025(第十屆)人工智能行業(yè)年度評(píng)選
推薦專(zhuān)題
- 1 UALink規(guī)范發(fā)布:挑戰(zhàn)英偉達(dá)AI統(tǒng)治的開(kāi)始
- 2 北電數(shù)智主辦酒仙橋論壇,探索AI產(chǎn)業(yè)發(fā)展新路徑
- 3 “AI寒武紀(jì)”爆發(fā)至今,五類(lèi)新物種登上歷史舞臺(tái)
- 4 降薪、加班、裁員三重暴擊,“AI四小龍”已折戟兩家
- 5 國(guó)產(chǎn)智駕迎戰(zhàn)特斯拉FSD,AI含量差幾何?
- 6 光計(jì)算迎來(lái)商業(yè)化突破,但落地仍需時(shí)間
- 7 東陽(yáng)光:2024年扭虧、一季度凈利大增,液冷疊加具身智能打開(kāi)成長(zhǎng)空間
- 8 地平線自動(dòng)駕駛方案解讀
- 9 封殺AI“照騙”,“淘寶們”終于不忍了?
- 10 優(yōu)必選:營(yíng)收大增主靠小件,虧損繼續(xù)又逢關(guān)稅,能否乘機(jī)器人東風(fēng)翻身?