表单控件扩展开发指导

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分钟左右,还是比较简单的。