详细分析ruoyi系统的数据字典(附思路)

news/2024/9/23 12:28:52/

目录

  • 前言
  • 1. Vue3
  • 2. Vue2

前言

数据字典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;

http://www.ppmy.cn/news/1459527.html

相关文章

LeetCode hot100-31-G

25. K 个一组翻转链表给你链表的头节点 head &#xff0c;每 k 个节点一组进行翻转&#xff0c;请你返回修改后的链表。k 是一个正整数&#xff0c;它的值小于或等于链表的长度。如果节点总数不是 k 的整数倍&#xff0c;那么请将最后剩余的节点保持原有顺序。你不能只是单纯的…

C语言中的Union(共用体)

C语言中的Union&#xff08;共用体&#xff09; 在C语言中&#xff0c;Union&#xff08;共用体&#xff09;是一种特殊的数据结构&#xff0c;它允许你在一个单独的内存空间中存储不同的数据类型。与Struct&#xff08;结构体&#xff09;相似&#xff0c;Union可以包含多种不…

idea-自我快捷键-2

1. 书签 创建书签&#xff1a; 创建书签&#xff1a;F11创建特色标记书签&#xff1a;Ctrl F11快速添加助记符书签&#xff1a;ctrl shift 数字键 查看书签&#xff1a; shift F11快速定位到助记符书签&#xff1a;Ctrl 数字键 删除书签&#xff1a; delete 2. 自动…

springboot整合redis多数据源(附带RedisUtil)

单数据源RedisUtil(静态) 单数据源RedisUtil,我这里implements ApplicationContextAware在setApplicationContext注入redisTemplate,工具类可以直接类RedisUtil.StringOps.get()使用 package com.vehicle.manager.core.util;import com.alibaba.fastjson.JSON; import lombok.e…

读天才与算法:人脑与AI的数学思维笔记24_预测性文本生成器

1. 起源 1.1. 人类讲故事可能起源于“假如……”这种问答结构 1.2. 讲故事是人类做安全试验的一种方式 1.2.1. 如果你问一个人“假如……”&#xff0c;其实是在探索你的行为对他可能带来的影响 1.3. 最早出现的故事极有可能就源自我们对在周遭混乱的环境中寻找某种秩序的渴…

用标准的GNU/Linux命令替换Alpine上的精简版命令

Alpine Linux 是一个基于 musl libc 和 busybox 的轻量级Linux发行版&#xff0c;busybox 实现了很多常用类Unix命令的精简版&#xff0c;特点是体积很小&#xff0c;舍弃了很多不常用参数&#xff0c;我们简单对比一下标准Linux自带的 date 命令 和 Alpine下默认的 date 命令便…

PyQt5 的对话框

文章目录 1. 简介2. 输入对话框3. 文件对话框4. 颜色对话框5. 字体对话框6. 进度对话框 1. 简介 PyQt5中的对话框是一种常见的用户界面组件&#xff0c;用于与用户进行交互并获取用户输入或确认。常见的对话框包括消息框、输入框、文件对话框、颜色对话框等。PyQt5提供了丰富的…

认识下MapReduce

&#x1f50d; 什么是MapReduce&#xff1f; MapReduce是一种分布式计算模型&#xff0c;最初由Google提出&#xff0c;用于处理大规模数据集的并行计算。它将数据处理任务分解成独立的Map和Reduce两个阶段&#xff0c;以实现分布式计算和并行化处理。Map阶段负责将输入数据映…