refactor: 重构导出功能,使用新的 useBlobExport 钩子

移除旧的 commonDownloadExcel 函数,统一使用 useBlobExport 钩子处理文件导出
- 在用户导入模板、请假申请和字典类型页面中替换导出逻辑
- 移除 demo 页面未使用的导出按钮和相关导入
- 为导出按钮添加加载状态,提升用户体验
This commit is contained in:
dap
2026-01-28 19:41:50 +08:00
parent 35d67ad71c
commit 7b4d68a164
4 changed files with 37 additions and 33 deletions

View File

@@ -12,9 +12,8 @@ import { getPopupContainer } from '@vben/utils';
import { Popconfirm, Space } from 'antdv-next';
import { useVbenVxeGrid, vxeCheckboxChecked } from '#/adapter/vxe-table';
import { commonDownloadExcel } from '#/utils/file/download';
import { demoExport, demoList, demoRemove } from './api';
import { demoList, demoRemove } from './api';
import { columns, querySchema } from './data';
import demoModal from './demo-modal.vue';
@@ -105,18 +104,6 @@ function handleMultiDelete() {
</template>
<template #toolbar-tools>
<Space>
<a-button
v-access:code="['system:demo:export']"
@click="
commonDownloadExcel(
demoExport,
'测试单数据',
tableApi.formApi.form.values,
)
"
>
{{ $t('pages.common.export') }}
</a-button>
<a-button
:disabled="!vxeCheckboxChecked(tableApi)"
danger

View File

@@ -24,7 +24,7 @@ import {
dictTypeRemove,
refreshDictTypeCache,
} from '#/api/system/dict/dict-type';
import { commonDownloadExcel } from '#/utils/file/download';
import { useBlobExport } from '#/utils/file/export';
import { emitter } from '../mitt';
import dictTypeModal from './dict-type-modal.vue';
@@ -109,10 +109,6 @@ async function handleReset() {
await tableApi.query();
}
function handleDownloadExcel() {
commonDownloadExcel(dictTypeExport, '字典类型数据');
}
function handleRefreshCache() {
window.modal.confirm({
title: '提示',
@@ -127,6 +123,16 @@ function handleRefreshCache() {
});
}
const { exportBlob, exportLoading, buildExportFileName } =
useBlobExport(dictTypeExport);
async function handleExport() {
// 构建表单请求参数
const formValues = await tableApi.formApi.getValues();
// 文件名
const fileName = buildExportFileName('字典类型数据');
exportBlob({ data: formValues, fileName });
}
const lastDictType = ref<string>('');
const currentRowId = ref<null | number | string>(null);
function handleRowClick(row: DictType) {
@@ -184,7 +190,9 @@ watch(searchValue, (value) => {
<a-button
v-access:code="['system:dict:export']"
:icon="h(ExportOutlined)"
@click="handleDownloadExcel"
@click="handleExport"
:disabled="exportLoading"
:loading="exportLoading"
/>
</Tooltip>
<Tooltip :title="$t('pages.common.add')">

View File

@@ -9,7 +9,7 @@ import { InboxOutlined } from '@antdv-next/icons';
import { Switch, Upload } from 'antdv-next';
import { downloadImportTemplate, userImportData } from '#/api/system/user';
import { commonDownloadExcel } from '#/utils/file/download';
import { useBlobExport } from '#/utils/file/export';
const emit = defineEmits<{ reload: [] }>();
@@ -62,6 +62,11 @@ function handleCancel() {
fileList.value = [];
checked.value = false;
}
const { exportBlob, exportLoading } = useBlobExport(downloadImportTemplate);
async function handleExport() {
exportBlob({ data: {}, fileName: '用户导入模板.xlsx' });
}
</script>
<template>
@@ -89,7 +94,9 @@ function handleCancel() {
<span>允许导入xlsx, xls文件</span>
<a-button
type="link"
@click="commonDownloadExcel(downloadImportTemplate, '用户导入模板')"
:loading="exportLoading"
:disabled="exportLoading"
@click="handleExport"
>
<div class="flex items-center gap-[4px]">
<span class="icon-[vscode-icons--file-type-excel]"></span>

View File

@@ -11,7 +11,7 @@ import { Popconfirm, Space } from 'antdv-next';
import { useVbenVxeGrid, vxeCheckboxChecked } from '#/adapter/vxe-table';
import { cancelProcessApply } from '#/api/workflow/instance';
import { commonDownloadExcel } from '#/utils/file/download';
import { useBlobExport } from '#/utils/file/export';
import { applyModal, flowInfoModal } from '../components';
import { leaveExport, leaveList, leaveRemove } from './api';
@@ -135,16 +135,16 @@ function handleMultiDelete() {
});
}
function handleDownloadExcel() {
commonDownloadExcel(
leaveExport,
'请假申请数据',
tableApi.formApi.form.values,
{
fieldMappingTime: formOptions.fieldMappingTime,
},
);
const { exportBlob, exportLoading, buildExportFileName } =
useBlobExport(leaveExport);
async function handleExport() {
// 构建表单请求参数
const formValues = await tableApi.formApi.getValues();
// 文件名
const fileName = buildExportFileName('请假申请数据');
exportBlob({ data: formValues, fileName });
}
const [FlowInfoModal, flowInfoModalApi] = useVbenModal({
connectedComponent: flowInfoModal,
});
@@ -162,7 +162,9 @@ function handleInfo(row: Required<LeaveForm>) {
<Space>
<a-button
v-access:code="['workflow:leave:export']"
@click="handleDownloadExcel"
:loading="exportLoading"
:disabled="exportLoading"
@click="handleExport"
>
{{ $t('pages.common.export') }}
</a-button>