完成日期范围选择和日期类型

src/charts/AgentGroup.js

@@ -16,14 +16,24 @@ import zhCNlocale from 'antd/es/date-picker/locale/zh_CN';
 class AgentGroup extends Component {
 
     static contextType = stores_Context;
+
+    state = {
+      selectedRowKeys: [],
+    };
+
     constructor(props) {
         super(props);
     }
 
     componentDidMount() {
         console.info('AgentGroup.componentDidMount');
-        const {customerServicesStore} = this.context;
-        customerServicesStore.fetchAgentList();
+        // const {customerServicesStore} = this.context;
+        // customerServicesStore.fetchAgentList();
+    }
+
+    handleSearchClick() {
+      const {customerServicesStore} = this.context;
+      customerServicesStore.fetchAgentList();
     }
 
     render() {
@@ -32,12 +42,14 @@ class AgentGroup extends Component {
       const agentListColumns = customerServicesStore.agentListColumns;
       const groupList = customerServicesStore.groupList;    
       const groupListColumns = customerServicesStore.groupListColumns;
+      const {startDate, endDate, dateType} = customerServicesStore;
+      const { selectedRowKeys } = this.state;
 
       return (
         <>
           <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>
               <Col md={8} lg={7} xxl={6}>
-                <Select value={"ConfirmDate"} style={{ width: "95%" }} onChange={(value) => console.info(value)}>
+                <Select value={dateType} style={{ width: "95%" }} onChange={(value) => customerServicesStore.selectDateType(value)}>
                   <Select.Option key="1" value="startDate">
                   走团日期
                   </Select.Option>
@@ -50,8 +62,8 @@ class AgentGroup extends Component {
                 <DatePicker.RangePicker 
                   format={config.DATE_FORMAT} locale={zhCNlocale}
                   allowClear={false}
-                  value={[moment().startOf('week').subtract(7, 'days'), moment().endOf('week').subtract(7, 'days')]}
-                  onChange={(dates) => {console.info(dates)}}
+                  value={[startDate, endDate]}
+                  onChange={(dates) => {customerServicesStore.selectDateRange(dates[0], dates[1])}}
                   ranges={{
                       '本周': [moment().startOf('week'), moment().endOf('week')],
                       '上周': [moment().startOf('week').subtract(7, 'days'), moment().endOf('week').subtract(7, 'days')],
@@ -70,7 +82,7 @@ class AgentGroup extends Component {
                   icon={<SearchOutlined />}
                   loading={false}
                   onClick={() => {
-                    console.info('click...');
+                    this.handleSearchClick();
                   }}>
                   统计
                 </Button>
@@ -78,7 +90,27 @@ class AgentGroup extends Component {
         </Row>
         <Row>
           <Col span={24}>
-            <Table dataSource={agentList} columns={agentListColumns} size="small" rowKey={(record) => record.key} loading={false} pagination={false} scroll={{ x: "100%" }} />
+            <Table 
+              dataSource={agentList} 
+              columns={agentListColumns} 
+              size="small" 
+              rowKey={(record) => record.key} 
+              loading={false} 
+              pagination={false} 
+              scroll={{ x: "100%" }}
+              // rowSelection={{
+              //   type: 'radio',
+              //   selectedRowKeys,
+              //   onChange: (selectedRowKeys) => {
+              //     console.info({ selectedRowKeys });
+              //   },
+              // }}
+              onRow={(agent) => ({
+                onClick: () => {
+                  customerServicesStore.selectAgent(agent);
+                },
+              })}
+            />
           </Col>
         </Row>
         <Row>

src/stores/CustomerServices.js

@@ -1,17 +1,23 @@
 import {makeAutoObservable, runInAction} from "mobx"
+import moment from "moment";
 import * as config from "../config";
 import * as req from '../utils/request';
 
 class CustomerServices {
 
     constructor(rootStore) {
-        this.rootStore = rootStore;
-        makeAutoObservable(this);
+      this.rootStore = rootStore;
+      this.startDate = moment().startOf('week').subtract(7, 'days');
+      this.endDate = moment().endOf('week').subtract(7, 'days');
+      this.startDateString = this.startDate.format(config.DATE_FORMAT);
+      this.endDateString = this.endDate.format(config.DATE_FORMAT) + '%2023:59';
+      this.dateType = 'startDate';
+      makeAutoObservable(this);
     }
 
     fetchAgentList() {
         
-      req.fetchJSON(config.HT_HOST + '/service-web/QueryData/GetAgentGroupInfoALL?DateType=applyDate&Date1=2022-08-01&Date2=2022-08-31%2023:59&OldDate1=2022-07-01&OldDate2=2022-07-31%2023:59')
+      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 => {
           console.info(json);
           if (json.errcode === 0) {
@@ -20,23 +26,11 @@ class CustomerServices {
             });
            }
         });
-
-        
-        
-      req.fetchJSON(config.HT_HOST + '/service-web/QueryData/GetAgentGroupInfo?VEI_SN=1262&DateType=applyDate&Date1=2022-08-01&Date2=2022-08-31%2023:59&OldDate1=2022-07-01&OldDate2=2022-07-31%2023:59')
-      .then(json => {
-        console.info(json);
-        if (json.errcode === 0) {
-          runInAction(() => {
-            this.groupList = json.result1;
-          });
-         }
-      });
     }
 
     fetchGroupListByAgent() {
         
-      req.fetchJSON(config.HT_HOST + '/service-web/QueryData/GetAgentGroupInfo?VEI_SN=1262&DateType=applyDate&Date1=2022-08-01&Date2=2022-08-31%2023:59&OldDate1=2022-07-01&OldDate2=2022-07-31%2023:59')
+      req.fetchJSON(config.HT_HOST + '/service-web/QueryData/GetAgentGroupInfo?VEI_SN=' + this.selectedAgent.EOI_ObjSN + '&DateType=' + this.dateType + '&Date1=' + this.startDateString + '&Date2=' + this.endDateString + '&OldDate1=' + this.startDateString + '&OldDate2=' + this.endDateString)
         .then(json => {
           console.info(json);
           if (json.errcode === 0) {
@@ -46,6 +40,29 @@ class CustomerServices {
            }
         });
     }
+
+    selectDateRange(startDate, endDate) {
+      this.startDate = startDate;
+      this.endDate = endDate;
+      this.startDateString = startDate.format(config.DATE_FORMAT);
+      this.endDateString = endDate.format(config.DATE_FORMAT) + '%2023:59';
+    }
+
+    selectDateType(dateType) {
+      this.dateType = dateType;
+    }
+
+    selectAgent(agent) {
+      this.selectedAgent = agent;
+      this.fetchGroupListByAgent();
+    }
+
+    startDate;
+    endDate;
+    startDateString;
+    endDateString;
+    dateType;
+    selectedAgent;
     
     groupList = [{
       EOI_ObjSN: 1,