refactor: 字典相关功能重构 采用一个Map储存字典(之前为两个Map)

CHANGELOG.md

@@ -3,11 +3,13 @@
 **REFACTOR**
 
 - 菜单选择组件重构为Table形式
+- 字典相关功能重构 采用一个Map储存字典(之前为两个Map)
 
 **Features**
 
 - 通用的vxe-table排序事件(排序逻辑改为在排序事件中处理而非在api处理)
 - getDict/getDictOptions 提取公共逻辑 减少冗余代码
+- 字典新增对Number类型的支持 -> `getDictOptions('', true);`即可获取number类型的value
 
 **BUG FIXES**
 
@@ -17,6 +19,7 @@
 **OTHERS**
 
 - 用户管理 新增只获取一次(mounted)默认密码而非每次打开modal都获取
+- `apps/web-antd/src/utils/dict.ts` `getDict`方法将于下个版本删除 使用`getDictOptions`替代
 
 # 1.1.3
 

apps/web-antd/src/components/dict/src/index.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable eqeqeq -->
 <script setup lang="ts">
 import type { DictData } from '#/api/system/dict/dict-data-model';
 
@@ -17,7 +18,6 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const color = computed<string>(() => {
-  // eslint-disable-next-line eqeqeq
   const current = props.dicts.find((item) => item.dictValue == props.value);
   const listClass = current?.listClass ?? '';
   // 是否为默认的颜色
@@ -31,13 +31,11 @@ const color = computed<string>(() => {
 });
 
 const cssClass = computed<string>(() => {
-  // eslint-disable-next-line eqeqeq
   const current = props.dicts.find((item) => item.dictValue == props.value);
   return current?.cssClass ?? '';
 });
 
 const label = computed<number | string>(() => {
-  // eslint-disable-next-line eqeqeq
   const current = props.dicts.find((item) => item.dictValue == props.value);
   return current?.dictLabel ?? 'unknown';
 });

apps/web-antd/src/store/dict.ts

@@ -7,8 +7,9 @@ import { defineStore } from 'pinia';
 
 /**
  * antd使用 select和radio通用
+ * 本质上是对DictData的拓展
  */
-export interface Option {
+export interface DictOption extends DictData {
   disabled?: boolean;
   label: string;
   value: number | string;
@@ -23,8 +24,9 @@ export interface Option {
 export function dictToOptions(
   data: DictData[],
   formatNumber = false,
-): Option[] {
+): DictOption[] {
   return data.map((item) => ({
+    ...item,
     label: item.dictLabel,
     value: formatNumber ? Number(item.dictValue) : item.dictValue,
   }));
@@ -32,13 +34,9 @@ export function dictToOptions(
 
 export const useDictStore = defineStore('app-dict', () => {
   /**
-   * 一般是dictTag使用
+   * select radio checkbox等使用 只能为固定格式{label, value}
    */
-  const dictMap = reactive(new Map<string, DictData[]>());
+  const dictOptionsMap = reactive(new Map<string, DictOption[]>());
-  /**
-   * select radio radioButton使用 只能为固定格式(Option)
-   */
-  const dictOptionsMap = reactive(new Map<string, Option[]>());
   /**
    * 添加一个字典请求状态的缓存
    *
@@ -50,17 +48,7 @@ export const useDictStore = defineStore('app-dict', () => {
     new Map<string, Promise<DictData[] | void>>(),
   );
 
-  function getDict(dictName: string): DictData[] {
+  function getDictOptions(dictName: string): DictOption[] {
-    if (!dictName) return [];
-    // 没有key 添加一个空数组
-    if (!dictMap.has(dictName)) {
-      dictMap.set(dictName, reactive([]));
-    }
-    // 这里拿到的就不可能为空了
-    return dictMap.get(dictName)!;
-  }
-
-  function getDictOptions(dictName: string): Option[] {
     if (!dictName) return [];
     // 没有key 添加一个空数组
     if (!dictOptionsMap.has(dictName)) {
@@ -71,7 +59,6 @@ export const useDictStore = defineStore('app-dict', () => {
   }
 
   function resetCache() {
-    dictMap.clear();
     dictOptionsMap.clear();
   }
 
@@ -89,11 +76,6 @@ export const useDictStore = defineStore('app-dict', () => {
     dictValue: DictData[],
     formatNumber = false,
   ) {
-    if (dictMap.has(dictName) && dictMap.get(dictName)?.length === 0) {
-      dictMap.get(dictName)?.push(...dictValue);
-    } else {
-      dictMap.set(dictName, dictValue);
-    }
     if (
       dictOptionsMap.has(dictName) &&
       dictOptionsMap.get(dictName)?.length === 0
@@ -114,10 +96,8 @@ export const useDictStore = defineStore('app-dict', () => {
 
   return {
     $reset,
-    dictMap,
     dictOptionsMap,
     dictRequestCache,
-    getDict,
     getDictOptions,
     resetCache,
     setDictInfo,

apps/web-antd/src/utils/dict.ts

@@ -45,12 +45,13 @@ function fetchAndCacheDictData<T>(
 
 /**
  * 这里是提供给渲染标签使用的方法
+ * @deprecated 使用getDictOptions代替 于下个版本删除
  * @param dictName 字典名称
  * @returns 字典信息
  */
 export function getDict(dictName: string) {
-  const { getDict } = useDictStore();
+  const { getDictOptions } = useDictStore();
-  return fetchAndCacheDictData(dictName, () => getDict(dictName));
+  return fetchAndCacheDictData(dictName, () => getDictOptions(dictName));
 }
 
 /**

apps/web-antd/src/utils/render.tsx

@@ -1,6 +1,8 @@
+import type { Component as ComponentType } from 'vue';
+
 import type { DictData } from '#/api/system/dict/dict-data-model';
 
-import { type Component as ComponentType, h } from 'vue';
+import { h } from 'vue';
 
 import { JsonPreview } from '@vben/common-ui';
 import {
@@ -29,7 +31,7 @@ import { Tag } from 'ant-design-vue';
 
 import { DictTag } from '#/components/dict';
 
-import { getDict } from './dict';
+import { getDictOptions } from './dict';
 
 /**
  * 渲染标签
@@ -148,7 +150,7 @@ export function renderDictTags(
  * @returns tag
  */
 export function renderDict(value: string, dictName: string) {
-  const dictInfo = getDict(dictName);
+  const dictInfo = getDictOptions(dictName);
   return renderDictTag(value, dictInfo);
 }
 export function renderIconSpan(

apps/web-antd/src/views/system/client/data.tsx

@@ -1,10 +1,10 @@
+import type { FormSchemaGetter } from '#/adapter/form';
 import type { VxeGridProps } from '#/adapter/vxe-table';
 
 import { DictEnum } from '@vben/constants';
 import { getPopupContainer } from '@vben/utils';
 
-import { type FormSchemaGetter } from '#/adapter/form';
+import { getDictOptions } from '#/utils/dict';
-import { getDict, getDictOptions } from '#/utils/dict';
 import { renderDict, renderDictTags } from '#/utils/render';
 
 export const querySchema: FormSchemaGetter = () => [
@@ -55,7 +55,7 @@ export const columns: VxeGridProps['columns'] = [
           <div class="my-3">
             {renderDictTags(
               row.grantTypeList,
-              getDict(DictEnum.SYS_GRANT_TYPE),
+              getDictOptions(DictEnum.SYS_GRANT_TYPE),
             )}
           </div>
         );

apps/web-antd/src/views/system/dict/data/data.ts

@@ -1,6 +1,6 @@
+import type { FormSchemaGetter } from '#/adapter/form';
 import type { VxeGridProps } from '#/adapter/vxe-table';
 
-import { type FormSchemaGetter } from '#/adapter/form';
 import { renderDictTag } from '#/utils/render';
 
 export const querySchema: FormSchemaGetter = () => [