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**
- 菜单选择组件重构为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

View File

@ -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';
});

View File

@ -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[]>());
/**
* select radio radioButton使用 (Option)
*/
const dictOptionsMap = reactive(new Map<string, Option[]>());
const dictOptionsMap = reactive(new Map<string, DictOption[]>());
/**
*
*
@ -50,17 +48,7 @@ export const useDictStore = defineStore('app-dict', () => {
new Map<string, Promise<DictData[] | void>>(),
);
function getDict(dictName: string): DictData[] {
if (!dictName) return [];
// 没有key 添加一个空数组
if (!dictMap.has(dictName)) {
dictMap.set(dictName, reactive([]));
}
// 这里拿到的就不可能为空了
return dictMap.get(dictName)!;
}
function getDictOptions(dictName: string): Option[] {
function getDictOptions(dictName: string): DictOption[] {
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,

View File

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

View File

@ -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 { getDict, getDictOptions } from '#/utils/dict';
import { 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>
);

View File

@ -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 = () => [