feat: 字典管理改为树表
This commit is contained in:
parent
89a08aa285
commit
e4a2bace24
@ -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,
|
||||||
};
|
};
|
||||||
|
|||||||
@ -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]),
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user