数据字典一般有两种类型:数组类型
和树类型
测试模块test-party
中的原子类型宴会
有两个字段:partyCountry
和partyCity
,代表举办宴会的国家
和城市
,刚好对应了两种类型的数据字典。如果国家
不同,那么所使用的城市
数据字典也就不同
在这里,我们以国家
为例,介绍如何使用数组型
数据字典
1. 前端表单渲染
CabloyJS采用JSON Schema
来描述表单,可以同时支持前端表单渲染
和后端数据验证
。而且,表单渲染同时支持编辑
模式和查看
模式
关于JSON Schema的详细信息,请参见:表单渲染与数据验证
下面,我们看看宴会
中partyCountry
是如何定义的:
src/suite-vendor/test-party/modules/test-party/backend/src/config/validation/schema/party.js
- 1schemas.party = {
- 2 type: 'object',
- 3 properties: {
- 4 ...
- 5 partyCountry: {
- 6 type: 'string',
- 7 ebType: 'dict',
- 8 ebTitle: 'Party Country',
- 9 ebParams: {
- 10 dictKey: 'a-dictbooster:countries',
- 11 mode: 'select',
- 12 },
- 13 ebOptionsBlankAuto: true,
- 14 },
- 15 ...
- 16 },
- 17 };
名称 | 说明 |
---|---|
type | 字段类型 |
ebType | 字段渲染类型,用于标示前端渲染组件类型。dict 是系统内置的字典组件 |
ebTitle | 字段标题,用于前端渲染,支持国际化 |
ebParams | 渲染参数,具体内容由渲染组件决定 |
ebOptionsBlankAuto | 由于是数组类型,可以指定是否在多选框 中显示一个空行 |
- ebParams
名称 | 说明 |
---|---|
dictKey | 所使用数据字典的atomStaticKey |
mode | 数据字典的显示模式,select 是显示为选择框 的模式 |
2. 后端code/title转换
数据字典通过表单渲染出来,用户选择字典项
后存入数据库的是code
值。比如用户选择了中国
,那么存入的就是86
。当用户查看宴会列表
或者宴会条目
时,如何把86
转换为中国
呢?一种方案是在前端转换
,另一种方案是在后端转换
。CabloyJS建议采用后端转换
,基于以下两方面考虑:
-
性能因素
:如果在前端转换,就需要把数据字典下载到前端,显示会延迟,比如把城市(省市区)
下载到前端 -
安全因素
:有些数据字典是企业核心数据
,只有在编辑时才允许下载到前端进行选择。而其他人只有查看权限,不适宜把数据字典整个下载到前端
我们知道,用户查看宴会列表
或者宴会条目
最终都会执行后端的方法ctx.bean.atom.select
和ctx.bean.atom.read
。因此,CabloyJS通过统一的机制内置了数据字典的code/title
转换逻辑。而我们只需要在宴会
的meta
信息中配置一下即可:
src/suite-vendor/test-party/modules/test-party/backend/src/meta.js
- 1 base: {
- 2 atoms: {
- 3 party: {
- 4 info: {
- 5 ...
- 6 dict: {
- 7 fields: {
- 8 partyCountry: {
- 9 dictKey: 'a-dictbooster:countries',
- 10 },
- 11 },
- 12 },
- 13 },
- 14 },
- 15 },
- 16 },
- dict.fields.partyCountry
名称 | 说明 |
---|---|
dictKey | 所使用数据字典的atomStaticKey |
3. 前端显示Title
后端方法ctx.bean.atom.select
和ctx.bean.atom.read
在查询到数据后,自动进行code/title
转换,并把转换后的title
写入数据,方便前端显示。写入数据的字段名规则如下:
code字段 | title字段 | title国际化字段 |
---|---|---|
name | _{name}Title | _{name}TitleLocale |
partyCountry | _partyCountryTitle | _partyCountryTitleLocale |
比如,在PC布局
中,通过表格
形式显示宴会列表,表格中国家
的字段配置如下:
src/suite-vendor/test-party/modules/test-party/front/src/config/config/configPartyRenderList.js
- 1 layouts: {
- 2 table: {
- 3 blocks: {
- 4 items: {
- 5 columns: [
- 6 {
- 7 dataIndex: '_partyCountryTitleLocale',
- 8 title: 'Party Country',
- 9 align: 'left',
- 10 },
- 11 ...
- 12 ],
- 13 },
- 14 },
- 15 },
- 16 },
- layouts.table.blocks.items.columns
名称 | 说明 |
---|---|
dataIndex | 要显示的字段名 |
title | 字段标题,支持国际化 |
align | 对齐方式 |
评论: