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

测试模块test-party中的原子类型宴会有两个字段:partyCountrypartyCity,代表举办宴会的国家城市,刚好对应了两种类型的数据字典。如果国家不同,那么所使用的城市数据字典也就不同

在这里,我们以国家为例,介绍如何使用数组型数据字典

1. 前端表单渲染

CabloyJS采用JSON Schema来描述表单,可以同时支持前端表单渲染和后端数据验证。而且,表单渲染同时支持编辑模式和查看模式

关于JSON Schema的详细信息,请参见:表单渲染与数据验证

下面,我们看看宴会partyCountry是如何定义的:

src/module-vendor/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.selectctx.bean.atom.read。因此,CabloyJS通过统一的机制内置了数据字典的code/title转换逻辑。而我们只需要在宴会meta信息中配置一下即可:

src/module-vendor/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.selectctx.bean.atom.read在查询到数据后,自动进行code/title转换,并把转换后的title写入数据,方便前端显示。写入数据的字段名规则如下:

code字段 title字段 title国际化字段
name _{name}Title _{name}TitleLocale
partyCountry _partyCountryTitle _partyCountryTitleLocale

比如,在PC布局中,通过表格形式显示宴会列表,表格中国家的字段配置如下:

src/module-vendor/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 对齐方式