# 模板控件元素类型

# 基础类型

模板控件元素的基础类型继承了BaseElement接口。

BaseElement接口定义如下：

interface BaseElement {
    children: any[];
}

1
2
3

# IBaseable

接口IBaseable是所有模板控件元素的基础类型。

定义如下：

interface IBaseable extends BaseElement {
    key: string
    type: LabelType
    title?: string
}
type LabelType = 'textlabel' | 'combobox' | 'checkbox' | 'checklist' | 'radiobox' | 'radiolist' | 'datelabel' | 'imagebox' | 'imagelist' | 'macrolabel' | 'formula'

1
2
3
4
5
6

接口成员

key：唯一标识，类似元素ID
type：元素标签类型
title：提示文字（可选）

元素标签类型定义

'textlabel'：文本输入框
'combobox'：下拉列表选择框
'checkbox'：复选框
'checklist'：复选列表框
'radiobox'：单选框
'radiolist'：单选列表框
'datelabel'：日期时间标签
'imagebox'：单个图像
'imagelist'：图像列表
'macrolabel'：宏数据框
'formula'：数学公式

# 控件元素类型

# ITextLabel

文本框输入框控件，指定用户的输入位置，约束和规范输入数据类型及内容。

定义如下：

interface ITextLabel extends IBaseable {
    type: 'textlabel',
    placeholder?: string,
    required?: boolean,
    regex?: string
}

1
2
3
4
5
6

接口成员

placeholder：占位字符
required：是否必填字段
regex：用于校验和约束的正则表达式

# IComboBox

下拉列表选择框控件，有单选和多选两种选择模式。

定义如下：

interface IComboBox extends IBaseable {
    type: 'combobox',
    placeholder?: string,
    items?: string[],
    multiple?: boolean,
    values?: any[],
    separator?: string
}

1
2
3
4
5
6
7
8

接口成员

placeholder：占位字符
items：备选选择项
multiple：是否多选
values：选中值内容
separator：选中项目分割符

# ICheckBox

复选框控件

定义如下：

interface ICheckBox extends IBaseable {
    type: 'checkbox',
    label?: string,
    checked?: boolean,
    value?: any
}

1
2
3
4
5
6

接口成员

label：选择项名
checked：选择状态
value：选择值

# ICheckList

复选框组合控件

定义如下：

interface ICheckList extends IBaseable {
    type: 'checklist',
    items?: string[],
    values?: any[]
}

1
2
3
4
5

接口成员

items：选择项列表
values：选择值列表

# IRadioBox

单选框控件

定义如下：

interface IRadioBox extends IBaseable {
    type: 'radiobox',
    label?: string,
    checked?: boolean,
    value?: any,
    name?: string
}

1
2
3
4
5
6
7

接口成员

label：选择项名
checked：选择状态
value：选择值
name：选择项分组名

# IRadioList

单选框组合控件

定义如下：

interface IRadioList extends IBaseable {
    type: 'radiolist',
    items?: string[],
    value?: any
}

1
2
3
4
5

接口成员

items：选择项列表
value：选择值

# IDateLabel

日期时间标签

定义如下：

interface IDateLabel extends IBaseable {
    type: 'datelabel',
    placeholder?: string,
    format?: string,
    value?: string
}

1
2
3
4
5
6

接口成员

placeholder：占位字符
format：时间日期格式，取值参考moment的format (opens new window)
value：标签内容值

# IImageBox

图像控件

定义如下：

interface IImageBox extends IBaseable {
    type: 'imagebox',
    placeholder?: string,
    value?: string,
    label?: string,
    height?: string,
    width?: string,
    placeblock?: boolean
}

1
2
3
4
5
6
7
8
9

接口成员

placeholder：占位字符
value：图片内容，参考CSS中HTMLImageElement: src property (opens new window)的取值。
label：图片说明标签
height：初始图片高度
width：初始图片宽度
placeblock：占位模式（文字占位、块占位）

# IImageList

图像列表控件

定义如下：

interface IImageList extends IBaseable {
    type: 'imagelist',
    values?: [{ code: string, value?: string, label?: string }],
    height?: string,
    width?: string,
    padding?: string
}

1
2
3
4
5
6
7

接口成员

placeholder：占位字符
values：ImageValue[]
height：初始图片高度
width：初始图片宽度
padding：内边距

ImageValue

code：图片标识
value：图片内容，参考CSS中HTMLImageElement: src property (opens new window)的取值。
label：图片说明标签

# IMacroLabel

宏数据标签控件

定义如下：

interface IMacroLabel extends IBaseable {
    type: 'macrolabel'
    placeholder?: string,
    fieldtype?: MacroType,
    fieldname?: string,
    fieldvalue?: string
    height?: string,
    width?: string,    
}

1
2
3
4
5
6
7
8
9

接口成员

placeholder：占位字符
fieldtype：字段类型（TEXT、IMAGE）

TEXT：文本字符串内容； IMAGE：图片资源

fieldtype = IMAGE 时，fieldvalue 的取值可参考CSS中HTMLImageElement: src property (opens new window)的取值。
fieldname：字段名称
fieldvalue：字段值
height：fieldtype = IMAGE 时，初始图像高度
width：fieldtype = IMAGE 时，初始图像宽度

# IFormula

数学公式标签控件

定义如下：

interface IFormula extends IBaseable {
    value?: string,
    placeholder?: string
}

1
2
3
4

接口成员

value：数学公式表达式
placeholder：占位字符

← 页面设置