FORM-MAKE 流程

一、Form生成

1、页面

Home.vue

使用fmMakingForm组件（即Container.vue）创建Form，本身负责处理（保存）创建好的Form。

2、设计组件

Container.vue

分为左（组件选择区域），中（已选择组件展示编辑区），右（当前组件属性编辑区）三部分；

保存form数据和config数据。

2.1、组件选择区域

2.1.1、组件列表

从componentsConfig.js中读取，加载后对列表预处理（加上中文名称）；

渲染时通过basicFields等props对列表过滤；

目前组件分类为固定：基础、高级、布局、自定义（通过组件prop传入）。

2.1.2、组件拖动或点击事件（事件通过事件总线传递）由展示编辑区处理。

2.2、组件展示编辑区

分为hearder和main(即WidgetForm.vue)区域，header区域为操作按钮，main区域展示编辑组件；

2.2.1、WidgetForm.vue

根据列表渲染form：所有预设组件分类组装，根据列表中的组件类型循环渲染；

处理左侧拖动事件、点击事件；

编辑处理form数据、当前选择组件。

2.3、组件属性编辑区

有字段属性（WidgetConfig.vue）、表单属性（FormConfig.vue）和列表属性（ListConfig.vue）

2.3.1、字段属性（WidgetConfig.vue）

当前所选组件的配置

2.3.2、表单属性（FormConfig.vue）

整个表单的统一配置（当前有组件标签对齐方式、宽度，组件宽度、class，js代码）

2.3.3、列表属性（ListConfig.vue）

和表格相关的配置（列属性：是否显示，是否可检索，是否可排序）

跳转配置（最后操作列增加按钮）

2.4、预览

GenerateForm.vue