FormMaking 1.3.0 新版發佈，自定義表單支持數據源配置

簡介

FormMaking 是基於 Vue 的可視化表單設計器，賦能企業實現低代碼開發模式；幫助開發者從傳統枯燥的表單代碼中解放出來，更多關注業務，快速提高效率，節省研發成本。在OA系統、考試系統、報表系統、流程管理等系統中應用廣泛。基於 vue 和 element-ui 實現，使用了最新的前端技術棧，內置了 i18n 國際化解決方案，支持二次開發，支持自定義組件引入。

提供 表單設計器（MakingForm）和表單生成器（GenerateForm）兩個組件，通過表單設計器快速設計出表單頁面，生成可配置json和可直接運行的代碼，使用表單生成器快速渲染出表單頁面，並提供了豐富的操作API。

技術文檔

• 官網：http://form.making.link
• 演示：http://form.making.link/sample
• 文檔：https://www.yuque.com/ln7ccx/ntgo8q
• 聯繫我們：http://form.making.link/contact

更新內容

數據源

這次更新主要爲表單設計器加上了數據源，讓表單和後端數據間實現了方便的交互，通過配置數據源可以方便的拿到後端的數據，數據源配置也是採用通用的接口配置模式。

可以通過下方動圖來感受下數據源如何配置：

詳細的配置方法可以查看官方文檔 配置數據源。

設計器初始化配置

表單設計器可以在初始化時進行一些全局的配置，比如使用的ui庫、表單的樣式表、數據源等。

<template>
  <fm-making-form ref="makingForm" clearable upload preview generate-code generate-json
    :global-config="globalConfig"
  >
  </fm-making-form>
</template>

<script>
export default {
  data() {
    return {
      globalConfig: {
        // 可以將表單預設的樣式放入到設計器中
        styleSheets: '.a .el-form-item__label{color: red;}',
        dataSource: [
          {
            key: 'getoptions', // 指定的唯一值
            name: 'Get Options', // 數據源名稱，唯一值
            url: 'http://tools-server.making.link/api/new/options', // 請求接口地址
            method: 'GET',
            auto: true, // 是否表單初始化時發送請求
            responseFunc: 'return res.data', // 數據處理函數內容
            headers: {}, // 數據請求頭部，可選
            params: {}, // 數據請求參數，可選
            
            // 當 method == 'GET' 時，params會以查詢參數方式提交，其它情況在 body 中提交。
          }
        ]
      }
    }
  }
}
</script>

更多的配置可以查看API Global Config Options。

其它已知問題修復與優化

根據用戶反饋的問題進行優化與修復。

最後的話

FormMaking 會一直進行功能完善，幫助企業快速實現表單的自定義，如果大家有任何疑問，建議和需求都可以聯繫我們。