表单设计器2 - form-generator源码学习

form-generator是基于vue框架的Element UI表单设计及代码生成器。表单设计器，常用于需要给用户提供表单定制功能的场景中。例如开发一套工作流系统，工作流中涉及到的请假、出差、审批等页面或表单，HR是可以自己定义和调整的。表单不是固定的，是在需要的时候创建出来的。

使用的插件

1、vuedraggable：可拖动模块

2、throttle-debounce：节流-防抖动
npm 模块throttle-debounce，它提供了throttle和debounce两个函数：throttle 的含义是节流，debounce 的含义是防抖动，通过它们可以限制函数的执行频率，避免短时间内函数多次执行造成性能问题

vuedraggable常用属性:
value: 用于实现拖拽的list，通常和内部v-for循环的数组为同一数组，类型为Array
list: 效果同value的。和v-model不能共用，类型为Array
group: 用于分组，同一组的不同list可以相互拖动。group一般的用法是用来区分拖拽组的，group名称相同的拖拽组可以相互拖放。
group属性还有更详细的配置。group="{name:'abc', pull: 'clone', put: false}"
put参数用来控制别的地方内容是否可以拖拽到自己这边来。
pull参数控制的是从当前拖走，放在另一个地方的行为。默认情况下（设置为true）是你拖拽到另外一个地方去，当前列表中就会少一个，对方列表多一个。如果设置为‘clone’，那么当前列表不会减少，同时对方列表多了一个。
clone: 返回值为true时克隆，可以理解为正常的拖拽变成了复制。当pull:'clone时的拖拽的回调函数’，类型为Function
draggable: 定义哪些列表单元可以进行拖放，类型为Selector
sort: 定义是否可以拖拽，类型为Boolean
animation：拖动过程中的动画

设计思想

跟自己的vue工程融合

那么，如何将form-generator引入到自己的vue工程中呢？
查看源码，发现该工程是一个多页面工程，打包出来有两个页面，一个是index.html，一个是preview.html。
preview.html是在index.html的按钮点击事件中打开的，以iframe形式呈现。而非单页面应用，不能发布成包（有待考证），不符合我们目前微前端的开发模式。

为了符合我们现有的开发模式，需要将改开源工程，改造成单页面应用，并成功发布。
为了满足以上要求，首先要将preview页面改造成一个组件，并在主页面中依赖。这个过程中，最复杂的是(待完善)

form-generator源码分析

从新增一个组件的角度出发，顺序是：
新增组件的配置：components/generator/config.js
传入拖动组件中：在views/home/index.vue
渲染该组件所在的拖动组：views/home/DraggableItem.vue
渲染拖动组每个组件：/components/render/render.vue
组件如果有slot，单独开发：/components/render/slots

该插件的缺陷：

1. 不是单页面工程
2. 没有做国际化
3. 下拉框不能加载远程的数据
4. 组件不够丰富，没有表格组件
5. 组件是elementui开发的，跟目前用的antd不同

需要打通的流程

1. 改造成单页面工程，发布到仓库，再其他工程中使用（70%）
2. 封装一个选择组织人员的业务组件，再配置到当前框架中，扩充基础组件
3. 增加请求远程数据的功能
4. 创建一个表单，保存并使用在工作流中，考虑如何保存创建的表单模板，vue文件还是json等？
5. form表单能获取值，新增的业务组件怎么拿到值呢

 了解更多内容 关注公众号
​