Dooring可視化之從零實現動態表單設計器

作者：徐小夕 2021-10-28 08:42:31

開發前端

之前筆者有寫過一篇如何設計動態表單配置平臺的文章，但是由于筆者電腦問題代碼丟失，所以后期重新實現了一套表單設計器，并優化了之前的設計方式，特地做一下總結和復盤。

[[431676]]

前言

你將收獲

動態表單開發的一般思路
可視化領域中的表單引擎
從零實現一款動態表單設計器
利用H5-Dooring開發一款表單設計平臺

正文

按照習慣，我們先看看表單設計器實現的效果展示：

上圖中我們將表單設計器集成到了H5-Dooring中，使其可以實現拖拽生成表單。

其次我們可以根據右邊的配置項，動態的添加某個表單組件或或者修改組件字段和數據源。在配置好表單之后我們還可以定制表單提交的api接口地址，以便實現用戶數據的可溯源性。

在開發之前，我們先分析一下動態表單設計的一般實現思路。

動態表單開發的一般思路

1. 靜態化配置列表

靜態化配置列表是最傳統的表單配置方式之一，基本思路就是利用母表來生成配置項，進而實現表單配置。類似于以下方式：

早期的網站配置就是類似于這種呢方案實現的，比如說我們要定制網站的主色，網站某些組件是否可見，是一種比較簡單的方式。但是缺點是每增加一個配置屬性，都要開發人員重新編寫一個字段配置代碼，這種方式在表單開發中非常不靈活，而且對代碼層有強依賴性，所以只適合做小型配置系統。比如個人網站，簡單的自定義表單。

2. 基于json schema的動態表單配置

基于json schema的動態表單配置有兩種實現方案，一種就是支持在線修改json文件從而實現定制化，另一種就是完全無代碼操作，但是前提都需要提供一套通用的表單模版。類似于如下案例：

此種方案可以實現基本的表單自治。也是本文主要實現的方案。至于在線編寫json文件的方案。筆者之前也也過成熟的方案，具體可以參考：

基于jsoneditor二次封裝一個可實時預覽的json編輯器組件(react版)

3. 支持在線coding的混合式表單設計

支持在線編程的混合式表單設計方案是終極方案，也是目前流行的無代碼化平臺的思想之一。一方面它提供了基于json schema的動態表單配置，對于一些強定制的，需要在線設計組件方案的模式，采用在線編程，實時打包成動態組件的方式，最后根據平臺的組件約定來實現組件庫的方式。如下圖所示：

在線代碼編輯可以使用react-codemirror2或者 react-monaco-editor插件來實現。至于在線打包，我們用nodejs完全可以實現，筆者在做Dooring項目的在線下載代碼時就用到了該方案，感興趣的可以了解一下。

可視化領域中的表單引擎

可視化領域一方面強調的是圖形(可視化)的設計，一方面是動態表單。比如說我們想傻瓜式的改變一張圖的數據，屬性，交互等，我們需要通過表單這一橋梁來實現：

所以我們需要設計一款適合公司產品的“表單引擎”，來動態根據圖形組件的類型渲染不同表單配置。這塊思想也是表單設計器要解決的問題之一。在下面的文章中我們會詳細介紹實現過程。

從零實現一款動態表單設計器

在實現表單設計器之前，我們先來整理一下思路和需求。在筆者的最初草圖中，它長這樣：

從草圖中我們可以提取到如下任務信息：

定義一套表單組件庫
確定表單全局屬性配置
實現表單操作curd(增刪查改)

我們這里總結了幾個常用的表單組件如下：

單選框
復選框
單行文本
多行文本
下拉框
文件上傳
日期框
數值輸入框

以上這些基本滿足我們的日常開發需求，其次我們還可以開發數據源表單組件，列表組件，比如dooring實現的那樣：

類似的還有顏色面板這些，我們可以更具業務需求自行定制。

在完成表單組件庫之后，我們就需要根據配置項動態渲染了。也有兩種實現思路，一種就是類似于多條件判斷，如下：

{ 
  item.type === 'Number' && 
  <Form.Item label={item.name} name={item.key}> 
    <InputNumber min={1} max={item.range && item.range[1]} step={item.step} /> 
  </Form.Item> 
} 
{ 
  item.type === 'Text' && 
  <Form.Item label={item.name} name={item.key}> 
    <Input /> 
  </Form.Item> 
} 
{ 
  item.type === 'TextArea' && 
  <Form.Item label={item.name} name={item.key}> 
    <TextArea rows={4} /> 
  </Form.Item> 
}

這樣做雖然可行，也有很多成熟系統采用該方案，但是一旦表單變多，比如一個頁面有幾十個甚至上百個表單項，那么我們將渲染m * n次(m為表單組件類型數，n為配置項個數)。另一種方式筆者看來是比較優雅的，可以將復雜度降低到O(n),也就是筆者常用的對象法。思路大至如下：將表單組件的類型作為對象的屬性，屬性值為對應的表單組件，這樣遍歷的時候只需要對應上對象的具體類型即可。代碼如下：

// 維護表單控件， 提高form渲染性能 
const BaseForm = { 
    "Text": (props) => { 
        const { label, placeholder, onChange } = props 
        return <Cell title={label}> 
                    <Input type="text" placeholder={placeholder} onChange={onChange} />  
               </Cell> 
    }, 
    "Number": (props) => { 
        const { label, placeholder, onChange } = props 
        return <Cell title={label}> 
                    <Input type="number" placeholder={placeholder} onChange={onChange} />  
               </Cell> 
    } 
} 
 
//  動態渲染表單 
{ 
    formData.map((item, i) => { 
        let FormItem = BaseForm[item.type] 
        return <div className={styles.formItem} key={i}> 
                  <FormItem {...item} /> 
              </div> 
    }) 
}

是不是很優雅呢?后期我們只需要在BaseForm里維護表單組件即可，而且還可以基于BaseForm對表單進行包裝，實現動態刪除，編輯等功能。如下：

包裝后的代碼如下：

<div> 
  <div className={styles.disClick}><FormItem {...item} /></div> 
  <div className={styles.operationWrap}> 
      <span onClick={handleEditItem}><EditOutlined /></span> 
      <span onClick={handleDelItem}><MinusCircleOutlined /></span> 
  </div> 
</div>

接下來我們看看表單的全局屬性，通過實際分析我們可以知道表單有如下外觀：