Pārlūkot izejas kodu

feat: 导出增加title

xyh 2 gadi atpakaļ
vecāks
revīzija
10e6da2119

+ 4 - 3
packages/app/src/components/table-tools/index.tsx

@@ -21,7 +21,7 @@ import {
 
 type Props = {
   onAdd?: () => void;
-  onExport?: () => void;
+  onExport?: (downloadFileName: string) => () => void;
   isExporting?: boolean;
   title?: string;
   onDownload?: () => void;
@@ -65,10 +65,11 @@ const TableTools: ChildrenFC<Props> = function ({
       onRefresh: state.refetch,
     }),
   );
+  const tableTitle = title ?? menuTitle;
 
   return (
     <section className='table-tool'>
-      <h1 className={css.title}>{title ?? menuTitle}</h1>
+      <h1 className={css.title}>{tableTitle}</h1>
       <Space>
         {onAdd && (
           <Button
@@ -112,7 +113,7 @@ const TableTools: ChildrenFC<Props> = function ({
         {onExport && (
           <Button
             data-testid='export_btn'
-            onClick={onExport}
+            onClick={onExport(tableTitle)}
             loading={isExporting}
             icon={<FileExcel theme='outline' className='anticon' />}
           >

+ 3 - 2
packages/app/src/hooks/use-export-file/index.ts

@@ -4,8 +4,9 @@ import {message} from 'antd';
 
 export function useExportFile<P>(fn: (params: P) => Promise<any>) {
   const {mutate, isLoading} = useMutation(fn, {
-    onSuccess(data) {
-      !process.env.IS_E2E && exportFile(data as Blob);
+    onSuccess(data, variable) {
+      const {downloadFileName} = variable as Record<string, string>;
+      !process.env.IS_E2E && exportFile(data as Blob, downloadFileName);
     },
     onError() {
       message.error(EXPORT_ERROR_TIPS);

+ 10 - 27
packages/app/src/hooks/use-table-export-event/index.ts

@@ -9,26 +9,6 @@ import {ListParams, OriginalListParams} from '@models';
 import {useCallback} from 'react';
 import {Context} from 'use-context-selector';
 
-// type UseTableExportEventOptions<T extends ListParams> = {
-//   pageContext: ReturnType<typeof createPageContext>;
-//   context: Context<TableSearchContext<OriginalListParams<T>>>;
-//   fn: (params: T) => Promise<any>;
-// };
-
-// type UseTableExportEventOptionsWithSelector<T extends ListParams, S> = {
-//   pageContext: ReturnType<typeof createPageContext>;
-//   context: Context<TableSearchContext<S>>;
-//   fn: (params: T) => Promise<any>;
-//   selector: (state: S) => T;
-// };
-
-// export function useTableExportEvent<T extends ListParams>(
-//   options: UseTableExportEventOptions<T>,
-// ): [boolean, () => void];
-// export function useTableExportEvent<T extends ListParams, S extends ListParams>(
-//   options: UseTableExportEventOptionsWithSelector<T, S>,
-// ): [boolean, () => void];
-
 export function useTableExportEvent<
   P extends ListParams,
   C extends TableSearchContext<any>,
@@ -42,7 +22,7 @@ export function useTableExportEvent<
   context: Context<C>;
   fn: (params: P) => Promise<any>;
   parseParams?: (state: C[0]) => OriginalListParams<P>;
-}): [boolean, () => void] {
+}): [boolean, (downloadFileName: string) => () => void] {
   const [{page, pageSize}] = usePage(pageContext);
   const params = useContextSection(context, function ([state]) {
     return parseParams ? parseParams(state) : state;
@@ -50,12 +30,15 @@ export function useTableExportEvent<
   const [isExporting, mutate] = useExportFile(fn);
 
   const onExport = useCallback(
-    function () {
-      mutate({
-        ...params,
-        page: String(page),
-        limit: String(pageSize),
-      } as unknown as P);
+    function (downloadFileName: string) {
+      return function () {
+        mutate({
+          ...params,
+          downloadFileName,
+          page: String(page),
+          limit: String(pageSize),
+        } as unknown as P);
+      };
     },
     [mutate, page, pageSize, params],
   );

+ 13 - 2
packages/app/src/utils/exportFile.ts

@@ -1,4 +1,15 @@
-export function exportFile(blob: Blob) {
+export function exportFile(blob: Blob, name: string) {
   const url = URL.createObjectURL(blob);
-  open(url, '_blank');
+
+  const downloadElement = document.createElement('a');
+  downloadElement.setAttribute(
+    'style',
+    'opacity:0; position: fixed; top: 0; left: 0;',
+  );
+  downloadElement.download = name;
+  downloadElement.href = url;
+  document.body.appendChild(downloadElement);
+  downloadElement.click();
+  document.body.removeChild(downloadElement);
+  URL.revokeObjectURL(url);
 }