增加数据加载进度指示

src/stores/CustomerServices.js

@@ -13,12 +13,13 @@ class CustomerServices {
       this.startDateString = this.startDate.format(config.DATE_FORMAT);
       this.endDateString = this.endDate.format(config.DATE_FORMAT) + '%2023:59';
       this.dateType = 'startDate';
+      this.inProgress = false;
       this.selectedAgent = {VendorName: '请选择地接社'};
       makeAutoObservable(this);
     }
 
     fetchAgentList() {
-        
+      this.inProgress = true;
       req.fetchJSON(config.HT_HOST + '/service-web/QueryData/GetAgentGroupInfoALL?DateType=' + this.dateType + '&Date1=' + this.startDateString + '&Date2=' + this.endDateString + '&OldDate1=' + this.startDateString + '&OldDate2=' + this.endDateString)
         .then(json => {
           if (json.errcode === 0) {
@@ -119,10 +120,14 @@ class CustomerServices {
               ];
             });
            }
+        })
+        .then(() => {
+          this.inProgress = false;
         });
     }
 
     fetchGroupListByAgentId(agentId) {
+      this.inProgress = true;
       this.selectedAgent = {VendorName: '...'};
       this.groupList = [];
       this.groupListColumns = [];
@@ -225,6 +230,9 @@ class CustomerServices {
               ];
             });
            }
+        })
+        .then(() => {
+          this.inProgress = false;
         });
     }
 
@@ -250,6 +258,7 @@ class CustomerServices {
     endDateString;
     dateType;
     selectedAgent;
+    inProgress;
     
     groupList = [];
 

src/views/AgentList.js

@@ -12,10 +12,10 @@ import zhCNlocale from 'antd/es/date-picker/locale/zh_CN';
 
 const AgentList = () => {
 
-  const { customerServicesStore } = useContext(stores_Context);
+  const {customerServicesStore} = useContext(stores_Context);
   const agentList = customerServicesStore.agentList;
   const agentListColumns = customerServicesStore.agentListColumns;
-  const { startDate, endDate, dateType } = customerServicesStore;
+  const {startDate, endDate, dateType, inProgress} = customerServicesStore;
 
   const handleSearchClick = () => {
     customerServicesStore.fetchAgentList();
@@ -57,7 +57,7 @@ const AgentList = () => {
             <Button
               type="primary"
               icon={<SearchOutlined />}
-              loading={false}
+              loading={inProgress}
               onClick={() => {
                 handleSearchClick();
               }}>
@@ -73,7 +73,7 @@ const AgentList = () => {
               columns={agentListColumns}
               size="small"
               rowKey={(record) => record.key}
-              loading={false}
+              loading={inProgress}
               pagination={false}
               scroll={{ x: "100%" }}
             />

src/views/GroupList.js

@@ -22,7 +22,7 @@ const GroupList = () => {
 
   const groupList = customerServicesStore.groupList;    
   const groupListColumns = customerServicesStore.groupListColumns;
-  const {startDate, endDate, dateType} = customerServicesStore;
+  const {startDate, endDate, dateType, inProgress} = customerServicesStore;
 
       return (
         <>
@@ -63,7 +63,7 @@ const GroupList = () => {
                 <Button
                   type="primary"
                   icon={<SearchOutlined />}
-                  loading={false}
+                  loading={inProgress}
                   onClick={() => {
                     customerServicesStore.fetchGroupListByAgentId(agentId);
                     customerServicesStore.fetchAgentList();
@@ -75,7 +75,7 @@ const GroupList = () => {
         <Row>
           <Col span={24}>
             <Typography.Title level={3}>{customerServicesStore.selectedAgent.VendorName}</Typography.Title>
-            <Table dataSource={groupList} columns={groupListColumns} size="small" rowKey={(record) => record.key} loading={false} pagination={false} scroll={{ x: "100%" }} />
+            <Table dataSource={groupList} columns={groupListColumns} size="small" rowKey={(record) => record.key} loading={inProgress} pagination={false} scroll={{ x: "100%" }} />
           </Col>
         </Row>
         </Space>