前言

最近將公司的舊表單配置平臺重構為低代碼表單配置平臺，這里記錄一下這個過程的設計和思路，不涉及具體的代碼；另外這篇文章基本只涉及前端部分，也不涉及與后端數據交互部分。

需求

固化的表單配置平臺 -> 靈活的表單配置平臺

功能	新平臺	原平臺	備注
動態化配置	√	√	可根據不同業務配置不同的字段與表單項
關聯數據類與表	√	√	關聯后端數據
拖拽配置	√	×	原平臺只支持通過點擊按鈕新增或修改表單
可視化配置	√	×	所見即所得
靈活布局	√	×	原平臺只支持簡單的分組與占寬，不支持復雜的布局與嵌套

低代碼表單結構示意圖

思路

如上圖所示，要實現適合現代 Web 框架下的低代碼表單平臺，有如下大致思路

組件層面

需要有對應的原子物料組件（表單，布局…）

抽象層面

需要有組件對應的 schema（屬性抽象）

物料區，渲染區，設置區

在發生交互時會發生聯動（綠色箭頭），組件抽象后表現為各自 schema 的變動

根據當前的 schema 渲染對應的布局與組件

關鍵點

原子組件庫

需要有基礎的原子組件，包括表單組件和布局組件，大部分表單組件可復用舊平臺已開發的組件

schema

需要對組件和表單的 schema 進行定義和抽象，確保 schema 可以涵蓋組件和表單的渲染，拖拽生成及屬性設置等功能

物料區

對組件實現可拖拽功能的包裹，拖拽時需要復制對應物料組件到渲染區的對應位置

渲染區

• 本質是表單組件；

• 布局組件需支持嵌套；

• 共有設計態和正常態兩種狀態；

• 當處于設計態時：

  • 內部的布局組件可拖放；
  • 組件可選中
  • 選中組件驅動設置區的渲染

設置區

• 根據選中組件渲染

• 本質是表單

• 表單項需與選中組件各屬性對應，驅動選中組件的屬性改變

實現細節

原子組件庫

組件接口需要規范化，例如，使用 v-model 綁定數據，style 傳入樣式，等

schema

• 每個組件具有 id，name，compName，props 公共字段

• 容器組件和表單組件額外具有 children 屬性，可以嵌套其他組件

• 組件的 schema 結構，如下：

  interface CompSchema {// 組件id，具有唯一性id: string;// 顯示名稱name: string;// 組件名稱，PascalCase格式compName: string;// 組件屬性props: Record<string, any>;// 子組件children: CompSchema[];
  }
  

• 組件的屬性設置表單 schema：用于在渲染區選中該組件時，在編輯區呈現出對應表單的 schema，結構同上，但嵌套的層級和屬性可能會比較復雜

拖拽庫

可使用第三方或自行設計，但需要滿足以下特性

• 數據驅動，傳入數據列表，可渲染出可拖拽節點

• 暴露出拖拽響應的事件和方法，便于做特定的處理

• 支持不同組件間的拖拽通信，例如從物料面板到渲染面板的拖拽通信

物料區

• 使用第三方或自研的拖拽庫，傳入組件的 schema 作為可拖拽節點，形成基本的可拖拽物料面板

• 物料區往渲染區拖拽節點時，復制選中組件的 schema（特別是 id 需要重新生成，避免 id 不唯一）到渲染區

渲染區的狀態

渲染區分為設計態和正常態

• 方案：

  • 方案 1：在組件 schema 傳入屬性作為標識

    • 優點：思路較為簡單
    • 缺點：設計態相關邏輯會侵入到組件內部，盡管正常態時不需要這個邏輯

  • 方案 2：設計態與正常態完全隔離，渲染面板由正常態圖層+設計態圖層組件，互相隔離

    • 優點：設計態相關邏輯與正常態完全解耦
    • 缺點：思路較為復雜，可以考慮設計態 Iframe+設計圖層的方案

• 最終方案

  基于方案 1 的改良，開發 RendererWrapper 包裹組件，在該組件區分設計態與正常態，并開發設計態的交互

渲染區的交互邏輯

• 渲染區拖拽：基于實際業務與優化交互體驗的角度，渲染區不同組件之間的拖拽，不是完全無限制的，有如下限制

  • 規則 1：基本的布局組件為柵格布局，由 Row 與 Col 組件組成
  • 規則 2：表單頂層布局固定為 Row
  • 規則 3：Row 只能包含 Col 組件，Col 組件可嵌套其他組件，嵌套通過組件 schema 放置進父組件 schema.children 屬性體現
  • 規則 4：除了 Row 與 Col 組件，其他布局組件與原子組件，拖拽進入渲染區時，按照規則 3，均會被 Col 自動包裹，體現為對應的 schema 自動被 Col 的 schema 包裹
  • 規則 5：原子組件不可嵌套子組件，等
  • 以上的規則和限制可在拖拽庫提供的方法中進行實現

• 渲染區選中組件：

  • 在 RendererWrapper 高亮該組件
  • 在 store 里保存選中組件的 schema
  • 根據選中組件的名稱，由schema可知，獲取到對應組件的設置區表單 schema，渲染設置區表單；表單值也由選中組件的 schema 驅動

設置區

• 本質是表單組件，由渲染區組件對應的設置表單 schema 驅動渲染
• 設置區表單值發生輸入變化時，驅動當前選中的組件的 schema 發生變化，完成組件 schema 響應屬性的修改，也驅動設置區表單值的修改

保存

• 將當前整體的表單 schema 保存到后臺，形成一條表單配置記錄；前端展示表單時通過 id 獲取到 schema，即可展示配置的表單