将数据字典的颜色参数利用到前端界面展示数据YYDS

[chenkaiq]

版本号：

3.7.3

问题描述：

将数据字典 的颜色 参数利用到前端界面展示数据YYDS

数据字典可以配置颜色，但是颜色任何位置也没有用到，现改造后端

org.jeecg.common.aspect.annotation.Dict的33行添加String dicColor() default "";
org.jeecg.common.aspect.DictAspect的195行添加String colorValue = this.translDictColor(dictModels, value);
206行添加record.put(field.getName() + CommonConstant.DICT_COLOR_SUFFIX, colorValue);
270行添加String colorString = String.format("sys:cache:dict::%s:%s:%s", dictCode, data, "color");
274行添加String color = oConvertUtils.getString(redisTemplate.opsForValue().get(colorString));
276行修改list.add(new DictModel(data, text, color));
318行添加String redisColorKey = String.format("sys:cache:dictTable::SimpleKey [%s,%s,%s]", dictCode, dict.getValue(),"color");
323行添加redisTemplate.opsForValue().set(redisColorKey, dict.getColor(), 300, TimeUnit.SECONDS);
356行添加
redisKey = String.format("sys:cache:dict::%s:%s:%s", dictCode, dict.getValue(),"color");
try {
redisTemplate.opsForValue().set(redisKey, dict.getColor());
} catch (Exception e) {
log.warn(e.getMessage(), e);
}
393行添加
private String translDictColor(List dictModels, String values) {
List result = new ArrayList<>();

// 允许多个逗号分隔，允许传数组对象
String[] splitVal = values.split(",");
for (String val : splitVal) {
    String dictText = val;
    for (DictModel dict : dictModels) {
        if (val.equals(dict.getValue())) {
            dictText = dict.getColor();
            break;
        }
    }
    result.add(dictText);
}
return String.join(",", result);

}
org.jeecg.modules.system.service.impl的207行修改dictItemList.add(new DictModel(dict.getValue(), dict.getText(), dict.getColor()));
上述后端修改是redis存储中添加颜色相关的数据，后端查询列表数据加载时不仅会有_dictText,还会新增_dictColor字段。
前端data.ts需引用

在前端界面需要显示字典颜色字段自己增加

import { ref, h } from 'vue';
import { Tag } from 'ant-design-vue';
对应字典字段增加
customRender:function (text) {
// @ts-ignore
return h(Tag, { color: text.record[text.column.dataIndex.toString().replace("dictText","dictColor")] }, text.value)
}
这样就可以使用tag标签灵活使用字典配置的颜色显示相应数据。

错误截图：

效果图

友情提示：

• 未按格式要求发帖、描述过于简单的，会被直接删掉;
• 描述问题请图文并茂，方便我们理解并快速定位问题;
• 如果使用的不是master，请说明你使用的分支;

[chenkaiq]

原文链接地址

https://www.zhanglinzhi.com/2024/06/24/jeecgboot_vue3_shu_ju_zi_dian_jiang_pei_zhi_de_yan_se_ying_yong_dao_dicttext_lie_biao_xian_shi_zhong/

[dahai2025]

后端没必要新增代码。前端那个渲染函数改造下就可以