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.
185 lines
7.8 KiB
JavaScript
185 lines
7.8 KiB
JavaScript
import React, {useContext, useEffect} from 'react';
|
|
import {Row, Col, Button, Divider, Table, Space, Radio, Tooltip} from 'antd';
|
|
import {
|
|
ContainerOutlined,
|
|
SearchOutlined,
|
|
} from '@ant-design/icons';
|
|
import {stores_Context} from '../config'
|
|
import {Line} from "@ant-design/charts";
|
|
import {observer} from 'mobx-react';
|
|
import DatePickerCharts from '../charts/DatePickerCharts'
|
|
import {NavLink, useParams} from "react-router-dom";
|
|
import * as comm from "../utils/commons";
|
|
import * as config from "../config";
|
|
import SiteSelect from "../charts/SiteSelect";
|
|
import GroupSelect from "../charts/GroupSelect";
|
|
import {utils, writeFileXLSX} from "xlsx";
|
|
|
|
const Customer_care_potential = () => {
|
|
|
|
const {orders_store, date_picker_store, customer_store} = useContext(stores_Context);
|
|
const potential_data = customer_store.potential_data;
|
|
|
|
useEffect(() => {
|
|
|
|
}, [])
|
|
|
|
|
|
return (
|
|
<div>
|
|
<Row>
|
|
<Col span={8}>
|
|
<h2>潜力客户</h2>
|
|
</Col>
|
|
<Col span={15}>
|
|
<Row>
|
|
<Col span={6}>
|
|
<SiteSelect store={potential_data} show_all={true}/>
|
|
</Col>
|
|
<Col span={18}> <GroupSelect store={potential_data}/></Col>
|
|
<Col span={24}> <Space>
|
|
<DatePickerCharts hide_vs={true}/>
|
|
|
|
<Radio.Group value={potential_data.date_type}
|
|
onChange={potential_data.onChange_datetype}>
|
|
<Radio value="applyDate">预定日期</Radio>
|
|
<Radio value="startDate">出发日期</Radio>
|
|
<Radio value="ConfirmDate">确认日期</Radio>
|
|
</Radio.Group>
|
|
<Button type="primary" icon={<SearchOutlined/>} loading={potential_data.loading}
|
|
onClick={() => {
|
|
potential_data.potential_customer_order();
|
|
potential_data.potential_customer_order(true);
|
|
}}>统计</Button>
|
|
</Space>
|
|
</Col>
|
|
</Row>
|
|
</Col>
|
|
<Col span={1}></Col>
|
|
<Col span={24}>
|
|
<Table dataSource={potential_data.data} columns={
|
|
[
|
|
{
|
|
title: '订单数',
|
|
dataIndex: 'OrderNum',
|
|
key: 'OrderNum',
|
|
},
|
|
{
|
|
title: '成行数',
|
|
dataIndex: 'SUCOrderNum',
|
|
key: 'SUCOrderNum',
|
|
},
|
|
{
|
|
title: '成行率',
|
|
dataIndex: 'SUCRate',
|
|
key: 'SUCRate',
|
|
render: (text, record) => <span>{Math.round(text * 100)}%</span>
|
|
},
|
|
{
|
|
title: '毛利',
|
|
dataIndex: 'ML',
|
|
key: 'ML',
|
|
},
|
|
{
|
|
title: '人数（含成人+儿童）',
|
|
dataIndex: 'PersonNum',
|
|
key: 'PersonNum',
|
|
},
|
|
]
|
|
} size="small" pagination={false} rowKey={record => record.OrderNum}
|
|
/>
|
|
</Col>
|
|
<Col span={24}>
|
|
<Divider orientation="right" plain><a
|
|
onClick={() => {
|
|
const wb = utils.table_to_book(document.getElementById("table_to_xlsx").getElementsByTagName('table')[0]);
|
|
writeFileXLSX(wb, "潜力客户.xlsx");
|
|
}}>导出excel</a></Divider>
|
|
<Table id="table_to_xlsx" pagination={false} dataSource={potential_data.data_detail} columns={
|
|
[
|
|
{
|
|
title: '订单号',
|
|
dataIndex: 'COLI_ID',
|
|
key: 'COLI_ID',
|
|
},
|
|
{
|
|
title: '预定日期',
|
|
dataIndex: 'COLI_ApplyDate',
|
|
key: 'COLI_ApplyDate',
|
|
},
|
|
{
|
|
title: '订单状态',
|
|
dataIndex: 'OrderState',
|
|
key: 'OrderState',
|
|
render: (text, record) => <span>{text == 1 ? '成行' : '未成行'}</span>,
|
|
sorter: (a, b) => b.OrderState - a.OrderState,
|
|
},
|
|
{
|
|
title: '毛利',
|
|
dataIndex: 'ML',
|
|
key: 'ML',
|
|
},
|
|
{
|
|
title: '人数',
|
|
dataIndex: 'PersonNum',
|
|
key: 'PersonNum',
|
|
},
|
|
{
|
|
title: '天数',
|
|
dataIndex: 'COLI_Days',
|
|
key: 'COLI_Days',
|
|
},
|
|
{
|
|
title: '人天数',
|
|
dataIndex: 'CGI_PersonDays',
|
|
key: 'CGI_PersonDays',
|
|
},
|
|
{
|
|
title: '走团日期',
|
|
dataIndex: 'COLI_OrderStartDate',
|
|
key: 'COLI_OrderStartDate',
|
|
},
|
|
{
|
|
title: '小组',
|
|
dataIndex: 'Department',
|
|
key: 'Department',
|
|
},
|
|
{
|
|
title: '老客户',
|
|
dataIndex: 'COLI_IsOld',
|
|
key: 'COLI_IsOld',
|
|
},
|
|
{
|
|
title: '老客户推荐',
|
|
dataIndex: 'COLI_IsCusCommend',
|
|
key: 'COLI_IsCusCommend',
|
|
},
|
|
{
|
|
title: '网站',
|
|
dataIndex: 'COLI_WebCode',
|
|
key: 'COLI_WebCode',
|
|
},
|
|
{
|
|
title: '来源',
|
|
dataIndex: 'SourceType',
|
|
key: 'SourceType',
|
|
},
|
|
{
|
|
title: '在华',
|
|
dataIndex: 'ZH',
|
|
key: 'ZH',
|
|
},
|
|
]
|
|
} size="small"
|
|
rowKey={record => record.COLI_ID}
|
|
/>
|
|
</Col>
|
|
</Row>
|
|
|
|
</div>
|
|
);
|
|
|
|
}
|
|
export default observer(Customer_care_potential);
|
|
|