AgileBPM 的表单控件是通过实体字段控件配置来生成的,实体字段的所有控件类型都会在表单有对应的控件生成方法。
本文将讲解如何扩展一种新的控件。
一、新增字段控件配置
BusColumnCtrlType.java 新增枚举
以单行文本框为例,这里会配置控件基本信息// 控件CODE 控件名字 控件支持的数据类型
ONETEXT("onetext", "单行文本", new String[] { "varchar", "number" }),
前端控件配置页新增相关配置
如果该控件有特殊配置项,则需要在前端新增配置内容。如数据字典,需要选择对应的数据字典,下拉框要配置 options,
打开设计开发平台前端源码 businessTableEdit.html
,位于145~170 行 <!-- 控件配置 -->
部分,可以参考数据字典、下拉框等配置新增自己的属性配置,如果无需配置则可跳过(像单行文本就无需配置)
二、新增表单控件生成器
AbsFormElementGenerator.getColumn 新增控件生成方法
以 日期控件为例,新增 对应控件的处理方法,定义该控件生成的抽象方法,以便规范子类实现该方法。//AbsFormElementGenerator.getColumn方法中新增对应控件的处理方法( 60 行)
case DATE: return getColumnDate(column);
// AbsFormElementGenerator 121 行 定义抽象方法,不同类型的表单需要实现抽象方法,去实现具体控件的生成
protected abstract String getColumnDate(IBusinessColumn column);
以 Vue表单为例在 VueFormElementGenerator 中新增 抽象方法的实现
不同表单(移动端、PC端)均需要新增控件的实现
下面还是以 日期控件为例
|
三、新增表单前端组件的支持
表单生成的组件需要前端能够识别,比如 <ab-data>
他是一个我们自己定义的组件,Vue js,或者Iview-ui 都是无法识别的,那么就需要在main.js
中引入该前端组件。
如果您生成的是<input>
等前端HTML本身支持的标签,或者前端组件库已有的组件,那么是无需引入的。
笔者在写当前文档的时候也顺便新增了一个地区选择的组件
新增一个简单的组件只需要30分钟左右,还是比较简单的。
