yudao
/
admin-vben
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vben.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat：增加 dict 字典

pull/68/head
YunaiV 2025-04-06 18:56:42 +08:00
parent 1b8dcfcc3b
commit c754307f11
9 changed files with 901 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
apps/web-antd/src/api/system/dict/dict.data.ts → apps/web-antd/src/api/system/dict/data/index.ts
View File

@ -1,18 +1,20 @@
// TODO @芋艿：API 的风格
import { requestClient } from '#/api/request'; import { requestClient } from '#/api/request';
export type DictDataVO = { export namespace SystemDictDataApi {
colorType: string; /** 字典数据 */
createTime: Date; export type SystemDictData = {
cssClass: string; id?: number;
dictType: string; colorType: string;
id: number | undefined; cssClass: string;
label: string; dictType: string;
remark: string; label: string;
sort: number | undefined; remark: string;
status: number; sort?: number;
value: string; status: number;
}; value: string;
createTime: Date;
};
}
// 查询字典数据（精简)列表 // 查询字典数据（精简)列表
export function getSimpleDictDataList() { export function getSimpleDictDataList() {
@ -21,7 +23,7 @@ export function getSimpleDictDataList() {
// 查询字典数据列表 // 查询字典数据列表
export function getDictDataPage(params: any) { export function getDictDataPage(params: any) {
return requestClient.get('/system/dict-data/page', params); return requestClient.get('/system/dict-data/page', { params });
} }
// 查询字典数据详情 // 查询字典数据详情
@ -30,12 +32,12 @@ export function getDictData(id: number) {
} }
// 新增字典数据 // 新增字典数据
export function createDictData(data: DictDataVO) { export function createDictData(data: SystemDictDataApi.SystemDictData) {
return requestClient.post('/system/dict-data/create', data); return requestClient.post('/system/dict-data/create', data);
} }
// 修改字典数据 // 修改字典数据
export function updateDictData(data: DictDataVO) { export function updateDictData(data: SystemDictDataApi.SystemDictData) {
return requestClient.put('/system/dict-data/update', data); return requestClient.put('/system/dict-data/update', data);
} }
@ -46,5 +48,5 @@ export function deleteDictData(id: number) {
// 导出字典类型数据 // 导出字典类型数据
export function exportDictData(params: any) { export function exportDictData(params: any) {
return requestClient.download('/system/dict-data/export', params); return requestClient.download('/system/dict-data/export', { params });
} }

28
apps/web-antd/src/api/system/dict/dict.type.ts → apps/web-antd/src/api/system/dict/type/index.ts
View File

@ -1,13 +1,16 @@
import { requestClient } from '#/api/request'; import { requestClient } from '#/api/request';
export type DictTypeVO = { export namespace SystemDictTypeApi {
createTime: Date; /** 字典类型 */
id: number | undefined; export type SystemDictType = {
name: string; id?: number;
remark: string; name: string;
status: number; remark: string;
type: string; status: number;
}; type: string;
createTime: Date;
};
}
// 查询字典（精简)列表 // 查询字典（精简)列表
export function getSimpleDictTypeList() { export function getSimpleDictTypeList() {
@ -16,7 +19,7 @@ export function getSimpleDictTypeList() {
// 查询字典列表 // 查询字典列表
export function getDictTypePage(params: any) { export function getDictTypePage(params: any) {
return requestClient.get('/system/dict-type/page', params); return requestClient.get('/system/dict-type/page', { params });
} }
// 查询字典详情 // 查询字典详情
@ -25,12 +28,12 @@ export function getDictType(id: number) {
} }
// 新增字典 // 新增字典
export function createDictType(data: DictTypeVO) { export function createDictType(data: SystemDictTypeApi.SystemDictType) {
return requestClient.post('/system/dict-type/create', data); return requestClient.post('/system/dict-type/create', data);
} }
// 修改字典 // 修改字典
export function updateDictType(data: DictTypeVO) { export function updateDictType(data: SystemDictTypeApi.SystemDictType) {
return requestClient.put('/system/dict-type/update', data); return requestClient.put('/system/dict-type/update', data);
} }
@ -38,7 +41,8 @@ export function updateDictType(data: DictTypeVO) {
export function deleteDictType(id: number) { export function deleteDictType(id: number) {
return requestClient.delete(`/system/dict-type/delete?id=${id}`); return requestClient.delete(`/system/dict-type/delete?id=${id}`);
} }
// 导出字典类型 // 导出字典类型
export function exportDictType(params: any) { export function exportDictType(params: any) {
return requestClient.download('/system/dict-type/export', params); return requestClient.download('/system/dict-type/export', { params });
} }

2
apps/web-antd/src/router/guard.ts
View File

@ -11,7 +11,7 @@ import { useAuthStore, useDictStore } from '#/store';
import { generateAccess } from './access'; import { generateAccess } from './access';
import { message } from 'ant-design-vue'; import { message } from 'ant-design-vue';
import { $t } from '@vben/locales'; import { $t } from '@vben/locales';
import { getSimpleDictDataList } from '#/api/system/dict/dict.data'; import { getSimpleDictDataList } from '#/api/system/dict/data';
/** /**
* 通用守卫配置 * 通用守卫配置

394
apps/web-antd/src/views/system/dict/data.ts Normal file
View File

@ -0,0 +1,394 @@
import type { OnActionClickFn } from '#/adapter/vxe-table';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { VbenFormSchema } from '#/adapter/form';
import { getDictOptions } from '#/utils/dict';
import { DICT_TYPE } from '#/utils/dict';
import { useAccess } from '@vben/access';
import { z } from '#/adapter/form';
import { CommonStatusEnum } from '#/utils/constants';
import { getSimpleDictTypeList } from '#/api/system/dict/type';
const { hasAccessByCodes } = useAccess();
// ============================== 字典类型 ==============================
/** 类型新增/修改的表单 */
export function useTypeFormSchema(): VbenFormSchema[] {
return [
{
fieldName: 'id',
component: 'Input',
dependencies: {
triggerFields: [''],
show: () => false,
},
},
{
fieldName: 'name',
label: '字典名称',
component: 'Input',
componentProps: {
placeholder: '请输入字典名称',
},
rules: 'required',
},
{
fieldName: 'type',
label: '字典类型',
component: 'Input',
componentProps: {
placeholder: '请输入字典类型',
},
rules: 'required',
// TODO @芋艿：disable 不生效
dependencies: {
triggerFields: [''],
componentProps: {
disabled: ({ values }) => values.id,
},
}
},
{
fieldName: 'status',
label: '状态',
component: 'RadioGroup',
componentProps: {
options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
buttonStyle: 'solid',
optionType: 'button',
},
rules: z.number().default(CommonStatusEnum.ENABLE),
},
{
fieldName: 'remark',
label: '备注',
component: 'Textarea',
componentProps: {
placeholder: '请输入备注',
},
},
];
}
/** 类型列表的搜索表单 */
export function useTypeGridFormSchema(): VbenFormSchema[] {
return [
{
fieldName: 'name',
label: '字典名称',
component: 'Input',
componentProps: {
placeholder: '请输入字典名称',
clearable: true,
}
},
{
fieldName: 'status',
label: '状态',
component: 'Select',
componentProps: {
options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
placeholder: '请选择状态',
clearable: true,
},
},
];
}
/** 类型列表的字段 */
export function useTypeGridColumns<T = any>(
onActionClick: OnActionClickFn<T>,
): VxeTableGridOptions['columns'] {
return [
{
field: 'id',
title: '字典编号',
minWidth: 100
},
{
field: 'name',
title: '字典名称',
minWidth: 180
},
// TODO @芋艿：disable的；
{
field: 'type',
title: '字典类型',
minWidth: 220
},
{
field: 'status',
title: '状态',
minWidth: 180,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.COMMON_STATUS },
}
},
{
field: 'remark',
title: '备注',
minWidth: 180
},
{
field: 'createTime',
title: '创建时间',
minWidth: 180,
formatter: 'formatDateTime',
},
{
minWidth: 120,
title: '操作',
field: 'operation',
fixed: 'right',
align: 'center',
cellRender: {
attrs: {
nameField: 'type',
nameTitle: '字典类型',
onClick: onActionClick,
},
name: 'CellOperation',
options: [
{
code: 'edit',
show: hasAccessByCodes(['system:dict:update']),
},
{
code: 'delete',
show: hasAccessByCodes(['system:dict:delete']),
},
],
},
},
];
}
// ============================== 字典数据 ==============================
// TODO @芋艿：后续针对 antd，增加
/**
* 颜色选项
*/
const colorOptions = [
{ value: '', label: '无' },
{ value: 'processing', label: '主要' },
{ value: 'success', label: '成功' },
{ value: 'default', label: '默认' },
{ value: 'warning', label: '警告' },
{ value: 'error', label: '危险' },
{ value: 'pink', label: 'pink' },
{ value: 'red', label: 'red' },
{ value: 'orange', label: 'orange' },
{ value: 'green', label: 'green' },
{ value: 'cyan', label: 'cyan' },
{ value: 'blue', label: 'blue' },
{ value: 'purple', label: 'purple' },
];
/** 数据新增/修改的表单 */
export function useDataFormSchema(): VbenFormSchema[] {
return [
{
fieldName: 'id',
component: 'Input',
dependencies: {
triggerFields: [''],
show: () => false,
},
},
{
fieldName: 'dictType',
label: '字典类型',
component: 'ApiSelect',
componentProps: {
api: getSimpleDictTypeList,
placeholder: '请输入字典类型',
class: 'w-full',
labelField: 'name',
valueField: 'type',
},
rules: 'required',
// TODO @芋艿：disable 不生效
dependencies: {
triggerFields: [''],
componentProps: {
disabled: ({ values }) => values.id,
},
}
},
{
fieldName: 'label',
label: '数据标签',
component: 'Input',
componentProps: {
placeholder: '请输入数据标签',
},
rules: 'required',
},
{
fieldName: 'value',
label: '数据键值',
component: 'Input',
componentProps: {
placeholder: '请输入数据键值',
},
rules: 'required',
},
{
fieldName: 'sort',
label: '显示排序',
component: 'InputNumber',
componentProps: {
placeholder: '请输入显示排序',
class: 'w-full'
},
rules: 'required',
},
{
fieldName: 'status',
label: '状态',
component: 'RadioGroup',
componentProps: {
options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
placeholder: '请选择状态',
buttonStyle:'solid',
optionType: 'button',
},
rules: z.number().default(CommonStatusEnum.ENABLE),
},
{
fieldName: 'colorType',
label: '颜色类型',
component: 'Select',
componentProps: {
options: colorOptions,
placeholder: '请选择颜色类型',
class: 'w-full',
},
},
{
fieldName: 'cssClass',
label: 'CSS Class',
component: 'Input',
componentProps: {
placeholder: '请输入 CSS Class',
},
help: '输入 hex 模式的颜色, 例如 #108ee9',
},
{
fieldName: 'remark',
label: '备注',
component: 'Textarea',
componentProps: {
placeholder: '请输入备注',
},
},
];
}
/** 字典数据列表搜索表单 */
export function useDataGridFormSchema(): VbenFormSchema[] {
return [
{
fieldName: 'label',
label: '字典标签',
component: 'Input',
componentProps: {
placeholder: '请输入字典标签',
clearable: true,
}
},
{
fieldName: 'status',
label: '状态',
component: 'Select',
componentProps: {
options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
placeholder: '请选择状态',
clearable: true,
},
},
];
}
/**
* 字典数据表格列
*/
export function useDataGridColumns<T = any>(
onActionClick: OnActionClickFn<T>,
): VxeTableGridOptions['columns'] {
return [
{
field: 'id',
title: '字典编码',
minWidth: 100
},
{
field: 'label',
title: '字典标签',
minWidth: 180
},
{
field: 'value',
title: '字典键值',
minWidth: 100
},
{
field: 'sort',
title: '字典排序',
minWidth: 100
},
{
field: 'status',
title: '状态',
minWidth: 100,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.COMMON_STATUS },
}
},
{
field: 'colorType',
title: '颜色类型',
minWidth: 120
},
{
field: 'cssClass',
title: 'CSS Class',
minWidth: 120
},
{
title: '创建时间',
field: 'createTime',
minWidth: 180,
formatter: 'formatDateTime',
},
{
minWidth: 120,
title: '操作',
field: 'operation',
fixed: 'right',
align: 'center',
cellRender: {
attrs: {
nameField: 'label',
nameTitle: '字典数据',
onClick: onActionClick,
},
name: 'CellOperation',
options: [
{
code: 'edit',
show: hasAccessByCodes(['system:dict:update']),
},
{
code: 'delete',
show: hasAccessByCodes(['system:dict:delete']),
},
],
},
},
];
}

30
apps/web-antd/src/views/system/dict/index.vue Normal file
View File

@ -0,0 +1,30 @@
<script lang="ts" setup>
import { ref } from 'vue'
import { Page } from '@vben/common-ui'
import { DocAlert } from '#/components/doc-alert'
import TypeGrid from './modules/type-grid.vue'
import DataGrid from './modules/data-grid.vue'
const searchDictType = ref<string>() // 搜索的字典类型
function onDictTypeSelect(dictType: string) {
searchDictType.value = dictType
}
</script>
<template>
<Page auto-content-height>
<DocAlert title="字典管理" url="https://doc.iocoder.cn/system-dict/" />
<div class="flex h-full">
<!-- 左侧字典类型列表 -->
<div class="w-1/2 pr-3">
<TypeGrid @select="onDictTypeSelect" />
</div>
<!-- 右侧字典数据列表 -->
<div class="w-1/2">
<DataGrid :dict-type="searchDictType" />
</div>
</div>
</Page>
</template>

85
apps/web-antd/src/views/system/dict/modules/data-form.vue Normal file
View File

@ -0,0 +1,85 @@
<script lang="ts" setup>
import type { SystemDictDataApi } from '#/api/system/dict/data';
import { useVbenModal } from '@vben/common-ui';
import { message } from 'ant-design-vue';
import { computed, ref } from 'vue';
import { useVbenForm } from '#/adapter/form';
import { createDictData, getDictData, updateDictData } from '#/api/system/dict/data';
import { $t } from '#/locales';
import { useDataFormSchema } from '../data';
defineOptions({ name: 'SystemDictDataForm' });
const emit = defineEmits(['success']);
const formData = ref<SystemDictDataApi.SystemDictData>();
const getTitle = computed(() => {
return formData.value?.id
? $t('ui.actionTitle.edit', ['字典数据'])
: $t('ui.actionTitle.create', ['字典数据']);
});
const [Form, formApi] = useVbenForm({
layout: 'horizontal',
schema: useDataFormSchema(),
showDefaultActions: false,
});
const [Modal, modalApi] = useVbenModal({
async onConfirm() {
const { valid } = await formApi.validate();
if (!valid) {
return;
}
modalApi.lock();
// 提交表单
const data = (await formApi.getValues()) as SystemDictDataApi.SystemDictData;
try {
await (formData.value?.id ? updateDictData(data) : createDictData(data));
// 关闭并提示
await modalApi.close();
emit('success');
message.success({
content: $t('ui.actionMessage.operationSuccess'),
key: 'action_process_msg',
});
} finally {
modalApi.lock(false);
}
},
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
return;
}
// 加载数据
const data = modalApi.getData<SystemDictDataApi.SystemDictData | { dictType?: string }>();
// 如果有ID，表示是编辑
if (data && 'id' in data && data.id) {
modalApi.lock();
try {
formData.value = await getDictData(data.id as number);
// 设置到 values
if (formData.value) {
await formApi.setValues(formData.value);
}
} finally {
modalApi.lock(false);
}
} else if (data && 'dictType' in data && data.dictType) {
// 新增时，如果传入了dictType，则需要设置
await formApi.setValues({
dictType: data.dictType,
});
}
},
});
</script>
<template>
<Modal :title="getTitle">
<Form class="mx-4" />
</Modal>
</template>

143
apps/web-antd/src/views/system/dict/modules/data-grid.vue Normal file
View File

@ -0,0 +1,143 @@
<script lang="ts" setup>
import type { OnActionClickParams } from '#/adapter/vxe-table';
import { useVbenModal } from '@vben/common-ui';
import { Button, message } from 'ant-design-vue';
import { Download, Plus } from '@vben/icons';
import DataForm from './data-form.vue';
import { $t } from '#/locales';
import { watch } from 'vue';
import { useDataGridColumns, useDataGridFormSchema } from '../data';
import { deleteDictData, getDictDataPage, exportDictData } from '#/api/system/dict/data';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { downloadByData } from '#/utils/download';
const props = defineProps({
dictType: {
type: String,
default: undefined,
},
});
const [DataFormModal, dataFormModalApi] = useVbenModal({
connectedComponent: DataForm,
destroyOnClose: true,
});
/** 刷新表格 */
function onRefresh() {
gridApi.query();
}
/** 导出表格 */
async function onExport() {
const data = await exportDictData(await gridApi.formApi.getValues());
downloadByData(data, '字典数据.xls');
}
/** 创建字典数据 */
function onCreate() {
dataFormModalApi.setData({ dictType: props.dictType }).open();
}
/** 编辑字典数据 */
function onEdit(row: any) {
dataFormModalApi.setData(row).open();
}
/** 删除字典数据 */
async function onDelete(row: any) {
const hideLoading = message.loading({
content: $t('common.processing'),
duration: 0,
key: 'process_message',
});
try {
await deleteDictData(row.id);
message.success({
content: $t('common.operationSuccess'),
key: 'process_message',
});
onRefresh();
} finally {
hideLoading();
}
}
/** 表格操作按钮回调 */
function onActionClick({
code,
row,
}: OnActionClickParams) {
switch (code) {
case 'edit': {
onEdit(row);
break;
}
case 'delete': {
onDelete(row)
break;
}
}
}
const [Grid, gridApi] = useVbenVxeGrid({
formOptions: {
schema: useDataGridFormSchema(),
},
gridOptions: {
columns: useDataGridColumns(onActionClick),
height: 'auto',
keepSource: true,
proxyConfig: {
ajax: {
query: async ({ page }, formValues) => {
return await getDictDataPage({
pageNo: page.currentPage,
pageSize: page.pageSize,
...formValues,
dictType: props.dictType,
});
},
},
},
rowConfig: {
keyField: 'id',
},
toolbarConfig: {
refresh: { code: 'query' },
search: true,
}
},
});
/** 监听 dictType 变化，重新查询 */
watch(
() => props.dictType,
() => {
if (props.dictType) {
onRefresh();
}
},
);
</script>
<template>
<div class="h-full flex flex-col">
<DataFormModal @success="onRefresh" />
<Grid table-title="字典数据列表">
<template #toolbar-tools>
<Button type="primary" @click="onCreate" v-access:code="['system:dict:create']">
<Plus class="size-5" />
{{ $t('ui.actionTitle.create', ['字典数据']) }}
</Button>
<Button type="primary" class="ml-2" @click="onExport" v-access:code="['system:dict:export']">
<Download class="size-5" />
{{ $t('ui.actionTitle.export') }}
</Button>
</template>
</Grid>
</div>
</template>

77
apps/web-antd/src/views/system/dict/modules/type-form.vue Normal file
View File

@ -0,0 +1,77 @@
<script lang="ts" setup>
import type { SystemDictTypeApi } from '#/api/system/dict/type';
import { useVbenModal } from '@vben/common-ui';
import { message } from 'ant-design-vue';
import { computed, ref } from 'vue';
import { useVbenForm } from '#/adapter/form';
import { createDictType, getDictType, updateDictType } from '#/api/system/dict/type';
import { $t } from '#/locales';
import { useTypeFormSchema } from '../data';
const emit = defineEmits(['success']);
const formData = ref<SystemDictTypeApi.SystemDictType>();
const getTitle = computed(() => {
return formData.value?.id
? $t('ui.actionTitle.edit', ['字典类型'])
: $t('ui.actionTitle.create', ['字典类型']);
});
const [Form, formApi] = useVbenForm({
layout: 'horizontal',
schema: useTypeFormSchema(),
showDefaultActions: false,
});
const [Modal, modalApi] = useVbenModal({
async onConfirm() {
const { valid } = await formApi.validate();
if (!valid) {
return;
}
modalApi.lock();
// 提交表单
const data = (await formApi.getValues()) as SystemDictTypeApi.SystemDictType;
try {
await (formData.value?.id ? updateDictType(data) : createDictType(data));
// 关闭并提示
await modalApi.close();
emit('success');
message.success({
content: $t('ui.actionMessage.operationSuccess'),
key: 'action_process_msg',
});
} finally {
modalApi.lock(false);
}
},
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
return;
}
// 加载数据
const data = modalApi.getData<SystemDictTypeApi.SystemDictType>();
if (!data || !data.id) {
return;
}
modalApi.lock();
try {
formData.value = await getDictType(data.id as number);
// 设置到 values
if (formData.value) {
await formApi.setValues(formData.value);
}
} finally {
modalApi.lock(false);
}
},
});
</script>
<template>
<Modal :title="getTitle">
<Form class="mx-4" />
</Modal>
</template>

136
apps/web-antd/src/views/system/dict/modules/type-grid.vue Normal file
View File

@ -0,0 +1,136 @@
<script lang="ts" setup>
import type { OnActionClickParams } from '#/adapter/vxe-table';
import type { SystemDictTypeApi } from '#/api/system/dict/type';
import { useVbenModal } from '@vben/common-ui';
import { Button, message } from 'ant-design-vue';
import { Download, Plus } from '@vben/icons';
import TypeForm from './type-form.vue';
import { useTypeGridColumns, useTypeGridFormSchema } from '../data';
import { $t } from '#/locales';
import { deleteDictType, getDictTypePage, exportDictType } from '#/api/system/dict/type';
import { downloadByData } from '#/utils/download';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
const emit = defineEmits(['select']);
const [TypeFormModal, typeFormModalApi] = useVbenModal({
connectedComponent: TypeForm,
destroyOnClose: true,
});
/** 刷新表格 */
function onRefresh() {
gridApi.query();
}
/** 导出表格 */
async function onExport() {
const data = await exportDictType(await gridApi.formApi.getValues());
downloadByData(data, '字典类型.xls');
}
/** 创建字典类型 */
function onCreate() {
typeFormModalApi.setData(null).open();
}
/** 编辑字典类型 */
function onEdit(row: any) {
typeFormModalApi.setData(row).open();
}
/** 删除字典类型 */
async function onDelete(row: SystemDictTypeApi.SystemDictType) {
const hideLoading = message.loading({
content: $t('common.processing'),
duration: 0,
key: 'process_message',
});
try {
await deleteDictType(row.id);
message.success({
content: $t('common.operationSuccess'),
key: 'process_message',
});
onRefresh();
} finally {
hideLoading();
}
}
/** 表格操作按钮回调 */
function onActionClick({
code,
row,
}: OnActionClickParams) {
switch (code) {
case 'edit': {
onEdit(row);
break;
}
case 'delete': {
onDelete(row);
break;
}
}
}
/** 表格事件 */
const gridEvents: VxeGridListeners<RowType> = {
cellClick: ({ row }) => {
emit('select', row.type);
},
};
const [Grid, gridApi] = useVbenVxeGrid({
formOptions: {
schema: useTypeGridFormSchema(),
},
gridOptions: {
columns: useTypeGridColumns(onActionClick),
height: 'auto',
keepSource: true,
proxyConfig: {
ajax: {
query: async ({ page }, formValues) => {
return await getDictTypePage({
pageNo: page.currentPage,
pageSize: page.pageSize,
...formValues,
});
},
},
},
rowConfig: {
keyField: 'id',
isCurrent: true,
},
toolbarConfig: {
refresh: { code: 'query' },
search: true,
},
},
gridEvents,
});
</script>
<template>
<div class="h-full">
<TypeFormModal @success="onRefresh" />
<Grid table-title="字典类型列表">
<template #toolbar-tools>
<Button type="primary" @click="onCreate" v-access:code="['system:dict:create']">
<Plus class="size-5" />
{{ $t('ui.actionTitle.create', ['字典类型']) }}
</Button>
<Button type="primary" class="ml-2" @click="onExport" v-access:code="['system:dict:export']">
<Download class="size-5" />
{{ $t('ui.actionTitle.export') }}
</Button>
</template>
</Grid>
</div>
</template>