【ruoyi】字典使用

1. 获取字典数据方法 src\utils\dict.js

/**
 * 获取字典数据
 */
 // 接受`可变数量的参数`（...args），...args是一个剩余参数， 将不定数量的参数表示为一个数组。这些参数代表不同的字典类型
export function useDict(...args) {
  const res = ref({});
  // 这里使用了立即执行函数表达式（IIFE）。它立即执行并返回其内部函数的执行结果
  return (() => {
  // 遍历传入useDict函数的参数，每个参数代表一个字典类型
    args.forEach((dictType, index) => {
    // 为当前的dictType类型初始化一个空数组
      res.value[dictType] = [];
      // 调用一个存储（可能是Vuex store）来获取当前dictType的字典数据
      const dicts = useDictStore().getDict(dictType);
      if (dicts) {
        res.value[dictType] = dicts;
      } else {
      // 如果没有获取到字典数据, 调用获取字典接口API
        getDicts(dictType).then(resp => {
        // 将获取到的数据转换成一个新数组，其中每个元素是一个对象，包含label, value, elTagType, 和 elTagClass属性
          res.value[dictType] = resp.data.map(p => ({ label: p.dictLabel, value: p.dictValue, elTagType: p.listClass, elTagClass: p.cssClass }))
          // 将新获取的字典数据存储到Vuex store中，以便以后使用
          useDictStore().setDict(dictType, res.value[dictType]);
        })
      }
    })
    // 返回一个对象，其属性是res.value对象的每个属性的引用。这允许解构赋值，使得在模板或计算属性中可以直接访问字典数据
    return toRefs(res.value);
  })()
}

2. 注册到全局main.js

// 引入
import { useDict } from '@/utils/dict'

// 全局方法挂载
app.config.globalProperties.useDict = useDict

3. 使用的地方

// 这行代码使用了Vue 3的Composition API。getCurrentInstance是一个全局API，它返回当前组件的实例对象。从这个实例对象中解构出proxy属性，proxy是一个代理对象，它包含了组件的上下文，例如访问组件的属性、方法和数据
const {proxy} = getCurrentInstance();
const {project_status} = proxy.useDict("project_status"); //这是获取project_status这一个的

// 下面是获取多个字典的
const {land_type, type_of_usage_rights, fuel_type, project_status} = proxy.useDict('land_type', 'type_of_usage_rights', 'fuel_type', 'project_status');