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

This commit is contained in:
dap 2025-01-08 13:22:47 +08:00
parent 74198a0edc
commit 51c29fcc9c
7 changed files with 23 additions and 39 deletions

View File

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

View File

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

View File

@ -7,8 +7,9 @@ import { defineStore } from 'pinia';
/** /**
* antd使用 select和radio通用 * antd使用 select和radio通用
* DictData的拓展
*/ */
export interface Option { export interface DictOption extends DictData {
disabled?: boolean; disabled?: boolean;
label: string; label: string;
value: number | string; value: number | string;
@ -23,8 +24,9 @@ export interface Option {
export function dictToOptions( export function dictToOptions(
data: DictData[], data: DictData[],
formatNumber = false, formatNumber = false,
): Option[] { ): DictOption[] {
return data.map((item) => ({ return data.map((item) => ({
...item,
label: item.dictLabel, label: item.dictLabel,
value: formatNumber ? Number(item.dictValue) : item.dictValue, value: formatNumber ? Number(item.dictValue) : item.dictValue,
})); }));
@ -32,13 +34,9 @@ export function dictToOptions(
export const useDictStore = defineStore('app-dict', () => { 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>>(), 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 []; if (!dictName) return [];
// 没有key 添加一个空数组 // 没有key 添加一个空数组
if (!dictOptionsMap.has(dictName)) { if (!dictOptionsMap.has(dictName)) {
@ -71,7 +59,6 @@ export const useDictStore = defineStore('app-dict', () => {
} }
function resetCache() { function resetCache() {
dictMap.clear();
dictOptionsMap.clear(); dictOptionsMap.clear();
} }
@ -89,11 +76,6 @@ export const useDictStore = defineStore('app-dict', () => {
dictValue: DictData[], dictValue: DictData[],
formatNumber = false, formatNumber = false,
) { ) {
if (dictMap.has(dictName) && dictMap.get(dictName)?.length === 0) {
dictMap.get(dictName)?.push(...dictValue);
} else {
dictMap.set(dictName, dictValue);
}
if ( if (
dictOptionsMap.has(dictName) && dictOptionsMap.has(dictName) &&
dictOptionsMap.get(dictName)?.length === 0 dictOptionsMap.get(dictName)?.length === 0
@ -114,10 +96,8 @@ export const useDictStore = defineStore('app-dict', () => {
return { return {
$reset, $reset,
dictMap,
dictOptionsMap, dictOptionsMap,
dictRequestCache, dictRequestCache,
getDict,
getDictOptions, getDictOptions,
resetCache, resetCache,
setDictInfo, setDictInfo,

View File

@ -45,12 +45,13 @@ function fetchAndCacheDictData<T>(
/** /**
* 使 * 使
* @deprecated 使getDictOptions代替
* @param dictName * @param dictName
* @returns * @returns
*/ */
export function getDict(dictName: string) { export function getDict(dictName: string) {
const { getDict } = useDictStore(); const { getDictOptions } = useDictStore();
return fetchAndCacheDictData(dictName, () => getDict(dictName)); return fetchAndCacheDictData(dictName, () => getDictOptions(dictName));
} }
/** /**

View File

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

View File

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

View File

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