把 Class 组件转换为 Function 组件
parent
c54fccb964
commit
d438adde67
@ -1,101 +1,87 @@
|
|||||||
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 {
|
import {
|
||||||
SearchOutlined,
|
SearchOutlined,
|
||||||
} from '@ant-design/icons';
|
} from '@ant-design/icons';
|
||||||
import {stores_Context} from '../config'
|
import { stores_Context } from '../config'
|
||||||
import * as config from "../config";
|
import * as config from "../config";
|
||||||
import {observer} from 'mobx-react';
|
import { observer } from 'mobx-react';
|
||||||
import 'moment/locale/zh-cn';
|
import 'moment/locale/zh-cn';
|
||||||
import moment from "moment";
|
import moment from "moment";
|
||||||
import zhCNlocale from 'antd/es/date-picker/locale/zh_CN';
|
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) {
|
const handleSearchClick = () => {
|
||||||
super(props);
|
customerServicesStore.fetchAgentList();
|
||||||
}
|
}
|
||||||
|
|
||||||
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;
|
|
||||||
|
|
||||||
return (
|
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}>
|
<Col span={4}>
|
||||||
<Select value={dateType} style={{ width: "95%" }} onChange={(value) => customerServicesStore.selectDateType(value)}>
|
<Select value={dateType} style={{ width: "95%" }} onChange={(value) => customerServicesStore.selectDateType(value)}>
|
||||||
<Select.Option key="1" value="startDate">
|
<Select.Option key="1" value="startDate">
|
||||||
走团日期
|
走团日期
|
||||||
</Select.Option>
|
</Select.Option>
|
||||||
<Select.Option key="2" value="ConfirmDate">
|
<Select.Option key="2" value="ConfirmDate">
|
||||||
成团日期
|
成团日期
|
||||||
</Select.Option>
|
</Select.Option>
|
||||||
</Select>
|
</Select>
|
||||||
</Col>
|
</Col>
|
||||||
<Col span={4}>
|
<Col span={4}>
|
||||||
<DatePicker.RangePicker
|
<DatePicker.RangePicker
|
||||||
format={config.DATE_FORMAT} locale={zhCNlocale}
|
format={config.DATE_FORMAT} locale={zhCNlocale}
|
||||||
allowClear={false}
|
allowClear={false}
|
||||||
value={[startDate, endDate]}
|
value={[startDate, endDate]}
|
||||||
onChange={(dates) => {customerServicesStore.selectDateRange(dates[0], dates[1])}}
|
onChange={(dates) => { customerServicesStore.selectDateRange(dates[0], dates[1]) }}
|
||||||
ranges={{
|
ranges={{
|
||||||
'本周': [moment().startOf('week'), moment().endOf('week')],
|
'本周': [moment().startOf('week'), moment().endOf('week')],
|
||||||
'上周': [moment().startOf('week').subtract(7, 'days'), moment().endOf('week').subtract(7, 'days')],
|
'上周': [moment().startOf('week').subtract(7, 'days'), moment().endOf('week').subtract(7, 'days')],
|
||||||
'本月': [moment().startOf('month'), moment().endOf('month')],
|
'本月': [moment().startOf('month'), moment().endOf('month')],
|
||||||
'上个月': [moment().subtract(1, 'months').startOf('month'), moment(new Date()).subtract(1, 'months').endOf('month')],
|
'上个月': [moment().subtract(1, 'months').startOf('month'), moment(new Date()).subtract(1, 'months').endOf('month')],
|
||||||
'近30天': [moment().subtract(30, 'days'), moment()],
|
'近30天': [moment().subtract(30, 'days'), moment()],
|
||||||
'近三个月': [moment().subtract(2, 'month').startOf('month'), moment().endOf('month')],
|
'近三个月': [moment().subtract(2, 'month').startOf('month'), moment().endOf('month')],
|
||||||
'今年': [moment().startOf('year').subtract(1, 'month'), moment().endOf('year').subtract(1, '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')],
|
'去年': [moment().subtract(1, 'year').startOf('year').subtract(1, 'month'), moment().subtract(1, 'year').endOf('year').subtract(1, 'month')],
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</Col>
|
</Col>
|
||||||
<Col span={4}>
|
<Col span={4}>
|
||||||
<Button
|
<Button
|
||||||
type="primary"
|
type="primary"
|
||||||
icon={<SearchOutlined />}
|
icon={<SearchOutlined />}
|
||||||
loading={false}
|
loading={false}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
this.handleSearchClick();
|
handleSearchClick();
|
||||||
}}>
|
}}>
|
||||||
统计
|
统计
|
||||||
</Button>
|
</Button>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
<Row>
|
<Row>
|
||||||
<Col span={24}>
|
<Col span={24}>
|
||||||
<Typography.Title level={3}>地接社团信息</Typography.Title>
|
<Typography.Title level={3}>地接社团信息</Typography.Title>
|
||||||
<Table
|
<Table
|
||||||
dataSource={agentList}
|
dataSource={agentList}
|
||||||
columns={agentListColumns}
|
columns={agentListColumns}
|
||||||
size="small"
|
size="small"
|
||||||
rowKey={(record) => record.key}
|
rowKey={(record) => record.key}
|
||||||
loading={false}
|
loading={false}
|
||||||
pagination={false}
|
pagination={false}
|
||||||
scroll={{ x: "100%" }}
|
scroll={{ x: "100%" }}
|
||||||
/>
|
/>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
</Space>
|
</Space>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export default observer(AgentList);
|
export default observer(AgentList);
|
Loading…
Reference in New Issue