完成目的地团量统计
Jimmy Liow
3 years ago
parent
5980f76fde
commit
12e37cc85c
@ -0,0 +1,142 @@
|
||||
import React, {useContext, useEffect} from 'react';
|
||||
import {Row, Col, Typography, Space, DatePicker, Button, Select, Table, List} from 'antd';
|
||||
import {
|
||||
SearchOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import {stores_Context} from '../config'
|
||||
import * as config from "../config";
|
||||
import {observer} from 'mobx-react';
|
||||
import { NavLink, useParams } from "react-router-dom";
|
||||
import 'moment/locale/zh-cn';
|
||||
import moment from "moment";
|
||||
import zhCNlocale from 'antd/es/date-picker/locale/zh_CN';
|
||||
|
||||
const DestinationGroupList = () => {
|
||||
|
||||
const {destinationId} = useParams();
|
||||
const { customerServicesStore } = useContext(stores_Context);
|
||||
|
||||
useEffect(() => {
|
||||
customerServicesStore.fetchGroupListByDestinationId(destinationId);
|
||||
}, []);
|
||||
|
||||
const destinationGroupList = customerServicesStore.destinationGroupList;
|
||||
const destinationGroupListColumns = customerServicesStore.destinationGroupListColumns;
|
||||
const {startDate, endDate, dateType, inProgress} = customerServicesStore;
|
||||
|
||||
return (
|
||||
<>
|
||||
<Space direction="vertical" style={{width: '100%'}}>
|
||||
<Row gutter={{md: 24}} justify="end">
|
||||
<Col span={8}>
|
||||
<NavLink to={'/agent/group/count'}>返回</NavLink>
|
||||
</Col>
|
||||
<Col span={4}>
|
||||
<Select
|
||||
style={{ width: "95%" }}
|
||||
value={customerServicesStore.selectedTeam}
|
||||
onChange={(value) => customerServicesStore.selectTeam(value)}
|
||||
>
|
||||
<Select.Option key="0" value="">所有小组</Select.Option>
|
||||
<Select.Option key="31" value="1,2,28,7">GH事业部</Select.Option>
|
||||
<Select.Option key="32" value="8,9,11,12,20,21">国际事业部</Select.Option>
|
||||
<Select.Option key="33" value="10,18,16,30">孵化学院</Select.Option>
|
||||
<Select.Option key="1" value="1">CH直销</Select.Option>
|
||||
<Select.Option key="2" value="2">CH大客户</Select.Option>
|
||||
<Select.Option key="28" value="28">AH</Select.Option>
|
||||
<Select.Option key="7" value="7">市场推广</Select.Option>
|
||||
<Select.Option key="8" value="8">德语</Select.Option>
|
||||
<Select.Option key="9" value="9">日语</Select.Option>
|
||||
<Select.Option key="11" value="11">法语</Select.Option>
|
||||
<Select.Option key="12" value="12">西语</Select.Option>
|
||||
<Select.Option key="20" value="20">俄语</Select.Option>
|
||||
<Select.Option key="21" value="21">意语</Select.Option>
|
||||
<Select.Option key="10" value="10">商旅</Select.Option>
|
||||
<Select.Option key="18" value="18">CT</Select.Option>
|
||||
<Select.Option key="16" value="16">APP</Select.Option>
|
||||
<Select.Option key="30" value="30">Trippest</Select.Option>
|
||||
<Select.Option key="31" value="31">花梨鹰</Select.Option>
|
||||
</Select>
|
||||
</Col>
|
||||
<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={inProgress}
|
||||
onClick={() => {
|
||||
customerServicesStore.fetchGroupListByDestinationId(destinationId);
|
||||
customerServicesStore.fetchDestinationGroupCount();
|
||||
}}>
|
||||
统计
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col span={24}>
|
||||
<Typography.Title level={3}>{customerServicesStore.agentCompany}</Typography.Title>
|
||||
<Table
|
||||
dataSource={destinationGroupList}
|
||||
columns={destinationGroupListColumns}
|
||||
size="small"
|
||||
rowKey={(record) => record.key}
|
||||
loading={inProgress}
|
||||
pagination={false}
|
||||
scroll={{ x: "100%" }}
|
||||
expandable={{
|
||||
expandedRowRender: (record) => (
|
||||
|
||||
<List
|
||||
itemLayout="horizontal"
|
||||
>
|
||||
<List.Item>
|
||||
<List.Item.Meta
|
||||
title='经过城市'
|
||||
description={record.PassCity}
|
||||
/>
|
||||
</List.Item>
|
||||
<List.Item>
|
||||
<List.Item.Meta
|
||||
title='评论内容'
|
||||
description={record.ECI_Content}
|
||||
/>
|
||||
</List.Item>
|
||||
</List>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</Space>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default observer(DestinationGroupList);
|
||||
Loading…
Reference in New Issue