把 Class 组件转换为 Function 组件

3 years ago · d438adde67
parent c54fccb964
commit d438adde67
2 changed files with 94 additions and 90 deletions
--- a/src/stores/CustomerServices.js
+++ b/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;
-              this.selectedAgent = {VendorName: json.result1[0].VendorName};
+              if (json.result1.length > 0) {
+                this.selectedAgent = {VendorName: json.result1[0].VendorName};
+              }
              const total1 = json.total1;
              this.groupListColumns = [
                {
                  title: '团名',
-                  dataIndex: 'GRI_Name'
+                  dataIndex: 'GRI_Name',
+                  children: [{
+                      title: '',
+                      dataIndex: 'GRI_Name'
+                    }
+                  ]
                },
                {
                  title: '人数',
@ -158,15 +165,21 @@ class CustomerServices {
                },
                {
                  title: '经过城市',
-                  dataIndex: 'PassCity'
-                },
-                {
-                  title: '地接社名称',
-                  dataIndex: 'VendorName'
+                  dataIndex: 'PassCity',
+                  children: [{
+                      title: '-',
+                      dataIndex: 'PassCity'
+                    }
+                  ]
                },
                {
                  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: '交易额',
--- a/src/views/AgentList.js
+++ b/src/views/AgentList.js
@ -1,101 +1,87 @@
-import React, {Component} from 'react';
-import {Row, Col, Typography, Space, DatePicker, Button, Select, Table} from 'antd';
+import React, {useContext} 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 { 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;
+  const agentListColumns = customerServicesStore.agentListColumns;
+  const { startDate, endDate, dateType } = customerServicesStore;

-    constructor(props) {
-        super(props);
-    }
-
-    componentDidMount() {
-    }
-
-    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;
+  const handleSearchClick = () => {
+    customerServicesStore.fetchAgentList();
+  }

-      return (
-        <>
-        <Space direction="vertical" style={{width: '100%'}}>
-          <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">
-                  走团日期
-                  </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>
+  return (
+    <>
+      <Space direction="vertical" style={{ width: '100%' }}>
+        <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">
+                走团日期
+              </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={() => {
+                handleSearchClick();
+              }}>
+              统计
+            </Button>
+          </Col>
        </Row>
        <Row>
          <Col span={24}>
            <Typography.Title level={3}>地接社团信息</Typography.Title>
-            <Table 
-              dataSource={agentList} 
-              columns={agentListColumns} 
-              size="small" 
-              rowKey={(record) => record.key} 
-              loading={false} 
-              pagination={false} 
+            <Table
+              dataSource={agentList}
+              columns={agentListColumns}
+              size="small"
+              rowKey={(record) => record.key}
+              loading={false}
+              pagination={false}
              scroll={{ x: "100%" }}
            />
          </Col>
        </Row>
-        </Space>
-      </>
-    ); 
-  }
+      </Space>
+    </>
+  );
 }

 export default observer(AgentList);