组件设计开发流程
本文档主要用于指导用户进行表单组件的扩展，门户布局和表单布局的扩展，布局模板的扩展。该功能模块要求开发人员熟悉vue开发相关技能，了解Freemarker相关语法。
1 业务表单设计基础字段组件定制（自行开发需会Vue开发）
基础字段示例：以多行文本为例首先在controlsConfig.js中basicComponents添加对应的基础字段属性必须存在的属性：
ctrlType:组件的类型
name:必须存在不用填值
desc:组件的显示名称
icon:组件的图标
其它属性根据实际需求添加
WidgetFormItem.vue中添加对应的vue组件
HtInput.vue代码
BasicsProperty.vue中可以添加已有的基本属性或者自行新增，基础属性的展示是由controlsConfig.js中options属性控制的
AdvancedProperty.vue中可以添加已有的高级属性或者自行新增，高级属性的展示是由controlsConfig.js中属性控制的
fieldControl.ftl中添加生成基础字段vue的代码
在前端中新增对应基础字段的vue代码，如果属于新创建的vue文件需在OnlineForm.vue中引入
2 业务表单设计高级字段定制
高级字段示例：以按钮字段为例首先在controlsConfig.js文件中advanceComponents添加对应字段属性必须存在的属性：
ctrlType:组件的类型
name:必须存在不用填值
desc:组件的显示名称
icon:组件的图标其它属性根据实际需求添加修改
根据需求在BasicsProperty.vue添加基础属性配置，基础或高级属性由controlsConfig.js中的属性进行控制，在AdvancedProperty.vue中添加修改高级属性配置
在前端中新增对应高级字段的vue代码，如果属于新创建的vue文件需在OnlineForm.vue中引入
3 业务表单设计布局组件定制
布局字段示例：以tab布局为例首先在controlsConfig.js文件中layoutComponents添加对应布局属性必须存在的属性：
ctrlType:组件的类型
name:必须存在不用填值
desc:组件的显示名称
icon:组件的图标
isLayout:true 固定写法
其它参数根据实际需求进行新增修改
添加完成后
WidgetPanel.vue中添加对应vue组件
新增对应的tab组件代码
WidgetPanel中添加好组件后，布局或字段排版显示对应组件
WidgetTableLayout.vue中添加对应的选项配置
layoutTemplate.ftl模板中添加对应的布局代码，最后初始化模板，新的布局组件就完成了
4 门户设计栏目布局，以栅格布局为例
ColumnPanel.vue进行布局组件添加的vue
layoutComponents：布局组件数组，每个大括号中的数据都对应一个布局组件。必须存在的属性：
type：组件的类型，即英文名称
name：组件名称，栏目布局中将显示该名称
icon：组件图标，栏目布局中将显示该图标
options：组件参数，可传空对象
其它参数：根据实际情况的需要进行添加修改参数添加完成后将会在“栏目布局”中新增出一个布局组件
DesignPanel.vue 中部组件排版vue
根据选中的组件类型进行判断执行显示的vue
接下来添加与组件类型相对应的vue文件
LayoutConfigPanel.vue中添加对应的栅格布局配置信息
对应布局类型的前端代码中home.vue中新增对应的vue组件，如栅格布局使用的Htcolumn.vue组件。
注：三种布局类型都需要在home.vue中添加对应代码
5 扩展新的Freemarker模板
目前系统中有用到Freemarker模板的有表单生成、数据列表、自定义sql和代码生成器模块，下面描述下常用的表单生成和数据列表模块如何扩展新模板。
5.1 表单模块扩展新模块
表单模板扩展是在原有模板的基础上，由于扩展表单控件或者布局而对应对模板进行扩展。扩展方式可以分为两种，一种是在原有模板文件上增加模板代码，实现新增控件或布局的生成，另一种是创建新的Freemarker模板，并通过调用关系与主模板关联。使用哪种方式取决于具体的需求和不同场景，一般情况下，新增表单控件或简单布局，扩展模板代码较少且只在同一个模板文件中被使用时，建议在原模板文件上扩展，上面1.2、1.3、1.4都有讲解此方式。如果是比较复杂的布局模板或会在多个模板中被调用时，可以考虑扩展新的模板文件，比如现有的子表模板、孙表模板等，下面以div子表布局简单说明此方式的扩展步骤。
（1） 新增模板文件在form\src\main\resources\template\form目录下，根据实际情况，在mobile（移动端模板）或pc（pc端模板）目录下创建新的.ftl模板文件，并在模板文件中封装生成对应控件或布局的代码逻辑。
（2） 将新建模板注册到模板文件管理的templates.xml文件中如下图所示：
将新加模板注册后，在前端执行初始化模板时，就会将该模板文件进行初始化，且在生成表单时引入表单模板（注意注册时模板类型为formDesign，dir根据实际用途填写）。
（3） 在其他模板中调用
5.2 数据列表、自定义sql模块扩展
通常，在配置业务模块时想要扩展不同布局或风格时，可以考虑扩展新的数据列表或自定义sql模块（按实际用到的模块扩展），扩展后，在生成数据列表模块（或自定义sql模块）时，可以通过选择不同的模板生成不同布局或风格的业务模块，以下以数据列表模块模板扩展为例描述。
（2） 将新建模板注册到模板文件管理的templates.xml文件中（同1.5.1）
（3） 初始化模板
（4） 在数据列表模块选择使用