refactor: 字典相关功能重构 采用一个Map储存字典(之前为两个Map)
This commit is contained in:
parent
74198a0edc
commit
51c29fcc9c
@ -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
|
||||
|
||||
|
@ -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';
|
||||
});
|
||||
|
@ -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,
|
||||
|
@ -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));
|
||||
}
|
||||
|
||||
/**
|
||||
|
@ -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(
|
||||
|
@ -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>
|
||||
);
|
||||
|
@ -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 = () => [
|
||||
|
Loading…
Reference in New Issue
Block a user