通过前面的介绍，我们可以看到CabloyJS的数据字典不仅功能强大，而且使用也非常便利。能达到这样的效果，主要基于以下两点：

  • CabloyJS底层框架的atom原子功能非常强大，基于atom原子实现的数据字典功能也自然非常强大

  • CabloyJS在底层框架的基础上提供了一组操作和访问数据字典的前端组件和后端组件，从而使得数据字典达到开箱即用的效果

在这里，我们就介绍一组与数据字典相关的前端组件和后端组件，从而方便我们基于实际业务的需求进行更深入的定制开发

1. 前端组件

模块a-dict前端通过vuex实现了一组状态管理方法，源码参见：src/module-system/a-dict/front/src/store.js

关于状态管理的更多信息，请参见：模块前端开发：状态管理

具体使用如下：

1.1 getDict：获取数据字典

src/module-system/a-dict/front/src/components/render/renderDict.jsx

  1. 1    async _loadDict() {
  2. 2      const { property, validate } = this.context;
  3. 3      const dictKey = property.ebParams.dictKey;
  4. 4      if (!validate.readOnly && !property.ebReadOnly) {
  5. 5        this.dict = await this.$store.dispatch('a/dict/getDict', { dictKey });
  6. 6      }
  7. 7      // load dict item
  8. 8      await this._loadDictItem();
  9. 9    },

  • 行5：通过this.$store.dispatch获取指定的数据字典

    • dictKey：数据字典的atomStaticKey

1.2 findItem：查找指定的字典项

src/module-system/a-dict/front/src/components/render/renderDict.jsx

  1. 1    async _loadDictItem() {
  2. 2      const { key, property, validate } = this.context;
  3. 3      const dictKey = property.ebParams.dictKey;
  4. 4      if (validate.readOnly || property.ebReadOnly) {
  5. 5        this.dictItemTitle = this.context.getValue(`_${key}TitleLocale`);
  6. 6      } else {
  7. 7        const code = this.context.getValue();
  8. 8        const separator = property.ebParams.separator;
  9. 9        this.dictItem = await this.$store.dispatch('a/dict/findItem', { dictKey, code, options: { separator } });
  10. 10        this.dictItemTitle = this.dictItem ? this.dictItem.titleLocaleFull : null;
  11. 11      }
  12. 12    },

  • 行9：通过this.$store.dispatch查找指定的字典项

    • dictKey：数据字典的atomStaticKey

    • code：字典项的code，如果是树型数据字典就传入code的完整路径

    • options.separator：合并title完整路径的分隔符

2. 后端组件

模块a-dict后端提供了bean组件bean.dict，使我们在后端也可以直接访问和操作数据字典，源码参见：src/module-system/a-dict/backend/src/bean/bean.dict.js

具体使用如下：

2.1 getDict：获取数据字典

src/module-system/a-dict/backend/src/service/dict.js

  1. 1    async getDict({ dictKey, user }) {
  2. 2      // check right
  3. 3      const res = await this.ctx.bean.dict._prepareDict_load({ dictKey, user, returnDict: false });
  4. 4      if (!res) this.ctx.throw(403);
  5. 5      // get dict
  6. 6      const dict = await this.ctx.bean.dict.getDict({ dictKey });
  7. 7      // short
  8. 8      return {
  9. 9        atomId: dict.atomId,
  10. 10        description: dict.description,
  11. 11        _dictItems: dict._dictItems,
  12. 12      };
  13. 13    }
  • 行6：通过this.ctx.bean.dict.getDict获取指定的数据字典

2.2 findItem：查找指定的字典项

src/suite-vendor/test-party/modules/test-party/backend/src/bean/atom.party.js

  1. 1    async _translate(item) {
  2. 2      // dictKey
  3. 3      const partyCountry = item.partyCountry;
  4. 4      if (partyCountry !== '1' && partyCountry !== '86') return;
  5. 5      const dictKey = partyCountry === '1' ? 'a-dictbooster:citiesUSA' : 'a-dictbooster:citiesChina';
  6. 6      // code
  7. 7      const code = item.partyCity;
  8. 8      if (!code) return;
  9. 9      // findItem
  10. 10      const res = await this.ctx.bean.dict.findItem({
  11. 11        dictKey,
  12. 12        code,
  13. 13        options: { separator: '/' },
  14. 14      });
  15. 15      if (res) {
  16. 16        item._partyCityTitle = res.titleFull;
  17. 17        item._partyCityTitleLocale = res.titleLocaleFull;
  18. 18      }
  19. 19    }
  • 行10：通过this.ctx.bean.dict.findItem查找指定的字典项