perf: invoice page refresh after apply (#2469)

* perf: 发票申请弹窗成功后刷新

* refactor: 组件内拿invoiceTab

projects/app/src/pages/account/components/bill/ApplyInvoiceModal.tsx

@@ -31,6 +31,7 @@ import { InvoiceHeaderSingleForm } from './InvoiceHeaderForm';
 import MyBox from '@fastgpt/web/components/common/MyBox';
 import MyBox from '@fastgpt/web/components/common/MyBox';
 import { getTeamInvoiceHeader } from '@/web/support/user/team/api';
 import { getTeamInvoiceHeader } from '@/web/support/user/team/api';
 import { useToast } from '@fastgpt/web/hooks/useToast';
 import { useToast } from '@fastgpt/web/hooks/useToast';
+import { useRouter } from 'next/router';
 type chosenBillDataType = {
 type chosenBillDataType = {
   _id: string;
   _id: string;
   price: number;
   price: number;
@@ -50,6 +51,8 @@ const ApplyInvoiceModal = ({ onClose }: { onClose: () => void }) => {
     needSpecialInvoice: undefined,
     needSpecialInvoice: undefined,
     emailAddress: ''
     emailAddress: ''
   });
   });
+
+  const router = useRouter();
   const {
   const {
     isOpen: isOpenSettleModal,
     isOpen: isOpenSettleModal,
     onOpen: onOpenSettleModal,
     onOpen: onOpenSettleModal,
@@ -94,7 +97,10 @@ const ApplyInvoiceModal = ({ onClose }: { onClose: () => void }) => {
       manual: true,
       manual: true,
       successToast: t('common:common.submit_success'),
       successToast: t('common:common.submit_success'),
       errorToast: t('common:common.Submit failed'),
       errorToast: t('common:common.Submit failed'),
-      onSuccess: () => onClose()
+      onSuccess: () => {
+        onClose();
+        router.reload();
+      }
     }
     }
   );
   );
 
 

projects/app/src/pages/account/components/bill/BillAndInvoice.tsx

@@ -4,19 +4,20 @@ import dynamic from 'next/dynamic';
 import { useState } from 'react';
 import { useState } from 'react';
 import { useTranslation } from 'next-i18next';
 import { useTranslation } from 'next-i18next';
 import ApplyInvoiceModal from './ApplyInvoiceModal';
 import ApplyInvoiceModal from './ApplyInvoiceModal';
+import { useRouter } from 'next/router';
 
 
-const TabEnum = {
+export const InvoiceTabEnum = {
   bill: 'bill',
   bill: 'bill',
   invoice: 'invoice',
   invoice: 'invoice',
-  invoiceHeader: 'voiceHeader'
+  invoiceHeader: 'invoiceHeader'
 };
 };
 const BillTable = dynamic(() => import('./BillTable'));
 const BillTable = dynamic(() => import('./BillTable'));
 const InvoiceHeaderForm = dynamic(() => import('./InvoiceHeaderForm'));
 const InvoiceHeaderForm = dynamic(() => import('./InvoiceHeaderForm'));
 const InvoiceTable = dynamic(() => import('./InvoiceTable'));
 const InvoiceTable = dynamic(() => import('./InvoiceTable'));
 const BillAndInvoice = () => {
 const BillAndInvoice = () => {
-  const [currentTab, setCurrentTab] = useState(TabEnum.bill);
   const [isOpenInvoiceModal, setIsOpenInvoiceModal] = useState(false);
   const [isOpenInvoiceModal, setIsOpenInvoiceModal] = useState(false);
-
+  const router = useRouter();
+  const invoiceTab = (router.query.invoiceTab as string) || InvoiceTabEnum.bill;
   const { t } = useTranslation();
   const { t } = useTranslation();
   return (
   return (
     <>
     <>
@@ -24,17 +25,24 @@ const BillAndInvoice = () => {
         <Flex justifyContent={'space-between'} alignItems={'center'} pb={'0.75rem'}>
         <Flex justifyContent={'space-between'} alignItems={'center'} pb={'0.75rem'}>
           <FillRowTabs
           <FillRowTabs
             list={[
             list={[
-              { label: t('common:support.wallet.bill_tag.bill'), value: TabEnum.bill },
-              { label: t('common:support.wallet.bill_tag.invoice'), value: TabEnum.invoice },
+              { label: t('common:support.wallet.bill_tag.bill'), value: InvoiceTabEnum.bill },
+              { label: t('common:support.wallet.bill_tag.invoice'), value: InvoiceTabEnum.invoice },
               {
               {
                 label: t('common:support.wallet.bill_tag.default_header'),
                 label: t('common:support.wallet.bill_tag.default_header'),
-                value: TabEnum.invoiceHeader
+                value: InvoiceTabEnum.invoiceHeader
               }
               }
             ]}
             ]}
-            value={currentTab}
-            onChange={setCurrentTab}
+            value={invoiceTab}
+            onChange={(e) => {
+              router.replace({
+                query: {
+                  currentTab: router.query.currentTab,
+                  invoiceTab: e
+                }
+              });
+            }}
           ></FillRowTabs>
           ></FillRowTabs>
-          {currentTab !== TabEnum.invoiceHeader && (
+          {invoiceTab !== InvoiceTabEnum.invoiceHeader && (
             <Button variant={'primary'} px="0" onClick={() => setIsOpenInvoiceModal(true)}>
             <Button variant={'primary'} px="0" onClick={() => setIsOpenInvoiceModal(true)}>
               <Flex alignItems={'center'} px={'20px'}>
               <Flex alignItems={'center'} px={'20px'}>
                 <Box px={'1.25rem'} py={'0.5rem'}>
                 <Box px={'1.25rem'} py={'0.5rem'}>
@@ -45,11 +53,17 @@ const BillAndInvoice = () => {
           )}
           )}
         </Flex>
         </Flex>
         <Box h={'100%'}>
         <Box h={'100%'}>
-          {currentTab === TabEnum.bill && <BillTable />}
-          {currentTab === TabEnum.invoice && <InvoiceTable />}
-          {currentTab === TabEnum.invoiceHeader && <InvoiceHeaderForm />}
+          {invoiceTab === InvoiceTabEnum.bill && <BillTable />}
+          {invoiceTab === InvoiceTabEnum.invoice && <InvoiceTable />}
+          {invoiceTab === InvoiceTabEnum.invoiceHeader && <InvoiceHeaderForm />}
         </Box>
         </Box>
-        {isOpenInvoiceModal && <ApplyInvoiceModal onClose={() => setIsOpenInvoiceModal(false)} />}
+        {isOpenInvoiceModal && (
+          <ApplyInvoiceModal
+            onClose={() => {
+              setIsOpenInvoiceModal(false);
+            }}
+          />
+        )}
       </Box>
       </Box>
     </>
     </>
   );
   );

projects/app/src/pages/account/index.tsx

@@ -20,7 +20,6 @@ const BillAndInvoice = dynamic(() => import('./components/bill/BillAndInvoice'))
 const InformTable = dynamic(() => import('./components/InformTable'));
 const InformTable = dynamic(() => import('./components/InformTable'));
 const ApiKeyTable = dynamic(() => import('./components/ApiKeyTable'));
 const ApiKeyTable = dynamic(() => import('./components/ApiKeyTable'));
 const Individuation = dynamic(() => import('./components/Individuation'));
 const Individuation = dynamic(() => import('./components/Individuation'));
-
 enum TabEnum {
 enum TabEnum {
   'info' = 'info',
   'info' = 'info',
   'promotion' = 'promotion',
   'promotion' = 'promotion',