文档目录

3. 表单控件API

2025-04-14 20:53:55（最后一次修改：2025-04-14 21:01:52）

访问控件API必须在onLoad之后

控件属性未标识为只读的，均可获取和设置

表单实例API

表单实例属性

成员	类型	默认值	说明
$confirm	object		只读，对话框
$message	object		只读，成功、错误、加载中消息框
$router	object		只读，Vue路由对象
$i18n	object		只读，Vue多语言对象，v1.4.0-alpha20+
actions	object[]		只读，表单按钮列表
workflowInfo	object \| null		只读，流程信息，v1.4.0-alpha20+
currentUser	object		只读，当前登录用户，v1.4.0-alpha20+
submited	boolean		只读，是否提交过，v1.4.0-alpha20+
isNew	boolean		只读，是否新增状态，v1.4.0-alpha20+
value	object		只读，当前表单所有控件的值
errors	object		只读，当前表单所有控件的校验错误信息

actions属性

成员	类型	默认值	说明
code	string		按钮编码
text	string		按钮文本
disabled	boolean		禁用的
visible	boolean		可见的

workflowInfo属性

成员	类型	默认值	说明
code	string		流程编码
instanceId	string		流程实例ID
instanceName	string		流程实例名称
tokenId	string		流程活动实例ID
itemId	string		流程任务ID
version	number		流程版本
activityCode	string		当前流程节点编码
activityName	string		当前流程节点名称

表单实例方法

成员	参数	返回值	说明
validate		boolean	校验表单
doAction	code: string		执行表单动作，提交submit、暂存save等
submit			提交表单，doAction('submt')快捷方法

控件共有API

所有控件共有属性

成员	类型	默认值	说明
key	string		只读，唯一标识
type	number		只读，控件类型，对应枚举FormControlType
options	object		只读，控件选项，不同控件有不同的选项对象
parentKey	string \| undefined	undefined	只读，父级key，目前只有子表行列控件有该属性
errors	string[]	[]	只读，校验后错误code
invalid	boolean		只读，无效的，校验不通过
inSheet	boolean		只读，是否在子表中
propertyChange	Rxjs Observable		只读，属性变化可观察对象，回调函数(change: ControlPropertyChange) => void
value	any	null	获取或设置控件值，不同控件具有不同类型的值
display	boolean	true	获取或设置是否显示

基础控件共有属性

基础控件指除子表、子表行以外的控件

成员	类型	默认值	说明
hasValue	boolean		只读，是否有值，不为null、undefined
valueChange	Rxjs Observable		只读，值变化可观察对象，回调函数(change: ControlValueChange) => void
required	boolean	false	获取或设置是否必填
edit	boolean		获取或设置编辑模式，v1.3.0+

ControlValueChange属性

成员	类型	说明
value	any	当前值
oldValue	any \| undefined	旧值

ControlPropertyChange属性

ControlPropertyChange 继承自 ControlValueChange

成员	类型	说明
name	string	属性名称有：display、value、required、min、max、errors、disabled、readonly

所有控件共有方法

成员	参数	返回值	说明
validate		boolean	校验

示例

// text1是控件的key
//隐藏控件
this.text1.display = false;
//设为必填
this.text1.required = true;  
//清空值
this.text1.value = null;

// 进入编辑状态
this.text1.edit = true;
// 进入只读状态
this.text1.edit = false;

// 订阅值变化
var subscription = this.text1.valueChange.subscribe((change)=>{
  change.value //最新值
  change.oldValue //旧值
});

// 取消订阅
subscription.unsubscribe(); 

// 订阅属性变化 display required value等等
this.text1.propertyChange.subscribe((change)=>{
  change.name //属性名称
  change.value //最新值
  change.oldValue //旧值
});

类型对照表

控件类型	type值	value类型	value默认值	说明
短文本	1	string \| null	null
长文本	2	string \| null	null
日期	3	Date \| null	null
数值	4	number \| null	null
单选	5	string \| null	null
复选	6	string[] \| null	null
下拉	7	string[] \| null	null
逻辑	8	boolean	true
附件	9	object[] \| null	null
图片	10	object[] \| null	null
位置	11	object \| null	null
地址	14	object \| null	null
人员单选	50	object[] \| null	null
人员多选	51	object[] \| null	null
部门单选	60	object[] \| null	null
部门多选	61	object[] \| null	null
关联表单	80	object \| null	null

附件&图片值类型

成员	类型	说明
refId	string	唯一标识
fileExtension	string	文件扩展名
mimeType	string	文件类型
name	string	文件名称

位置&地址值类型

成员	类型	说明
provinceName	string	省名
provinceAdcode	string	省编码
cityName	string	城市名
cityAdcode	string	城市编码
districtName	string	区名
districtAdcode	string	区编码
address	string	详细地址
lat	number \| string	纬度
lng	number \| string	经度

人员&部门值的数据格式

成员	类型	说明
type	number	1部门，3人员
name	string	名称
imgUrl	string	头像
id	string
departmentId	string	主部门ID
departments	object[]	所属部门列表（包含兼职）
userId	string
sourceId	string
corpId	string

注意: 不应该自定义value给选人控件或部门控件赋值.

关联表单值类型

成员	类型	说明
id	string	关联记录的ID
name	string	关联记录的数据摘要

单行文本&长文本API

属性

成员	类型	默认值	说明
type	number	1	只读，类型
value	string \| null	null	获取或设置当前值
minLength	number \| undefined	undefined	获取或设置最小长度
maxLength	number \| undefined	undefined	获取或设置最大长度
pattern	RegExp \| undefined	undefined	获取或设置格式正则校验

方法

成员	参数	返回值	说明
validateRequired		boolean	校验必填
validatePattern		boolean	校验格式
validateMinLength		boolean	校验最小长度
validateMaxLength		boolean	校验最大长度

日期&数值API

T，日期Data，数值number

属性

成员	类型	默认值	说明
type	number		只读，类型，日期3，数值4
value	T \| null	null	获取或设置当前值
min	T \| null	null	获取或设置最小值
max	T \| null	null	获取或设置最大值

方法

成员	参数	返回值	说明
validateRequired		boolean	校验必填
validateMin		boolean	校验最小值
validateMax		boolean	校验最大值
compare	a: T \| null, b: T \| null	number, -1小于, 0等于, 1大于	比较大小

示例

//设置日期的显示格式
this.date1.options.format = 'YYYY-MM';

//设置数值的显示格式
this.number1.options.format = 'integer'; //  整数 200

日期格式对照表

格式	示例
YYYY-MM	2012-08
YYYY-MM-DD	2012-08-20
YYYY-MM-DD HH	2012-08-20 14
YYYY-MM-DD HH:mm	2012-08-20 14:00
YYYY-MM-DD HH:mm:ss	2012-08-20 14:00:00

数字格式对照表

格式	示例	说明
none		无格式
integer	200	整数
tenths	2,000.0	十分位
percentile	2,000.00	两位小数点
ratio	20%	百分比，无小数点
ratio.tenths	20.0%	百分比单小数点
ratio.percentile	20.00%	百分比双小数点
RMB.percentile	￥2,000.00	货币-人民币
RMB.Millimeter	￥2,000.000	货币-人民币
RMB.tenThousand	￥2,000.0000	货币-人民币
dollar.percentile	$2,000.00	货币-美元
dollar.Millimeter	$2,000.000	货币-美元
dollar.tenThousand	$2,000.0000	货币-美元
euro.percentile	€2,000.00	货币-欧元
euro.Millimeter	€2,000.000	货币-欧元
euro.tenThousand	€2,000.0000	货币-欧元
HK.percentile	HK2,000.00	货币-港币
HK.Millimeter	HK2,000.000	货币-港币
HK.tenThousand	HK2,000.0000	货币-港币

单选框API

属性

成员	类型	默认值	说明
type	number	5	只读，类型
value	string \| null	null	获取或设置当前值
items	string[]	[]	获取或设置选项列表，v1.3.2+

方法

成员	参数	返回值	说明
validateRequired		boolean	校验必填

复选框&下拉框API

属性

成员	类型	默认值	说明
type	number		只读，类型，复选框6，下拉框7
value	string[] \| null	null	获取或设置当前值
items	string[]	[]	获取或设置选项列表，v1.3.2+
minCount	number \| undefined	undefined	获取或设置最小数量
maxCount	number \| undefined	undefined	获取或设置最大数量

方法

成员	参数	返回值	说明
validateRequired		boolean	校验必填
validateMinCount		boolean	校验最小数量
validateMaxCount		boolean	校验最大数量

子表API

属性

成员	类型	默认值	说明
type	number	201	只读，类型
rows	object[]	[]	只读，所有行对象
errors	{ [key:string] : string[] }	{}	只读，校验后所有行的错误code
rowChange	Rxjs Observable		只读，行变化可观察对象，回调函数(change: RowChange) => void
value	object[] \| null	null	获取或设置当前值

RowChange属性

成员	类型	说明
type	string	行变化类型，insert新增行，remove删除行，insertMulti批量新增行（v1.4.0-alpha20+），removeMulti批量删除行（v1.4.0-alpha20+）
index	number	行索引
value	object \| undefined	当前值
oldValue	object \| undefined	变化前的值
removeIndexs	number[] \| undefined	批量删除的行索引集合，批量删除时有值，v1.4.0-alpha20+
insertCount	number \| undefined	批量插入的行数，批量新增时有值，v1.4.0-alpha20+

方法

成员	参数	返回值	说明
validate		boolean	校验子表所有行
getCell	rowIndex: number, columnIndex: number \| string	object	获取单元格对象 columnIndex也可为列的数据项编码
insertRow	index: number, value?: object	object	插入新行
insertRows	index: number, values: object[]		批量插入新行，v1.4.0-alpha20+
appendRow	rowValue?: object	object	在最后追加新行
appendRows	values: object[]		批量追加新行，v1.4.0-alpha20+
removeRow	index: number		移除指定行
removeRows	indexs: number[]		批量移除指定行，v1.4.0-alpha20+
removeAllRow			移除所有行，v1.3.0+
getRowValueChange	index: number	Rxjs Observable	获取行值变化可观察对象，回调函数(change: RowValueChange) => void
getColumnValueChange	key: string	Rxjs Observable \| undefined	获取列值变化可观察对象，回调函数(change: ColumnValueChange) => void

RowValueChange属性

成员	类型	说明
index	number	行索引
columnIndex	number	变化的列索引，v1.3.0+
value	object \| undefined	当前值
oldValue	object \| undefined	变化前的值

ColumnValueChange属性

成员	类型	说明
key	string	列key
index	number	列索引
rowIndex	number	变化的行索引，v1.3.0+
value	any[] \| undefined	当前值
oldValue	any[] \| undefined	变化前的值

示例

子表支持表、行、单元格取赋值

//整表赋值
this.sheet1.value = [{
  text1: 'a',
  text2: 'b'
},{
  text1: 'a',
  text2: 'b'
}];

//整行赋值
this.sheet1.rows[0].value = {
  text1: 'a',
  text2: 'b'
};

//单元格赋值，第1行第1列
this.sheet1.getCell(0, 0).value = 'a';

//订阅第1行的值变化
this.sheet1.getRowValueChange(0).subscribe((change)=>{});

//订阅整列的值变化
const subject = this.sheet1.getColumnValueChange('text1');
if(subject){
  subject.subscribe((change)=>{});
}

//订阅子表的行变化
this.sheet1.rowChange.subscribe((change)=>{});

有用（5）
没有用（0）

本文链接：https://open.hetusaas.com/?id=9