Merge branch '20220411-zjl-前端先调用接口后Modal弹窗遮罩问题' into 'master-0422-合并'

4.22 前端先调用接口后Modal弹窗遮罩问题

See merge request eshop/fe_service_ebtp_frontend!26

src/pages/Invoice/AgencyAdmin/index.tsx

@@ -1,5 +1,5 @@
 import React, { useRef, useState } from 'react';
-import { Button, Card } from 'antd';
+import { Button, Card, Spin } from 'antd';
 import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table';
 import FileDown from '@/utils/Download';
 
@@ -14,13 +14,18 @@ const Invoice: React.FC<any> = (props) => {
   const [viewInvoiceFormVisible, setViewInvoiceFormVisible] = useState<any>(false);
   //查看详情窗口record
   const [viewInvoiceValues, setViewInvoiceValues] = useState<any>({});
+  //loading
+  const [loading, setLoading] = useState<boolean>(false);
 
   const viewDetail = (invoiceId: String) => {
+    setLoading(true);
     getInSingleInvoiceRecord(invoiceId).then((res: any) => {
       if (res?.success === true && res.data?.id !== null) {
         setViewInvoiceFormVisible(true);
         setViewInvoiceValues(res?.data);
       }
+    }).finally(() => {
+      setLoading(false);
     })
   }
 
@@ -165,6 +170,7 @@ const Invoice: React.FC<any> = (props) => {
   return (
     <>
       <Card title="我的发票列表" style={{ borderRadius: 6 }} bodyStyle={{ padding: '1px 24px 0px' }}>
+        <Spin spinning={loading}>
           <div className="zjl-entrust confirm" style={{ height: window.innerHeight - 124, overflowY: 'auto' }}>
             <ProTable
               rowKey="invoiceId"
@@ -212,8 +218,10 @@ const Invoice: React.FC<any> = (props) => {
               }}
               columns={columns}
               options={false}
-            request={(params) =>
+              loading={false}
-              getAgencyAdminGetPagelist({ ...params, pageNo: params.current }).then((res: any) => {
+              request={(params) => {
+                setLoading(true);
+                return getAgencyAdminGetPagelist({ ...params, pageNo: params.current }).then((res: any) => {
                   const result = {
                     data: res.data?.records,
                     total: res.data?.total,
@@ -222,11 +230,14 @@ const Invoice: React.FC<any> = (props) => {
                     current: res.data?.current
                   }
                   return result;
+                }).finally(() => {
+                  setLoading(false);
                 })
-            }
+              }}
               pagination={{ defaultPageSize: 10, showSizeChanger: false }}
             />
           </div>
+        </Spin>
       </Card>
       {
         viewInvoiceValues ? (

src/pages/Invoice/Manager/index.tsx

@@ -1,5 +1,5 @@
 import React, { useRef, useState } from 'react';
-import { Button, Popconfirm, Card } from 'antd';
+import { Button, Popconfirm, Card, Spin } from 'antd';
 import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table';
 import FileDown from '@/utils/Download';
 
@@ -14,13 +14,18 @@ const Invoice: React.FC<any> = (props) => {
   const [viewInvoiceFormVisible, setViewInvoiceFormVisible] = useState<any>(false);
   //查看详情窗口record
   const [viewInvoiceValues, setViewInvoiceValues] = useState<any>({});
+  //loading
+  const [loading, setLoading] = useState<boolean>(false);
 
   const viewDetail = (invoiceId: String) => {
+    setLoading(true);
     getInSingleInvoiceRecord(invoiceId).then((res: any) => {
       if (res?.success === true && res.data?.id !== null) {
         setViewInvoiceFormVisible(true);
         setViewInvoiceValues(res?.data);
       }
+    }).finally(() => {
+      setLoading(false);
     })
   }
 
@@ -187,6 +192,7 @@ const Invoice: React.FC<any> = (props) => {
   return (
     <>
       <Card title="我的发票列表" style={{ borderRadius: 6 }} bodyStyle={{ padding: '1px 24px 0px' }}>
+        <Spin spinning={loading}>
           <div className="zjl-entrust confirm" style={{ height: window.innerHeight - 124, overflowY: 'auto' }}>
             <ProTable
               rowKey="invoiceId"
@@ -234,8 +240,10 @@ const Invoice: React.FC<any> = (props) => {
               }}
               columns={columns}
               options={false}
-            request={(params) =>
+              loading={false}
-              getAgencyGetPagelist({ ...params, pageNo: params.current }).then((res: any) => {
+              request={(params) => {
+                setLoading(true);
+                return getAgencyGetPagelist({ ...params, pageNo: params.current }).then((res: any) => {
                   const result = {
                     data: res.data?.records,
                     total: res.data?.total,
@@ -244,11 +252,14 @@ const Invoice: React.FC<any> = (props) => {
                     current: res.data?.current
                   }
                   return result;
+                }).finally(() => {
+                  setLoading(false);
                 })
-            }
+              }}
               pagination={{ defaultPageSize: 10, showSizeChanger: false }}
             />
           </div>
+        </Spin>
       </Card>
       {
         viewInvoiceValues ? (