一、视图特征 ​

  • 视图类型：详情（DETAIL）
  • 数据类型：对象（Object）
  • DSL 特征：具备布局功能。
  • 数据结构通用行为：
    • 查询行为：数据回填。
  • 详情行为：
    • 交互行为：所有字段以只读形式展示，无其他交互。
    • 子表格查询行为：通过后端分页查询。
  • 常用接口：（默认数据管理器函数）
    • queryOne：数据回填。（pk is not null）
    • queryPage：子表格查询行为。

二、DSL 结构 ​

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

xml
<view type="DETAIL" model="demo.DemoModel" name="demo_detail_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>

详情视图与表单视图同属于对象（Object）类型的视图，其 DSL 结构与表单视图完全一样。在这个视图中唯一的区别就是视图类型和名称发生了变化。

提示

读者可以通过了解表单视图架构来理解详情视图，请参考：表单（Form）

三、默认字段组件 ​

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

字段类型是否多值默认组件TypeScript Class
文本（STRING）否文本（Input）DetailStringFieldWidget
是标签（Tag）DetailStringTagFieldWidget
多行文本（TEXT）否多行文本（TextArea）DetailCommonFieldWidget
富文本（HTML）否富文本（RichText）DetailHtmlFieldWidget
手机（PHONE）否手机（Phone）DetailStringFieldWidget
邮箱（EMAIL）否邮箱（Email）DetailStringFieldWidget
整数（INTEGER）否整数（Integer）DetailNumberWidget
是标签（Tag）DetailStringTagFieldWidget
浮点数（FLOAT）否数字（Float）DetailNumberWidget
金额（MONEY）否货币（Currency）DetailNumberWidget
布尔（BOOLEAN）否开关（Switch）DetailBooleanFieldWidget
枚举（ENUM）否下拉单选（Select）DetailEnumFieldWidget
是下拉多选（Select）DetailEnumMultiFieldWidget
日期时间（DATETIME）否日期时间（DateTimePicker）DetailDateTimeFieldWidget
日期（DATE）否日期（DatePicker）DetailDateFieldWidget
时间（TIME）否时间（TimePicker）DetailTimeFieldWidget
年份（YEAR）否年份（YearPicker）DetailYearFieldWidget
键值对（MAP）否键值对（Map）DetailMapFieldWidget
多对一（M2O）否下拉单选（Select）DetailM2OSelectFieldWidget
一对多（O2M）是下拉多选（Select）DetailO2MSelectFieldWidget
多对多（M2M）是下拉多选（Select）DetailM2MSelectFieldWidget

四、可选字段组件 ​

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

字段类型是否多值组件TypeScript Class
文本（STRING）否颜色（ColorPicker）DetailStringColorPickerFieldWidget
手写签名（Signature）DetailStringSignatureFieldWidget
文件（Upload）DetailStringUploadFieldWidget
图片（UploadImg）DetailStringUploadImgFieldWidget
嵌入网页（Iframe）DetailStringIframeFieldWidget
超链接（Hyperlinks）DetailStringHyperlinksFieldWidget
文件下载（Download）DetailStringDownloadFieldWidget
多媒体播放器（MediaPlayer）DetailStringMediaPlayerFieldWidget
是文件（Upload）DetailStringUploadFieldWidget
图片（UploadImg）DetailStringUploadImgFieldWidget
多行文本（TEXT）否手写签名（Signature）DetailStringSignatureFieldWidget
文件（Upload）DetailStringUploadFieldWidget
图片（UploadImg）DetailStringUploadImgFieldWidget
文件下载（Download）DetailStringDownloadFieldWidget
布尔（BOOLEAN）否下拉单选（Select）?
单选框（Radio）?
复选框（Checkbox）?
多对一（M2O）否单选框（Radio）?
表单（Form）FormM2OFormFieldWidget
拖拽上传（UploadDraggable）FormM2OUploadDraggableFieldWidget
文件（Upload）DetailM2OUploadWidget
图片（UploadImg）FormM2OUploadImgFieldWidget
一对多（O2M）是复选框（Checkbox）?
表格（Table）DetailO2MTableFieldWidget
拖拽上传（UploadDraggable）FormO2MUploadDraggableFieldWidget
文件（Upload）FormO2MUploadFieldWidget
图片（UploadImg）FormO2MUploadImgFieldWidget
多对多（M2M）是复选框（Checkbox）?
表格（Table）DetailM2MTableFieldWidget
拖拽上传（UploadDraggable）FormM2MUploadDraggableFieldWidget
文件（Upload）FormM2MUploadFieldWidget
图片（UploadImg）FormM2MUploadImgFieldWidget

五、DSL 属性配置 ​

（一）详情属性配置 ​

xml
<element widget="Detail">
    ......
</element>
  • layout：表单布局（'horizontal' | 'vertical' | 'inline'）
  • cols：行栅格数（number）
  • filter：不可视过滤条件（rsql）
  • domain：可视过滤条件（rsql）
  • load：加载函数函数编码， FunctionDefinition#fun（string）

（二）通用字段配置 ​

  • invisible：是否隐藏（boolean | expression）
  • usingLoading：是否使用加载过渡动画（boolean）
  • layout：表单布局（'horizontal' | 'vertical' | 'inline'）
  • label：字段标题（string | expression）
  • labelInvisible：是否隐藏字段标题（boolean）
  • help：字段帮助文本（string）
  • hint：字段提示文本（string | expression）
  • required：是否必填（boolean ｜ expresssion）
  • requiredTips：必填提示文本（string）
  • disabled：是否禁用（boolean ｜ expresssion）
  • emptyStyle：空值样式（string | 'hyphen' | 'empty' | 'null'）

提示

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

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

1、文本（STRING） ​

DetailStringFieldWidget ​

xml
<field data="stringField" />
  • type：输入类型（'text' | 'password' | expression）
  • prefix：前缀文本（string | icon）
  • prefixType：前缀类型（'TEXT' | 'ICON'）
  • prefixStore：前缀是否存储（boolean）
  • suffix：后缀文本（string | icon）
  • suffixType：后缀类型（'TEXT' | 'ICON'）
  • suffixStore：后缀是否存储（boolean）
  • crypto：加密存储（boolean）

DetailStringColorPickerFieldWidget ​

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

DetailStringSignatureFieldWidget ​

xml
<field data="stringField" widget="Signature" />
  • signatureFontColor：签名文字颜色（color）
  • signatureBackGroundColor：签名背景面板颜色（color）

DetailStringUploadFieldWidget ​

xml
<field data="stringField" widget="Upload" />
  • cdnKey：指定上传 cdnKey，配合后端 OSS 配置使用（string）
  • privateLink：使用后端上传/下载文件，当 OSS 无法通过客户端直传时使用（boolean）

DetailStringUploadImgFieldWidget ​

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

DetailStringIframeFieldWidget ​

xml
<field data="stringField" widget="Iframe" />
  • crypto：加密存储（boolean）

DetailStringHyperlinksFieldWidget ​

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

DetailStringDownloadFieldWidget ​

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

DetailStringMediaPlayerFieldWidget ​

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

DetailStringTagFieldWidget ​

xml
<field data="stringMultiField" />

2、多行文本（TEXT） ​

DetailCommonFieldWidget ​

xml
<field data="textField" />

3、富文本（HTML） ​

DetailHtmlFieldWidget ​

xml
<field data="htmlField" />
  • encode：编码存储（boolean）

4、整数（INTEGER） ​

DetailNumberWidget ​

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）

5、布尔（BOOLEAN） ​

DetailBooleanFieldWidget ​

xml
<field data="booleanField" />

6、枚举（ENUM） ​

DetailEnumFieldWidget ​

xml
<field data="enumField" />

DetailEnumMultiFieldWidget ​

xml
<field data="enumMultiField" />

7、日期时间（DATETIME） ​

DetailDateTimeFieldWidget ​

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

8、日期（DATE） ​

DetailDateFieldWidget ​

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

9、时间（TIME） ​

DetailTimeFieldWidget ​

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

10、年份（YEAR） ​

DetailYearFieldWidget ​

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

11、键值对（MAP） ​

DetailMapFieldWidget ​

xml
<field data="mapField" />

12、多对一（M2O） ​

DetailM2OSelectFieldWidget ​

xml
<field data="m2oField" />
  • optionLabel：可选项标题（expression）

DetailM2OUploadWidget ​

xml
<field data="m2oField" widget="Upload" />
  • cdnKey：指定上传 cdnKey，配合后端 OSS 配置使用（string）
  • privateLink：使用后端上传/下载文件，当 OSS 无法通过客户端直传时使用（boolean）

13、一对多（O2M） ​

DetailO2MSelectFieldWidget ​

xml
<field data="o2mField" />
  • optionLabel：可选项标题（expression）

DetailO2MTableFieldWidget ​

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>

14、多对多（M2M） ​

DetailM2MSelectFieldWidget ​

xml
<field data="=m2mField" />
  • optionLabel：可选项标题（expression）

DetailM2MTableFieldWidget ​

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>