详细分析ruoyi系统的数据字典（附思路）

前言

数据字典在ruoyi系统很常见，主要用于减少对后端的访问，直接在系统上配置即可

1. Vue3

以下Demo只是给个思路：

前端Vue3渲染前获取所有字典

// 获取所有字典
const dictStore = useDictStoreWithOut()
const userStore = useUserStoreWithOut()
const permissionStore = usePermissionStoreWithOut()
if (!dictStore.getIsSetDict) {
  await dictStore.setDictMap()
}

后续通过执行函数，调用字典中所有值：

类似推荐：详细分析Vuex中的mapGetters

export const useDictStore = defineStore('dict', {
  state: (): DictState => ({
    dictMap: new Map<string, any>(),
    isSetDict: false
  }),
  getters: {
    getDictMap(): Recordable {
      const dictMap = wsCache.get(CACHE_KEY.DICT_CACHE)
      if (dictMap) {
        this.dictMap = dictMap
      }
      return this.dictMap
    },
    getIsSetDict(): boolean {
      return this.isSetDict
    }
  },

后续在dict.ts中定义各个字典Key
并在最终的前端界面定义标签

<!--
    type: 字典 KEY
    value: 字典值
-->
<dict-tag :type="DICT_TYPE.MANONG" :value="row.logType" />

类似的数据字典函数如下：

// 导入 Vue Composition API 中的 ref 函数
import { ref } from 'vue'

// 定义字典数据类型
interface DictDataType {
  label: string;
  value: string;
}

// 定义数字类型的字典数据类型
interface NumberDictDataType extends DictDataType {
  value: number;
}

// 从 VueX 中获取字典数据的辅助函数
const getDictOptions = (dictType: string): DictDataType[] => {
  // 这里应该从 Vuex 中获取字典数据，这里简化为直接返回一个空数组
  return []
}

// 获取数字类型的字典选项
const getIntDictOptions = (dictType: string): NumberDictDataType[] => {
  const dictOptions: DictDataType[] = getDictOptions(dictType)
  const intDictOptions: NumberDictDataType[] = []
  dictOptions.forEach((dict: DictDataType) => {
    intDictOptions.push({
      ...dict,
      value: parseInt(dict.value)
    })
  })
  return intDictOptions
}

// 获取字符串类型的字典选项
const getStrDictOptions = (dictType: string): DictDataType[] => {
  const dictOptions: DictDataType[] = getDictOptions(dictType)
  return dictOptions.map(dict => ({
    ...dict,
    value: dict.value.toString()
  }))
}

// 获取布尔类型的字典选项
const getBoolDictOptions = (dictType: string): DictDataType[] => {
  const dictOptions: DictDataType[] = getDictOptions(dictType)
  return dictOptions.map(dict => ({
    ...dict,
    value: dict.value.toString() === 'true'
  }))
}

// 根据字典值获取对应的字典对象
const getDictObj = (dictType: string, value: any): DictDataType | undefined => {
  const dictOptions: DictDataType[] = getDictOptions(dictType)
  return dictOptions.find(dict => dict.value === value.toString())
}

// 根据字典值获取对应的字典名称
const getDictLabel = (dictType: string, value: any): string => {
  const dictOptions: DictDataType[] = getDictOptions(dictType)
  const dictLabel = ref('')
  dictOptions.forEach((dict: DictDataType) => {
    if (dict.value === value.toString()) {
      dictLabel.value = dict.label
    }
  })
  return dictLabel.value
}

// 导出函数
export {
  getDictOptions,
  getIntDictOptions,
  getStrDictOptions,
  getBoolDictOptions,
  getDictObj,
  getDictLabel
}

2. Vue2

Vue2和3大同小异，只是语法格式不同而已
通过dict.js存储相关的信息

import {getStore, setStore} from '@/util/store'

import {getDictionary} from '@/api/system/dict'

const dict = {
  state: {
    flowRoutes: getStore({name: 'flowRoutes'}) || {},
  },
  actions: {
    //发送错误日志
    FlowRoutes({commit}) {
      return new Promise((resolve, reject) => {
        getDictionary({code: 'flow'}).then(res => {
          commit('SET_FLOW_ROUTES', res.data.data);
          resolve();
        }).catch(error => {
          reject(error)
        })
      })
    },
  },
  mutations: {
    SET_FLOW_ROUTES: (state, data) => {
      state.flowRoutes = data.map(item => {
        return {
          routeKey: `${item.code}_${item.dictKey}`,
          routeValue: item.remark,
        };
      });
      setStore({name: 'flowRoutes', content: state.flowRoutes})
    },
  }

};

export default dict;