feat: 数据字典缓存

src/main.ts

@@ -22,8 +22,6 @@ import 'virtual:svg-icons-register'
 import ElementIcons from '@/plugins/svg-icon'
 // element plus
 import ElementPlus from 'element-plus'
-// element icons
-// import * as Icons from '@element-plus/icons-vue'
 // custom directives
 import directives from '@/directives/index'
 // vue Router
@@ -35,9 +33,6 @@ import pinia from '@/stores'
 // errorHandler
 import errorHandler from '@/utils/errorHandler'
 
-// 字典标签组件
-// import DictTag from '@/components/DictTag/index.vue'
-
 import { useDict } from '@/utils/dict'
 const app = createApp(App)
 

src/stores/modules/dict.ts

@@ -1,57 +1,77 @@
-const useDictStore = defineStore('dict', {
-  state: (): {
-    dict: any[]
-  } => ({
-    dict: []
-  }),
-  actions: {
-    // 获取字典
-    getDict(_key: string | null) {
-      if (_key == null && _key === '') {
-        return null
-      }
-      try {
-        for (let i = 0; i < this.dict.length; i++) {
-          if (this.dict[i].key === _key) {
-            return this.dict[i].value
-          }
+export const useDictStore = defineStore('dict', () => {
+  const dict = ref<
+    Array<{
+      key: string
+      value: DictDataOption[]
+    }>
+  >([])
+
+  /**
+   * 获取字典
+   * @param _key 字典key
+   */
+  const getDict = (_key: string): DictDataOption[] | null => {
+    if (_key == null && _key == '') {
+      return null
+    }
+    try {
+      for (let i = 0; i < dict.value.length; i++) {
+        if (dict.value[i].key == _key) {
+          return dict.value[i].value
         }
-      } catch (e) {
-        return null
-      }
-    },
-    // 设置字典
-    setDict(_key: string | null, value: any) {
-      if (_key !== null && _key !== '') {
-        this.dict.push({
-          key: _key,
-          value: value
-        })
       }
-    },
-    // 删除字典
-    removeDict(_key: any) {
-      let bln = false
-      try {
-        for (let i = 0; i < this.dict.length; i++) {
-          if (this.dict[i].key === _key) {
-            this.dict.splice(i, 1)
-            return true
-          }
+    } catch (e) {
+      return null
+    }
+    return null
+  }
+
+  /**
+   * 设置字典
+   * @param _key 字典key
+   * @param _value 字典value
+   */
+  const setDict = (_key: string, _value: DictDataOption[]) => {
+    if (_key !== null && _key !== '') {
+      dict.value.push({
+        key: _key,
+        value: _value
+      })
+    }
+  }
+
+  /**
+   * 删除字典
+   * @param _key
+   */
+  const removeDict = (_key: string): boolean => {
+    let bln = false
+    try {
+      for (let i = 0; i < dict.value.length; i++) {
+        if (dict.value[i].key == _key) {
+          dict.value.splice(i, 1)
+          return true
         }
-      } catch (e) {
-        bln = false
       }
-      return bln
-    },
-    // 清空字典
-    cleanDict() {
-      this.dict = []
-    },
-    // 初始字典
-    initDict() {
-      console.log('init')
+    } catch (e) {
+      bln = false
     }
+    return bln
+  }
+
+  /**
+   * 清空字典
+   */
+  const cleanDict = (): void => {
+    dict.value = []
+  }
+
+  return {
+    dict,
+    getDict,
+    setDict,
+    removeDict,
+    cleanDict
   }
 })
 

src/typings/global.d.ts

@@ -1,3 +1,17 @@
+/** vue Instance */
+declare type ComponentInternalInstance = ComponentInstance
+/**vue */
+declare type PropType<T> = VuePropType<T>
+
+/**
+ * 字典数据  数据配置
+ */
+declare interface DictDataOption {
+  label: string
+  value: string
+  elTagType?: ElTagType
+  elTagClass?: string
+}
 /* Menu */
 declare namespace Menu {
   interface MenuOptions {

src/utils/dict.ts

@@ -1,29 +1,29 @@
 // 系统全局字典
 import useDictStore from '@/stores/modules/dict'
 import { getDictsApi } from '@/api/modules/system/dictData'
+
 /**
  * 获取字典数据
  */
-export const useDict = (...args: any[]) => {
-  const res = ref<any>({})
+export const useDict = (...args: string[]): { [key: string]: DictDataOption[] } => {
+  const res = ref<{
+    [key: string]: DictDataOption[]
+  }>({})
   return (() => {
-    args.forEach(dictType => {
+    args.forEach(async dictType => {
       res.value[dictType] = []
       const dicts = useDictStore().getDict(dictType)
       if (dicts) {
         res.value[dictType] = dicts
       } else {
-        getDictsApi(dictType).then(resp => {
-          res.value[dictType] = resp.data.map((p: any) => ({
-            label: p.dictLabel,
-            value: p.dictValue,
-            elTagType: p.listClass,
-            elTagClass: p.cssClass
-          }))
+        await getDictsApi(dictType).then(resp => {
+          res.value[dictType] = resp.data.map(
+            (p): DictDataOption => ({ label: p.dictLabel, value: p.dictValue, elTagType: p.listClass, elTagClass: p.cssClass })
+          )
           useDictStore().setDict(dictType, res.value[dictType])
         })
       }
     })
-    return toRefs(res.value)
+    return res.value
   })()
 }

src/utils/index.ts

@@ -294,7 +294,7 @@ export function filterEnum(callValue: any, enumData?: any, fieldNames?: FieldNam
 
   // 判断是否输出的结果为 tag 类型
   if (type == 'tag') {
-    return filterData?.listClass ? filterData.listClass : 'primary'
+    return filterData.elTagType ? filterData.elTagType : 'primary'
   } else {
     return filterData ? filterData[label] : '--'
   }

src/views/monitor/logininfor/index.vue

@@ -10,7 +10,8 @@ import ProTable from '@/components/ProTable/index.vue'
 import ImportExcel from '@/components/ImportExcel/index.vue'
 import { ProTableInstance, ColumnProps } from '@/components/ProTable/interface'
 import { listLogininforApi } from '@/api/modules/monitor/logininfor'
-import { getDictsApi } from '@/api/modules/system/dictData'
+const { proxy } = getCurrentInstance() as ComponentInternalInstance
+const { sys_common_status } = toRefs<any>(proxy?.useDict('sys_common_status'))
 
 // ProTable 实例
 const proTable = ref<ProTableInstance>()
@@ -63,11 +64,7 @@ const columns = reactive<ColumnProps<any>[]>([
     prop: 'status',
     label: '登录状态',
     tag: true,
-    enum: () => getDictsApi('sys_common_status'),
-    fieldNames: {
-      label: 'dictLabel',
-      value: 'dictValue'
-    },
+    enum: sys_common_status,
     search: {
       el: 'input'
     }

src/views/system/dept/index.vue

@@ -36,7 +36,8 @@ import FormDialog from '@/components/FormDialog/index.vue'
 import { ProTableInstance, ColumnProps } from '@/components/ProTable/interface'
 import { handleTree } from '@/utils/common'
 import { listDeptApi, delDeptApi, addDeptApi, updateDeptApi } from '@/api/modules/system/dept'
-import { getDictsApi } from '@/api/modules/system/dictData'
+const { proxy } = getCurrentInstance() as ComponentInternalInstance
+const { sys_normal_disable } = toRefs<any>(proxy?.useDict('sys_normal_disable'))
 
 // ProTable 实例
 const proTable = ref<ProTableInstance>()
@@ -107,11 +108,10 @@ const columns = reactive<ColumnProps<any>[]>([
     prop: 'status',
     label: '部门状态',
     tag: true,
-    enum: () => getDictsApi('sys_normal_disable'),
+    enum: sys_normal_disable,
     search: {
       el: 'tree-select'
     },
-    fieldNames: { label: 'dictLabel', value: 'dictValue' },
     width: 180
   },
   {
@@ -194,9 +194,7 @@ const setItemsOptions = () => {
       compOptions: {
         value: '0',
         elTagName: 'radio-group',
-        enum: () => getDictsApi('sys_normal_disable'),
-        labelKey: 'dictLabel',
-        valueKey: 'dictValue',
+        enum: sys_normal_disable.value,
         placeholder: '请选择部门状态'
       }
     }

src/views/system/menu/index.vue

@@ -38,7 +38,8 @@ import FormDialog from '@/components/FormDialog/index.vue'
 import { ProTableInstance, ColumnProps } from '@/components/ProTable/interface'
 import { handleTree } from '@/utils/common'
 import { listMenuApi, delMenuApi, addMenuApi, updateMenuApi, getMenuApi } from '@/api/modules/system/menu'
-import { getDictsApi } from '@/api/modules/system/dictData'
+const { proxy } = getCurrentInstance() as ComponentInternalInstance
+const { sys_normal_disable, sys_yes_no, sys_show_hide } = toRefs<any>(proxy?.useDict('sys_normal_disable', 'sys_yes_no', 'sys_show_hide'))
 
 // ProTable 实例
 const proTable = ref<ProTableInstance>()
@@ -118,11 +119,10 @@ const columns = reactive<ColumnProps<any>[]>([
     prop: 'status',
     label: '状态',
     tag: true,
-    enum: () => getDictsApi('sys_normal_disable'),
+    enum: sys_normal_disable,
     search: {
       el: 'tree-select'
-    },
-    fieldNames: { label: 'dictLabel', value: 'dictValue' }
+    }
   },
   {
     prop: 'perms',
@@ -173,9 +173,7 @@ const setItemsOptions = () => {
       compOptions: {
         elTagName: 'radio-button',
         value: '0',
-        enum: () => getDictsApi('sys_normal_disable'),
-        labelKey: 'dictLabel',
-        valueKey: 'dictValue'
+        enum: sys_normal_disable.value
       }
     },
     {
@@ -230,10 +228,8 @@ const setItemsOptions = () => {
       tooltip: '选择是外链则路由地址需要以`http(s)://`开头',
       compOptions: {
         elTagName: 'radio-button',
-        enum: () => getDictsApi('sys_yes_no'),
-        enumKey: 'sys_yes_no',
-        labelKey: 'dictLabel',
-        valueKey: 'dictValue'
+        enum: sys_yes_no.value,
+        enumKey: 'sys_yes_no'
       }
     },
     {
@@ -247,9 +243,7 @@ const setItemsOptions = () => {
       compOptions: {
         elTagName: 'radio-button',
         value: '0',
-        enum: () => getDictsApi('sys_show_hide'),
-        labelKey: 'dictLabel',
-        valueKey: 'dictValue'
+        enum: sys_show_hide.value
       }
     },
     {
@@ -327,10 +321,8 @@ const setItemsOptions = () => {
       },
       compOptions: {
         elTagName: 'radio-button',
-        enum: () => getDictsApi('sys_yes_no'),
-        enumKey: 'sys_yes_no',
-        labelKey: 'dictLabel',
-        valueKey: 'dictValue'
+        enum: sys_show_hide.value,
+        enumKey: 'sys_yes_no'
       }
     }
   ]

src/views/system/oss/config.vue

@@ -45,9 +45,9 @@ import {
   getOssConfigApi,
   changeOssConfigStatusApi
 } from '@/api/modules/system/ossConfig'
-import { getDictsApi } from '@/api/modules/system/dictData'
 import { OssConfigVO } from '@/api/interface/system/ossConfig'
-
+const { proxy } = getCurrentInstance() as ComponentInternalInstance
+const { sys_yes_no } = toRefs<any>(proxy?.useDict('sys_yes_no'))
 // ProTable 实例
 const proTable = ref<ProTableInstance>()
 // 表单model
@@ -277,9 +277,7 @@ const setItemsOptions = () => {
       prop: 'isHttps',
       compOptions: {
         elTagName: 'radio-group',
-        enum: () => getDictsApi('sys_yes_no'),
-        labelKey: 'dictLabel',
-        valueKey: 'dictValue'
+        enum: sys_yes_no.value
       }
     },
     {

src/views/system/post/index.vue

@@ -49,7 +49,8 @@ import {
   exportApi,
   getPostApi
 } from '@/api/modules/system/post'
-import { getDictsApi } from '@/api/modules/system/dictData'
+const { proxy } = getCurrentInstance() as ComponentInternalInstance
+const { sys_normal_disable } = toRefs<any>(proxy?.useDict('sys_normal_disable'))
 
 // ProTable 实例
 const proTable = ref<ProTableInstance>()
@@ -139,11 +140,10 @@ const columns = reactive<ColumnProps<any>[]>([
     prop: 'status',
     label: '岗位状态',
     tag: true,
-    enum: () => getDictsApi('sys_normal_disable'),
+    enum: sys_normal_disable,
     search: {
       el: 'tree-select'
     },
-    fieldNames: { label: 'dictLabel', value: 'dictValue' },
     width: 180
   },
   {
@@ -219,9 +219,7 @@ const setItemsOptions = () => {
       compOptions: {
         elTagName: 'radio-group',
         value: '0',
-        enum: () => getDictsApi('sys_normal_disable'),
-        labelKey: 'dictLabel',
-        valueKey: 'dictValue'
+        enum: sys_normal_disable.value
       }
     },
     {

src/views/system/role/authUser.vue

@@ -38,7 +38,8 @@ import {
   authUserCancelAllApi
 } from '@/api/modules/system/role'
 import { useTabsStore } from '@/stores/modules/tabs'
-import { getDictsApi } from '@/api/modules/system/dictData'
+const { proxy } = getCurrentInstance() as ComponentInternalInstance
+const { sys_normal_disable } = toRefs<any>(proxy?.useDict('sys_normal_disable'))
 const tabStore = useTabsStore()
 const route = useRoute()
 
@@ -124,8 +125,7 @@ const columns = reactive<ColumnProps<any>[]>([
     prop: 'status',
     label: '状态',
     tag: true,
-    enum: () => getDictsApi('sys_normal_disable'),
-    fieldNames: { label: 'dictLabel', value: 'dictValue' }
+    enum: sys_normal_disable
   },
   {
     prop: 'createTime',
@@ -165,8 +165,7 @@ const subColumns: ColumnProps[] = [
     prop: 'status',
     label: '状态',
     tag: true,
-    enum: () => getDictsApi('sys_normal_disable'),
-    fieldNames: { label: 'dictLabel', value: 'dictValue' }
+    enum: sys_normal_disable
   },
   {
     prop: 'createTime',

src/views/system/role/index.vue

@@ -125,7 +125,8 @@ import {
   roleMenuTreeSelectApi
 } from '@/api/modules/system/role'
 import { treeSelectApi } from '@/api/modules/system/menu'
-import { getDictsApi } from '@/api/modules/system/dictData'
+const { proxy } = getCurrentInstance() as ComponentInternalInstance
+const { sys_normal_disable } = toRefs<any>(proxy?.useDict('sys_normal_disable'))
 
 const router = useRouter()
 // 菜单列表
@@ -398,9 +399,8 @@ const columns = reactive<ColumnProps<any>[]>([
   {
     prop: 'status',
     label: '角色状态',
-    enum: () => getDictsApi('sys_normal_disable'),
+    enum: sys_normal_disable,
     search: { el: 'tree-select' },
-    fieldNames: { label: 'dictLabel', value: 'dictValue' },
     render: scope => {
       return (
         <el-switch
@@ -467,9 +467,7 @@ const setItemsOptions = () => {
       compOptions: {
         elTagName: 'radio-group',
         value: '0',
-        enum: () => getDictsApi('sys_normal_disable'),
-        labelKey: 'dictLabel',
-        valueKey: 'dictValue'
+        enum: sys_normal_disable.value
       }
     },
     {

src/views/system/user/index.vue

@@ -64,7 +64,8 @@ import {
   deptTreeSelectApi,
   resetUserPwdApi
 } from '@/api/modules/system/user'
-import { getDictsApi } from '@/api/modules/system/dictData'
+const { proxy } = getCurrentInstance() as ComponentInternalInstance
+const { sys_normal_disable, sys_user_gender } = toRefs<any>(proxy?.useDict('sys_normal_disable', 'sys_user_gender'))
 onMounted(() => {
   getTreeFilter()
 })
@@ -217,9 +218,8 @@ const columns = reactive<ColumnProps<User.ResUserList>[]>([
     prop: 'status',
     label: '用户状态',
     width: 120,
-    enum: () => getDictsApi('sys_normal_disable'),
+    enum: sys_normal_disable,
     search: { el: 'tree-select' },
-    fieldNames: { label: 'dictLabel', value: 'dictValue' },
     render: scope => {
       return (
         <el-switch
@@ -236,7 +236,7 @@ const columns = reactive<ColumnProps<User.ResUserList>[]>([
     prop: 'sex',
     label: '性别',
     width: 120,
-    enum: () => getDictsApi('sys_user_gender'),
+    enum: sys_user_gender,
     fieldNames: {
       label: 'dictLabel',
       value: 'dictValue'
@@ -295,9 +295,7 @@ const setItemsOptions = () => {
       prop: 'sex',
       compOptions: {
         elTagName: 'radio-group',
-        enum: () => getDictsApi('sys_user_gender'),
-        labelKey: 'dictLabel',
-        valueKey: 'dictValue',
+        enum: sys_user_gender.value,
         placeholder: '请输入邮箱'
       }
     },
@@ -308,9 +306,7 @@ const setItemsOptions = () => {
       compOptions: {
         elTagName: 'radio-group',
         value: '0',
-        enum: () => getDictsApi('sys_normal_disable'),
-        labelKey: 'dictLabel',
-        valueKey: 'dictValue'
+        enum: sys_normal_disable.value
       }
     },
     {

src/views/system/user/profile/index.vue

@@ -80,8 +80,9 @@ import { ElMessage } from 'element-plus'
 import { getUserProfileApi, updateUserPwdApi, updateUserProfileApi } from '@/api/modules/system/user'
 import { UserVO } from '@/api/interface/system/user'
 import ProFrom from '@/components/ProForm/index.vue'
-import { getDictsApi } from '@/api/modules/system/dictData'
 import { useTabsStore } from '@/stores/modules/tabs'
+const { proxy } = getCurrentInstance() as ComponentInternalInstance
+const { sys_user_gender } = toRefs<any>(proxy?.useDict('sys_user_gender'))
 const tabStore = useTabsStore()
 const route = useRoute()
 const activeTab = ref('userInfo')
@@ -162,9 +163,7 @@ let itemsOptions: ProForm.ItemsOptions[] = [
     prop: 'gender',
     compOptions: {
       elTagName: 'radio-group',
-      enum: () => getDictsApi('sys_user_gender'),
-      labelKey: 'dictLabel',
-      valueKey: 'dictValue',
+      enum: sys_user_gender.value,
       placeholder: '请输入邮箱'
     }
   }