|
|
|
|
@ -1,142 +1,51 @@
|
|
|
|
|
import React, { useContext, useEffect } from 'react';
|
|
|
|
|
import { Row, Col, Typography, Space, DatePicker, Button, Select, Table, Divider } from 'antd';
|
|
|
|
|
import { SearchOutlined } from '@ant-design/icons';
|
|
|
|
|
import { useContext, useEffect } from 'react';
|
|
|
|
|
import { Row, Col, Typography, Space, Table, Divider } from 'antd';
|
|
|
|
|
import { stores_Context } from '../config';
|
|
|
|
|
import * as config from '../config';
|
|
|
|
|
import { observer } from 'mobx-react';
|
|
|
|
|
import 'moment/locale/zh-cn';
|
|
|
|
|
import moment from 'moment';
|
|
|
|
|
import zhCNlocale from 'antd/es/date-picker/locale/zh_CN';
|
|
|
|
|
import { utils, writeFileXLSX } from 'xlsx';
|
|
|
|
|
import GroupSelect from './../components/search/GroupSelect';
|
|
|
|
|
import SearchForm from './../components/search/SearchForm';
|
|
|
|
|
|
|
|
|
|
const AgentGroupCount = () => {
|
|
|
|
|
const { customerServicesStore } = useContext(stores_Context);
|
|
|
|
|
const agentList = customerServicesStore.agentList;
|
|
|
|
|
const { customerServicesStore, date_picker_store } = useContext(stores_Context);
|
|
|
|
|
const agentGroupList = customerServicesStore.agentGroupList;
|
|
|
|
|
const agentGroupListColumns = customerServicesStore.agentGroupListColumns;
|
|
|
|
|
const { startDate, endDate, dateType, inProgress } = customerServicesStore;
|
|
|
|
|
const { inProgress } = customerServicesStore;
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
customerServicesStore.fetchAllAgent();
|
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
|
|
const handleSearchClick = () => {
|
|
|
|
|
customerServicesStore.fetchAgentGroupCount();
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const renderAgentItem = (agent) => {
|
|
|
|
|
return (
|
|
|
|
|
<Select.Option key={agent.CAV_VEI_SN} value={agent.CAV_VEI_SN}>
|
|
|
|
|
{agent.VEI2_CompanyBN}
|
|
|
|
|
</Select.Option>
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<>
|
|
|
|
|
<Space direction="vertical" style={{ width: '100%' }}>
|
|
|
|
|
<Row gutter={{ sm: 16, lg: 32 }} justify="end">
|
|
|
|
|
<Col md={24} lg={8} xxl={8}>
|
|
|
|
|
<Select
|
|
|
|
|
value={customerServicesStore.selectedAgent}
|
|
|
|
|
style={{ width: '95%' }}
|
|
|
|
|
showSearch
|
|
|
|
|
onSearch={(value) => {
|
|
|
|
|
console.log('search:', value);
|
|
|
|
|
}}
|
|
|
|
|
filterOption={(input, option) => {
|
|
|
|
|
return option.children.indexOf(input) > -1;
|
|
|
|
|
}}
|
|
|
|
|
onChange={(value) => customerServicesStore.selectAgent(value)}
|
|
|
|
|
>
|
|
|
|
|
<Select.Option key="0" value="">
|
|
|
|
|
所有地接社
|
|
|
|
|
</Select.Option>
|
|
|
|
|
{agentList.map(renderAgentItem)}
|
|
|
|
|
</Select>
|
|
|
|
|
</Col>
|
|
|
|
|
<Col md={24} lg={8} xxl={8}>
|
|
|
|
|
<GroupSelect value={customerServicesStore.selectedTeam}
|
|
|
|
|
onChange={(value) => customerServicesStore.selectTeam(value)}
|
|
|
|
|
style={{ width: '95%' }} show_all={true}
|
|
|
|
|
/>
|
|
|
|
|
</Col>
|
|
|
|
|
<Col md={24} lg={8} xxl={8}>
|
|
|
|
|
<Select
|
|
|
|
|
value={customerServicesStore.selectedCountry}
|
|
|
|
|
style={{ width: '95%' }}
|
|
|
|
|
onChange={(value) => customerServicesStore.selectCountry(value)}
|
|
|
|
|
>
|
|
|
|
|
<Select.Option key="ALL" value="">
|
|
|
|
|
所有国家
|
|
|
|
|
</Select.Option>
|
|
|
|
|
<Select.Option key="china" value="china">
|
|
|
|
|
国内
|
|
|
|
|
</Select.Option>
|
|
|
|
|
<Select.Option key="foreign" value="foreign">
|
|
|
|
|
国外
|
|
|
|
|
</Select.Option>
|
|
|
|
|
</Select>
|
|
|
|
|
</Col>
|
|
|
|
|
<Col md={24} lg={8} xxl={8}>
|
|
|
|
|
<Select
|
|
|
|
|
value={dateType}
|
|
|
|
|
style={{ width: '95%' }}
|
|
|
|
|
onChange={(value) => customerServicesStore.selectDateType(value)}
|
|
|
|
|
>
|
|
|
|
|
<Select.Option key="startDate" value="startDate">
|
|
|
|
|
走团日期
|
|
|
|
|
</Select.Option>
|
|
|
|
|
<Select.Option key="ConfirmDate" value="ConfirmDate">
|
|
|
|
|
成团日期
|
|
|
|
|
</Select.Option>
|
|
|
|
|
</Select>
|
|
|
|
|
</Col>
|
|
|
|
|
<Col md={24} lg={8} xxl={8}>
|
|
|
|
|
<DatePicker.RangePicker
|
|
|
|
|
format={config.DATE_FORMAT}
|
|
|
|
|
locale={zhCNlocale}
|
|
|
|
|
allowClear={false}
|
|
|
|
|
value={[startDate, endDate]}
|
|
|
|
|
onChange={(dates) => {
|
|
|
|
|
customerServicesStore.selectDateRange(dates[0], dates[1]);
|
|
|
|
|
<Row gutter={16} style={{ margin: '-16px -8px', position: 'relative', top: 0, zIndex: 10 }}>
|
|
|
|
|
<Col className="gutter-row" span={24}>
|
|
|
|
|
<SearchForm
|
|
|
|
|
defaultValue={{
|
|
|
|
|
initialValue: {
|
|
|
|
|
...date_picker_store.formValues,
|
|
|
|
|
...customerServicesStore.searchValues,
|
|
|
|
|
},
|
|
|
|
|
shows: ['agency', 'DateType', 'DepartmentList', 'countryArea', 'dates'],
|
|
|
|
|
fieldProps: {
|
|
|
|
|
DepartmentList: { show_all: true },
|
|
|
|
|
WebCode: { show_all: false, mode: 'multiple' },
|
|
|
|
|
dates: { hide_vs: true },
|
|
|
|
|
},
|
|
|
|
|
}}
|
|
|
|
|
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'),
|
|
|
|
|
],
|
|
|
|
|
onSubmit={(_err, obj, form) => {
|
|
|
|
|
customerServicesStore.setSearchValues(obj, form);
|
|
|
|
|
customerServicesStore.fetchAgentGroupCount();
|
|
|
|
|
}}
|
|
|
|
|
/>
|
|
|
|
|
</Col>
|
|
|
|
|
<Col md={24} lg={8} xxl={8}>
|
|
|
|
|
<Button
|
|
|
|
|
type="primary"
|
|
|
|
|
icon={<SearchOutlined />}
|
|
|
|
|
loading={inProgress}
|
|
|
|
|
onClick={() => {
|
|
|
|
|
handleSearchClick();
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
统计
|
|
|
|
|
</Button>
|
|
|
|
|
</Col>
|
|
|
|
|
</Row>
|
|
|
|
|
<Row>
|
|
|
|
|
<Col span={24}>
|
|
|
|
|
<Typography.Title level={3}>地接社团信息</Typography.Title>
|
|
|
|
|
<Table sticky
|
|
|
|
|
<Table
|
|
|
|
|
sticky
|
|
|
|
|
id="agentGroupList"
|
|
|
|
|
dataSource={agentGroupList}
|
|
|
|
|
columns={agentGroupListColumns}
|
|
|
|
|
@ -149,9 +58,7 @@ const AgentGroupCount = () => {
|
|
|
|
|
<Divider orientation="right" plain>
|
|
|
|
|
<a
|
|
|
|
|
onClick={() => {
|
|
|
|
|
const wb = utils.table_to_book(
|
|
|
|
|
document.getElementById('agentGroupList').getElementsByTagName('table')[0]
|
|
|
|
|
);
|
|
|
|
|
const wb = utils.table_to_book(document.getElementById('agentGroupList').getElementsByTagName('table')[0]);
|
|
|
|
|
writeFileXLSX(wb, '地接社团信息.xlsx');
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
|
Lei OT
2 years ago