通过前面的介绍,我们可以看到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 async _loadDict() {
- 2 const { property, validate } = this.context;
- 3 const dictKey = property.ebParams.dictKey;
- 4 if (!validate.readOnly && !property.ebReadOnly) {
- 5 this.dict = await this.$store.dispatch('a/dict/getDict', { dictKey });
- 6 }
- 7 // load dict item
- 8 await this._loadDictItem();
- 9 },
-
行5:通过
this.$store.dispatch
获取指定的数据字典dictKey
:数据字典的atomStaticKey
1.2 findItem:查找指定的字典项
src/module-system/a-dict/front/src/components/render/renderDict.jsx
- 1 async _loadDictItem() {
- 2 const { key, property, validate } = this.context;
- 3 const dictKey = property.ebParams.dictKey;
- 4 if (validate.readOnly || property.ebReadOnly) {
- 5 this.dictItemTitle = this.context.getValue(`_${key}TitleLocale`);
- 6 } else {
- 7 const code = this.context.getValue();
- 8 const separator = property.ebParams.separator;
- 9 this.dictItem = await this.$store.dispatch('a/dict/findItem', { dictKey, code, options: { separator } });
- 10 this.dictItemTitle = this.dictItem ? this.dictItem.titleLocaleFull : null;
- 11 }
- 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 async getDict({ dictKey, user }) {
- 2 // check right
- 3 const res = await this.ctx.bean.dict._prepareDict_load({ dictKey, user, returnDict: false });
- 4 if (!res) this.ctx.throw(403);
- 5 // get dict
- 6 const dict = await this.ctx.bean.dict.getDict({ dictKey });
- 7 // short
- 8 return {
- 9 atomId: dict.atomId,
- 10 description: dict.description,
- 11 _dictItems: dict._dictItems,
- 12 };
- 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 async _translate(item) {
- 2 // dictKey
- 3 const partyCountry = item.partyCountry;
- 4 if (partyCountry !== '1' && partyCountry !== '86') return;
- 5 const dictKey = partyCountry === '1' ? 'a-dictbooster:citiesUSA' : 'a-dictbooster:citiesChina';
- 6 // code
- 7 const code = item.partyCity;
- 8 if (!code) return;
- 9 // findItem
- 10 const res = await this.ctx.bean.dict.findItem({
- 11 dictKey,
- 12 code,
- 13 options: { separator: '/' },
- 14 });
- 15 if (res) {
- 16 item._partyCityTitle = res.titleFull;
- 17 item._partyCityTitleLocale = res.titleLocaleFull;
- 18 }
- 19 }
- 行10:通过
this.ctx.bean.dict.findItem
查找指定的字典项
评论: