1.3.19 • Published 4 years ago
jeeplus-form-make-test v1.3.19
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