使用若依的字典（dict）

若依中的字典使用

在使用若依的前端框架时，发现很多页面中都使用了如下面一样的字典数据：

在页面中使用的效果如下：

研究了一下，接下来分享我的使用方法。

1.首先确定字典的接口，具体可根据自己后端提供的字典接口进行修改

// 根据字典类型查询字典数据信息
export function getDicts(dictType) {
  return request({
    url: '/dictionary/contentByTypeId',
    method: 'get',
    params: { type: dictType }
  })
}

该接口接收参数是字典表中某种类型的字典，调用接口获取该种类型的所有字典的信息列表，如下：

其中，id 和 content 字段是前端界面下拉框中所需要用到的，后面会介绍应该怎么使用。

2.在公共的方法文件中提供一个方法

将 dict 文件夹复制到自己的 utils 文件中

这里文件中的代码只适合单层选择器，如果需要到级联选择器，使用以下代码：

export default class DictData {
  constructor(label, value, rawData) {
    this.label = label
    this.value = value
    // 递归处理子节点
    this.children = rawData.children ? rawData.children.map(child => {
      return new DictData(
        child.content || child.label, // 兼容不同数据源
        child.id || child.value, // 兼容不同标识
        child
      )
    }) : undefined
  }
}

注意：级联选择器需要返回数据进行嵌套，这里我使用 children 字段进行嵌套处理，可以根据需求做修改

使用级联选择器时，接口返回数据格式如下：

注意其中使用到 ruoyi.js 这个文件，也复制过来

3.在组件库中添加该组件

将 DictData 文件夹拷贝到项目的 components 中

若依请求回来的数据如下：

所以，若依中下拉框绑定的内容数据对应的是下拉框的 label 对应响应数据的 dictLabel，而下拉框的 value 对应的是响应数据的 dictValue，因此，后续我们可以根据实际需求更改这两个字段的值。dictType 是调用后端接口的时候传递的参数，此时响应的数据都是该类型的字典信息列表。

4.根据实际需求修改

实际接口返回数据如下：

由于前端界面的下拉框需要使用到的是字典表中的 id 和 content 字段，并且，需要下拉框的 label 对应 id 字段，下拉框的 value 对应 content 字段，所以，对于DictData.index.js 中的代码可以修改为：

// 只需要将这两行代码修改即可
labelField: 'content',
valueField: 'id',

5.挂载

在 main.js 文件中挂载字典数据组件

// 字典数据组件
import DictData from '@/components/DictData'
DictData.install()

6.使用

完成以上步骤之后就可以在组件中使用了，dicts 中的字符串('dict_applySeries')是数据库中 type 字段所存储的内容，用于前端向后端请求的参数。所以，可以用 dict.type.dict_applySeries 进行引用。

使用效果

单层选择器

级联选择器：