form-generator是基于vue框架的Element UI表單設(shè)計(jì)及代碼生成器。表單設(shè)計(jì)器，常用于需要給用戶提供表單定制功能的場(chǎng)景中贪婉。例如開(kāi)發(fā)一套工作流系統(tǒng)，工作流中涉及到的請(qǐng)假卢肃、出差疲迂、審批等頁(yè)面或表單，HR是可以自己定義和調(diào)整的莫湘。表單不是固定的尤蒿，是在需要的時(shí)候創(chuàng)建出來(lái)的。
使用的插件
1幅垮、vuedraggable：可拖動(dòng)模塊
2腰池、throttle-debounce：節(jié)流-防抖動(dòng)
npm 模塊throttle-debounce，它提供了throttle和debounce兩個(gè)函數(shù)：throttle 的含義是節(jié)流，debounce 的含義是防抖動(dòng)巩螃，通過(guò)它們可以限制函數(shù)的執(zhí)行頻率演怎，避免短時(shí)間內(nèi)函數(shù)多次執(zhí)行造成性能問(wèn)題
vuedraggable常用屬性:
value: 用于實(shí)現(xiàn)拖拽的list，通常和內(nèi)部v-for循環(huán)的數(shù)組為同一數(shù)組避乏，類型為Array
list: 效果同value的。和v-model不能共用甘桑，類型為Array
group: 用于分組拍皮，同一組的不同list可以相互拖動(dòng)。group一般的用法是用來(lái)區(qū)分拖拽組的跑杭，group名稱相同的拖拽組可以相互拖放铆帽。
group屬性還有更詳細(xì)的配置。group="{name:'abc', pull: 'clone', put: false}"
put參數(shù)用來(lái)控制別的地方內(nèi)容是否可以拖拽到自己這邊來(lái)德谅。
pull參數(shù)控制的是從當(dāng)前拖走爹橱，放在另一個(gè)地方的行為。默認(rèn)情況下（設(shè)置為true）是你拖拽到另外一個(gè)地方去窄做，當(dāng)前列表中就會(huì)少一個(gè)愧驱，對(duì)方列表多一個(gè)。如果設(shè)置為‘clone’椭盏，那么當(dāng)前列表不會(huì)減少组砚，同時(shí)對(duì)方列表多了一個(gè)。
clone: 返回值為true時(shí)克隆掏颊，可以理解為正常的拖拽變成了復(fù)制糟红。當(dāng)pull:'clone時(shí)的拖拽的回調(diào)函數(shù)’，類型為Function
draggable: 定義哪些列表單元可以進(jìn)行拖放乌叶，類型為Selector
sort: 定義是否可以拖拽盆偿，類型為Boolean
animation：拖動(dòng)過(guò)程中的動(dòng)畫(huà)
設(shè)計(jì)思想
跟自己的vue工程融合
那么，如何將form-generator引入到自己的vue工程中呢准浴？
查看源碼事扭，發(fā)現(xiàn)該工程是一個(gè)多頁(yè)面工程，打包出來(lái)有兩個(gè)頁(yè)面兄裂，一個(gè)是index.html句旱，一個(gè)是preview.html。
preview.html是在index.html的按鈕點(diǎn)擊事件中打開(kāi)的晰奖，以iframe形式呈現(xiàn)谈撒。而非單頁(yè)面應(yīng)用，不能發(fā)布成包（有待考證）匾南，不符合我們目前微前端的開(kāi)發(fā)模式啃匿。
為了符合我們現(xiàn)有的開(kāi)發(fā)模式，需要將改開(kāi)源工程，改造成單頁(yè)面應(yīng)用溯乒，并成功發(fā)布夹厌。
為了滿足以上要求，首先要將preview頁(yè)面改造成一個(gè)組件裆悄，并在主頁(yè)面中依賴矛纹。這個(gè)過(guò)程中，最復(fù)雜的是(待完善)
form-generator源碼分析
從新增一個(gè)組件的角度出發(fā)光稼，順序是：
新增組件的配置：components/generator/config.js
傳入拖動(dòng)組件中：在views/home/index.vue
渲染該組件所在的拖動(dòng)組：views/home/DraggableItem.vue
渲染拖動(dòng)組每個(gè)組件：/components/render/render.vue
組件如果有slot或南，單獨(dú)開(kāi)發(fā)：/components/render/slots
該插件的缺陷：
- 不是單頁(yè)面工程
- 沒(méi)有做國(guó)際化
- 下拉框不能加載遠(yuǎn)程的數(shù)據(jù)
- 組件不夠豐富，沒(méi)有表格組件
- 組件是elementui開(kāi)發(fā)的艾君，跟目前用的antd不同
需要打通的流程
- 改造成單頁(yè)面工程采够，發(fā)布到倉(cāng)庫(kù)，再其他工程中使用（70%）
- 封裝一個(gè)選擇組織人員的業(yè)務(wù)組件冰垄，再配置到當(dāng)前框架中蹬癌，擴(kuò)充基礎(chǔ)組件
- 增加請(qǐng)求遠(yuǎn)程數(shù)據(jù)的功能
- 創(chuàng)建一個(gè)表單，保存并使用在工作流中虹茶，考慮如何保存創(chuàng)建的表單模板逝薪，vue文件還是json等？
- form表單能獲取值写烤，新增的業(yè)務(wù)組件怎么拿到值呢
