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

本文主要是介绍详细分析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: 字典 KEYvalue: 字典值
-->
<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;