前面我们以国家为例,介绍了如何使用数组型数据字典。在这里,我们以城市为例,介绍如何使用树型数据字典

由于选择的国家不同,所使用的城市数据字典也就不同,也就存在国家城市的数据联动。基于循序渐进的原则,我们先介绍如何使用中国城市数据字典,在下一篇中再讲述如何实现国家城市的数据联动

0. 创建城市数据字典

如何创建数据字典,请参见:创建数据字典

在这里,我们只需要看看树形数据字典的数据结构是什么模样:

src/module-system/a-dictbooster/backend/src/config/static/dict/cities/citiesChina.json

  1. 1[
  2. 2 {
  3. 3 "code": "110000",
  4. 4 "title": "北京市",
  5. 5 "children": [
  6. 6 {
  7. 7 "code": "110100",
  8. 8 "title": "北京市",
  9. 9 "children": [
  10. 10 {
  11. 11 "code": "110101",
  12. 12 "title": "东城区"
  13. 13 },
  14. 14 {
  15. 15 "code": "110102",
  16. 16 "title": "西城区"
  17. 17 }],
  18. 18 }],
  19. 19 }],
  20. 20
名称 说明
code 字典项的唯一标识
title 字典项的标题
children 字典项的子项

数组型数据字典相比,树型数据字典有以下两点不同:

  1. code:在数据库中存储完整路径,比如:用户选择东城区,那么code值就是:110000/110100/110101。这样设计有两点好处:

    1. 便于进行code/title转换,而且转换后的title也可以是完整路径,如:北京市/北京市/东城区

    2. 便于按不同层级检索数据:可以直接构造模糊查询条件,比如,我们要查询整个北京市的数据,就可以这样:select * from testParty where partyCity like ‘110000/110100/%‘

  2. children:通过children扩展数据字典的层级

1. 前端表单渲染

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 partyCity: {
  6. 6 type: 'string',
  7. 7 ebType: 'dict',
  8. 8 ebTitle: 'Party City',
  9. 9 ebParams: {
  10. 10 dictKey: 'a-dictbooster:citiesChina',
  11. 11 mode: 'tree',
  12. 12 separator: '/',
  13. 13 leafOnly: true,
  14. 14 },
  15. 15 },
  16. 16 ...
  17. 17 },
  18. 18 };
名称 说明
type 字段类型
ebType 字段渲染类型,用于标示前端渲染组件类型。dict是系统内置的字典组件
ebTitle 字段标题,用于前端渲染,支持国际化
ebParams 渲染参数,具体内容由渲染组件决定
  • ebParams
名称 说明
dictKey 所使用数据字典的atomStaticKey
mode 数据字典的显示模式,tree是显示为树型选择框的模式
separator 多级字典项的title在合并时所采用的分隔符
leafOnly 当选择字典项时,是否只能选择叶子结点

2. 后端code/title转换

同样,树型数据字典的code/title转换也是在后端进行。树型数据字典的code值在存入数据库时采用的是完整路径,在进行转换时也会生成完整路径的title。这一切也是CabloyJS的内置功能,我们只需要在宴会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 ...
  9. 9 partyCity: {
  10. 10 dictKey: 'a-dictbooster:citiesChina',
  11. 11 separator: '/',
  12. 12 },
  13. 13 ...
  14. 14 },
  15. 15 },
  16. 16 },
  17. 17 },
  18. 18 },
  19. 19 },
  • dict.fields.partyCity
名称 说明
dictKey 所使用数据字典的atomStaticKey
separator 多级字典项的title在合并时所采用的分隔符

3. 前端显示Title

后端方法ctx.bean.atom.selectctx.bean.atom.read在查询到数据后,自动进行code/title转换,并把转换后的title写入数据,方便前端显示。写入数据的字段名规则如下:

code字段 title字段 title国际化字段
name _{name}Title _{name}TitleLocale
partyCity _partyCityTitle _partyCityTitleLocale

比如,在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: '_partyCityTitleLocale',
  8. 8 title: 'Party City',
  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 对齐方式