拆分地接社和接团数据

src/App.js

@@ -13,7 +13,8 @@ import Customer_care_potential from "./charts/Customer_care_potential";
 import Customer_care_regular from "./charts/Customer_care_regular";
 import Wechat_session from "./charts/Wechat_session";
 import WhatsApp_session from "./charts/WhatsApp_session";
-import AgentGroup from "./charts/AgentGroup";
+import AgentList from "./views/AgentList";
+import GroupList from "./views/GroupList";
 import Credit_card_bill from "./views/Credit_card_bill";
 import exchange_rate from "./charts/ExchangeRate";
 import Sale from "./views/Sale";
@@ -70,7 +71,7 @@ const App = () => {
 			label: "客服",
 			icon: <WechatOutlined />,
 			children: [
-				{ key: 61, label: <NavLink to="/AgentGroup">地接社接团</NavLink> },
+				{ key: 61, label: <NavLink to="/agentlist">地接社接团</NavLink> },
 			],
 		}
 	];
@@ -104,7 +105,8 @@ const App = () => {
 								<Route path="/customer_care_potential" element={<Customer_care_potential />} />
 								<Route path="/whatsapp_session" element={<WhatsApp_session />} />
 								<Route path="/wechat_session" element={<Wechat_session />} />
-								<Route path="/agentgroup" element={<AgentGroup />} />
+								<Route path="/agentlist" element={<AgentList />} />
+								<Route path="/grouplist/:agentId" element={<GroupList />} />
 							</Route>
 							<Route element={<ProtectedRoute auth={["admin", "director_bu", "financial"]} />}>
 								<Route path="/credit_card_bill" element={<Credit_card_bill />} />

src/stores/CustomerServices.js

@@ -1,5 +1,6 @@
 import {makeAutoObservable, runInAction} from "mobx"
 import moment from "moment";
+import { NavLink, useParams } from "react-router-dom";
 import * as config from "../config";
 import * as req from '../utils/request';
 
@@ -31,7 +32,7 @@ class CustomerServices {
                   children: [{
                       // title: this.startDate.format(config.DATE_FORMAT) + '~' + this.endDate.format(config.DATE_FORMAT),
                       dataIndex: 'VendorName',
-                      render: (text, record) => <a href={`/agent/${record.EOI_ObjSN}`}>{text}</a>
+                      render: (text, record) => <NavLink to={`/grouplist/${record.EOI_ObjSN}`}>{record.VendorName}</NavLink>
                     }
                   ]
                 },
@@ -121,13 +122,14 @@ class CustomerServices {
         });
     }
 
-    fetchGroupListByAgent() {
-        
-      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)
+    fetchGroupListByAgentId(agentId) {
+      console.info('agentId: ' + agentId);
+      req.fetchJSON(config.HT_HOST + '/service-web/QueryData/GetAgentGroupInfo?VEI_SN=' + agentId + '&DateType=' + this.dateType + '&Date1=' + this.startDateString + '&Date2=' + this.endDateString + '&OldDate1=' + this.startDateString + '&OldDate2=' + this.endDateString)
         .then(json => {
           if (json.errcode === 0) {
             runInAction(() => {
               this.groupList = json.result1;
+              this.selectedAgent = {VendorName: json.result1[0].VendorName};
               const total1 = json.total1;
               this.groupListColumns = [
                 {

src/views/AgentList.js

@@ -1,34 +1,24 @@
 import React, {Component} from 'react';
-import {Row, Col, List, Typography, Space, DatePicker, Button, Select, Table} from 'antd';
+import {Row, Col, Typography, Space, DatePicker, Button, Select, Table} from 'antd';
 import {
-  ContainerOutlined, CarryOutOutlined,
-  SmileOutlined, TagsOutlined, GlobalOutlined,
   SearchOutlined,
 } from '@ant-design/icons';
 import {stores_Context} from '../config'
 import * as config from "../config";
-import {Line} from "@ant-design/charts";
 import {observer} from 'mobx-react';
 import 'moment/locale/zh-cn';
 import moment from "moment";
 import zhCNlocale from 'antd/es/date-picker/locale/zh_CN';
 
-class AgentGroup extends Component {
+class AgentList extends Component {
 
     static contextType = stores_Context;
 
-    state = {
-      selectedRowKeys: [],
-    };
-
     constructor(props) {
         super(props);
     }
 
     componentDidMount() {
-        console.info('AgentGroup.componentDidMount');
-        // const {customerServicesStore} = this.context;
-        // customerServicesStore.fetchAgentList();
     }
 
     handleSearchClick() {
@@ -99,24 +89,13 @@ class AgentGroup extends Component {
               loading={false} 
               pagination={false} 
               scroll={{ x: "100%" }}
-              onRow={(agent) => ({
-                onClick: () => {
-                  customerServicesStore.selectAgent(agent);
-                },
-              })}
             />
           </Col>
         </Row>
-        <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%" }} />
-          </Col>
-        </Row>
         </Space>
       </>
     ); 
   }
 }
 
-export default observer(AgentGroup);
+export default observer(AgentList);

src/views/GroupList.js

@@ -0,0 +1,85 @@
+import React, {useContext, useEffect} from 'react';
+import {Row, Col, Typography, Space, DatePicker, Button, Select, Table} from 'antd';
+import {
+  SearchOutlined,
+} from '@ant-design/icons';
+import {stores_Context} from '../config'
+import * as config from "../config";
+import {observer} from 'mobx-react';
+import { NavLink, useParams } from "react-router-dom";
+import 'moment/locale/zh-cn';
+import moment from "moment";
+import zhCNlocale from 'antd/es/date-picker/locale/zh_CN';
+
+const GroupList = () => {
+     
+	const {agentId} = useParams();
+	const { customerServicesStore } = useContext(stores_Context);
+  
+  useEffect(() => {
+		customerServicesStore.fetchGroupListByAgentId(agentId);
+	}, []);
+
+  const groupList = customerServicesStore.groupList;    
+  const groupListColumns = customerServicesStore.groupListColumns;
+  const {startDate, endDate, dateType} = customerServicesStore;
+
+      return (
+        <>
+        <Space direction="vertical" style={{width: '100%'}}>
+          <Row gutter={{md: 24}} justify="end">
+          <Col span={12}>
+            <NavLink to={'/agentlist'}>返回</NavLink>
+          </Col>
+              <Col span={4}>
+                <Select value={dateType} style={{ width: "95%" }} onChange={(value) => customerServicesStore.selectDateType(value)}>
+                  <Select.Option key="1" value="startDate">
+                  走团日期
+                  </Select.Option>
+                  <Select.Option key="2" value="ConfirmDate">
+                  成团日期
+                  </Select.Option>
+                </Select>
+              </Col>
+              <Col span={4}>
+                <DatePicker.RangePicker 
+                  format={config.DATE_FORMAT} locale={zhCNlocale}
+                  allowClear={false}
+                  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')],
+                      '本月': [moment().startOf('month'), moment().endOf('month')],
+                      '上个月': [moment().subtract(1, 'months').startOf('month'), moment(new Date()).subtract(1, 'months').endOf('month')],
+                      '近30天': [moment().subtract(30, 'days'), moment()],
+                      '近三个月': [moment().subtract(2, 'month').startOf('month'), moment().endOf('month')],
+                      '今年': [moment().startOf('year').subtract(1, 'month'), moment().endOf('year').subtract(1, 'month')],
+                      '去年': [moment().subtract(1, 'year').startOf('year').subtract(1, 'month'), moment().subtract(1, 'year').endOf('year').subtract(1, 'month')],
+                  }}
+                />
+              </Col>
+              <Col span={4}>
+                <Button
+                  type="primary"
+                  icon={<SearchOutlined />}
+                  loading={false}
+                  onClick={() => {
+                    this.handleSearchClick();
+                  }}>
+                  统计
+                </Button>
+              </Col>
+        </Row>
+        <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%" }} />
+          </Col>
+        </Row>
+        </Space>
+      </>
+    ); 
+}
+
+export default observer(GroupList);