You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
102 lines
4.1 KiB
JavaScript
102 lines
4.1 KiB
JavaScript
import React, {Component} from 'react';
|
|
import {Row, Col, List, Avatar, 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 locale from 'antd/es/date-picker/locale/zh_CN';
|
|
|
|
class AgentGroup extends Component {
|
|
|
|
static contextType = stores_Context;
|
|
constructor(props) {
|
|
super(props);
|
|
}
|
|
|
|
componentDidMount() {
|
|
console.info('AgentGroup.componentDidMount');
|
|
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;
|
|
|
|
return (
|
|
<>
|
|
<Row>
|
|
<Col md={24} lg={14} xxl={12}>
|
|
<Row>
|
|
<Col md={8} lg={7} xxl={6}>
|
|
<Select value={"ConfirmDate"} style={{ width: "95%" }} onChange={(value) => console.info(value)}>
|
|
<Select.Option key="1" value="ConfirmDate">
|
|
确认日期
|
|
</Select.Option>
|
|
<Select.Option key="2" value="applyDate">
|
|
下单日期
|
|
</Select.Option>
|
|
<Select.Option key="3" value="startDate">
|
|
走团日期
|
|
</Select.Option>
|
|
</Select>
|
|
</Col>
|
|
<Col span={8}>
|
|
<DatePicker.RangePicker
|
|
format={config.DATE_FORMAT} locale={locale}
|
|
allowClear={false}
|
|
value={[moment().startOf('week').subtract(7, 'days'), moment().endOf('week').subtract(7, 'days')]}
|
|
onChange={(dates) => {console.info(dates)}}
|
|
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 md={8} lg={5} xxl={8}>
|
|
<Button
|
|
type="primary"
|
|
icon={<SearchOutlined />}
|
|
loading={false}
|
|
onClick={() => {
|
|
console.info('click...');
|
|
}}>
|
|
统计
|
|
</Button>
|
|
</Col>
|
|
</Row>
|
|
</Col>
|
|
</Row>
|
|
<Row>
|
|
<Col span={24}>
|
|
<Table dataSource={agentList} columns={agentListColumns} size="small" rowKey={(record) => record.key} loading={false} pagination={false} scroll={{ x: "100%" }} />
|
|
</Col>
|
|
</Row>
|
|
<Row>
|
|
<Col span={24}>
|
|
<Table dataSource={groupList} columns={groupListColumns} size="small" rowKey={(record) => record.key} loading={false} pagination={false} scroll={{ x: "100%" }} />
|
|
</Col>
|
|
</Row>
|
|
</>
|
|
);
|
|
}
|
|
|
|
}
|
|
|
|
export default observer(AgentGroup); |