画廊（Gallery）
一、视图特征
- 视图类型：画廊（GALLERY）
- 数据类型：列表（List）
- DSL 特征：具备布局功能。
- 数据结构通用行为：
- 查询行为：分页、排序、搜索。
- 交互行为：单选、多选。
- 常用接口：（默认数据管理器函数）
- queryPage：支持分页、排序、搜索等查询功能。
- create：行内编辑创建。（pk is null）
- update：行内编辑更新。（pk is not null）
- delete：删除动作。
二、DSL 结构
一个精简版视图可以是这样的：（“精简” 表示每个标签的属性数量少，而不是节点数量少。）
<view type="GALLERY" model="demo.DemoModel" name="demo_gallery_view">
<template slot="searchFields">
<field data="code" />
<field data="name" />
</template>
<template slot="actions">
<action name="redirectCreatePage" label="创建" />
<action name="delete" label="删除" />
</template>
<template slot="gallery">
<field data="id" invisible="true" />
<template slot="card">
<template slot="title">
<field data="name" labelInvisible="true" justifyContent="center" />
</template>
<template slot="content">
<field data="code" />
</template>
<template slot="rowActions">
<action name="redirectUpdatePage" label="编辑" />
<action name="redirectDetailPage" label="详情" />
</template>
</template>
</template>
</view>画廊视图从整体上看类似于表格视图，而 title 和 content 插槽中的内容具备布局功能。
画廊视图是根据视图特征设计的 DSL 结构，其具备列表（List）数据结构的特征，在局部的卡片中又具备了布局功能。
在组件的分工上， Gallery 组件用于循环渲染 Card 组件，使得每个 Card 组件都具备独立的数据集和渲染单条数据的能力。而每个 Card 组件又分为三个部分：标题区、内容区和动作区，用于展示业务数据和动作行为。
三、默认字段组件
在上面的 DSL 中，我们并没有指定 widget 属性，那么在这种情况下，Widget 框架将根据字段元数据属性获取对应的默认组件。下面列举了目前画廊视图中用到的所有默认组件：
| 字段类型 | 是否多值 | 默认组件 | TypeScript Class |
|---|---|---|---|
| 文本（STRING） | 否 | 文本（Input） | GalleryStringFieldWidget |
| 是 | 标签（Tag） | GalleryStringTagFieldWidget | |
| 多行文本（TEXT） | 否 | 多行文本（TextArea） | GalleryCommonFieldWidget |
| 富文本（HTML） | 否 | 富文本（RichText） | GalleryHtmlFieldWidget |
| 手机（PHONE） | 否 | 手机（Phone） | GalleryStringFieldWidget |
| 邮箱（EMAIL） | 否 | 邮箱（Email） | GalleryStringFieldWidget |
| 整数（INTEGER） | 否 | 整数（Integer） | GalleryNumberWidget |
| 是 | 标签（Tag） | GalleryStringTagFieldWidget | |
| 浮点数（FLOAT） | 否 | 数字（Float） | GalleryNumberWidget |
| 金额（MONEY） | 否 | 货币（Currency） | GalleryNumberWidget |
| 布尔（BOOLEAN） | 否 | 文本（是/否） | GalleryBooleanFieldWidget |
| 枚举（ENUM） | 否 | 标签（Tag） | GalleryEnumFieldWidget |
| 是 | 标签（Tag） | GalleryEnumMultiFieldWidget | |
| 日期时间（DATETIME） | 否 | 日期时间（DateTimePicker） | GalleryDateTimeFieldWidget |
| 日期（DATE） | 否 | 日期（DatePicker） | GalleryDateFieldWidget |
| 时间（TIME） | 否 | 时间（TimePicker） | GalleryTimeFieldWidget |
| 年份（YEAR） | 否 | 年份（YearPicker） | GalleryYearFieldWidget |
| 键值对（MAP） | 否 | 键值对（Map） | GalleryMapFieldWidget |
| 多对一（M2O） | 否 | 下拉单选（Select） | GalleryM2OSelectFieldWidget |
| 一对多（O2M） | 是 | 下拉多选（Select） | GalleryO2MSelectFieldWidget |
| 多对多（M2M） | 是 | 下拉多选（Select） | GalleryM2MSelectFieldWidget |
四、可选字段组件
针对每一种字段类型，除了上述对应的默认组件外，还有一些组件是通过指定 widget 属性进行使用的。下面列举了目前画廊视图中现有的字段组件：
| 字段类型 | 是否多值 | 默认组件 | TypeScript Class |
|---|---|---|---|
| 文本（STRING） | 否 | 颜色（ColorPicker） | GalleryStringColorPickerFieldWidget |
| 文件（Upload） | GalleryStringUploadFieldWidget | ||
| 图片（UploadImg） | GalleryStringUploadImgFieldWidget | ||
| 嵌入网页（Iframe） | GalleryStringIframeFieldWidget | ||
| 超链接（Hyperlinks） | GalleryStringHyperlinksFieldWidget | ||
| 文件下载（Download） | ? | ||
| 多媒体播放器（MediaPlayer） | GalleryStringMediaPlayerWidget | ||
| 是 | 文件（Upload） | GalleryStringUploadFieldWidget | |
| 图片（UploadImg） | GalleryStringUploadImgFieldWidget | ||
| 多行文本（TEXT） | 否 | 手写签名（Signature） | ? |
| 拖拽上传（UploadDraggable） | ? | ||
| 文件（Upload） | GalleryStringUploadFieldWidget | ||
| 图片（UploadImg） | GalleryStringUploadImgFieldWidget | ||
| 文件下载（Download） | ? | ||
| 布尔（BOOLEAN） | 否 | 下拉单选（Select） | ? |
| 单选框（Radio） | ? | ||
| 复选框（Checkbox） | ? | ||
| 多对一（M2O） | 否 | 单选框（Radio） | ? |
| 拖拽上传（UploadDraggable） | FormM2OUploadDraggableFieldWidget | ||
| 文件（Upload） | FormM2OUploadFieldWidget | ||
| 图片（UploadImg） | ? | ||
| 一对多（O2M） | 是 | 复选框（Checkbox） | ? |
| 拖拽上传（UploadDraggable） | FormO2MUploadDraggableFieldWidget | ||
| 文件（Upload） | FormO2MUploadFieldWidget | ||
| 图片（UploadImg） | ? | ||
| 多对多（M2M） | 是 | 拖拽上传（UploadDraggable） | FormM2MUploadDraggableFieldWidget |
| 文件（Upload） | FormM2MUploadFieldWidget | ||
| 图片（UploadImg） | ? |
五、DSL 属性配置
（一）画廊属性配置
<element widget="Gallery">
......
</element>- cols：每行卡片数量（
number） - gutter：卡片间隔（
gutter）
（二）卡片属性配置
<element widget="Card">
......
</element>- width：宽度（
number | string） - minWidth：最小宽度（
number | string） - maxWidth：最大宽度（
number | string） - height：高度（
number | string） - minHeight：最小高度（
number | string） - maxHeight：最大高度（
number | string） - allowClick：卡片允许点击，需配合
click插槽配置action动作使用（boolean） - inlineActiveCount：底部动作区显示数量（
number）
（三）通用字段配置
- justifyContent：水平对齐方式（
FlexRowJustify） - emptyStyle：空值样式（
string | 'hyphen' | 'empty' | 'null'）
提示
带 “” 标记的属性并不是完全通用的属性，而是需要依赖具体组件实现，若组件本身的交互不支持或未实现的可能会出现配置无效的情况。
（四）字段组件属性配置
1、文本（STRING）
GalleryStringFieldWidget
<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）
GalleryStringColorPickerFieldWidget
<field data="stringField" widget="ColorPicker" />GalleryStringUploadFieldWidget
<field data="stringField" widget="Upload" />- cdnKey：指定上传 cdnKey，配合后端 OSS 配置使用（
string） - privateLink：使用后端上传/下载文件，当 OSS 无法通过客户端直传时使用（
boolean）
GalleryStringUploadImgFieldWidget
<field data="stringField" widget="UploadImg" />GalleryStringIframeFieldWidget
<field data="stringField" widget="Iframe" />- crypto：加密存储（
boolean）
GalleryStringHyperlinksFieldWidget
<field data="stringField" widget="Hyperlinks" />- target：链接打开方式（
'OPEN_WINDOW' | 'ROUTER'） - text：链接显示文本（
string）
GalleryStringMediaPlayerWidget
<field data="stringField" widget="MediaPlayer" />GalleryStringTagFieldWidget
<field data="stringMultiField" />2、多行文本（TEXT）
GalleryCommonFieldWidget
<field data="textField" />3、富文本（HTML）
GalleryHtmlFieldWidget
<field data="htmlField" />- showHeight：显示高度（
number | string）
4、整数（INTEGER）
GalleryNumberWidget
<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）
GalleryBooleanFieldWidget
<field data="booleanField" />6、枚举（ENUM）
GalleryEnumFieldWidget
<field data="enumField" />GalleryEnumMultiFieldWidget
<field data="enumMultiField" />7、日期时间（DATETIME）
GalleryDateTimeFieldWidget
<field data="datetimeField" />- format：日期时间格式化文本（
string）
8、日期（DATE）
GalleryDateFieldWidget
<field data="dateField" />- format：日期格式化文本（
string）
9、时间（TIME）
GalleryTimeFieldWidget
<field data="timeField" />- format：时间格式化文本（
string）
10、年份（YEAR）
GalleryYearFieldWidget
<field data="yearField" />- format：年份格式化文本（
string）
11、键值对（MAP）
GalleryMapFieldWidget
<field data="mapField" />12、多对一（M2O）
GalleryM2OSelectFieldWidget
<field data="m2oField" />- optionLabel：可选项标题（
expression）
13、一对多（O2M）
GalleryO2MSelectFieldWidget
<field data="o2mField" />- optionLabel：可选项标题（
expression）
14、多对多（M2M）
GalleryM2MSelectFieldWidget
<field data="m2mField" />- optionLabel：可选项标题（
expression）