介紹
FormMaking 是基于Vue的可視化表單設(shè)計(jì)器柜某，賦能企業(yè)實(shí)現(xiàn)可視化低代碼開發(fā)模式嗽元；幫助開發(fā)者從傳統(tǒng)枯燥的表單代碼中解放出來(lái)，更多關(guān)注業(yè)務(wù)喂击，快速提高效率剂癌，節(jié)省研發(fā)成本。 目前已經(jīng)在OA系統(tǒng)翰绊、考試系統(tǒng)佩谷、報(bào)表系統(tǒng)、流程管理等眾多項(xiàng)目中得到了廣泛使用监嗜。
FormMaking 采用 Vue 和 Element 進(jìn)行頁(yè)面構(gòu)建谐檀，內(nèi)置i18n 國(guó)際化解決方案，支持二次擴(kuò)展開發(fā)裁奇，支持自定義組件擴(kuò)展桐猬，目前支持渲染 Element 和 Antd 組件庫(kù)。
直觀的拖拽操作
FormMaking 通過(guò)可視化拖拽來(lái)創(chuàng)建表單刽肠，方便易用溃肪。
豐富的表單字段
FormMaking 提供了各種類型的表單字段，包括布局音五、容器惫撰、文本、選擇框躺涝、對(duì)話框厨钻、數(shù)據(jù)表格、自定義等诞挨，基本可以滿足各種場(chǎng)景下的復(fù)雜表單創(chuàng)建莉撇。
FormMaking 除了可以使用內(nèi)置的字段，還支持將自己的組件引入到設(shè)計(jì)器中進(jìn)行配置使用惶傻。
響應(yīng)式設(shè)計(jì)
FormMaking 的表單是全響應(yīng)式的棍郎，可以在任何設(shè)備上，如桌面银室，平板電腦或者智能手機(jī)上很好的適配涂佃。
數(shù)據(jù)源管理
FormMaking 可以對(duì)表單使用的數(shù)據(jù)進(jìn)行管理励翼，方便進(jìn)行前后的數(shù)據(jù)交互。
表單事件交互
FormMaking 可以通過(guò)事件配置辜荠，完成表單復(fù)雜的業(yè)務(wù)邏輯操作汽抚。
可擴(kuò)展性
FormMaking 還具有易用性和可擴(kuò)展性，可以根據(jù)自己的需求伯病，輕松地?cái)U(kuò)展您的表單功能造烁。提供了全面的API文檔，幫助您快速接入您的系統(tǒng)午笛，從而更好地滿足您的業(yè)務(wù)需求惭蟋。
數(shù)據(jù)表格
新版本迎來(lái)了數(shù)據(jù)表格，為表單提供了更好的數(shù)據(jù)列表的處理能力药磺，支持多選告组、多級(jí)表頭、列模板自定義癌佩、操作列木缝、分頁(yè)等設(shè)置；接下來(lái)一起看看數(shù)據(jù)表格的功能围辙。
表格列設(shè)置
在 字段屬性 - 列設(shè)置中進(jìn)行表格列設(shè)置我碟。
多級(jí)表頭
在列設(shè)置中添加多級(jí)表頭。
自定義列
在列設(shè)置中點(diǎn)擊每項(xiàng)前方的編輯按鈕酌畜，即可彈出詳細(xì)的編輯區(qū)域怎囚，對(duì)表格列進(jìn)行更加詳細(xì)的設(shè)置，包括列寬桥胞、對(duì)齊方式恳守、列模板等。
添加操作列
在操作列設(shè)置中打開顯示操作列贩虾，配置操作按鈕催烘，點(diǎn)擊編輯圖標(biāo)可對(duì)事件進(jìn)行編輯。
方法中可以通過(guò) arguments[0] 獲取到當(dāng)前行數(shù)據(jù)進(jìn)行操作：
function () {
const {
row // 點(diǎn)擊當(dāng)前行的操作按鈕缎罢，獲取當(dāng)前行的數(shù)據(jù)伊群。
} = arguments[0]
}
分頁(yè)
數(shù)據(jù)結(jié)構(gòu)配置
啟用分頁(yè)后，數(shù)據(jù)需要按照配置的數(shù)據(jù)結(jié)構(gòu)進(jìn)行返回策精，不然分頁(yè)會(huì)不起作用舰始。
需要的返回?cái)?shù)據(jù)結(jié)構(gòu)如下：
{
"records": [...],
"total": 100,
"currentPage": 1,
"pageSize": 10
}
分頁(yè)事件配置
在動(dòng)作設(shè)置中配置 onPageChange 事件，在當(dāng)前頁(yè)或者每頁(yè)數(shù)量修改時(shí)會(huì)觸發(fā)該事件咽袜，并且傳遞頁(yè)面分頁(yè)參數(shù):
function () {
const {
pageSize, // 數(shù)據(jù)結(jié)構(gòu)中配置的每頁(yè)數(shù)量參數(shù)
currentPage // 數(shù)據(jù)結(jié)構(gòu)中配置的當(dāng)前頁(yè)參數(shù)
} = arguments[0]
}
數(shù)據(jù) CRUD
通過(guò)數(shù)據(jù)表格可以簡(jiǎn)單快速的完成數(shù)據(jù)CRUD操作：
