2024年6月24日
jeecgboot Vue3数据字典将配置的颜色应用到_dictText列表显示中
jeecgboot框架开发组一如既往的偷懒,数据字典可以配置颜色,但是颜色任何位置也没有用到,现改造后端
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<DictModel> dictModels, String values) { List<String> 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标签灵活使用字典配置的颜色显示相应数据。