feat: 字典标签自定义颜色

xingyu
1 parent cccf8d81
Showing 5 changed files with 39 additions and 25 deletions
yudao-ui-admin-vue3/src/components/DictTag/src/DictTag.vue
yudao-ui-admin-vue3/src/store/modules/dict.ts
yudao-ui-admin-vue3/src/utils/dict.ts
yudao-ui-admin-vue3/src/views/system/dict/dict.data.ts
yudao-ui-admin-vue3/src/views/system/dict/dict.type.ts
@@ -17,6 +17,9 @@ const getDictObj = (dictType: string, value: string) =&gt; {
   const dictOptions = getDictOptions(dictType)
   dictOptions.forEach((dict: DictDataType) => {
     if (dict.value === value) {
+      if (dict.colorType + '' === 'primary' || dict.colorType + '' === 'default') {
+        dict.colorType = ''
+      }
       dictData.value = dict
     }
   })
@@ -31,25 +34,11 @@ onUpdated(() =&gt; {
 })
 </script>
 <template>
-  <!-- 默认样式 -->
-  <span
-    v-if="
-      dictData?.colorType === 'default' ||
-      dictData?.colorType === '' ||
-      dictData?.colorType === undefined
-    "
-    :key="dictData?.value.toString()"
-    :class="dictData?.cssClass"
-  >
-    {{ dictData?.label }}
-  </span>
-  <!-- Tag 样式 -->
   <ElTag
-    v-else
     :disable-transitions="true"
     :key="dictData?.value + ''"
-    :type="dictData?.colorType === 'primary' ? 'success' : dictData?.colorType"
-    :class="dictData?.cssClass"
+    :type="dictData?.colorType"
+    :color="dictData?.cssClass"
   >
     {{ dictData?.label }}
   </ElTag>
@@ -65,6 +65,29 @@ export const useDictStore = defineStore(&#39;dict&#39;, {
         this.isSetDict = true
         wsCache.set(CACHE_KEY.DICT_CACHE, dictDataMap, { exp: 60 }) // 60 秒 过期
       }
+    },
+    async resetDict() {
+      wsCache.delete(CACHE_KEY.DICT_CACHE)
+      const res = await listSimpleDictDataApi()
+      // 设置数据
+      const dictDataMap = new Map<string, any>()
+      res.forEach((dictData: DictDataVO) => {
+        // 获得 dictType 层级
+        const enumValueObj = dictDataMap[dictData.dictType]
+        if (!enumValueObj) {
+          dictDataMap[dictData.dictType] = []
+        }
+        // 处理 dictValue 层级
+        dictDataMap[dictData.dictType].push({
+          value: dictData.value,
+          label: dictData.label,
+          colorType: dictData.colorType,
+          cssClass: dictData.cssClass
+        })
+      })
+      this.dictMap = dictDataMap
+      this.isSetDict = true
+      wsCache.set(CACHE_KEY.DICT_CACHE, dictDataMap, { exp: 60 }) // 60 秒 过期
     }
   }
 })
@@ -16,7 +16,7 @@ export interface DictDataType {
   dictType: string
   label: string
   value: string | number | boolean
-  colorType: ElementPlusInfoType | '' | 'default' | 'primary'
+  colorType: ElementPlusInfoType | ''
   cssClass: string
 }
@@ -7,7 +7,7 @@ import { VxeCrudSchema, useVxeCrudSchemas } from &#39;@/hooks/web/useVxeCrudSchemas&#39;
 const { t } = useI18n()
 // 表单校验
 export const dictDataRules = reactive({
-  title: [required],
+  label: [required],
   value: [required],
   sort: [required]
 })
@@ -35,7 +35,7 @@ export const crudSchemas = reactive&lt;VxeCrudSchema&gt;({
       field: 'value'
     },
     {
-      title: '颜色类型',
+      title: '标签类型',
       field: 'colorType',
       form: {
         component: 'Select',
@@ -67,9 +67,12 @@ export const crudSchemas = reactive&lt;VxeCrudSchema&gt;({
       isTable: false
     },
     {
-      title: 'CSS Class',
+      title: '颜色',
       field: 'cssClass',
-      isTable: false
+      isTable: false,
+      form: {
+        component: 'ColorPicker'
+      }
     },
     {
       title: '显示排序',
@@ -7,7 +7,8 @@ const { t } = useI18n() // 国际化
 // 表单校验
 export const dictTypeRules = reactive({
-  name: [required]
+  name: [required],
+  type: [required]
 })
 // 新增 + 修改
 const crudSchemas = reactive<VxeCrudSchema>({
@@ -41,9 +42,7 @@ const crudSchemas = reactive&lt;VxeCrudSchema&gt;({
       field: 'createTime',
       formatter: 'formatDate',
       isForm: false,
-      table: {
-        width: 150
-      },
+      isTable: false,
       search: {
         show: true,
         itemRender: {