基于Vue和Quasar的前端SPA項(xiàng)目實(shí)戰(zhàn)之拖拽表單定制（十六）
基于Vue和Quasar的前端SPA項(xiàng)目實(shí)戰(zhàn)之拖拽表單定制（十六）
回顧
通過(guò)前一篇文章?基于Vue和Quasar的前端SPA項(xiàng)目實(shí)戰(zhàn)之動(dòng)態(tài)表單（五）的介紹，實(shí)現(xiàn)了元數(shù)據(jù)中動(dòng)態(tài)表單設(shè)計(jì)功能，支持常見的數(shù)據(jù)類型和索引，然后實(shí)現(xiàn)了動(dòng)態(tài)表單的crud增刪改查功能，所有的表單頁(yè)面都是默認(rèn)的風(fēng)格。本文主要介紹拖拽表單定制功能，通過(guò)拖拽的方式定制表單錄入和編輯頁(yè)面，滿足了個(gè)性化需求。
簡(jiǎn)介
針對(duì)元數(shù)據(jù)表的每個(gè)字段，通過(guò)拖拽方式?jīng)Q定是否顯示或者隱藏，然后還可以配置顯示的寬度。最終以json格式保存到后臺(tái)數(shù)據(jù)庫(kù)，運(yùn)行時(shí)根據(jù)配置動(dòng)態(tài)渲染錄入和編輯表單form頁(yè)面。針對(duì)不同的設(shè)備（電腦，平板，手機(jī)）都可以單獨(dú)定制。
UI界面
頁(yè)面構(gòu)建
運(yùn)行時(shí)
代碼
說(shuō)明
采用開源框架vuesortable，基于vue的實(shí)現(xiàn)排序，支持拖拽。頁(yè)面構(gòu)建分為左中右三個(gè)部分，左邊為候選字段，中間為需要顯示的字段，右邊可以針對(duì)每個(gè)字段單獨(dú)設(shè)置一些屬性，比如寬度等。
數(shù)據(jù)表
創(chuàng)建表單tableFormBuilder，用于存儲(chǔ)頁(yè)面構(gòu)建json數(shù)據(jù)，包括類型type、設(shè)備device、內(nèi)容body等字段, 充分利用crudapi功能，API部分零代碼實(shí)現(xiàn)。
tableFormBuilder
核心代碼
頁(yè)面構(gòu)建
移除
通過(guò)draggable標(biāo)簽實(shí)現(xiàn)
運(yùn)行時(shí)渲染
{{formElement.column.caption}}:{{ formElement.column.value | relationDataFormat(formElement.column) }}
判斷是否存在定制頁(yè)面，如果存在動(dòng)態(tài)渲染，否則采用默認(rèn)頁(yè)面布局。
#
例子
以產(chǎn)品為例，配置好錄入頁(yè)面之后，運(yùn)行時(shí)原來(lái)的默認(rèn)錄入頁(yè)面用新的頁(yè)面代替，新的表單頁(yè)面和之前配置的表單頁(yè)面一致，功能不受影響，可以正常的錄入數(shù)據(jù)。
#
小結(jié)
本文主要通過(guò)拖拽方式實(shí)現(xiàn)表單定制功能，使用非常方便，零代碼定制表單錄入和編輯頁(yè)面，滿足了個(gè)性化需求，整個(gè)過(guò)程無(wú)需寫代碼。
crudapi簡(jiǎn)介
crudapi是crud+api組合，表示增刪改查接口，是一款零代碼可配置的產(chǎn)品。使用crudapi可以告別枯燥無(wú)味的增刪改查代碼，讓您更加專注業(yè)務(wù)，節(jié)約大量成本，從而提高工作效率。crudapi的目標(biāo)是讓處理數(shù)據(jù)變得更簡(jiǎn)單，所有人都可以免費(fèi)使用！無(wú)需編程，通過(guò)配置自動(dòng)生成crud增刪改查RESTful API，提供后臺(tái)UI管理業(yè)務(wù)數(shù)據(jù)。基于主流的開源框架，擁有自主知識(shí)產(chǎn)權(quán)，支持二次開發(fā)。
demo演示
crudapi屬于產(chǎn)品級(jí)的零代碼平臺(tái)，不同于自動(dòng)代碼生成器，不需要生成Controller、Service、Repository、Entity等業(yè)務(wù)代碼，程序運(yùn)行起來(lái)就可以使用，真正0代碼，可以覆蓋基本的和業(yè)務(wù)無(wú)關(guān)的CRUD RESTful API。
官網(wǎng)地址：https://crudapi.cn
測(cè)試地址：https://demo.crudapi.cn/crudapi/login
附源碼地址
GitHub地址
https://github.com/crudapi/crudapi-admin-web
Gitee地址
https://gitee.com/crudapi/crudapi-admin-web
由于網(wǎng)絡(luò)原因，GitHub可能速度慢，改成訪問Gitee即可，代碼同步更新。