v3.6.0 增加字典标签样式回显

yudao-module-system/yudao-module-system-impl/src/main/java/cn/iocoder/yudao/module/system/controller/admin/dict/vo/data/DictDataBaseVO.java

@@ -38,6 +38,11 @@ public class DictDataBaseVO {
 //    @InEnum(value = CommonStatusEnum.class, message = "修改状态必须是 {value}")
     private Integer status;
 
+    @ApiModelProperty(value = "颜色类型", example = "default", notes = "default、primary、success、info、warning、danger")
+    private String colorType;
+    @ApiModelProperty(value = "css 样式", example = "btn-visible")
+    private String cssClass;
+
     @ApiModelProperty(value = "备注", example = "我是一个角色")
     private String remark;
 

yudao-module-system/yudao-module-system-impl/src/main/java/cn/iocoder/yudao/module/system/controller/admin/dict/vo/data/DictDataSimpleRespVO.java

@@ -17,4 +17,9 @@ public class DictDataSimpleRespVO {
     @ApiModelProperty(value = "字典标签", required = true, example = "男")
     private String label;
 
+    @ApiModelProperty(value = "颜色类型", example = "default", notes = "default、primary、success、info、warning、danger")
+    private String colorType;
+    @ApiModelProperty(value = "css 样式", example = "btn-visible")
+    private String cssClass;
+
 }

yudao-module-system/yudao-module-system-impl/src/main/java/cn/iocoder/yudao/module/system/dal/dataobject/dict/DictDataDO.java

@@ -46,6 +46,16 @@ public class DictDataDO extends BaseDO {
      * 枚举 {@link CommonStatusEnum}
      */
     private Integer status;
+    /**
+     * 颜色类型
+     *
+     * 对应到 element-ui 为 default、primary、success、info、warning、danger
+     */
+    private String colorType;
+    /**
+     * css 样式
+     */
+    private String cssClass;
     /**
      * 备注
      */

yudao-ui-admin/src/components/DictTag/index.vue

@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <template v-for="(dict, index) in this.getDictDatas2(type, value)">
+      <!-- 默认样式 -->
+      <span v-if="dict.colorType === 'default' || dict.colorType === '' || dict.color === undefined" :key="dict.value" :index="index"
+            :class="dict.cssClass">{{ dict.label }}</span>
+      <!-- Tag 样式 -->
+      <el-tag v-else :key="dict.value" :index="index" :type="dict.colorType" :class="dict.cssClass">
+        {{ dict.label }}
+      </el-tag>
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "DictTag",
+  props: {
+    type: String,
+    value: [Number, String, Array],
+  },
+};
+</script>
+<style scoped>
+.el-tag + .el-tag {
+  margin-left: 10px;
+}
+</style>

yudao-ui-admin/src/main.js

@@ -36,7 +36,7 @@ import RightToolbar from "@/components/RightToolbar"
 // 代码高亮插件
 // import hljs from 'highlight.js'
 // import 'highlight.js/styles/github-gist.css'
-import {DICT_TYPE, getDictDataLabel, getDictDatas} from "@/utils/dict";
+import {DICT_TYPE, getDictDataLabel, getDictDatas, getDictDatas2} from "@/utils/dict";
 
 // 全局方法挂载
 Vue.prototype.getDicts = getDicts
@@ -47,6 +47,7 @@ Vue.prototype.addDateRange = addDateRange
 Vue.prototype.addBeginAndEndTime = addBeginAndEndTime
 Vue.prototype.selectDictLabel = selectDictLabel
 Vue.prototype.getDictDatas = getDictDatas
+Vue.prototype.getDictDatas2 = getDictDatas2
 Vue.prototype.getDictDataLabel = getDictDataLabel
 Vue.prototype.DICT_TYPE = DICT_TYPE
 Vue.prototype.download = download
@@ -70,8 +71,11 @@ Vue.prototype.msgInfo = function (msg) {
 }
 
 // 全局组件挂载
+Vue.component('DictTag', DictTag)
 Vue.component('Pagination', Pagination)
 Vue.component('RightToolbar', RightToolbar)
+// 字典标签组件
+import DictTag from '@/components/DictTag'
 // 头部标签插件
 import VueMeta from 'vue-meta'
 

yudao-ui-admin/src/utils/dict.js

@@ -68,10 +68,37 @@ export function getDictDatas(dictType) {
   //   console.log(store.getters.dict_datas[dictType]);
   //   debugger
   // }
+  // debugger
   return store.getters.dict_datas[dictType] || []
 }
 
-export function getDictDataLabel(dictType, value) {
+/**
+ * 获取 dictType 对应的数据字典数组
+ *
+ * @param dictType 数据类型
+ * @param values 数组、单个元素
+ * @returns {*|Array} 数据字典数组
+ */
+export function getDictDatas2(dictType, values) {
+  if (values === undefined) {
+    return [];
+  }
+  // 如果是单个元素，则转换成数组
+  if (!Array.isArray(values)) {
+    values = [this.value];
+  }
+  // 获得字典数据
+  const results = [];
+  for (const value of values) {
+    const dict = getDictData(dictType, value);
+    if (dict) {
+      results.push(dict);
+    }
+  }
+  return results;
+}
+
+export function getDictData(dictType, value) {
   // 获取 dictType 对应的数据字典数组
   const dictDatas = getDictDatas(dictType)
   if (!dictDatas || dictDatas.length === 0) {
@@ -81,8 +108,14 @@ export function getDictDataLabel(dictType, value) {
   value = value + '' // 强制转换成字符串，因为 DictData 小类数值，是字符串
   for (const dictData of dictDatas) {
     if (dictData.value === value) {
-      return dictData.label
+      return dictData;
     }
   }
-  return ''
+  return undefined
 }
+
+export function getDictDataLabel(dictType, value) {
+  const dict = getDictData(dictType, value);
+  return dict ? dict.label : '';
+}
+

yudao-ui-admin/src/views/system/dict/data.vue

@@ -37,7 +37,13 @@
       <el-table-column label="字典标签" align="center" prop="label" />
       <el-table-column label="字典键值" align="center" prop="value" />
       <el-table-column label="字典排序" align="center" prop="sort" />
-      <el-table-column label="状态" align="center" prop="status" :formatter="statusFormat" />
+      <el-table-column label="状态" align="center" prop="status">
+        <template slot-scope="scope">
+          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="颜色类型" align="center" prop="colorType" />
+      <el-table-column label="CSS Class" align="center" prop="cssClass" />
       <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
       <el-table-column label="创建时间" align="center" prop="createTime" width="180">
         <template slot-scope="scope">
@@ -59,7 +65,7 @@
 
     <!-- 添加或修改参数配置对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+      <el-form ref="form" :model="form" :rules="rules" label-width="90px">
         <el-form-item label="字典类型">
           <el-input v-model="form.dictType" :disabled="true" />
         </el-form-item>
@@ -77,6 +83,14 @@
             <el-radio v-for="dict in statusDictDatas" :key="parseInt(dict.value)" :label="parseInt(dict.value)">{{dict.label}}</el-radio>
           </el-radio-group>
         </el-form-item>
+        <el-form-item label="颜色类型" prop="colorType">
+          <el-select v-model="form.colorType">
+            <el-option v-for="item in colorTypeOptions" :key="item.value" :label="item.label + '(' + item.value + ')'" :value="item.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="CSS Class" prop="cssClass">
+          <el-input v-model="form.cssClass" placeholder="请输入 CSS Class" />
+        </el-form-item>
         <el-form-item label="备注" prop="remark">
           <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
         </el-form-item>
@@ -142,6 +156,27 @@ export default {
           { required: true, message: "数据顺序不能为空", trigger: "blur" }
         ]
       },
+      // 数据标签回显样式
+      colorTypeOptions: [{
+          value: "default",
+          label: "默认"
+        }, {
+          value: "primary",
+          label: "主要"
+        }, {
+          value: "success",
+          label: "成功"
+        }, {
+          value: "info",
+          label: "信息"
+        }, {
+          value: "warning",
+          label: "警告"
+        }, {
+          value: "danger",
+          label: "危险"
+        }
+      ],
 
       // 枚举
       CommonStatusEnum: CommonStatusEnum,
@@ -178,10 +213,6 @@ export default {
         this.loading = false;
       });
     },
-    // 数据状态字典翻译
-    statusFormat(row, column) {
-      return getDictDataLabel(DICT_TYPE.COMMON_STATUS, row.status)
-    },
     // 取消按钮
     cancel() {
       this.open = false;
@@ -195,6 +226,8 @@ export default {
         value: undefined,
         sort: 0,
         status: CommonStatusEnum.ENABLE,
+        colorType: 'default',
+        cssClass: undefined,
         remark: undefined
       };
       this.resetForm("form");

更新日志.md

@@ -35,7 +35,7 @@
 * 【新增】前端的表格右侧工具栏组件支持显隐列，具体可见【用户管理】功能 [commit](https://gitee.com/zhijiantianya/ruoyi-vue-pro/commit/20e34e35a3bdc48e6a4c58e3849aa729bd18efe5)
 * 【新增】前端的菜单导航显示风格 TopNav（false 为 左侧导航菜单，true 为顶部导航菜单），支持布局的保存与重置 [commit1](https://gitee.com/zhijiantianya/ruoyi-vue-pro/commit/4bf5b04d542014a49c5a41b20935cef35033a518) [commit2](https://gitee.com/zhijiantianya/ruoyi-vue-pro/commit/cff4391f2d7830770731c0034085c0f77ea8c68e)
 * 【新增】前端的网页标题支持根据选择的菜单，动态展示标题 [commit](https://gitee.com/zhijiantianya/ruoyi-vue-pro/commit/7bf9a85263e0c44b2bc88485b83557c129583f5c)
-* 【新增】前端的 iframe 组件，方便内嵌网页 [commit]()
+* 【新增】前端的 iframe 组件，方便内嵌网页 [commit](https://gitee.com/zhijiantianya/ruoyi-vue-pro/commit/4a8129bffa9e3928c56333e29f5874f55a079764)
 
 ### 🐞 Bug Fixes