feat: 字典管理改为树表

This commit is contained in:
sunlei 2026-06-03 23:08:23 +08:00
parent 89a08aa285
commit e4a2bace24
2 changed files with 27 additions and 13 deletions

View File

@ -16,6 +16,11 @@ export namespace SystemDictApi {
value: string; value: string;
} }
export interface DictTreeItem extends DictItem {
children?: DictTreeItem[];
treeKey: string;
}
export type DictInput = Omit<DictItem, 'createTime' | 'id' | 'updateTime'>; export type DictInput = Omit<DictItem, 'createTime' | 'id' | 'updateTime'>;
export interface DictCodeOption { export interface DictCodeOption {
@ -36,6 +41,12 @@ async function getDictList(params: Recordable<any>) {
); );
} }
async function getDictTree(params: Recordable<any>) {
return requestClient.get<SystemDictApi.DictTreeItem[]>('/dict/tree', {
params,
});
}
async function getDictCodeOptions() { async function getDictCodeOptions() {
return requestClient.get<SystemDictApi.DictCodeOption[]>('/dict/codes'); return requestClient.get<SystemDictApi.DictCodeOption[]>('/dict/codes');
} }
@ -72,6 +83,7 @@ export {
deleteDict, deleteDict,
getDictCodeOptions, getDictCodeOptions,
getDictList, getDictList,
getDictTree,
toggleDictStatus, toggleDictStatus,
updateDict, updateDict,
}; };

View File

@ -16,7 +16,7 @@ import { Plus } from '@vben/icons';
import { message, Tag } from 'antdv-next'; import { message, Tag } from 'antdv-next';
import { deleteDict, getDictList, toggleDictStatus } from '#/api/system/dict'; import { deleteDict, getDictTree, toggleDictStatus } from '#/api/system/dict';
import { KtTable, useKtTable } from '#/components/ktTable'; import { KtTable, useKtTable } from '#/components/ktTable';
import { clearDictCache } from '#/hooks/useDict'; import { clearDictCache } from '#/hooks/useDict';
import { $t } from '#/locales'; import { $t } from '#/locales';
@ -31,7 +31,7 @@ const [FormModal, formModalApi] = useVbenModal({
const statusOptions = getStatusOptions(); const statusOptions = getStatusOptions();
const columns: Array<TableColumnType<SystemDictApi.DictItem>> = [ const columns: Array<TableColumnType<SystemDictApi.DictTreeItem>> = [
{ {
dataIndex: 'dictCode', dataIndex: 'dictCode',
fixed: 'left', fixed: 'left',
@ -79,11 +79,11 @@ const columns: Array<TableColumnType<SystemDictApi.DictItem>> = [
}, },
]; ];
const api: KtTableApi<SystemDictApi.DictItem> = { const api: KtTableApi<SystemDictApi.DictTreeItem> = {
list: async (params) => await getDictList(params), list: async (params) => await getDictTree(params),
}; };
const buttons: Array<KtTableButton<SystemDictApi.DictItem>> = [ const buttons: Array<KtTableButton<SystemDictApi.DictTreeItem>> = [
{ {
icon: () => h(Plus, { class: 'kt-table__button-icon' }), icon: () => h(Plus, { class: 'kt-table__button-icon' }),
key: 'create', key: 'create',
@ -94,7 +94,7 @@ const buttons: Array<KtTableButton<SystemDictApi.DictItem>> = [
}, },
]; ];
const rowActions: Array<KtTableRowAction<SystemDictApi.DictItem>> = [ const rowActions: Array<KtTableRowAction<SystemDictApi.DictTreeItem>> = [
{ {
key: 'toggle', key: 'toggle',
label: $t('system.dict.toggle'), label: $t('system.dict.toggle'),
@ -118,7 +118,7 @@ const rowActions: Array<KtTableRowAction<SystemDictApi.DictItem>> = [
}, },
]; ];
const [registerTable, tableApi] = useKtTable<SystemDictApi.DictItem>({ const [registerTable, tableApi] = useKtTable<SystemDictApi.DictTreeItem>({
api, api,
buttons, buttons,
columns, columns,
@ -126,10 +126,12 @@ const [registerTable, tableApi] = useKtTable<SystemDictApi.DictItem>({
schema: useGridFormSchema(), schema: useGridFormSchema(),
}, },
rowActions, rowActions,
rowKey: 'treeKey',
showPagination: false,
tableTitle: $t('system.dict.list'), tableTitle: $t('system.dict.list'),
}); });
function getStatusOption(status: SystemDictApi.DictItem['status']) { function getStatusOption(status: SystemDictApi.DictTreeItem['status']) {
return statusOptions.find((item) => item.value === status); return statusOptions.find((item) => item.value === status);
} }
@ -137,13 +139,13 @@ function onCreate() {
formModalApi.setData(undefined).open(); formModalApi.setData(undefined).open();
} }
function onEdit(row: SystemDictApi.DictItem) { function onEdit(row: SystemDictApi.DictTreeItem) {
formModalApi.setData(row).open(); formModalApi.setData(row).open();
} }
async function onToggle( async function onToggle(
row: SystemDictApi.DictItem, row: SystemDictApi.DictTreeItem,
context: KtTableContext<SystemDictApi.DictItem>, context: KtTableContext<SystemDictApi.DictTreeItem>,
) { ) {
const nextStatus = row.status === 1 ? 0 : 1; const nextStatus = row.status === 1 ? 0 : 1;
await toggleDictStatus(row.id, nextStatus); await toggleDictStatus(row.id, nextStatus);
@ -157,8 +159,8 @@ async function onToggle(
} }
async function onDelete( async function onDelete(
row: SystemDictApi.DictItem, row: SystemDictApi.DictTreeItem,
context?: KtTableContext<SystemDictApi.DictItem>, context?: KtTableContext<SystemDictApi.DictTreeItem>,
) { ) {
const hideLoading = message.loading({ const hideLoading = message.loading({
content: $t('ui.actionMessage.deleting', [row.label]), content: $t('ui.actionMessage.deleting', [row.label]),