数据字典一般有两种类型：数组类型和树类型

测试模块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

  1. 1schemas.party = {
  2. 2    type: 'object',
  3. 3    properties: {
  4. 4      ...
  5. 5      partyCountry: {
  6. 6        type: 'string',
  7. 7        ebType: 'dict',
  8. 8        ebTitle: 'Party Country',
  9. 9        ebParams: {
  10. 10          dictKey: 'a-dictbooster:countries',
  11. 11          mode: 'select',
  12. 12        },
  13. 13        ebOptionsBlankAuto: true,
  14. 14      },
  15. 15      ...
  16. 16      },
  17. 17  };
名称 说明
type 字段类型
ebType 字段渲染类型，用于标示前端渲染组件类型。dict是系统内置的字典组件
ebTitle 字段标题，用于前端渲染，支持国际化
ebParams 渲染参数，具体内容由渲染组件决定
ebOptionsBlankAuto 由于是数组类型，可以指定是否在多选框中显示一个空行
  • ebParams
名称 说明
dictKey 所使用数据字典的atomStaticKey
mode 数据字典的显示模式，select是显示为选择框的模式

2. 后端code/title转换

数据字典通过表单渲染出来，用户选择字典项后存入数据库的是code值。比如用户选择了中国，那么存入的就是86。当用户查看宴会列表或者宴会条目时，如何把86转换为中国呢？一种方案是在前端转换，另一种方案是在后端转换。CabloyJS建议采用后端转换，基于以下两方面考虑：

  1. 性能因素：如果在前端转换，就需要把数据字典下载到前端，显示会延迟，比如把城市（省市区）下载到前端

  2. 安全因素：有些数据字典是企业核心数据，只有在编辑时才允许下载到前端进行选择。而其他人只有查看权限，不适宜把数据字典整个下载到前端

我们知道，用户查看宴会列表或者宴会条目最终都会执行后端的方法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. 1    base: {
  2. 2      atoms: {
  3. 3        party: {
  4. 4          info: {
  5. 5            ...
  6. 6            dict: {
  7. 7              fields: {
  8. 8                partyCountry: {
  9. 9                  dictKey: 'a-dictbooster:countries',
  10. 10                },
  11. 11              },
  12. 12            },
  13. 13          },
  14. 14        },
  15. 15      },
  16. 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. 1  layouts: {
  2. 2    table: {
  3. 3      blocks: {
  4. 4        items: {
  5. 5          columns: [
  6. 6            {
  7. 7              dataIndex: '_partyCountryTitleLocale',
  8. 8              title: 'Party Country',
  9. 9              align: 'left',
  10. 10            },
  11. 11            ...
  12. 12          ],
  13. 13        },
  14. 14      },
  15. 15    },
  16. 16  },
  • layouts.table.blocks.items.columns
名称 说明
dataIndex 要显示的字段名
title 字段标题，支持国际化
align 对齐方式