DevOps項目中動態表單的發展史
isRequired用于配制表單校驗,標識該項是否為必填項;
valueProvider是一個非常重要的配置,也相對復雜,他是一個JSON串,對于下拉框這種需要發送請求向服務端獲取下拉框所需要的選項的表單項至關重要,同時也關系到表單聯動的實現,其中的url代表向服務端發送請求所所使用的url是什么;
valueField表示獲取到的展示數據用哪一項來作為id;
labelField表示哪一項來作為label展示給用戶,multiSelect代表下拉框是否可以多選;
eventName表示當這一項的值發生改變后,會觸發前端某個寫好的事件做相應的處理,eventName的值就是事件名,而事件的定義由前端來實現。


表單聯動主要有兩種方式:
第一種是當用戶修改表單中某一選項時,表單顯示的內容有所變化,如圖顯示,當用戶選擇不同的介質策略時,顯示的表單項也是不同的。
針對這一功能,我們目前采用的解決方案是,當表單項改變時,觸發通過eventName設置的處理事件,當數據項發生改變時,針對不同的數據情況顯示或隱藏表單項,這一功能需要前端事先寫好處理事件然后將事件名告知后端,后端將事件名設置到需要的表單項上去。

第二種是數據聯動,表單中包含代碼庫和branch/tag/commitId兩個輸入項,顯然后者的顯示內容取決于用戶選擇了哪個代碼庫,此處就需要前端檢測用戶對代碼庫的選擇,然后將選定后的數據作為參數向后端發送請求查詢branch/tag/commitId項的列表,為了解決這一問題,要求在配置動態表單的數據獲取url時將需要的參數以冒號加對應表單項的字段名形式配置,示例:/repo/commit?repoId=:repoId。前端會將表單解析為一個完整的數據對象,其中每一個屬性代表一個表單項,屬性名采用attrId,解析后的數據對象如圖所示,動態表單會將數據對象完整的傳遞給每一個表單項,當repoId發生改變時,branchId的對應的表單項會監聽到數據對象的變化,并對其屬性進行遍歷,如果有其url屬性所需的屬性時會重寫branchId的url屬性并且向服務端發送新的請求獲取數據源。


前面說過isRequired屬性用于設置是否為必填,前端也是僅在表單項上加上了required(VUE框架下)的配置而已,并沒有做更多的復雜校驗。
二、問題和新需求
隨著DevOps市場需求升級,我們收到了一個足以引起DevOps動態表單徹頭徹尾改變的需求——工作項動態表單化配置,項目管理是DevOps的重要功能之一,6.1GA版本前的任務項管理所有的屬性表單都是固定的,不支持用戶做任何自定義修改,但是,這無法滿足市場的需求,不同的應用場景對任務管理的要求是不一樣的,比如原有的工作項僅支持故事、任務、Bug三種類型的工作項管理,每種類型的屬性也是固定的,這樣的用戶體驗較差,某些場景下用戶可能需要更多類型的工作項,用戶更喜歡將“故事”叫做“需求”,等等這一系列的需求,經過討論分析,我們決定使用動態表單來實現這一功能。而原有的動態表單設置,雖然能滿足CICD的任務配置,但它如果用于工作項管理配置,其缺點也是不可忽視的。因此我們決定重新制作一款更強大更靈活的動態表單。

新的動態表單需要具備如下幾個主要基本功能:
支持可視化頁面配置表單
布局自定義
表單項類型自定義
表單校驗自定義
表單聯動自定義
請輸入評論內容...
請輸入評論/評論長度6~500個字
最新活動更多
- 1 AI狂歡遇上油價破百,全球股市還能漲多久? | 產聯看全球
- 2 OpenAI深夜王炸!ChatGPT Images 2.0實測:中文穩、細節炸,設計師慌了
- 3 6000億美元估值錨定:字節跳動的“去單一化”突圍與估值重構
- 4 Tesla AI5芯片最新進展總結
- 5 連夜測了一波DeepSeek-V4,我發現它可能只剩“審美”這個短板了
- 6 熱點丨AI“瑜亮之爭”:既生OpenClaw,何生Hermes?
- 7 AI界的殺豬盤:9秒刪庫跑路,全員被封號,還繼續扣錢!
- 8 2026,人形機器人只贏了面子
- 9 DeepSeek降價90%:價格屠夫不是身份,是戰略
- 10 AI Infra產業鏈卡在哪里了?


分享













