表单控件扩展开发指导

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-date class=" form-control" v-model="data.bdkj.rqkj" desc="日期控件" ab-validate="{}" v-ab-permission="permission.bdkj.bdkj.rqkj" format="yyyy-MM-dd"></ab-date>
 */
@Override
protected String getColumnDate(IBusinessColumn column) {
	Element element = getElement("ab-date").attr("type", "text").addClass("form-control");
	// 处理控件基本属性
	handleVModel(element, column);
	handlePermission(element, column);
	handleValidateRules(element, column);

	// 特殊配置项会存在 实体控件的 Config 中
	String configStr = column.getCtrl().getConfig();
	if (StringUtil.isEmpty(configStr)) {
		throw new BusinessException(String.format("表【%s】日期字段  【%s】解析失败,配置信息不能为空", column.getTable().getKey(), column.getComment()));
	}

	String format = JSON.parseObject(configStr).getString("format");
	// yyyy-MM-dd HH:mm:ss pc 移动端为：YYYY-MM-DD HH:mm
	element.attr("format", format);
	// 返回控件的HTML代码
	return element.toString();
}

三、新增表单前端组件的支持

表单生成的组件需要前端能够识别，比如 <ab-data> 他是一个我们自己定义的组件，Vue js，或者Iview-ui 都是无法识别的，那么就需要在main.js中引入该前端组件。

如果您生成的是<input>等前端HTML本身支持的标签，或者前端组件库已有的组件，那么是无需引入的。

笔者在写当前文档的时候也顺便新增了一个地区选择的组件
新增一个简单的组件只需要30分钟左右，还是比较简单的。