Merge branch '20230128-供应商多的时候加载时间相对长，需增加加载等待动效效果' into 'release_20230210'

1.28 供应商多的时候加载时间相对长，需增加加载等待动效效果

See merge request eshop/fe_service_ebtp_frontend!150

src/pages/Evaluation/BidControl/BidControlManager/components/ViewRishFormModal.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Collapse, Table, PageHeader, Empty, Card } from 'antd';
+import { Collapse, Table, PageHeader, Empty, Card, Spin } from 'antd';
 import { getList } from '../service';
 import { getProMethod, getRoomId } from '@/utils/session';
 import FileDown from '@/utils/Download';
@@ -15,6 +15,7 @@ interface ViewRishFormModalProps {
 const ViewRishFormModal: React.FC<ViewRishFormModalProps> = (props) => {
 
   const [rishList, setDataList] = useState([]);
+  const [loading, setLoading] = useState<boolean>(false);
 
   let name1 = "投标";
   let proDict = getProMethod();
@@ -61,12 +62,15 @@ const ViewRishFormModal: React.FC<ViewRishFormModalProps> = (props) => {
   const getWarningList = async () => {
     let roomId = getRoomId();//sessionStorage.getItem('roomId');//sessionStorage.getItem('roomId')
     //ip mac
+    setLoading(true);
     await getList(roomId).then((res) => {
       if (res.success === true) {
         if (res.data !== null && res.data.length > 0) {
           setDataList(res.data)
         }
       }
+    }).finally(() => {
+      setLoading(false);
     })
   }
 
@@ -80,71 +84,73 @@ const ViewRishFormModal: React.FC<ViewRishFormModalProps> = (props) => {
     <>
       <Collapse onChange={callback} defaultActiveKey={props?.activeKey ? ['1'] : []}>
         <Collapse.Panel header={`${name1}文件制作地址日志信息查看`} key="1">
-          {rishList?.length == 0
-            ? <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
-            : <>
-              <PageHeader
-                title={`功能主要展示客户端工具制作${name1}文件时，电脑本机IP地址和MAC地址日志信息，此信息仅供参考。`}
-                extra={[
-                  <FileDown
-                    key="downLoadFile"
-                    type="xlsx"
-                    apiUrl={downLoadFile()}
-                    style={{ "float": "right" }}
-                    fileName={`${name1}文件制作地址日志信息`}
-                    btnName="导出Excel"
-                    method="GET"
-                    form={null}
-                  />
-                ]}
-              >
-              </PageHeader>
+          <Spin spinning={loading}>
+            {rishList?.length == 0
+              ? <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
+              : <>
+                <PageHeader
+                  title={`功能主要展示客户端工具制作${name1}文件时，电脑本机IP地址和MAC地址日志信息，此信息仅供参考。`}
+                  extra={[
+                    <FileDown
+                      key="downLoadFile"
+                      type="xlsx"
+                      apiUrl={downLoadFile()}
+                      style={{ "float": "right" }}
+                      fileName={`${name1}文件制作地址日志信息`}
+                      btnName="导出Excel"
+                      method="GET"
+                      form={null}
+                    />
+                  ]}
+                >
+                </PageHeader>
 
 
-              {
-                (proDict == "procurement_mode_5" || proDict == "procurement_mode_6") ? rishList?.map((item: any, index: any) => {
-                  return (
-                    <Collapse onChange={callback}>
-                      <Collapse.Panel header={"第" + item.turnSort + "次应答"} key={item.turnSort}>
-                        <p>MAC地址相同的供应商信息如下： </p>
-                        <Table
-                          size='small'
-                          columns={macColumns}//表格
-                          dataSource={item.sameMacList}
-                          pagination={false}//分页
-                        ></Table>
-                        <p style={{ color: 'red' }}>提醒：根据《关于进一步防范围标串标风险的通知》（WTZ2019110816765），如不同供应商的MAC地址相同，则可能存在围标、串标风险，请项目经理及评委给予注意！</p>
-                        <p></p>
-                        <Table
-                          size='small'
-                          columns={ipColumns}
-                          dataSource={item.tfileWarningList}
-                          pagination={false}//分页
-                        ></Table>
-                      </Collapse.Panel>
-                    </Collapse>
-                  );
-                }) : (
-                  <Card bordered={false} bodyStyle={{ padding: '16px 24px' }}>
-                    <p>MAC地址相同的供应商信息如下： </p>
-                    <Table
-                      size='small'
-                      columns={macColumns}//表格
-                      dataSource={rishList[0].sameMacList}
-                      pagination={false}//分页
-                    ></Table>
-                    <p style={{ color: 'red' }}>提醒：根据《关于进一步防范围标串标风险的通知》（WTZ2019110816765），如不同供应商的MAC地址相同，则可能存在围标、串标风险，请项目经理及评委给予注意！</p>
-                    <p></p>
-                    <Table
-                      size='small'
-                      columns={ipColumns}
-                      dataSource={rishList[0].tfileWarningList}
-                      pagination={false}//分页
-                    ></Table>
-                  </Card>
-                )
-              }
-            </>}
+                {
+                  (proDict == "procurement_mode_5" || proDict == "procurement_mode_6") ? rishList?.map((item: any, index: any) => {
+                    return (
+                      <Collapse onChange={callback}>
+                        <Collapse.Panel header={"第" + item.turnSort + "次应答"} key={item.turnSort}>
+                          <p>MAC地址相同的供应商信息如下： </p>
+                          <Table
+                            size='small'
+                            columns={macColumns}//表格
+                            dataSource={item.sameMacList}
+                            pagination={false}//分页
+                          ></Table>
+                          <p style={{ color: 'red' }}>提醒：根据《关于进一步防范围标串标风险的通知》（WTZ2019110816765），如不同供应商的MAC地址相同，则可能存在围标、串标风险，请项目经理及评委给予注意！</p>
+                          <p></p>
+                          <Table
+                            size='small'
+                            columns={ipColumns}
+                            dataSource={item.tfileWarningList}
+                            pagination={false}//分页
+                          ></Table>
+                        </Collapse.Panel>
+                      </Collapse>
+                    );
+                  }) : (
+                    <Card bordered={false} bodyStyle={{ padding: '16px 24px' }}>
+                      <p>MAC地址相同的供应商信息如下： </p>
+                      <Table
+                        size='small'
+                        columns={macColumns}//表格
+                        dataSource={rishList[0].sameMacList}
+                        pagination={false}//分页
+                      ></Table>
+                      <p style={{ color: 'red' }}>提醒：根据《关于进一步防范围标串标风险的通知》（WTZ2019110816765），如不同供应商的MAC地址相同，则可能存在围标、串标风险，请项目经理及评委给予注意！</p>
+                      <p></p>
+                      <Table
+                        size='small'
+                        columns={ipColumns}
+                        dataSource={rishList[0].tfileWarningList}
+                        pagination={false}//分页
+                      ></Table>
+                    </Card>
+                  )
+                }
+              </>}
+          </Spin>
         </Collapse.Panel>
       </Collapse>
     </>