一、视图特征

视图类型：表单（FORM）
数据类型：对象（Object）
DSL 特征：具备布局功能。
数据结构通用行为：
- 查询行为：页面初始化、数据回填。
表单行为：
- 交互行为：数据填写、数据验证、数据提交等。
- 子表格查询行为：通过前端分页查询。
常用接口：（默认数据管理器函数）
- construct：页面初始化。（pk is null）
- queryOne：数据回填。（pk is not null）
- create：新增时创建。（pk is null）
- update：编辑时更新。（pk is not null）

二、DSL 结构

一个精简版视图可以是这样的：（“精简” 表示每个标签的属性数量少，而不是节点数量少。）

xml

<view type="FORM" model="demo.DemoModel" name="demo_form_view">
    <template slot="actions">
        <action name="$$internal_GotoListTableRouter" label="返回" type="default"/>
        <action name="create" validateForm="true" goBack="true"/>
        <action name="update" validateForm="true" goBack="true"/>
    </template>
    <template slot="fields">
        <field data="id" invisible="true"/>
        <field data="code"/>
        <field data="name"/>
    </template>
</view>

在这个 DSL 中，围绕着模型 demo.DemoModel 定义了字段和动作，并通过布局提供的插槽将其放在对应的位置。
在插槽中的元素从上到下表示了其相对位置，改变先后顺序就可以改变其渲染在页面上的位置。
action 标签使用 validateForm 属性开启表单提交验证功能，使用 goBack 属性在提交成功后自动返回上一页面。
返回动作是一个客户端动作，它与模型无关，也没有任何元数据。
在 fields 插槽中，你可以使用所有的 Pack 组件 实现栅格布局功能。

提示

更多关于布局相关的内容请参考：Layout

更多关于 DSL 相关的内容请参考：DSL

更多关于 Pack 组件相关的内容请参考：Pack

三、默认字段组件

在上面的 DSL 中，我们并没有指定 widget 属性，那么在这种情况下，Widget 框架将根据字段元数据属性获取对应的默认组件。下面列举了目前表单视图中用到的所有默认组件：

字段类型	是否多值	默认组件	TypeScript Class
文本（STRING）	否	文本（Input）	FormStringInputFieldWidget
文本（STRING）	是	标签（Tag）	FormStringMultiTagFieldWidget
多行文本（TEXT）	否	多行文本（TextArea）	FormTextFieldWidget
富文本（HTML）	否	富文本（RichText）	FormHtmlRichTextFieldWidget
手机（PHONE）	否	手机（Phone）	FormPhoneFieldWidget
邮箱（EMAIL）	否	邮箱（Email）	FormEmailFieldWidget
整数（INTEGER）	否	整数（Integer）	FormIntegerFieldWidget
整数（INTEGER）	是	标签（Tag）	FormIntegerMultiFieldWidget
浮点数（FLOAT）	否	数字（Float）	FormFloatFieldWidget
金额（MONEY）	否	货币（Currency）	FormMoneyFieldWidget
布尔（BOOLEAN）	否	开关（Switch）	FormBooleanSwitchFieldWidget
枚举（ENUM）	否	下拉单选（Select）	FormEnumFieldWidget
枚举（ENUM）	是	下拉多选（Select）	FormEnumMultiSelectFieldWidget
日期时间（DATETIME）	否	日期时间（DateTimePicker）	FormDateTimeFieldWidget
日期（DATE）	否	日期（DatePicker）	FormDateFieldWidget
时间（TIME）	否	时间（TimePicker）	FormTimeFieldWidget
年份（YEAR）	否	年份（YearPicker）	FormYearFieldWidget
键值对（MAP）	否	键值对（Map）	FormMapFieldWidget
多对一（M2O）	否	下拉单选（Select）	FormM2OSelectFieldWidget
一对多（O2M）	是	下拉多选（Select）	FormO2MSelectFieldWidget
多对多（M2M）	是	下拉多选（Select）	FormM2MFieldSelectWidget

四、可选字段组件

针对每一种字段类型，除了上述对应的默认组件外，还有一些组件是通过指定 widget 属性进行使用的。下面列举了目前表单视图中现有的字段组件：

字段类型	是否多值	组件	TypeScript Class
文本（STRING）	否	颜色（ColorPicker）	FormStringColorPickerFieldWidget
		手写签名（Signature）	FormStringSignatureFieldWidget
		拖拽上传（UploadDraggable）	FormStringUploadDraggableFieldWidget
		文件（Upload）	FormStringUploadFieldWidget
		图片（UploadImg）	FormStringUploadImgFieldWidget
		嵌入网页（Iframe）	FormStringIframeFieldWidget
		超链接（Hyperlinks）	FormStringHyperlinksFieldWidget
		文件下载（Download）	FormStringDownloadFieldWidget
		多媒体播放器（MediaPlayer）	FormStringMediaPlayerFieldWidget
		手机（Phone）	FormStringPhoneFieldWidget
		邮箱（Email）	FormStringEmailFieldWidget
	是	文件（Upload）	FormStringUploadFieldWidget
		图片（UploadImg）	FormStringUploadImgFieldWidget
		多媒体播放器（MediaPlayer）	FormStringMediaPlayerFieldWidget
多行文本（TEXT）	否	手写签名（Signature）	FormStringSignatureFieldWidget
		拖拽上传（UploadDraggable）	FormStringUploadDraggableFieldWidget
		文件（Upload）	FormStringUploadFieldWidget
		图片（UploadImg）	FormStringUploadImgFieldWidget
		文件下载（Download）	FormStringDownloadFieldWidget
整数（INTEGER）	否	滑动输入框（Slider）	FormIntegerSliderFieldWidget
整数（INTEGER）	是	标签（Tag）	FormIntegerTagFieldWidget
布尔（BOOLEAN）	否	下拉单选（Select）	FormBooleanSelectFieldWidget
		单选框（Radio）	FormBooleanRadioFieldWidget
		复选框（Checkbox）	FormBooleanCheckboxFieldWidget
枚举（ENUM）	否	单选框（Radio）	FormEnumRadioWidget
枚举（ENUM）	是	复选框（Checkbox）	FormEnumMultiCheckboxFieldWidget
多对一（M2O）	否	单选框（Radio）	FormM2ORadioFieldWidget
		表单（Form）	FormM2OFormFieldWidget
		树选择（TreeSelect）	FormM2OTreeSelectFieldWidget
		级联选择（Cascader）	FormM2OCascaderFieldWidget
		拖拽上传（UploadDraggable）	FormM2OUploadDraggableFieldWidget
		文件（Upload）	FormM2OUploadFieldWidget
		图片（UploadImg）	FormM2OUploadImgFieldWidget
		地址（Address）	FormM2OAddressFieldWidget
		公司（Company）	FormM2OCompanyFieldWidget
		部门（Department）	FormM2ODepartmentFieldWidget
		员工（Employee）	FormM2OEmployeeFieldWidget
一对多（O2M）	是	复选框（Checkbox）	FormO2MCheckboxFieldWidget
		表格（Table）	FormO2MTableFieldWidget
		树选择（TreeSelect）	FormO2MTreeSelectFieldWidget
		级联选择（Cascader）	FormO2MCascaderFieldWidget
		穿梭框（Transfer）	FormTransferFieldWidget
		拖拽上传（UploadDraggable）	FormO2MUploadDraggableFieldWidget
		文件（Upload）	FormO2MUploadFieldWidget
		图片（UploadImg）	FormO2MUploadImgFieldWidget
多对多（M2M）	是	复选框（Checkbox）	FormM2MCheckboxFieldWidget
		表格（Table）	FormM2MTableFieldWidget
		树选择（TreeSelect）	FormM2MTreeSelectFieldWidget
		级联选择（Cascader）	FormM2MCascaderFieldWidget
		穿梭框（Transfer）	FormTransferFieldWidget
		树（Tree）	FormM2MTreeFieldWidget
		拖拽上传（UploadDraggable）	FormM2MUploadDraggableFieldWidget
		文件（Upload）	FormM2MUploadFieldWidget
		图片（UploadImg）	FormM2MUploadImgFieldWidget
		公司（Company）	FormM2MCompanyFieldWidget
		部门（Department）	FormM2MDepartmentFieldWidget
		员工（Employee）	FormM2MEmployeeFieldWidget

五、DSL 属性配置

（一）表单属性配置

xml

<element widget="Form">
    ......
</element>

layout：表单布局（'horizontal' | 'vertical' | 'inline'）
cols：行栅格数（number）
submitType：提交类型（SubmitType）
relationUpdateType：关联关系更新类型（RelationUpdateType）
filter：不可视过滤条件（rsql）
domain：可视过滤条件（rsql）
load：加载函数函数编码， FunctionDefinition#fun（string）

（二）通用字段配置

invisible：是否隐藏（boolean | expression）
usingLoading：是否使用加载过渡动画（boolean）
submitType：提交类型（SubmitType）
relationUpdateType：关联关系更新类型（RelationUpdateType）
layout：表单布局（'horizontal' | 'vertical' | 'inline'）
label：字段标题（string | expression）
labelInvisible：是否隐藏字段标题（boolean）
help：字段帮助文本（string）
hint：字段提示文本（string | expression）
required：是否必填（boolean ｜ expresssion）
requiredTips：必填提示文本（string）
readonly：是否只读（boolean ｜ expresssion）
disabled：是否禁用（boolean ｜ expresssion）
validateTrigger：验证触发时机（('change' | 'blur')[]）
validator：验证表达式（expression）
validatorMessage：验证表达式验证不通过的提示文本（string）
patternType：使用内置正则验证类型进行校验（FieldStringPatternType | expression）
pattern：正则表达式（RegExp）
tips：正则表达式验证不通过的提示文本（string | expression）
constructDataTrigger：提交数据触发时机（('change' | 'blur')[]）
constructFun：提交数据函数编码，FunctionDefinition#fun（string）
constructSubmitType：提交数据类型（'CURRENT' | 'ROOT' | 'SELF' | 'CUSTOM'）
submitFields：提交数据字段，当 constructSubmitType="CUSTOM" 时有效（string[]）
clearFieldsTrigger：清理字段触发时机（('change' | 'blur')[]）
clearFields：触发后清理字段列表（string[]）
allowClear：允许置空（boolean）
placeholder：占位提示文本（string | expression）
emptyStyle：空值样式（string | 'hyphen' | 'empty' | 'null'）

提示

带 “” 标记的属性并不是完全通用的属性，而是需要依赖具体组件实现，若组件本身的交互不支持或未实现的可能会出现配置无效的情况。

例如：Checkbox 组件无法实现 allowClear 属性的功能。

（三）字段组件属性配置

1、文本（STRING）

FormStringInputFieldWidget

xml

<field data="stringField" />

type：输入类型（'text' | 'password' | expression）
prefix：前缀文本（string | icon）
prefixType：前缀类型（'TEXT' | 'ICON'）
prefixStore：前缀是否存储（boolean）
suffix：后缀文本（string | icon）
suffixType：后缀类型（'TEXT' | 'ICON'）
suffixStore：后缀是否存储（boolean）
minLength：最小长度（number | expression）
maxLength：最大长度（number | expression）
showCount：显示计数器（boolean）
crypto：加密存储（boolean）
translation：翻译显示值（boolean）

FormStringColorPickerFieldWidget

xml

<field data="stringField" widget="ColorPicker" />

predefine：预置颜色（JSON - string[]）

FormStringSignatureFieldWidget

xml

<field data="stringField" widget="Signature" />

showClearButton：是否展示清除按钮（boolean）
clearButtonText：清除按钮文字（string）
showSaveButton：是否展示保存按钮（boolean）
saveButtonText：保存按钮文字（string）
signatureFontColor：签名文字颜色（color）
signatureBackGroundColor：签名背景面板颜色（color）

FormStringUploadDraggableFieldWidget

xml

<field data="stringField" widget="UploadDraggable" />

draggableIcon：拖拽上传图标（icon）
draggableTipText：拖拽上传提示词（string）
showDraggableExtendsionsText：是否展示支持拓展名（boolean）
draggableExtendsionsText：允许上传的文件类型提示文本（string）
partSize：单个分片大小（number：MB）
chunkUploadThreshold：分片总数阈值（number）
parallel：上传并发数（number）
limit：上传数量限制（number）
limitSize：单个文件上传大小限制（number：MB）
limitFileExtensions：限制文件扩展名类型（string）eg：'.jpg,.jpeg,.png'

FormStringUploadFieldWidget

xml

<field data="stringField" widget="Upload" />

uploadPlaceholder：文件上传提示文本（string）
uploadIcon：文件上传提示图标（icon）
partSize：单个分片大小（number：MB）
chunkUploadThreshold：分片总数阈值（number）
parallel：上传并发数（number）
limit：上传数量限制（number）
limitSize：单个文件上传大小限制（number：MB）
limitFileExtensions：限制文件扩展名类型（string）eg：'.jpg,.jpeg,.png'
cdnKey：指定上传 cdnKey，配合后端 OSS 配置使用（string）
privateLink：使用后端上传/下载文件，当 OSS 无法通过客户端直传时使用（boolean）

FormStringUploadImgFieldWidget

xml

<field data="stringField" widget="UploadImg" />

uploadPlaceholder：文件上传提示文本（string）
uploadIcon：文件上传提示图标（icon）
uploadIconText：上传图标提示文本（string）
partSize：单个分片大小（number：MB）
chunkUploadThreshold：分片总数阈值（number）
parallel：上传并发数（number）
limit：上传数量限制（number）
limitSize：单个文件上传大小限制（number：MB）
limitFileExtensions：限制文件扩展名类型（string）eg：'.jpg,.jpeg,.png'

FormStringIframeFieldWidget

xml

<field data="stringField" widget="Iframe" />

mode：组件模式（'DYNAMIC' | 'STATIC'）

提示

当组件模式为 STATIC 时，可展示内嵌网页。
当组件模式为 DYNAMIC 时，组件可配置属性与 FormStringInputFieldWidget 组件类似。

FormStringHyperlinksFieldWidget

xml

<field data="stringField" widget="Hyperlinks" />

target：链接打开方式（'OPEN_WINDOW' | 'ROUTER'）
text：链接显示文本（string）

FormStringDownloadFieldWidget

xml

<field data="stringField" widget="Download" />

linkDisplayTextPrefix：下载提示文本前缀（string）
linkDisplayText：下载提示文本（string）
downloadFileName：下载的文件名（string）

FormStringMediaPlayerFieldWidget

xml

<field data="stringField" widget="MediaPlayer" />

mode：组件模式（'DYNAMIC' | 'STATIC'）
fileSource：文件来源（'UPLOAD' | 'INPUT'）

提示

当组件模式为 STATIC 时，可展示多媒体播放器。
当组件模式为 DYNAMIC 时，文件来源属性生效。
- 当文件来源为 UPLOAD 时，组件可配置属性与 FormStringUploadFieldWidget 组件类似。
- 当文件来源为 INPUT 时，组件可配置属性与 FormStringInputFieldWidget 组件类似。

FormStringPhoneFieldWidget

xml

<field data="stringField" widget="Phone" />

prefix：前缀文本（string | icon）
prefixType：前缀类型（'TEXT' | 'ICON'）
prefixStore：前缀是否存储（boolean）
suffix：后缀文本（string | icon）
suffixType：后缀类型（'TEXT' | 'ICON'）
suffixStore：后缀是否存储（boolean）
minLength：最小长度（number | expression）
maxLength：最大长度（number | expression）
showCount：显示计数器（boolean）

FormStringEmailFieldWidget

xml

<field data="stringField" widget="Email" />

prefix：前缀文本（string | icon）
prefixType：前缀类型（'TEXT' | 'ICON'）
prefixStore：前缀是否存储（boolean）
suffix：后缀文本（string | icon）
suffixType：后缀类型（'TEXT' | 'ICON'）
suffixStore：后缀是否存储（boolean）
minLength：最小长度（number | expression）
maxLength：最大长度（number | expression）
showCount：显示计数器（boolean）

FormStringMultiTagFieldWidget

xml

<field data="stringMultiField" />

allowRepeat：是否允许重复（boolean）
unitValueLength：单位值最大长度（number）

2、多行文本（TEXT）

FormTextFieldWidget

xml

<field data="textField" />

minLength：最小长度（number | expression）
maxLength：最大长度（number | expression）
showCount：显示计数器（boolean）
rows：最小行数，可调整默认输入框高度（number）

3、富文本（HTML）

FormHtmlRichTextFieldWidget

xml

<field data="htmlField" />

height：高度（string | number）
encode：加密存储（boolean）

4、手机（PHONE）

FormPhoneFieldWidget

xml

<field data="phoneField" />

prefix：前缀文本（string | icon）
prefixType：前缀类型（'TEXT' | 'ICON'）
prefixStore：前缀是否存储（boolean）
suffix：后缀文本（string | icon）
suffixType：后缀类型（'TEXT' | 'ICON'）
suffixStore：后缀是否存储（boolean）
minLength：最小长度（number | expression）
maxLength：最大长度（number | expression）
showCount：显示计数器（boolean）

5、邮箱（EMAIL）

FormEmailFieldWidget

xml

<field data="emailField" />

prefix：前缀文本（string | icon）
prefixType：前缀类型（'TEXT' | 'ICON'）
prefixStore：前缀是否存储（boolean）
suffix：后缀文本（string | icon）
suffixType：后缀类型（'TEXT' | 'ICON'）
suffixStore：后缀是否存储（boolean）
minLength：最小长度（number | expression）
maxLength：最大长度（number | expression）
showCount：显示计数器（boolean）

6、整数（INTEGER）

FormIntegerFieldWidget

xml

<field data="integerField" />

prefix：前缀文本（string | icon）
prefixType：前缀类型（'TEXT' | 'ICON'）
prefixStore：前缀是否存储（boolean）
suffix：后缀文本（string | icon）
suffixType：后缀类型（'TEXT' | 'ICON'）
suffixStore：后缀是否存储（boolean）
unit：单位（string | expression）
showThousandth：是否显示千分位（boolean | expression）
size：整数位数（number | expression）
min：最小值（number | expression）
max：最大值（number | expression）
step：递增或递减步长（number）
addStep：递增步长，优先于 step 属性（number）
reduceStep：递减步长，优先于 step 属性（number）
autocorrection：失焦后自动修复（boolean）

FormIntegerSliderFieldWidget

xml

<field data="integerField" widget="Slider" />

min：最小值（number | expression）
max：最大值（number | expression）
step：递增或递减步长（number）
direction：滑动条方向（'horizontal' | 'vertical'）
reverse：反向坐标轴，滑动条置反（boolean）
hasTooltip：显示提示气泡（boolean）

FormIntegerMultiFieldWidget

xml

<field data="integerMultiField" />

allowRepeat：是否允许重复（boolean）
unitValueLength：单位值最大长度（number）
limit：最大标签个数（number）
min：单个数字最小值（number | expression）
max：单个数字最大值（number | expression）

FormIntegerTagFieldWidget

xml

<field data="integerMultiField" widget="Tag" />

allowRepeat：是否允许重复（boolean）
unitValueLength：单位值最大长度（number）

7、浮点数（FLOAT）

FormFloatFieldWidget

xml

<field data="floatField" />

prefix：前缀文本（string | icon）
prefixType：前缀类型（'TEXT' | 'ICON'）
prefixStore：前缀是否存储（boolean）
suffix：后缀文本（string | icon）
suffixType：后缀类型（'TEXT' | 'ICON'）
suffixStore：后缀是否存储（boolean）
unit：单位（string | expression）
showThousandth：是否显示千分位（boolean | expression）
size：整数位数（number | expression）
precision：小数位数（number | expression）
min：最小值（number | expression）
max：最大值（number | expression）
step：递增或递减步长（number）
addStep：递增步长，优先于 step 属性（number）
reduceStep：递减步长，优先于 step 属性（number）
autocorrection：失焦后自动修复（boolean）

8、金额（MONEY）

FormMoneyFieldWidget

xml

<field data="moneyField" />

同 FormFloatFieldWidget 组件属性。

9、布尔（BOOLEAN）

FormBooleanSwitchFieldWidget

xml

<field data="booleanField" />

FormBooleanSelectFieldWidget

xml

<field data="booleanField" widget="Select" />

maxNumber：最大选择数（number）
minNumber：最小选择数（number）

FormBooleanRadioFieldWidget

xml

<field data="booleanField" widget="Select" />

maxNumber：最大选择数（number）
minNumber：最小选择数（number）
orientation：排列方向（'TRANSVERSE' | 'VERTICAL'）
radioMode：可选项样式（'BUTTON'）
rowLimit：每行展示可选项数量（number）
autocorrection：失焦后自动修复（boolean）

FormBooleanCheckboxFieldWidget

xml

<field data="booleanField" widget="Checkbox" />

10、枚举（ENUM）

FormEnumFieldWidget

xml

<field data="enumField" />

maxNumber：最大选择数（number）
minNumber：最小选择数（number）

FormEnumRadioWidget

xml

<field data="enumField" widget="Radio" />

maxNumber：最大选择数（number）
minNumber：最小选择数（number）
orientation：排列方向（'TRANSVERSE' | 'VERTICAL'）
radioMode：可选项样式（'BUTTON'）
rowLimit：每行展示可选项数量（number）
autocorrection：失焦后自动修复（boolean）

FormEnumMultiSelectFieldWidget

xml

<field data="enumMultiField" />

maxNumber：最大选择数（number）
minNumber：最小选择数（number）

FormEnumMultiCheckboxFieldWidget

xml

<field data="enumMultiField" widget="Checkbox" />

maxNumber：最大选择数（number）
minNumber：最小选择数（number）
orientation：排列方向（'TRANSVERSE' | 'VERTICAL'）

11、日期时间（DATETIME）

FormDateTimeFieldWidget

xml

<field data="datetimeField" />

format：日期时间格式化文本（string）

12、日期（DATE）

FormDateFieldWidget

xml

<field data="dateField" />

format：日期格式化文本（string）

13、时间（TIME）

FormTimeFieldWidget

xml

<field data="timeField" />

format：时间格式化文本（string）

14、年份（YEAR）

FormYearFieldWidget

xml

<field data="yearField" />

format：年份格式化文本（string）

15、键值对（MAP）

FormMapFieldWidget

xml

<field data="mapField" />

limit：限制键值对数量（number）

16、多对一（M2O）

FormM2OSelectFieldWidget

xml

<field data="m2oField" />

maxNumber：最大选择数（number）
minNumber：最小选择数（number）
load：加载函数函数编码， FunctionDefinition#fun（string）
showSearch：是否允许搜索（boolean）
searchFields：搜索字段（string[]）
optionLabel：可选项标题（expression）

FormM2ORadioFieldWidget

xml

<field data="m2oField" widget="Radio" />

orientation：排列方向（'TRANSVERSE' | 'VERTICAL'）
optionLabel：可选项标题（expression）

FormM2OFormFieldWidget

xml

<field data="m2oField" widget="Form">
	<view type="FORM">
		<template slot="fields">
			<field data="id" invisible="true" />
			<field data="code" />
			<field data="name" />
		</template>
	</view>
</field>

FormM2OTreeSelectFieldWidget

xml

<!-- references="business.PamirsEmployee" -->
<field data="m2oField" widget="TreeSelect">
	<nodes>
		<node model="business.PamirsCompany" label="activeRecord.name" labelFields="name" selfReferences="parent" />
		<node model="business.PamirsDepartment" label="activeRecord.name" labelFields="name" references="company" selfReferences="parent" />
		<node model="business.PamirsEmployee" label="activeRecord.name" labelFields="name" references="departmentList" />
	</nodes>
</field>

onlySelectedLeaf：仅允许选择叶节点数据（boolean）
enableSearch：是否允许搜索（boolean）
fetchAll：一次性获取全部数据（boolean）
node.model：层级模型编码（string）
node.label：层级选项标题（expression）
node.labelFields：层级标题字段（string[]）
node.references：层级关联模型编码（string）
node.selfReferences：自关联字段编码（string）

FormM2OCascaderFieldWidget

xml

<!-- references="business.PamirsEmployee" -->
<field data="m2oField" widget="Cascader">
	<nodes>
		<node model="business.PamirsCompany" label="activeRecord.name" labelFields="name" selfReferences="parent" />
		<node model="business.PamirsDepartment" label="activeRecord.name" labelFields="name" references="company" selfReferences="parent" />
		<node model="business.PamirsEmployee" label="activeRecord.name" labelFields="name" references="departmentList" />
	</nodes>
</field>

changeOnSelect：选择即改变（boolean）
showPath：显示选中路径（boolean）
labelsSeparator：标题文本分隔符（string）
enableSearch：是否允许搜索（boolean）
fetchAll：一次性获取全部数据（boolean）
node.model：层级模型编码（string）
node.label：层级选项标题（expression）
node.labelFields：层级标题字段（string[]）
node.references：层级关联模型编码（string）
node.selfReferences：自关联字段编码（string）

FormM2OUploadDraggableFieldWidget

xml

<field data="m2oField" widget="UploadDraggable" />

draggableIcon：拖拽上传图标（icon）
draggableTipText：拖拽上传提示词（string）
showDraggableExtendsionsText：是否展示支持拓展名（boolean）
draggableExtendsionsText：允许上传的文件类型提示文本（string）
partSize：单个分片大小（number：MB）
chunkUploadThreshold：分片总数阈值（number）
parallel：上传并发数（number）
limitSize：单个文件上传大小限制（number：MB）
limitFileExtensions：限制文件扩展名类型（string）eg：'.jpg,.jpeg,.png'

FormM2OUploadFieldWidget

xml

<!-- references="base.PamirsFile" -->
<field data="m2oField" widget="Upload" />

uploadPlaceholder：文件上传提示文本（string）
uploadIcon：文件上传提示图标（icon）
partSize：单个分片大小（number：MB）
chunkUploadThreshold：分片总数阈值（number）
parallel：上传并发数（number）
limitSize：单个文件上传大小限制（number：MB）
limitFileExtensions：限制文件扩展名类型（string）eg：'.jpg,.jpeg,.png'
cdnKey：指定上传 cdnKey，配合后端 OSS 配置使用（string）
privateLink：使用后端上传/下载文件，当 OSS 无法通过客户端直传时使用（boolean）

FormM2OUploadImgFieldWidget

xml

<!-- references="base.PamirsFile" -->
<field data="m2oField" widget="UploadImg" />

ploadPlaceholder：文件上传提示文本（string）
uploadIcon：文件上传提示图标（icon）
uploadIconText：上传图标提示文本（string）
partSize：单个分片大小（number：MB）
chunkUploadThreshold：分片总数阈值（number）
parallel：上传并发数（number）
limitSize：单个文件上传大小限制（number：MB）
limitFileExtensions：限制文件扩展名类型（string）eg：'.jpg,.jpeg,.png'

FormM2OAddressFieldWidget

xml

<!-- references="resource.ResourceAddress" -->
<field data="m2oField" widget="Address" />

changeOnSelect：选择即改变（boolean）
showPath：显示选中路径（boolean）
labelsSeparator：标题文本分隔符（string）
enableSearch：是否允许搜索（boolean）
fetchAll：一次性获取全部数据（boolean）

FormM2OCompanyFieldWidget

xml

<!-- references="business.PamirsCompany" -->
<field data="m2oField" widget="Company" />

FormM2ODepartmentFieldWidget

xml

<!-- references="business.PamirsDepartment" -->
<field data="m2oField" widget="Department" />

FormM2OEmployeeFieldWidget

xml

<!-- references="business.PamirsEmployee" -->
<field data="m2oField" widget="Employee" />

17、一对多（O2M）

FormO2MSelectFieldWidget

xml

<field data="o2mField" />

maxNumber：最大选择数（number）
minNumber：最小选择数（number）
load：加载函数函数编码， FunctionDefinition#fun（string）
showSearch：是否允许搜索（boolean）
searchFields：搜索字段（string[]）
optionLabel：可选项标题（expression）

FormO2MCheckboxFieldWidget

xml

<field data="o2mField" widget="Checkbox" />

maxNumber：最大选择数（number）
minNumber：最小选择数（number）
load：加载函数函数编码， FunctionDefinition#fun（string）
optionLabel：可选项标题（expression）

FormO2MTableFieldWidget

xml

<field data="o2mField" widget="Table">
	<view type="TABLE">
		<template slot="fields">
			<field data="id" invisible="true" />
			<field data="code" />
			<field data="name" />
		</template>
	</view>
</field>

FormO2MTreeSelectFieldWidget

xml

<!-- references="business.PamirsEmployee" -->
<field data="o2mField" widget="TreeSelect">
	<nodes>
		<node model="business.PamirsCompany" label="activeRecord.name" labelFields="name" selfReferences="parent" />
		<node model="business.PamirsDepartment" label="activeRecord.name" labelFields="name" references="company" selfReferences="parent" />
		<node model="business.PamirsEmployee" label="activeRecord.name" labelFields="name" references="departmentList" />
	</nodes>
</field>

onlySelectedLeaf：仅允许选择叶节点数据（boolean）
enableSearch：是否允许搜索（boolean）
fetchAll：一次性获取全部数据（boolean）
node.model：层级模型编码（string）
node.label：层级选项标题（expression）
node.labelFields：层级标题字段（string[]）
node.references：层级关联模型编码（string）
node.selfReferences：自关联字段编码（string）

FormO2MCascaderFieldWidget

xml

<!-- references="business.PamirsEmployee" -->
<field data="o2mField" widget="Cascader">
	<nodes>
		<node model="business.PamirsCompany" label="activeRecord.name" labelFields="name" selfReferences="parent" />
		<node model="business.PamirsDepartment" label="activeRecord.name" labelFields="name" references="company" selfReferences="parent" />
		<node model="business.PamirsEmployee" label="activeRecord.name" labelFields="name" references="departmentList" />
	</nodes>
</field>

changeOnSelect：选择即改变（boolean）
enableSearch：是否允许搜索（boolean）
fetchAll：一次性获取全部数据（boolean）
node.model：层级模型编码（string）
node.label：层级选项标题（expression）
node.labelFields：层级标题字段（string[]）
node.references：层级关联模型编码（string）
node.selfReferences：自关联字段编码（string）

FormO2MUploadDraggableFieldWidget

xml

<field data="o2mField" widget="UploadDraggable" />

draggableIcon：拖拽上传图标（icon）
draggableTipText：拖拽上传提示词（string）
showDraggableExtendsionsText：是否展示支持拓展名（boolean）
draggableExtendsionsText：允许上传的文件类型提示文本（string）
partSize：单个分片大小（number：MB）
chunkUploadThreshold：分片总数阈值（number）
parallel：上传并发数（number）
limit：上传数量限制（number）
limitSize：单个文件上传大小限制（number：MB）
limitFileExtensions：限制文件扩展名类型（string）eg：'.jpg,.jpeg,.png'

FormO2MUploadFieldWidget

xml

<field data="o2mField" widget="Upload" />

uploadPlaceholder：文件上传提示文本（string）
uploadIcon：文件上传提示图标（icon）
partSize：单个分片大小（number：MB）
chunkUploadThreshold：分片总数阈值（number）
parallel：上传并发数（number）
limit：上传数量限制（number）
limitSize：单个文件上传大小限制（number：MB）
limitFileExtensions：限制文件扩展名类型（string）eg：'.jpg,.jpeg,.png'
cdnKey：指定上传 cdnKey，配合后端 OSS 配置使用（string）
privateLink：使用后端上传/下载文件，当 OSS 无法通过客户端直传时使用（boolean）

FormO2MUploadImgFieldWidget

xml

<field data="o2mField" widget="UploadImg" />

ploadPlaceholder：文件上传提示文本（string）
uploadIcon：文件上传提示图标（icon）
uploadIconText：上传图标提示文本（string）
partSize：单个分片大小（number：MB）
chunkUploadThreshold：分片总数阈值（number）
parallel：上传并发数（number）
limit：上传数量限制（number）
limitSize：单个文件上传大小限制（number：MB）
limitFileExtensions：限制文件扩展名类型（string）eg：'.jpg,.jpeg,.png'

18、多对多（M2M）

FormM2MFieldSelectWidget

xml

<field data="m2mField" />

maxNumber：最大选择数（number）
minNumber：最小选择数（number）
load：加载函数函数编码， FunctionDefinition#fun（string）
showSearch：是否允许搜索（boolean）
searchFields：搜索字段（string[]）
optionLabel：可选项标题（expression）

FormM2MCheckboxFieldWidget

xml

<field data="m2mField" widget="Checkbox" />

maxNumber：最大选择数（number）
minNumber：最小选择数（number）
load：加载函数函数编码， FunctionDefinition#fun（string）
optionLabel：可选项标题（expression）

FormM2MTableFieldWidget

xml

<field data="m2mField" widget="Table">
	<view type="TABLE">
		<template slot="fields">
			<field data="id" invisible="true" />
			<field data="code" />
			<field data="name" />
		</template>
	</view>
</field>

FormM2MTreeSelectFieldWidget

xml

<!-- references="business.PamirsEmployee" -->
<field data="m2mField" widget="TreeSelect">
	<nodes>
		<node model="business.PamirsCompany" label="activeRecord.name" labelFields="name" selfReferences="parent" />
		<node model="business.PamirsDepartment" label="activeRecord.name" labelFields="name" references="company" selfReferences="parent" />
		<node model="business.PamirsEmployee" label="activeRecord.name" labelFields="name" references="departmentList" />
	</nodes>
</field>

onlySelectedLeaf：仅允许选择叶节点数据（boolean）
enableSearch：是否允许搜索（boolean）
fetchAll：一次性获取全部数据（boolean）
node.model：层级模型编码（string）
node.label：层级选项标题（expression）
node.labelFields：层级标题字段（string[]）
node.references：层级关联模型编码（string）
node.selfReferences：自关联字段编码（string）

FormM2MCascaderFieldWidget

xml

<!-- references="business.PamirsEmployee" -->
<field data="m2mField" widget="Cascader">
	<nodes>
		<node model="business.PamirsCompany" label="activeRecord.name" labelFields="name" selfReferences="parent" />
		<node model="business.PamirsDepartment" label="activeRecord.name" labelFields="name" references="company" selfReferences="parent" />
		<node model="business.PamirsEmployee" label="activeRecord.name" labelFields="name" references="departmentList" />
	</nodes>
</field>

changeOnSelect：选择即改变（boolean）
enableSearch：是否允许搜索（boolean）
fetchAll：一次性获取全部数据（boolean）
node.model：层级模型编码（string）
node.label：层级选项标题（expression）
node.labelFields：层级标题字段（string[]）
node.references：层级关联模型编码（string）
node.selfReferences：自关联字段编码（string）

FormTransferFieldWidget

xml

<field data="m2mField" widget="Transfer" />

maxNumber：最大选择数（number）
minNumber：最小选择数（number）
optionLabel：可选项标题（expression）
enableSearch：是否启用搜索（boolean）
sortable：是否启用排序（boolean）
leftDisplayType：左侧显示类型（'LIST' | 'TABLE'）
leftFields：左侧表格显示字段，当 leftDisplayType="TABLE" 时有效（string[]）
rightDisplayType：右侧显示类型（'LIST' | 'TABLE'）
rightFields：右侧表格显示字段，当 rightDisplayType="TABLE" 时有效（string[]）

FormM2MTreeFieldWidget

xml

<!-- references="business.PamirsEmployee" -->
<field data="m2mField" widget="Tree">
	<nodes>
		<node model="business.PamirsCompany" label="activeRecord.name" labelFields="name" selfReferences="parent" />
		<node model="business.PamirsDepartment" label="activeRecord.name" labelFields="name" references="company" selfReferences="parent" />
		<node model="business.PamirsEmployee" label="activeRecord.name" labelFields="name" references="departmentList" />
	</nodes>
</field>

onlySelectedLeaf：仅允许选择叶节点数据（boolean）
checkStrictly：选中时父子节点选中状态关联（boolean）
nodeCheckedAll：节点允许全选（boolean）
nodeCheckedAllLabel：全选标题文本（string）
nodeUncheckedAllLabel：取消全选标题文本（string）
fetchAll：一次性获取全部数据（boolean）
node.model：层级模型编码（string）
node.label：层级选项标题（expression）
node.labelFields：层级标题字段（string[]）
node.references：层级关联模型编码（string）
node.selfReferences：自关联字段编码（string）

FormM2MUploadDraggableFieldWidget

xml

<field data="m2mField" widget="UploadDraggable" />

draggableIcon：拖拽上传图标（icon）
draggableTipText：拖拽上传提示词（string）
showDraggableExtendsionsText：是否展示支持拓展名（boolean）
draggableExtendsionsText：允许上传的文件类型提示文本（string）
partSize：单个分片大小（number：MB）
chunkUploadThreshold：分片总数阈值（number）
parallel：上传并发数（number）
limit：上传数量限制（number）
limitSize：单个文件上传大小限制（number：MB）
limitFileExtensions：限制文件扩展名类型（string）eg：'.jpg,.jpeg,.png'

FormM2MUploadFieldWidget

xml

<field data="m2mField" widget="Upload" />

uploadPlaceholder：文件上传提示文本（string）
uploadIcon：文件上传提示图标（icon）
partSize：单个分片大小（number：MB）
chunkUploadThreshold：分片总数阈值（number）
parallel：上传并发数（number）
limit：上传数量限制（number）
limitSize：单个文件上传大小限制（number：MB）
limitFileExtensions：限制文件扩展名类型（string）eg：'.jpg,.jpeg,.png'
cdnKey：指定上传 cdnKey，配合后端 OSS 配置使用（string）
privateLink：使用后端上传/下载文件，当 OSS 无法通过客户端直传时使用（boolean）

FormM2MUploadImgFieldWidget

xml

<field data="m2mField" widget="UploadImg" />

ploadPlaceholder：文件上传提示文本（string）
uploadIcon：文件上传提示图标（icon）
uploadIconText：上传图标提示文本（string）
partSize：单个分片大小（number：MB）
chunkUploadThreshold：分片总数阈值（number）
parallel：上传并发数（number）
limit：上传数量限制（number）
limitSize：单个文件上传大小限制（number：MB）
limitFileExtensions：限制文件扩展名类型（string）eg：'.jpg,.jpeg,.png'

FormM2MCompanyFieldWidget

xml

<!-- references="business.PamirsCompany" -->
<field data="m2mField" widget="Company" />

FormM2MDepartmentFieldWidget

xml

<!-- references="business.PamirsDepartment" -->
<field data="m2mField" widget="Department" />

FormM2MEmployeeFieldWidget

xml

<!-- references="business.PamirsEmployee" -->
<field data="m2mField" widget="Employee" />

一、视图特征 ​

二、DSL 结构 ​

三、默认字段组件 ​

四、可选字段组件 ​

五、DSL 属性配置 ​

（一）表单属性配置 ​

（二）通用字段配置 ​

（三）字段组件属性配置 ​

1、文本（STRING） ​

FormStringInputFieldWidget ​

FormStringColorPickerFieldWidget ​

FormStringSignatureFieldWidget ​

FormStringUploadDraggableFieldWidget ​

FormStringUploadFieldWidget ​

FormStringUploadImgFieldWidget ​

FormStringIframeFieldWidget ​

FormStringHyperlinksFieldWidget ​

FormStringDownloadFieldWidget ​

FormStringMediaPlayerFieldWidget ​

FormStringPhoneFieldWidget ​

FormStringEmailFieldWidget ​

FormStringMultiTagFieldWidget ​

2、多行文本（TEXT） ​

FormTextFieldWidget ​

3、富文本（HTML） ​

FormHtmlRichTextFieldWidget ​

4、手机（PHONE） ​

FormPhoneFieldWidget ​

5、邮箱（EMAIL） ​

FormEmailFieldWidget ​

6、整数（INTEGER） ​

FormIntegerFieldWidget ​

FormIntegerSliderFieldWidget ​

FormIntegerMultiFieldWidget ​

FormIntegerTagFieldWidget ​

7、浮点数（FLOAT） ​

FormFloatFieldWidget ​

8、金额（MONEY） ​

FormMoneyFieldWidget ​

9、布尔（BOOLEAN） ​

FormBooleanSwitchFieldWidget ​

FormBooleanSelectFieldWidget ​

FormBooleanRadioFieldWidget ​

FormBooleanCheckboxFieldWidget ​

10、枚举（ENUM） ​

FormEnumFieldWidget ​

FormEnumRadioWidget ​

FormEnumMultiSelectFieldWidget ​

FormEnumMultiCheckboxFieldWidget ​

11、日期时间（DATETIME） ​

FormDateTimeFieldWidget ​

12、日期（DATE） ​

FormDateFieldWidget ​

13、时间（TIME） ​

FormTimeFieldWidget ​

14、年份（YEAR） ​

FormYearFieldWidget ​

15、键值对（MAP） ​

FormMapFieldWidget ​

16、多对一（M2O） ​

FormM2OSelectFieldWidget ​

FormM2ORadioFieldWidget ​

FormM2OFormFieldWidget ​

FormM2OTreeSelectFieldWidget ​

FormM2OCascaderFieldWidget ​

FormM2OUploadDraggableFieldWidget ​

FormM2OUploadFieldWidget ​

FormM2OUploadImgFieldWidget ​

FormM2OAddressFieldWidget ​

FormM2OCompanyFieldWidget ​

FormM2ODepartmentFieldWidget ​

FormM2OEmployeeFieldWidget ​

17、一对多（O2M） ​

FormO2MSelectFieldWidget ​

FormO2MCheckboxFieldWidget ​

FormO2MTableFieldWidget ​

FormO2MTreeSelectFieldWidget ​

FormO2MCascaderFieldWidget ​

FormO2MUploadDraggableFieldWidget ​

FormO2MUploadFieldWidget ​