当前位置: 首页 > news >正文

RuoYi 自定义字典列表页面编码翻译

“字典数据”单独维护,而不是使用系统自带的字典表,应该如何使用这样的字典信息呢?
在这里插入图片描述

系统字典的使用,请参考:
《RuoYi列表页面字典翻译的实现》
https://blog.csdn.net/lxyoucan/article/details/136877238

需求说明

有一个分类表是单独维护的,不是在系统的字典表中维护的。以下面的场景举例说明:

分类的数据维护如下:
在这里插入图片描述
在考试管理中,想实用这个分类数据,如何实现呢?加入分类之前的情况如下:
在这里插入图片描述

实操

这种场景非常的常见,我们先看一下RuoYi这个框架本身是如何实现的。
可以参考:用户管理与部门管理的关联。

在这里插入图片描述
代码文件:
/src/views/system/user/index.vue

<el-table-column label="部门" align="center" key="deptName" prop="dept.deptName" v-if="columns[3].visible" :show-overflow-tooltip="true" />

从这里可以看出,部门的信息是直接从后台的接口中读取的。/dev-api/system/user/list?pageNum=1&pageSize=10接口返回的数据,去掉与当前业务不相关的后如下:

{
"userId": 1,
"deptId": 103,
"userName": "admin",
"nickName": "管理员",
"dept": {"deptId": 103,"deptName": "研发部门","leader": "若依"
}
}

这种写法是很常见的,翻译的工作交给后端来实现了。后端开发人员要多写个sql。
那么假如后端人员不配合,不写咋办?

参考字典的方式实现

推荐上面一种方式,如果后端人员不配合,不在后端翻译好后传给前端呢?也不难只要后端提供查询分类的接口就可以了。

使用RuoYi当脚手架开发,大部分后端接口都会有代码生成器生成,比如上面的分类功能,生成的接口一般如下 :
http://localhost:1024/dev-api/business/examCategory/list?pageNum=1&pageSize=10

我把可以把pageSize(一页显示的数量)写大一点,比如100。

引入分类查询方法

import { listExamCategory} from "@/api/business/examCategory";
import DictData from "@/utils/dict/DictData";

这段在分类查询管理界面是可以找的到的,复制过来即可。

data增加分类属性

增加examCategoryDic: [],形如:

export default {name: "ExamManagement",data() {return {//++ 下面这行为新增examCategoryDic: [],...}}
}

methods 增加方法

  /** 查询考试分类列表 */getExamCategoryList() {listExamCategory({pageNum: 1,pageSize: 100}).then(response => {for (const item of response.rows) {this.examCategoryDic.push(new DictData(item.categoryName, item.categoryId.toString(), {"listClass":"default"}));}});},

根据应用场景可能要修改的代码:

  • pageSize: 100 这里的100修改成业务中可能出现的最大值
  • examCategoryDic 这个与data中增加的属性一致
  • item.categoryNameitem.categoryId 这个根据业务字段做修改, 我的业务数据格式如下:
{"categoryId": 1,"categoryName": "教师"
}

当然如下你的ID也是数值型的不忘记加.toString() 不然会导致数据匹配不到的。

  • "listClass":"default": 可以修改成"listClass":"primary" 他们分别是两种不同的样式
    在这里插入图片描述
    在这里插入图片描述

created()增加调用

增加一行

this.getExamCategoryList();

形如:

 created() {this.getList();//++ 组件创建时加载分类数据this.getExamCategoryList();},

至此页面就可以正常获取到分类的数据了。

list表格列表

<el-table-column label="考试分类" align="center" prop="categoryId"><template slot-scope="scope"><dict-tag :options="examCategoryDic" :value="scope.row.categoryId"/></template>
</el-table-column>

examCategoryDic与data中的属于一致。

新增/修改 表单

<el-form-item label="考试分类" prop="categoryId"><el-select v-model="form.categoryId" placeholder="考试分类"><el-optionv-for="dict in examCategoryDic":key="dict.value":label="dict.label":value="parseInt(dict.value)"></el-option></el-select>
</el-form-item>

这里有一个注意事项,:value="parseInt(dict.value)" 如果value 就是ID为数值型,这里要使用parseInt()转换一下。不然会导致匹配不上。

这个原因其实主要是因为系统字典默认全是字符串,没有考虑到value是int的情况,为了不影响系统整体的稳定性,我就没有直接修改系统已经封装好的组件了。

查询条件下拉框

 <el-form-item label="考试分类" prop="categoryId"><el-select v-model="queryParams.categoryId" placeholder="考试分类" clearable><el-optionv-for="dict in examCategoryDic":key="dict.value":label="dict.label":value="dict.value"/></el-select></el-form-item>

下拉框数据量较大,增加搜索条件

el-select添加filterable属性即可启用搜索功能。默认情况下,Select 会找出所有label属性包含输入值的选项。如果希望使用其他的搜索逻辑,可以通过传入一个filter-method来实现。filter-method为一个Function,它会在输入值发生变化时调用,参数为当前输入值。

参考:
https://element.eleme.cn/#/zh-CN/component/select

如何不转int 和string

不足之处,就是当分类的value是Int型的要手动转成string来使用,这样系统自带的<dict-tag>组件才可以正常使用。但是在新增和修改的界面,因为真实表单数据是int这时又跟dic中的值匹配不上了,所以还要在进行一次string 转 int 。

解决此问题的方法,就是修改系统自带的<dict-tag>组件,来实现。但是系统此组件可能会带来系统不稳定的风险。

下面的方法我并未在生产中使用,仅供参考。

如果无视这个风险可以尝试如下做法:
修改这个文件:src/components/DictTag/index.vue
在unmatch(){} 方法中增加以下一段代码:

//++ start 如果option中的value是数值型,自动转成string
for (const item of this.options){if(typeof item.value === 'number'){item.value = item.value.toString();}
}
//++ end 如果option中的value是数值型,自动转成string

修改后的代码如下:

unmatch() {this.unmatchArray = []// 没有value不显示if (this.value === null || typeof this.value === 'undefined' || this.value === '' || this.options.length === 0) return false// 传入值为数组let unmatch = false // 添加一个标志来判断是否有未匹配项//++ start 如果option中的value是数值型,自动转成stringfor (const item of this.options){if(typeof item.value === 'number'){item.value = item.value.toString();}}//++ end 如果option中的value是数值型,自动转成stringthis.values.forEach(item => {if (!this.options.some(v => v.value === item)) {this.unmatchArray.push(item)unmatch = true // 如果有未匹配项,将标志设置为true}})return unmatch // 返回标志的值},

相关文章:

RuoYi 自定义字典列表页面编码翻译

“字典数据”单独维护&#xff0c;而不是使用系统自带的字典表&#xff0c;应该如何使用这样的字典信息呢&#xff1f; 系统字典的使用&#xff0c;请参考&#xff1a; 《RuoYi列表页面字典翻译的实现》 https://blog.csdn.net/lxyoucan/article/details/136877238 需求说明…...

GAMES101 学习4

材质和外观 材质 BRDF 漫反射 任何方向的光进来都会被均匀的反射到周围各个不同的方向上去 假设能量守恒&#xff0c;那么 Li Lo&#xff0c;这之后BRDF就 &#xff0c;就可以定义一个反照率 &#xff08;Albeo&#xff09; - &#xff0c;在&#xff08;0 - 1&#xff0…...

Redis中的缓存穿透

缓存穿透 缓存穿透是指客户端请求的数据在缓存中和数据库中都不存在&#xff0c;导致这些请求直接到了数据库上&#xff0c;对数据库造成了巨大的压力&#xff0c;可能造成数据库宕机。 常见的解决方案&#xff1a; 1&#xff09;缓存无效 key 如果缓存和数据库中都查不到某…...

javaSwing超市收银(txt)

一、简介 超市收银系统是商店管理的重要组成部分&#xff0c;它可以帮助商家高效地进行商品管理、销售记录和结算。本文将介绍如何使用Java Swing开发一个简单的超市收银系统&#xff0c;包括基本功能如登录、修改商品信息、结算等&#xff0c;并利用txt文本作为数据库存储商品…...

Linux 理解文件系统、磁盘结构、软硬链接

目录 一、理解磁盘结构 1、磁盘的物理结构 2、硬件层面理解 3、磁盘的具体物理存储结构 4、进行逻辑抽象 5、磁盘文件的管理 6、创建新文件的过程 二、理解文件系统 1、文件的构成 2、为何选择4KB而非512字节作为基本单位? 3、文件系统的组成 数据块&#xff08;Data Blocks&a…...

智慧商场数字化创新需要有数字能力帮手

商场和商圈是是促进流通创新、培育新兴消费的载体。很多实体店为适应消费升级需求新变化&#xff0c;加快运用现代信息技术&#xff0c;建设智慧商店&#xff0c;创新消费场景。蚓链运用现代信息技术&#xff08;互联网、物联网、5G、大数据、人工智能、云计算等&#xff09;&a…...

JS加密解密之应用如何保存到桌面书签

前言 事情起因是这样的&#xff0c;有个客户解密了一个js&#xff0c;然后又看不懂里边的一些逻辑&#xff0c;想知道它是如何自动拉起谷歌浏览器和如何保存应用到书签的&#xff0c;以及如何下载应用的。继而诞生了这篇文章&#xff0c;讲解一下他的基本原理。 渐进式Web应用…...

线上linux服务器升级nginx

一个nginx版本空包 一个pcre文件 一个zlib文件 ./configure配置文件 make编译 make install复制所有文件到nginx 如果nginx -v无版本号 检查环境变量cat /etc/profile 编辑 环境变量vi /etc/profile 按i进入编辑模式 按esc进入查看模式 因为path中并未使用%JAVA_HOME%字样…...

使用JDK提供的常用工具在多线程编写线程安全和数据同步的程序

题图来自APOD 你好&#xff0c;这里是codetrend专栏“高并发编程基础”。 引言 在并发执行任务时&#xff0c;由于资源共享的存在&#xff0c;线程安全成为一个需要考虑的问题。与串行化程序相比&#xff0c;并发执行可以更好地利用CPU计算能力&#xff0c;提高系统的吞吐量…...

八道Python入门级题目及答案详解

前言 介绍Python作为一门流行的编程语言&#xff0c;易学易用的特点。强调通过练习题目来加深对Python语法和编程概念的理解。 题目一&#xff1a;计算两个数的和 描述&#xff1a;编写一个Python程序&#xff0c;计算两个数的和&#xff0c;并输出结果。举例&#xff1a;输…...

Git 的cherry-pick含义

目录 1. cherry-pick的基本概念 2. cherry-pick的使用场景 3. cherry-pick的使用方法 结论 1. cherry-pick的基本概念 git cherry-pick是一个Git命令&#xff0c;它允许你选择一个或多个其他分支上的提交&#xff08;commits&#xff09;&#xff0c;并将它们复制到你当前的…...

大数据中TopK问题

1.给定100个int数字&#xff0c;在其中找出最大的10个; import java.util.PriorityQueue;public class Main {public static void main(String[] args) {final int topK 3;int[] vec {4, 1, 5, 8, 7, 2, 3, 0, 6, 9};PriorityQueue<Integer> pq new PriorityQueue<…...

基于SpringBoot+MyBatis+Vue的电商智慧仓储管理系统的设计与实现(源码+LW+部署+讲解)

前言 博主简介&#x1f468;&#x1f3fc;‍⚕️&#xff1a;国内某一线互联网公司全栈工程师&#x1f468;&#x1f3fc;‍&#x1f4bb;&#xff0c;业余自媒体创作者&#x1f4bb;&#xff0c;CSDN博客专家&#x1f3c6;&#xff0c;Java领域优质创作者&#x1f4d5;&#x…...

C++经典面试题目(四)

1、请解释const关键字的作用。 在C中&#xff0c;const关键字主要用来表示“不变性”&#xff0c;即被它修饰的东西是不可修改的。它可以用于多种上下文&#xff1a; 修饰基本数据类型变量&#xff1a;声明一个常量&#xff0c;一旦初始化后&#xff0c;其值就不能再更改。 co…...

2024/3/24 蓝桥杯

P1678 烦恼的高考志愿 二分 import java.util.Arrays; import java.util.Scanner;public class Main {public static void main(String[] args) {Scanner sc new Scanner(System.in);int n sc.nextInt();int m sc.nextInt();int[] a new int[n1];//学校int[] b new int[m…...

用户验证:Streamlit应用程序与Streamlit-Authenticator

写在前面 在数字化时代&#xff0c;数据安全和用户隐私越来越受到重视。对于使用Streamlit构建的Web应用程序来说&#xff0c;确保用户的安全身份验证是至关重要的。而Streamlit-Authenticator&#xff0c;作为一个专门为Streamlit应用程序设计的身份验证库&#xff0c;正成为保…...

风丘EV能量流测试解决方案 提高电动汽车续航能力

电动汽车&#xff08;EV&#xff09;近些年发展迅猛&#xff0c;已被汽车业内普遍认为是未来汽车发展的新方向&#xff0c;但现如今电动汽车仍然存在一些短板&#xff0c;导致其还无法替代传统燃油车。对此&#xff0c;首先想到的肯定就是电动车的续航问题。其实解决电动车续航…...

【Python】输出一个 Python 项目下需要哪些第三方包

方法一 pycharm 方法二 要分析一个 Python 项目下需要哪些第三方包并生成 requirements.txt 文件&#xff0c;你可以使用 pipreqs 工具。以下是具体的步骤&#xff1a; 首先&#xff0c;确保你已经安装了 pipreqs 工具。如果未安装&#xff0c;可以使用以下命令进行安装&a…...

程序员35岁会失业吗?【来自主流AI的回答】

程序员35岁会失业吗&#xff1f; 35岁被认为是程序员职业生涯的分水岭&#xff0c;许多程序员开始担忧自己的职业发展是否会受到年龄的限制。有人担心随着年龄的增长&#xff0c;技术更新换代的速度会使得资深程序员难以跟上&#xff1b;而另一些人则认为&#xff0c;丰富的经…...

每天30分钟python(第一天)

1.input 1.规则 input输入的是字符串 2.print打印规则&#xff1a; 整数不能与文字一起打印&#xff0c;但是字符串可以&#xff0c;所以将文字转换为字符串即可 print("小明今年"str(5)"岁了") 代码实践&#xff1a; 错误代码&#xff1a; # 实现 …...

思源宋体TTF:开源字体选型与商业价值指南

思源宋体TTF&#xff1a;开源字体选型与商业价值指南 【免费下载链接】source-han-serif-ttf Source Han Serif TTF 项目地址: https://gitcode.com/gh_mirrors/so/source-han-serif-ttf 你是否曾为商业项目的字体授权成本而困扰&#xff1f;是否在寻找既能满足专业设计…...

HunyuanVideo-Foley 企业级架构设计:基于Agent的分布式音效生成调度系统

HunyuanVideo-Foley 企业级架构设计&#xff1a;基于Agent的分布式音效生成调度系统 1. 引言&#xff1a;音效生成的企业级挑战 想象一下这样的场景&#xff1a;一家大型视频平台每天需要为上万条视频自动生成匹配的音效。传统单机方案面临三大难题&#xff1a;生成速度跟不上…...

TextInput Effects部署与测试:确保跨平台兼容性的完整流程

TextInput Effects部署与测试&#xff1a;确保跨平台兼容性的完整流程 【免费下载链接】react-native-textinput-effects Text inputs with custom label and icon animations for iOS and android. Built with react native and inspired by Codrops. 项目地址: https://git…...

League Akari:英雄联盟玩家的终极自动化工具包

League Akari&#xff1a;英雄联盟玩家的终极自动化工具包 【免费下载链接】League-Toolkit An all-in-one toolkit for LeagueClient. Gathering power &#x1f680;. 项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit League Akari 是一款基于官方 LCU A…...

Wan2.2-I2V-A14B文生视频模型落地实践:单卡4090D高效推理部署案例

Wan2.2-I2V-A14B文生视频模型落地实践&#xff1a;单卡4090D高效推理部署案例 1. 项目背景与价值 视频内容创作正成为数字时代的重要需求&#xff0c;但传统视频制作流程复杂、成本高昂。Wan2.2-I2V-A14B作为新一代文生视频模型&#xff0c;能够直接将文本描述转化为高质量视…...

LSTM预测不准?试试这个全局注意力“外挂”:一个PyTorch模块提升你的时序模型性能

LSTM预测不准&#xff1f;试试这个全局注意力“外挂”&#xff1a;一个PyTorch模块提升你的时序模型性能 当你发现精心调参的LSTM模型在预测股票价格、设备故障率或能源消耗时&#xff0c;总是错过关键转折点&#xff0c;问题可能不在你的数据清洗或超参选择——而是模型缺乏对…...

Windows系统优化工具WinUtil:从新手到专家的完整使用指南

Windows系统优化工具WinUtil&#xff1a;从新手到专家的完整使用指南 【免费下载链接】winutil Chris Titus Techs Windows Utility - Install Programs, Tweaks, Fixes, and Updates 项目地址: https://gitcode.com/GitHub_Trending/wi/winutil 你是否厌倦了Windows系统…...

GitHub加速完全指南:从卡顿到飞一般体验的实战方案

GitHub加速完全指南&#xff1a;从卡顿到飞一般体验的实战方案 【免费下载链接】gh-proxy github release、archive以及项目文件的加速项目 项目地址: https://gitcode.com/gh_mirrors/gh/gh-proxy 问题诊断&#xff1a;你的GitHub访问为何如此缓慢&#xff1f; 网络延…...

intv_ai_mk11开源可部署实践:支持Webhook回调,可对接企业微信/钉钉/飞书通知

intv_ai_mk11开源可部署实践&#xff1a;支持Webhook回调&#xff0c;可对接企业微信/钉钉/飞书通知 1. 项目概述 intv_ai_mk11是一款基于Llama架构的AI对话机器人&#xff0c;拥有7B参数规模&#xff0c;能够运行在GPU服务器上。这个开源项目不仅提供了强大的对话能力&#…...

Phi-3-mini-4k-instruct-gguf应用落地:律师助理合同风险点识别与提示生成

Phi-3-mini-4k-instruct-gguf应用落地&#xff1a;律师助理合同风险点识别与提示生成 1. 项目背景与价值 在法律服务领域&#xff0c;合同审查是律师日常工作中最耗时且重复性高的任务之一。传统人工审查方式存在效率低下、容易遗漏细节等问题。Phi-3-mini-4k-instruct-gguf作…...