把 Class 组件转换为 Function 组件

src/stores/CustomerServices.js

@@ -1,6 +1,6 @@
 import {makeAutoObservable, runInAction} from "mobx"
 import moment from "moment";
-import { NavLink, useParams } from "react-router-dom";
+import { NavLink } from "react-router-dom";
 import * as config from "../config";
 import * as req from '../utils/request';
 
@@ -123,18 +123,25 @@ class CustomerServices {
     }
 
     fetchGroupListByAgentId(agentId) {
-      console.info('agentId: ' + agentId);
+      this.selectedAgent = {VendorName: '...'};
       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;
+              if (json.result1.length > 0) {
                 this.selectedAgent = {VendorName: json.result1[0].VendorName};
+              }
               const total1 = json.total1;
               this.groupListColumns = [
                 {
                   title: '团名',
+                  dataIndex: 'GRI_Name',
+                  children: [{
+                      title: '',
                       dataIndex: 'GRI_Name'
+                    }
+                  ]
                 },
                 {
                   title: '人数',
@@ -158,15 +165,21 @@ class CustomerServices {
                 },
                 {
                   title: '经过城市',
+                  dataIndex: 'PassCity',
+                  children: [{
+                      title: '-',
                       dataIndex: 'PassCity'
-                },
+                    }
-                {
+                  ]
-                  title: '地接社名称',
-                  dataIndex: 'VendorName'
                 },
                 {
                   title: '导游',
-                  dataIndex: 'GuideName'
+                  dataIndex: 'GuideName',
+                  children: [{
+                      title: '-',
+                      dataIndex: 'PassCity'
+                    }
+                  ]
                 },
                 {
                   title: '好评',
@@ -190,7 +203,12 @@ class CustomerServices {
                 },
                 {
                   title: '评论内容',
-                  dataIndex: 'ECI_Content'
+                  dataIndex: 'ECI_Content',
+                  children: [{
+                      title: '-',
+                      dataIndex: 'PassCity'
+                    }
+                  ]
                 },
                 {
                   title: '交易额',

src/views/AgentList.js

@@ -1,43 +1,30 @@
-import React, {Component} from 'react';
+import React, {useContext} from 'react';
-import {Row, Col, Typography, Space, DatePicker, Button, Select, Table} from 'antd';
+import { Row, Col, Typography, Space, DatePicker, Button, Select, Table } from 'antd';
 import {
   SearchOutlined,
 } from '@ant-design/icons';
-import {stores_Context} from '../config'
+import { stores_Context } from '../config'
 import * as config from "../config";
-import {observer} from 'mobx-react';
+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 AgentList extends Component {
+const AgentList = () => {
 
-    static contextType = stores_Context;
+  const { customerServicesStore } = useContext(stores_Context);
-
+  const agentList = customerServicesStore.agentList;
-    constructor(props) {
+  const agentListColumns = customerServicesStore.agentListColumns;
-        super(props);
+  const { startDate, endDate, dateType } = customerServicesStore;
-    }
-
-    componentDidMount() {
-    }
 
-    handleSearchClick() {
+  const handleSearchClick = () => {
-      const {customerServicesStore} = this.context;
     customerServicesStore.fetchAgentList();
   }
 
-    render() {
-      const {customerServicesStore} = this.context;
-      const agentList = customerServicesStore.agentList;    
-      const agentListColumns = customerServicesStore.agentListColumns;
-      const groupList = customerServicesStore.groupList;    
-      const groupListColumns = customerServicesStore.groupListColumns;
-      const {startDate, endDate, dateType} = customerServicesStore;
-
   return (
     <>
-        <Space direction="vertical" style={{width: '100%'}}>
+      <Space direction="vertical" style={{ width: '100%' }}>
-          <Row gutter={{md: 24}} justify="end">
+        <Row gutter={{ md: 24 }} justify="end">
           <Col span={4}>
             <Select value={dateType} style={{ width: "95%" }} onChange={(value) => customerServicesStore.selectDateType(value)}>
               <Select.Option key="1" value="startDate">
@@ -53,7 +40,7 @@ class AgentList extends Component {
               format={config.DATE_FORMAT} locale={zhCNlocale}
               allowClear={false}
               value={[startDate, endDate]}
-                  onChange={(dates) => {customerServicesStore.selectDateRange(dates[0], dates[1])}}
+              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')],
@@ -72,7 +59,7 @@ class AgentList extends Component {
               icon={<SearchOutlined />}
               loading={false}
               onClick={() => {
-                    this.handleSearchClick();
+                handleSearchClick();
               }}>
               统计
             </Button>
@@ -95,7 +82,6 @@ class AgentList extends Component {
       </Space>
     </>
   );
-  }
 }
 
 export default observer(AgentList);