Merge branch 'main' of github.com:hainatravel/dashboard into main

feature/2.0-sales-trade
尹诚诚 2 years ago
commit 36822ee105

@ -13,8 +13,10 @@ import Customer_care_potential from "./charts/Customer_care_potential";
import Customer_care_regular from "./charts/Customer_care_regular"; import Customer_care_regular from "./charts/Customer_care_regular";
import Wechat_session from "./charts/Wechat_session"; import Wechat_session from "./charts/Wechat_session";
import WhatsApp_session from "./charts/WhatsApp_session"; import WhatsApp_session from "./charts/WhatsApp_session";
import AgentList from "./views/AgentList"; import AgentGroupCount from "./views/AgentGroupCount";
import GroupList from "./views/GroupList"; import AgentGroupList from "./views/AgentGroupList";
import DestinationGroupCount from "./views/DestinationGroupCount";
import DestinationGroupList from "./views/DestinationGroupList";
import Credit_card_bill from "./views/Credit_card_bill"; import Credit_card_bill from "./views/Credit_card_bill";
import exchange_rate from "./charts/ExchangeRate"; import exchange_rate from "./charts/ExchangeRate";
import Sale from "./views/Sale"; import Sale from "./views/Sale";
@ -71,7 +73,8 @@ const App = () => {
label: "客服", label: "客服",
icon: <WechatOutlined />, icon: <WechatOutlined />,
children: [ children: [
{ key: 61, label: <NavLink to="/agentlist">地接社接团</NavLink> }, { key: 61, label: <NavLink to="/agent/group/count">地接社接团</NavLink> },
{ key: 62, label: <NavLink to="/destination/group/count">目的地接团</NavLink> },
], ],
} }
]; ];
@ -105,8 +108,10 @@ const App = () => {
<Route path="/customer_care_potential" element={<Customer_care_potential />} /> <Route path="/customer_care_potential" element={<Customer_care_potential />} />
<Route path="/whatsapp_session" element={<WhatsApp_session />} /> <Route path="/whatsapp_session" element={<WhatsApp_session />} />
<Route path="/wechat_session" element={<Wechat_session />} /> <Route path="/wechat_session" element={<Wechat_session />} />
<Route path="/agentlist" element={<AgentList />} /> <Route path="/agent/group/count" element={<AgentGroupCount />} />
<Route path="/grouplist/:agentId" element={<GroupList />} /> <Route path="/destination/group/count" element={<DestinationGroupCount />} />
<Route path="/agent/:agentId/group/list" element={<AgentGroupList />} />
<Route path="/destination/:destinationId/group/list" element={<DestinationGroupList />} />
</Route> </Route>
<Route element={<ProtectedRoute auth={["admin", "director_bu", "financial"]} />}> <Route element={<ProtectedRoute auth={["admin", "director_bu", "financial"]} />}>
<Route path="/credit_card_bill" element={<Credit_card_bill />} /> <Route path="/credit_card_bill" element={<Credit_card_bill />} />

@ -3,6 +3,7 @@ import moment from "moment";
import { NavLink } from "react-router-dom"; import { NavLink } from "react-router-dom";
import * as config from "../config"; import * as config from "../config";
import * as req from '../utils/request'; import * as req from '../utils/request';
import { prepareUrl } from '../utils/commons';
class CustomerServices { class CustomerServices {
@ -14,26 +15,53 @@ class CustomerServices {
this.endDateString = this.endDate.format(config.DATE_FORMAT) + '%2023:59'; this.endDateString = this.endDate.format(config.DATE_FORMAT) + '%2023:59';
this.dateType = 'startDate'; this.dateType = 'startDate';
this.inProgress = false; this.inProgress = false;
this.selectedAgent = {VendorName: '请选择地接社'}; this.selectedAgent = '';
this.selectedTeam = '';
this.selectedCountry = '';
makeAutoObservable(this); makeAutoObservable(this);
} }
fetchAgentList() { fetchAllAgent() {
this.inProgress = true; this.inProgress = true;
req.fetchJSON(config.HT_HOST + '/service-web/QueryData/GetAgentGroupInfoALL?DateType=' + this.dateType + '&Date1=' + this.startDateString + '&Date2=' + this.endDateString + '&OldDate1=' + this.startDateString + '&OldDate2=' + this.endDateString) req.fetchJSON(config.HT_HOST + '/service-web/QueryData/GetVEIName')
.then(json => { .then(json => {
if (json.errcode === 0) { if (json.errcode === 0) {
runInAction(() => { runInAction(() => {
this.agentList = json.result1; this.agentList = json.result1;
});
}
})
.then(() => {
this.inProgress = false;
});
}
fetchAgentGroupCount() {
this.inProgress = true;
const fetchUrl = prepareUrl(config.HT_HOST + '/service-web/QueryData/GetAgentGroupInfoALL')
.append('DateType', this.dateType)
.append('Date1', this.startDateString)
.append('Date2', this.endDateString)
.append('OldDate1', this.startDateString)
.append('OldDate2', this.endDateString)
.append('VEI_SN', this.selectedAgent)
.append('DepList', this.selectedTeam)
.append('Country', this.selectedCountry)
.build();
req.fetchJSON(fetchUrl)
.then(json => {
if (json.errcode === 0) {
runInAction(() => {
this.agentGroupList = json.result1;
const total1 = json.total1; const total1 = json.total1;
this.agentListColumns = [ this.agentGroupListColumns = [
{ {
title: '地接社名称', title: '地接社名称',
dataIndex: 'VendorName', dataIndex: 'VendorName',
children: [{ children: [{
// title: this.startDate.format(config.DATE_FORMAT) + '~' + this.endDate.format(config.DATE_FORMAT), // title: this.startDate.format(config.DATE_FORMAT) + '~' + this.endDate.format(config.DATE_FORMAT),
dataIndex: 'VendorName', dataIndex: 'VendorName',
render: (text, record) => <NavLink to={`/grouplist/${record.EOI_ObjSN}`}>{record.VendorName}</NavLink> render: (text, record) => <NavLink to={`/agent/${record.EOI_ObjSN}/group/list`}>{record.VendorName}</NavLink>
} }
] ]
}, },
@ -77,6 +105,16 @@ class CustomerServices {
} }
] ]
}, },
{
title: '前勤分',
dataIndex: 'qianqin',
sorter: (a, b) => a.qianqin - b.qianqin,
children: [{
title: total1.qianqin,
dataIndex: 'qianqin'
}
]
},
{ {
title: '好评数', title: '好评数',
dataIndex: 'GoodCount', dataIndex: 'GoodCount',
@ -128,16 +166,25 @@ class CustomerServices {
fetchGroupListByAgentId(agentId) { fetchGroupListByAgentId(agentId) {
this.inProgress = true; this.inProgress = true;
this.selectedAgent = {VendorName: '...'}; this.agentCompany = '...';
this.groupList = []; this.groupList = [];
this.groupListColumns = []; this.groupListColumns = [];
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) const fetchUrl = prepareUrl(config.HT_HOST + '/service-web/QueryData/GetAgentGroupInfo')
.append('VEI_SN', agentId)
.append('DateType', this.dateType)
.append('Date1', this.startDateString)
.append('Date2', this.endDateString)
.append('OldDate1', this.startDateString)
.append('OldDate2', this.endDateString)
.append('DepList', this.selectedTeam)
.build();
req.fetchJSON(fetchUrl)
.then(json => { .then(json => {
if (json.errcode === 0) { if (json.errcode === 0) {
runInAction(() => { runInAction(() => {
this.groupList = json.result1; this.groupList = json.result1;
if (json.result1.length > 0) { if (json.result1.length > 0) {
this.selectedAgent = {VendorName: json.result1[0].VendorName}; this.agentCompany = json.result1[0].VendorName;
} }
const total1 = json.total1; const total1 = json.total1;
this.groupListColumns = [ this.groupListColumns = [
@ -181,20 +228,20 @@ class CustomerServices {
] ]
}, },
{ {
title: '经过城市', title: '导游',
dataIndex: 'PassCity', dataIndex: 'GuideName',
children: [{ children: [{
title: '-', title: '-',
dataIndex: 'PassCity' dataIndex: 'GuideName'
} }
] ]
}, },
{ {
title: '导游', title: '前勤分',
dataIndex: 'GuideName', dataIndex: 'qianqin',
children: [{ children: [{
title: '-', title: total1.qianqin,
dataIndex: 'GuideName' dataIndex: 'qianqin'
} }
] ]
}, },
@ -217,13 +264,171 @@ class CustomerServices {
dataIndex: 'Bad' dataIndex: 'Bad'
} }
] ]
}
];
});
}
})
.then(() => {
this.inProgress = false;
});
}
fetchDestinationGroupCount() {
this.inProgress = true;
const fetchUrl = prepareUrl(config.HT_HOST + '/service-web/QueryData/GetdistGroupInfoAll')
.append('DateType', this.dateType)
.append('Date1', this.startDateString)
.append('Date2', this.endDateString)
.append('OldDate1', this.startDateString)
.append('OldDate2', this.endDateString)
.append('DepList', this.selectedTeam)
.append('Country', this.selectedCountry)
.build();
req.fetchJSON(fetchUrl)
.then(json => {
if (json.errcode === 0) {
runInAction(() => {
this.destinationGroupCount = json.result1;
const total1 = json.total1;
this.destinationGroupCountColumns = [
{
title: '城市',
dataIndex: 'COLD_ServiceCityName',
children: [{
dataIndex: 'COLD_ServiceCityName',
render: (text, record) => <NavLink to={`/destination/${record.COLD_ServiceCity}/group/list`}>{record.COLD_ServiceCityName}</NavLink>
}
]
},
{
title: '团数',
dataIndex: 'GroupCount',
sorter: (a, b) => a.GroupCount - b.GroupCount,
children: [{
title: total1.GroupCount,
dataIndex: 'GroupCount'
}
]
},
{
title: '人数',
dataIndex: 'PersonNum',
sorter: (a, b) => a.PersonNum - b.PersonNum,
children: [{
title: total1.PersonNum,
dataIndex: 'PersonNum'
}
]
}, },
{ {
title: '评论内容', title: '团天数',
dataIndex: 'ECI_Content', dataIndex: 'GroupDays',
sorter: (a, b) => a.GroupDays - b.GroupDays,
children: [{
title: total1.GroupDays,
dataIndex: 'GroupDays'
}
]
},
{
title: '交易额',
dataIndex: 'TotalCost',
sorter: (a, b) => a.TotalCost - b.TotalCost,
children: [{
title: total1.totalcost,
dataIndex: 'TotalCost'
}
]
}
];
});
}
})
.then(() => {
this.inProgress = false;
});
}
fetchGroupListByDestinationId(destinationId) {
this.inProgress = true;
this.destinationName = '...';
this.destinationGroupList = [];
this.destinationGroupListColumns = [];
const fetchUrl = prepareUrl(config.HT_HOST + '/service-web/QueryData/GetdistGroupInfo')
.append('city', destinationId)
.append('DateType', this.dateType)
.append('Date1', this.startDateString)
.append('Date2', this.endDateString)
.append('OldDate1', this.startDateString)
.append('OldDate2', this.endDateString)
.append('DepList', this.selectedTeam)
.append('Country', this.selectedCountry)
.build();
req.fetchJSON(fetchUrl)
.then(json => {
if (json.errcode === 0) {
runInAction(() => {
this.destinationGroupList = json.result1;
if (json.result1.length > 0) {
// this.destinationName = json.result1[0].VendorName;
}
const total1 = json.total1;
this.destinationGroupListColumns = [
{
title: '团名',
dataIndex: 'GRI_Name',
children: [{
title: '',
dataIndex: 'GRI_Name'
}
]
},
{
title: '人数',
dataIndex: 'COLI_PersonNum',
sorter: (a, b) => a.COLI_PersonNum - b.COLI_PersonNum,
children: [{
title: total1.COLI_PersonNum,
dataIndex: 'COLI_PersonNum'
}
]
},
{
title: '天数',
dataIndex: 'COLI_Days',
sorter: (a, b) => a.COLI_Days - b.COLI_Days,
children: [{
title: total1.COLI_Days,
dataIndex: 'COLI_Days'
}
]
},
{
title: '交易额',
dataIndex: 'COLD_TotalCost',
sorter: (a, b) => a.COLD_TotalCost - b.COLD_TotalCost,
children: [{
title: total1.COLD_TotalCost,
dataIndex: 'COLD_TotalCost'
}
]
},
{
title: '确认日期',
dataIndex: 'COLI_ConfirmDate',
children: [{ children: [{
title: '-', title: '-',
dataIndex: 'ECI_Content' dataIndex: 'COLI_ConfirmDate'
}
]
},
{
title: '出发日期',
dataIndex: 'COLI_OrderStartDate',
children: [{
title: '-',
dataIndex: 'COLI_OrderStartDate'
} }
] ]
} }
@ -249,7 +454,14 @@ class CustomerServices {
selectAgent(agent) { selectAgent(agent) {
this.selectedAgent = agent; this.selectedAgent = agent;
this.fetchGroupListByAgent(); }
selectTeam(team) {
this.selectedTeam = team;
}
selectCountry(country) {
this.selectedCountry = country;
} }
startDate; startDate;
@ -258,13 +470,20 @@ class CustomerServices {
endDateString; endDateString;
dateType; dateType;
selectedAgent; selectedAgent;
selectedTeam;
selectedCountry;
inProgress; inProgress;
agentList = [];
groupList = []; groupList = [];
groupListColumns = []; groupListColumns = [];
agentList = [{ destinationGroupCount = [];
destinationGroupCountColumns =[];
agentGroupList = [{
EOI_ObjSN: 1, EOI_ObjSN: 1,
VendorName: '---', VendorName: '---',
GroupCount: 0, GroupCount: 0,
@ -278,7 +497,7 @@ class CustomerServices {
key: 1 key: 1
}]; }];
agentListColumns = [ agentGroupListColumns = [
{ {
title: '地接社名称', title: '地接社名称',
dataIndex: 'VendorName', dataIndex: 'VendorName',

@ -0,0 +1,167 @@
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 { 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";
const AgentGroupCount = () => {
const {customerServicesStore} = useContext(stores_Context);
const agentList = customerServicesStore.agentList;
const agentGroupList = customerServicesStore.agentGroupList;
const agentGroupListColumns = customerServicesStore.agentGroupListColumns;
const {startDate, endDate, dateType, 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={{ md: 24 }} justify="end">
<Col span={4}>
<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 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={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 span={4}>
<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 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={() => {
handleSearchClick();
}}>
统计
</Button>
</Col>
</Row>
<Row>
<Col span={24}>
<Typography.Title level={3}>地接社团信息</Typography.Title>
<Table
id="agentGroupList"
dataSource={agentGroupList}
columns={agentGroupListColumns}
size="small"
rowKey={(record) => record.key}
loading={inProgress}
pagination={false}
scroll={{ x: "100%" }}
/>
<Divider orientation="right" plain>
<a
onClick={() => {
const wb = utils.table_to_book(document.getElementById("agentGroupList").getElementsByTagName("table")[0]);
writeFileXLSX(wb, "地接社团信息.xlsx");
}}>
导出excel
</a>
</Divider>
</Col>
</Row>
</Space>
</>
);
}
export default observer(AgentGroupCount);

@ -1,5 +1,5 @@
import React, {useContext, useEffect} from 'react'; import React, {useContext, useEffect} from 'react';
import {Row, Col, Typography, Space, DatePicker, Button, Select, Table} from 'antd'; import {Row, Col, Typography, Space, DatePicker, Button, Select, Table, List} from 'antd';
import { import {
SearchOutlined, SearchOutlined,
} from '@ant-design/icons'; } from '@ant-design/icons';
@ -11,7 +11,7 @@ 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';
const GroupList = () => { const AgentGroupList = () => {
const {agentId} = useParams(); const {agentId} = useParams();
const { customerServicesStore } = useContext(stores_Context); const { customerServicesStore } = useContext(stores_Context);
@ -28,8 +28,35 @@ const GroupList = () => {
<> <>
<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={12}> <Col span={8}>
<NavLink to={'/agentlist'}>返回</NavLink> <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>
<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)}>
@ -66,7 +93,7 @@ const GroupList = () => {
loading={inProgress} loading={inProgress}
onClick={() => { onClick={() => {
customerServicesStore.fetchGroupListByAgentId(agentId); customerServicesStore.fetchGroupListByAgentId(agentId);
customerServicesStore.fetchAgentList(); customerServicesStore.fetchAgentGroupList();
}}> }}>
统计 统计
</Button> </Button>
@ -74,8 +101,37 @@ const GroupList = () => {
</Row> </Row>
<Row> <Row>
<Col span={24}> <Col span={24}>
<Typography.Title level={3}>{customerServicesStore.selectedAgent.VendorName}</Typography.Title> <Typography.Title level={3}>{customerServicesStore.agentCompany}</Typography.Title>
<Table dataSource={groupList} columns={groupListColumns} size="small" rowKey={(record) => record.key} loading={inProgress} pagination={false} scroll={{ x: "100%" }} /> <Table
dataSource={groupList}
columns={groupListColumns}
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> </Col>
</Row> </Row>
</Space> </Space>
@ -83,4 +139,4 @@ const GroupList = () => {
); );
} }
export default observer(GroupList); export default observer(AgentGroupList);

@ -1,87 +0,0 @@
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 * 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';
const AgentList = () => {
const {customerServicesStore} = useContext(stores_Context);
const agentList = customerServicesStore.agentList;
const agentListColumns = customerServicesStore.agentListColumns;
const {startDate, endDate, dateType, inProgress} = 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={inProgress}
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={inProgress}
pagination={false}
scroll={{ x: "100%" }}
/>
</Col>
</Row>
</Space>
</>
);
}
export default observer(AgentList);

@ -0,0 +1,139 @@
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 { 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";
const DestinationGroupCount = () => {
const {customerServicesStore} = useContext(stores_Context);
const destinationGroupCount = customerServicesStore.destinationGroupCount;
const destinationGroupCountColumns = customerServicesStore.destinationGroupCountColumns;
const {startDate, endDate, dateType, inProgress} = customerServicesStore;
useEffect(() => {
customerServicesStore.selectCountry('china');
}, []);
const handleSearchClick = () => {
customerServicesStore.fetchDestinationGroupCount();
}
return (
<>
<Space direction="vertical" style={{ width: '100%' }}>
<Row gutter={{ md: 24 }} justify="end">
<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={customerServicesStore.selectedCountry} style={{ width: "95%" }} onChange={(value) => customerServicesStore.selectCountry(value)}>
<Select.Option key="china" value="china">
国内
</Select.Option>
<Select.Option key="foreign" value="foreign">
国外
</Select.Option>
</Select>
</Col>
<Col span={4}>
<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 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={() => {
handleSearchClick();
}}>
统计
</Button>
</Col>
</Row>
<Row>
<Col span={24}>
<Typography.Title level={3}>目的地团信息</Typography.Title>
<Table
id="destinationGroupCount"
dataSource={destinationGroupCount}
columns={destinationGroupCountColumns}
size="small"
rowKey={(record) => record.key}
loading={inProgress}
pagination={false}
scroll={{ x: "100%" }}
/>
<Divider orientation="right" plain>
<a
onClick={() => {
const wb = utils.table_to_book(document.getElementById("destinationGroupCount").getElementsByTagName("table")[0]);
writeFileXLSX(wb, "目的地团信息.xlsx");
}}>
导出excel
</a>
</Divider>
</Col>
</Row>
</Space>
</>
);
}
export default observer(DestinationGroupCount);

@ -0,0 +1,141 @@
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={'/destination/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}>
<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.VendorList}
/>
</List.Item>
</List>
),
}}
/>
</Col>
</Row>
</Space>
</>
);
}
export default observer(DestinationGroupList);
Loading…
Cancel
Save