详情（Detail）

一、视图特征

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

二、DSL 结构

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

<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
文本（STRING）	是	标签（Tag）	DetailStringTagFieldWidget
多行文本（TEXT）	否	多行文本（TextArea）	DetailCommonFieldWidget
富文本（HTML）	否	富文本（RichText）	DetailHtmlFieldWidget
手机（PHONE）	否	手机（Phone）	DetailStringFieldWidget
邮箱（EMAIL）	否	邮箱（Email）	DetailStringFieldWidget
整数（INTEGER）	否	整数（Integer）	DetailNumberWidget
整数（INTEGER）	是	标签（Tag）	DetailStringTagFieldWidget
浮点数（FLOAT）	否	数字（Float）	DetailNumberWidget
金额（MONEY）	否	货币（Currency）	DetailNumberWidget
布尔（BOOLEAN）	否	开关（Switch）	DetailBooleanFieldWidget
枚举（ENUM）	否	下拉单选（Select）	DetailEnumFieldWidget
枚举（ENUM）	是	下拉多选（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 属性配置

（一）详情属性配置

<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

<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

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

DetailStringSignatureFieldWidget

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

signatureFontColor：签名文字颜色（color）
signatureBackGroundColor：签名背景面板颜色（color）

DetailStringUploadFieldWidget

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

cdnKey：指定上传 cdnKey，配合后端 OSS 配置使用（string）
privateLink：使用后端上传/下载文件，当 OSS 无法通过客户端直传时使用（boolean）

DetailStringUploadImgFieldWidget

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

DetailStringIframeFieldWidget

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

crypto：加密存储（boolean）

DetailStringHyperlinksFieldWidget

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

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

DetailStringDownloadFieldWidget

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

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

DetailStringMediaPlayerFieldWidget

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

DetailStringTagFieldWidget

<field data="stringMultiField" />

2、多行文本（TEXT）

DetailCommonFieldWidget

<field data="textField" />

3、富文本（HTML）

DetailHtmlFieldWidget

<field data="htmlField" />

encode：编码存储（boolean）

4、整数（INTEGER）

DetailNumberWidget

<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

<field data="booleanField" />

6、枚举（ENUM）

DetailEnumFieldWidget

<field data="enumField" />

DetailEnumMultiFieldWidget

<field data="enumMultiField" />

7、日期时间（DATETIME）

DetailDateTimeFieldWidget

<field data="datetimeField" />

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

8、日期（DATE）

DetailDateFieldWidget

<field data="dateField" />

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

9、时间（TIME）

DetailTimeFieldWidget

<field data="timeField" />

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

10、年份（YEAR）

DetailYearFieldWidget

<field data="yearField" />

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

11、键值对（MAP）

DetailMapFieldWidget

<field data="mapField" />

12、多对一（M2O）

DetailM2OSelectFieldWidget

<field data="m2oField" />

optionLabel：可选项标题（expression）

DetailM2OUploadWidget

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

cdnKey：指定上传 cdnKey，配合后端 OSS 配置使用（string）
privateLink：使用后端上传/下载文件，当 OSS 无法通过客户端直传时使用（boolean）

13、一对多（O2M）

DetailO2MSelectFieldWidget

<field data="o2mField" />

optionLabel：可选项标题（expression）

DetailO2MTableFieldWidget

<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

<field data="=m2mField" />

optionLabel：可选项标题（expression）

DetailM2MTableFieldWidget

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