refactor(views): 替换导出功能为 useBlobExport 钩子

重构字典类型和字典数据页面的导出功能，使用新的 useBlobExport 组合式 API 替代原有的 commonDownloadExcel 方法，以提供更好的加载状态管理和文件名构建功能。同时在字典数据页面中修复事件监听器内存泄漏问题，在组件卸载时移除事件监听。

apps/web-antd/src/views/system/dict/data/index.vue

@@ -5,7 +5,7 @@ import type { VxeGridProps } from '#/adapter/vxe-table';
 import type { PageQuery } from '#/api/common';
 import type { DictData } from '#/api/system/dict/dict-data-model';
 
-import { ref } from 'vue';
+import { onBeforeUnmount, onMounted, ref } from 'vue';
 
 import { useVbenDrawer } from '@vben/common-ui';
 
@@ -17,7 +17,7 @@ import {
   dictDataList,
   dictDataRemove,
 } from '#/api/system/dict/dict-data';
-import { commonDownloadExcel } from '#/utils/file/download';
+import { useBlobExport } from '#/utils/file/export';
 
 import { emitter } from '../mitt';
 import { columns, querySchema } from './data';
@@ -112,13 +112,25 @@ function handleMultiDelete() {
   });
 }
 
-function handleDownloadExcel() {
+const { exportBlob, exportLoading, buildExportFileName } =
-  commonDownloadExcel(dictDataExport, '字典数据', tableApi.formApi.form.values);
+  useBlobExport(dictDataExport);
+async function handleExport() {
+  // 构建表单请求参数
+  const formValues = await tableApi.formApi.getValues();
+  formValues.dictType = dictType.value;
+  // 文件名
+  const fileName = buildExportFileName('字典数据');
+  exportBlob({ data: formValues, fileName });
 }
 
-emitter.on('rowClick', async (value) => {
+onMounted(() => {
-  dictType.value = value;
+  emitter.on('rowClick', async (value) => {
-  await tableApi.query();
+    dictType.value = value;
+    await tableApi.query();
+  });
+});
+onBeforeUnmount(() => {
+  emitter.off('rowClick');
 });
 </script>
 
@@ -129,7 +141,9 @@ emitter.on('rowClick', async (value) => {
         <Space>
           <a-button
             v-access:code="['system:dict:export']"
-            @click="handleDownloadExcel"
+            :loading="exportLoading"
+            :disabled="exportLoading"
+            @click="handleExport"
           >
             {{ $t('pages.common.export') }}
           </a-button>

apps/web-antd/src/views/system/dict/type/index.vue

@@ -17,7 +17,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 { columns, querySchema } from './data';
@@ -121,12 +121,14 @@ async function handleRefreshCache() {
   await tableApi.query();
 }
 
-function handleDownloadExcel() {
+const { exportBlob, exportLoading, buildExportFileName } =
-  commonDownloadExcel(
+  useBlobExport(dictTypeExport);
-    dictTypeExport,
+async function handleExport() {
-    '字典类型数据',
+  // 构建表单请求参数
-    tableApi.formApi.form.values,
+  const formValues = await tableApi.formApi.getValues();
-  );
+  // 文件名
+  const fileName = buildExportFileName('字典类型数据');
+  exportBlob({ data: formValues, fileName });
 }
 </script>
 
@@ -143,7 +145,9 @@ function handleDownloadExcel() {
           </a-button>
           <a-button
             v-access:code="['system:dict:export']"
-            @click="handleDownloadExcel"
+            :loading="exportLoading"
+            :disabled="exportLoading"
+            @click="handleExport"
           >
             {{ $t('pages.common.export') }}
           </a-button>