{"type":"doc","content":[{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"前言"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"對於 ToB 業務而言，隨着業務的不斷壯大，接入的客戶逐漸增加，相同頁面的差異化的需求越來越多，尤其是在表單層面，小到多一個字段少一個字段這種簡單的需求，大到整個頁面不變的只剩下一些基礎字段。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"一旦這種差異化需求隨着業務量的增長而膨脹起來。代碼中的 IF ELSE 越來越多，項目就越來越難以維護。基於這個問題，比較普遍的解決方案要麼是項目拆分，要麼相同項目的代碼分割。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這兩種方案都有維護成本比較大的弊端，那麼有沒有更好點的解決方案呢。本文就帶你瞭解一下動態化表單搭建。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"什麼是動態表單"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"先下個定義，動態表單是頁面根據管理端配置的不同的 Schema 結構，動態渲染出不同的表單項的表單。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"動態表單一般分兩個部分，管理端和渲染端。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"管理端配置表單項及相應的簡單交互產出 Schema 數據。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"渲染端根據 Schema 數據相應的渲染出不同的表單項並實現簡單的交互。大致流程如下。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/46\/4626bbe30e61ac26efb4369422b175aa.png","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"動態表單的實現"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"表單配置"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"對於 Schema 數據的配置，考慮到接入業務方的接入成本及維護成本。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"管理端採用了可拖拽式的所見即所得配置面板。這裏共分爲四個部分，備選組件面板，拖拽面板，組件屬性面板和表單屬性配置（視圖屬性）。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"具體實現如下圖："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/2d\/2db1664e6ed2e8e13774e88f58f4c4fc.webp","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"備選組件面板"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"左側備選組件欄裏的備選組件共分三種，容器組件，基礎組件，自定義組件。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"容器組件——是用來存放基礎組件的組件"},{"type":"text","text":"。例如表單組件，子表單組件，表格表單組件。這些組件都是內部可以存放其他子組件的組件。屬於容器組件。系統內置了 3 個容器組件，對於中臺系統而言，容器組件不會太多樣化。所以容器組件沒有做自定義組件的功能。當然後期如果需要的話也可以擴展出容器組件的自定義組件功能"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"基礎組件——就是普通的表單項"},{"type":"text","text":"。系統內置了 13 個基礎組件。這些組件都是基於 Antd 的 React 組件做的二次包裝"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"自定義組件——業務方經常出現一些個性化的表單項，例如某個輸入框後面加個鏈接跳轉之類的需求，對於這種組件，系統提供了自定義組件的註冊及配置功能"},{"type":"text","text":"。這樣業務方就可以自由的維護專屬於自己的業務表單組件了。同時也解放出表單系統維護者的時間。組件註冊同時也是一個更加輕量級的自定義組件模塊。因爲不同的組件需要設置不同的參數，所以該組件對應的右側屬性表單也應該是不同。這部分下文組件屬性部分會詳細說明"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"拖拽面板"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"拖拽面板就是維護組件展示關係的面板，同時提供拖拽排序、刪除、複製、預覽等功能。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"具體實現方案採用的是 React-DnD。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"組件配置"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"屬性配置面板本身就是個更加輕量級的動態表單實現。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"只是 Schema 由開發者直接寫死而沒有一個可配置的頁面而已（自定義組件註冊部分例外）。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"當在拖拽面板選中一個組件時，組件屬性配置面板會渲染出相應組件的可配置項表單， 這裏提供一下簡單的組件屬性配置面板的 Schema 供大家參考。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"[{\n label: '是否可見',\n code: 'visible',\n widget: 'switchBtn',\n initialValue: true\n},\n{\n label: '是否可編輯', \/\/ 標籤文案\n code: 'code', \/\/ 字段編碼\n widget: 'switchBtn', \/\/ 組件類型\n initialValue: true, \/\/ 初始值 默認可編輯\n hide: 'exp: visible === false', \/\/ 是否隱藏\n required: true \/\/ 是否必填\n}]\n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"細心的同學會發現 hide 字段寫了個表達式。這裏通過 "},{"type":"codeinline","content":[{"type":"text","text":"exp:"}]},{"type":"text","text":" 開頭作爲一個表達式的標識。表達式的可以使用的變量是屬性表單內的值。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"比如上面這個例子，visible 是上面定義了一個是否可見的字段。如果當前選中的這個組件不可見的話，是否可編輯本身就無從談起，所以直接隱藏掉。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"容器屬性"},{"type":"text","text":" 共有的屬性有標題、編碼、是否可見、以及容器結構是否對數據透明。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"前面三個好理解。容器結構是否對數據透明是什麼呢?"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"前面說過，我們的容器組件是可多層嵌套的，那問題來了，數據咋辦，表單嵌套會導致數據也跟着嵌套。所以這裏參考了阿里的 Formily 開源表單方案。使用一個 skip ，來使其對數據透明。即："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"{\n \"title\": \"表單\",\n \"type\": \"form\",\n \"fields\": [{\n \"name\": \"name\",\n \"label\": \"姓名\"\n }, {\n \"title\": \"子表單\",\n \"skip\": true, \/\/ 表單結構對數據透明\n \"name\": \"item\",\n \"type\": \"form\",\n \"fields\": [\n {\n \"name\": \"object\",\n \"label\": \"物品\"\n }, {\n \"name\": \"brand\",\n \"label\": \"品牌\"\n }\n ]\n }]\n}\n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"skip 爲 false 時返回的數據爲："}]},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"{\n \"name\": \"簡名\",\n \"item\": {\n \"object\": \"電腦\",\n \"brand\": \"Mac\"\n }\n}\n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"skip 爲 true 時返回的數據爲："}]},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"{\n \"name\": \"簡名\",\n \"object\": \"電腦\",\n \"brand\": \"Mac\"\n}\n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"組件屬性"},{"type":"text","text":" 分爲基本屬性和組件屬性，基本屬性是所有屬性共有的。標題，編碼，是否可見，是否必填等屬性都是基本屬性。組件屬性則是組件私有的屬性。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"比如 Select 組件會需要一個數據來源，以及該組件是否多選之類的。基本屬性直接寫死。組件私有屬性則通過遠程數據庫維護。自定義組件的註冊就需要涉及到這部分的數據管理。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"自定義組件的註冊表單如下："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/90\/90be4e1a1818de55c70300ef1c04dd8e.png","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"其中組件可配置屬性就是組件私有的屬性的定義，註冊時定義，配置該組件時賦值，渲染端渲染時應用。可配置屬性還需要支持表達式的填寫。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"比如某個組件需要遠程數據，url 提供了，但是參數需要取當前時間，這個時候就需要組件屬性支持表達式的解析或者少量代碼讀寫運行了。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這些屬性除了組件自定義屬性以外，還有組件默認值，組件自定義校驗，組件 onChange 事件。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"以自定義校驗爲例："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/22\/229cba06043224aad6f87381f2f96ca8.webp","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"表單屬性配置（視圖屬性）"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這部分在上圖中沒有顯示，是在組件屬性右側。表單屬性分兩部分，交互規則和接口綁定。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/b4\/b4874b1885e5cd0b0b97d0a3bdf7f0e8.png","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"交互規則"},{"type":"text","text":" 表單交互規則在表單級別綁定，而不是在字段級別。進行就近配置的目的，是爲了方便管理，進入一個表單配置，該表單的交互在右側一目瞭然。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"接口綁定"},{"type":"text","text":" 則是表單渲染過程中有可能涉及到一些遠程數據的讀取，比如默認值等。這部分數據的配置需要用到遠程數據。表單上綁定了接口之後，表單初始化之前先發請求獲取綁定接口的數據，相應的表單組件裏就可以使用到該數據進行初始化。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"管理端數據流轉"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"管理端的功能是構建出一個目標 Schema。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"每個備選組件都有基本信息和相應的組件可配置屬性信息。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"組件基本信息主要用於組件面板展現。組件可配置屬性需要在右側屬性配置時渲染成一個表單給使用者去配置，故而組件可配置信息又是一個簡化版的 Schema，這裏稱爲組件級 Schema。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在拖拽頁面中添加一個組件，通過解析組件的組件級 Schema 及組件放置位置給目標 Schema 添加一個組件數據。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"然後在拖拽頁面中選中該組件，右側屬性配置會相應渲染出組件級 Schema 所描述的表單給用戶配置填寫。用戶配置時直接修改目標 Schema 中相應選中組件的信息。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"數據流轉圖大致如下："}]},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/8b\/8b402489e256072f18767072e6581f65.webp","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"表單動態渲染"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"因爲表單頁面還會有各種定製化的需求，表單渲染端這裏採用組件的形式，提供了兩個組件，一個組件作爲表單頁面的外層包裹組件主要功能是發請求獲取相應的 schema.json 數據。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"另一個組件就是通過上層組件的數據渲染相應的表單。示例："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"import { FormPageWrap, MainForm } from '.\/index';\n@FormPageWrap({\n prefix: '\/api\/budget', \/\/ 業務方接口前綴\n getFormParams: (props) => { \/\/ 獲取表單結構參數\n return {};\n },\n getDataParams: (props) => { \/\/ 獲取表單回填數據參數\n return {};\n }\n})\nexport default class FormPage extends Component {\n render() {\n return (\n \n \/\/ 表單各種額外顯示內容\n