跳至主要內容

表单（Form）

一、视图特征

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

二、DSL 结构

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

<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
是标签（Tag）FormStringMultiTagFieldWidget
多行文本（TEXT）否多行文本（TextArea）FormTextFieldWidget
富文本（HTML）否富文本（RichText）FormHtmlRichTextFieldWidget
手机（PHONE）否手机（Phone）FormPhoneFieldWidget
邮箱（EMAIL）否邮箱（Email）FormEmailFieldWidget
整数（INTEGER）否整数（Integer）FormIntegerFieldWidget
是标签（Tag）FormIntegerMultiFieldWidget
浮点数（FLOAT）否数字（Float）FormFloatFieldWidget
金额（MONEY）否货币（Currency）FormMoneyFieldWidget
布尔（BOOLEAN）否开关（Switch）FormBooleanSwitchFieldWidget
枚举（ENUM）否下拉单选（Select）FormEnumFieldWidget
是下拉多选（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
是标签（Tag）FormIntegerTagFieldWidget
布尔（BOOLEAN）否下拉单选（Select）FormBooleanSelectFieldWidget
单选框（Radio）FormBooleanRadioFieldWidget
复选框（Checkbox）FormBooleanCheckboxFieldWidget
枚举（ENUM）否单选框（Radio）FormEnumRadioWidget
是复选框（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 属性配置

（一）表单属性配置

<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

<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

<field data="stringField" widget="ColorPicker" />
  • predefine：预置颜色（JSON - string[]）

FormStringSignatureFieldWidget

<field data="stringField" widget="Signature" />
  • showClearButton：是否展示清除按钮（boolean）
  • clearButtonText：清除按钮文字（string）
  • showSaveButton：是否展示保存按钮（boolean）
  • saveButtonText：保存按钮文字（string）
  • signatureFontColor：签名文字颜色（color）
  • signatureBackGroundColor：签名背景面板颜色（color）

FormStringUploadDraggableFieldWidget

<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

<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

<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

<field data="stringField" widget="Iframe" />
  • mode：组件模式（'DYNAMIC' | 'STATIC'）

提示

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

FormStringHyperlinksFieldWidget

<field data="stringField" widget="Hyperlinks" />
  • target：链接打开方式（'OPEN_WINDOW' | 'ROUTER'）
  • text：链接显示文本（string）

FormStringDownloadFieldWidget

<field data="stringField" widget="Download" />
  • linkDisplayTextPrefix：下载提示文本前缀（string）
  • linkDisplayText：下载提示文本（string）
  • downloadFileName：下载的文件名（string）

FormStringMediaPlayerFieldWidget

<field data="stringField" widget="MediaPlayer" />
  • mode：组件模式（'DYNAMIC' | 'STATIC'）
  • fileSource：文件来源（'UPLOAD' | 'INPUT'）

提示

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

FormStringPhoneFieldWidget

<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

<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

<field data="stringMultiField" />
  • allowRepeat：是否允许重复（boolean）
  • unitValueLength：单位值最大长度（number）

2、多行文本（TEXT）

FormTextFieldWidget

<field data="textField" />
  • minLength：最小长度（number | expression）
  • maxLength：最大长度（number | expression）
  • showCount：显示计数器（boolean）
  • rows：最小行数，可调整默认输入框高度（number）

3、富文本（HTML）

FormHtmlRichTextFieldWidget

<field data="htmlField" />
  • height：高度（string | number）
  • encode：加密存储（boolean）

4、手机（PHONE）

FormPhoneFieldWidget

<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

<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

<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

<field data="integerField" widget="Slider" />
  • min：最小值（number | expression）
  • max：最大值（number | expression）
  • step：递增或递减步长（number）
  • direction：滑动条方向（'horizontal' | 'vertical'）
  • reverse：反向坐标轴，滑动条置反（boolean）
  • hasTooltip：显示提示气泡（boolean）

FormIntegerMultiFieldWidget

<field data="integerMultiField" />
  • allowRepeat：是否允许重复（boolean）
  • unitValueLength：单位值最大长度（number）
  • limit：最大标签个数（number）
  • min：单个数字最小值（number | expression）
  • max：单个数字最大值（number | expression）

FormIntegerTagFieldWidget

<field data="integerMultiField" widget="Tag" />
  • allowRepeat：是否允许重复（boolean）
  • unitValueLength：单位值最大长度（number）

7、浮点数（FLOAT）

FormFloatFieldWidget

<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

<field data="moneyField" />

同 FormFloatFieldWidget 组件属性。

9、布尔（BOOLEAN）

FormBooleanSwitchFieldWidget

<field data="booleanField" />

FormBooleanSelectFieldWidget

<field data="booleanField" widget="Select" />
  • maxNumber：最大选择数（number）
  • minNumber：最小选择数（number）

FormBooleanRadioFieldWidget

<field data="booleanField" widget="Select" />
  • maxNumber：最大选择数（number）
  • minNumber：最小选择数（number）
  • orientation：排列方向（'TRANSVERSE' | 'VERTICAL'）
  • radioMode：可选项样式（'BUTTON'）
  • rowLimit：每行展示可选项数量（number）
  • autocorrection：失焦后自动修复（boolean）

FormBooleanCheckboxFieldWidget

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

10、枚举（ENUM）

FormEnumFieldWidget

<field data="enumField" />
  • maxNumber：最大选择数（number）
  • minNumber：最小选择数（number）

FormEnumRadioWidget

<field data="enumField" widget="Radio" />
  • maxNumber：最大选择数（number）
  • minNumber：最小选择数（number）
  • orientation：排列方向（'TRANSVERSE' | 'VERTICAL'）
  • radioMode：可选项样式（'BUTTON'）
  • rowLimit：每行展示可选项数量（number）
  • autocorrection：失焦后自动修复（boolean）

FormEnumMultiSelectFieldWidget

<field data="enumMultiField" />
  • maxNumber：最大选择数（number）
  • minNumber：最小选择数（number）

FormEnumMultiCheckboxFieldWidget

<field data="enumMultiField" widget="Checkbox" />
  • maxNumber：最大选择数（number）
  • minNumber：最小选择数（number）
  • orientation：排列方向（'TRANSVERSE' | 'VERTICAL'）

11、日期时间（DATETIME）

FormDateTimeFieldWidget

<field data="datetimeField" />
  • format：日期时间格式化文本（string）

12、日期（DATE）

FormDateFieldWidget

<field data="dateField" />
  • format：日期格式化文本（string）

13、时间（TIME）

FormTimeFieldWidget

<field data="timeField" />
  • format：时间格式化文本（string）

14、年份（YEAR）

FormYearFieldWidget

<field data="yearField" />
  • format：年份格式化文本（string）

15、键值对（MAP）

FormMapFieldWidget

<field data="mapField" />
  • limit：限制键值对数量（number）

16、多对一（M2O）

FormM2OSelectFieldWidget

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

FormM2ORadioFieldWidget

<field data="m2oField" widget="Radio" />
  • orientation：排列方向（'TRANSVERSE' | 'VERTICAL'）
  • optionLabel：可选项标题（expression）

FormM2OFormFieldWidget

<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

<!-- 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

<!-- 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

<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

<!-- 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

<!-- 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

<!-- references="resource.ResourceAddress" -->
<field data="m2oField" widget="Address" />
  • changeOnSelect：选择即改变（boolean）
  • showPath：显示选中路径（boolean）
  • labelsSeparator：标题文本分隔符（string）
  • enableSearch：是否允许搜索（boolean）
  • fetchAll：一次性获取全部数据（boolean）

FormM2OCompanyFieldWidget

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

FormM2ODepartmentFieldWidget

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

FormM2OEmployeeFieldWidget

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

17、一对多（O2M）

FormO2MSelectFieldWidget

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

FormO2MCheckboxFieldWidget

<field data="o2mField" widget="Checkbox" />
  • maxNumber：最大选择数（number）
  • minNumber：最小选择数（number）
  • load：加载函数函数编码， FunctionDefinition#fun（string）
  • optionLabel：可选项标题（expression）

FormO2MTableFieldWidget

<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

<!-- 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

<!-- 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

<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

<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

<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

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

FormM2MCheckboxFieldWidget

<field data="m2mField" widget="Checkbox" />
  • maxNumber：最大选择数（number）
  • minNumber：最小选择数（number）
  • load：加载函数函数编码， FunctionDefinition#fun（string）
  • optionLabel：可选项标题（expression）

FormM2MTableFieldWidget

<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

<!-- 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

<!-- 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

<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

<!-- 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

<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

<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

<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

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

FormM2MDepartmentFieldWidget

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

FormM2MEmployeeFieldWidget

<!-- references="business.PamirsEmployee" -->
<field data="m2mField" widget="Employee" />
默认页脚
Copyright © 2025 Mr.Hope