Haina
/
dashboard
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

perf: 应用搜索组件: 客运, 订单

Browse Source
feature/pivot
Lei OT 2 years ago
parent 077b3b3108
commit e8e4efe796
11 changed files with 151 additions and 203 deletions
Show Stats Download Patch File Download Diff File

69
src/charts/Customer_care_inchina.jsx
Unescape Escape View File

@ -1,19 +1,9 @@
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 {Row, Col, Divider, Table} from 'antd';
import {stores_Context} from '../config';
import {Line} from "@ant-design/charts";
import {observer} from 'mobx-react';
import DatePickerCharts from '../components/search/DatePickerCharts';
import {NavLink, useParams} from "react-router-dom";
import * as comm from "../utils/commons";
import * as config from "../config";
import SiteSelect from "../components/search/SiteSelect";
import GroupSelect from "../components/search/GroupSelect";
import {utils, writeFileXLSX} from "xlsx";
import SearchForm from './../components/search/SearchForm';
const Customer_care_inchina = () => {
@ -27,38 +17,33 @@ const Customer_care_inchina = () => {
return (
<div>
<Row>
<Col span={8}>
<h2>在华客人</h2>
</Col>
<Col span={15}>
<Row>
<Col span={6}>
<SiteSelect store={inchina_data} show_all={true}/>
</Col>
<Col span={18}> <GroupSelect store={inchina_data}/></Col>
<Col span={24}> <Space>
<DatePickerCharts hide_vs={true}/>
<Radio.Group value={inchina_data.date_type}
onChange={inchina_data.onChange_datetype}>
<Radio value="applyDate">提交日期</Radio>
<Radio value="startDate">出发日期</Radio>
<Radio value="ConfirmDate">确认日期</Radio>
</Radio.Group>
<Button type="primary" icon={<SearchOutlined/>} loading={inchina_data.loading}
onClick={() => {
inchina_data.inchina_customer_order();
inchina_data.inchina_customer_order(true);
}}>统计</Button>
</Space>
<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,
...inchina_data.searchValues,
},
shows: ['DateType', 'DepartmentList', 'WebCode', 'dates'],
fieldProps: {
DepartmentList: { show_all: false, mode: 'multiple' },
WebCode: { show_all: false, mode: 'multiple' },
dates: { hide_vs: true },
},
}}
onSubmit={(_err, obj, form, str) => {
customer_store.setSearchValues(obj, form, 'inchina_data');
customer_store.inchina_customer_order();
customer_store.inchina_customer_order(true);
}}
/>
</Col>
</Row>
<Col span={24}>
<h2>在华客人</h2>
</Col>
<Col span={1}></Col>
<Col span={24}>
<Table dataSource={inchina_data.data} columns={
<Table dataSource={inchina_data.data} loading={inchina_data.loading} columns={
[
{
title: '统计条目',
@ -101,7 +86,7 @@ const Customer_care_inchina = () => {
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={inchina_data.data_detail} columns={
<Table id="table_to_xlsx" pagination={false} loading={inchina_data.loading} dataSource={inchina_data.data_detail} columns={
[
{
title: '订单号',

70
src/charts/Customer_care_potential.jsx
Unescape Escape View File

@ -1,19 +1,9 @@
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 {Row, Col, Divider, Table} from 'antd';
import {stores_Context} from '../config';
import {Line} from "@ant-design/charts";
import {observer} from 'mobx-react';
import DatePickerCharts from '../components/search/DatePickerCharts';
import {NavLink, useParams} from "react-router-dom";
import * as comm from "../utils/commons";
import * as config from "../config";
import SiteSelect from "../components/search/SiteSelect";
import GroupSelect from "../components/search/GroupSelect";
import {utils, writeFileXLSX} from "xlsx";
import SearchForm from './../components/search/SearchForm';
const Customer_care_potential = () => {
@ -21,43 +11,39 @@ const Customer_care_potential = () => {
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>
<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,
...potential_data.searchValues,
},
shows: ['DateType', 'DepartmentList', 'WebCode', 'dates'],
fieldProps: {
DepartmentList: { show_all: false, mode: 'multiple' },
WebCode: { show_all: true, mode: 'multiple' },
dates: { hide_vs: true },
},
}}
onSubmit={(_err, obj, form, str) => {
customer_store.setSearchValues(obj, form, 'potential_data');
customer_store.potential_customer_order();
customer_store.potential_customer_order(true);
}}
/>
</Col>
</Row>
<Col span={24}>
<h2>潜力客户</h2>
</Col>
<Col span={1}></Col>
{/* <Col span={1}></Col> */}
<Col span={24}>
<Table dataSource={potential_data.data} columns={
<Table dataSource={potential_data.data} loading={potential_data.loading} columns={
[
{
title: '订单数',
@ -95,7 +81,7 @@ const Customer_care_potential = () => {
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={
<Table id="table_to_xlsx" pagination={false} loading={potential_data.loading} dataSource={potential_data.data_detail} columns={
[
{
title: '订单号',

70
src/charts/Customer_care_regular.jsx
Unescape Escape View File

@ -1,19 +1,9 @@
import React, {useContext, useEffect} from 'react';
import {Row, Col, Button, Divider, Table, Space, Radio, Tooltip} from 'antd';
import {read, utils, writeFileXLSX} from 'xlsx';
import {
ContainerOutlined,
SearchOutlined,
} from '@ant-design/icons';
import {Row, Col, Divider, Table} from 'antd';
import {utils, writeFileXLSX} from 'xlsx';
import {stores_Context} from '../config';
import {Line} from "@ant-design/charts";
import {observer} from 'mobx-react';
import DatePickerCharts from '../components/search/DatePickerCharts';
import {NavLink, useParams} from "react-router-dom";
import * as comm from "../utils/commons";
import * as config from "../config";
import SiteSelect from "../components/search/SiteSelect";
import GroupSelect from "../components/search/GroupSelect";
import SearchForm from './../components/search/SearchForm';
const Customer_care_regular = () => {
@ -27,37 +17,33 @@ const Customer_care_regular = () => {
return (
<div>
<Row>
<Col span={8}>
<h2>老客户</h2>
</Col>
<Col span={15}>
<Row>
<Col span={6}>
<SiteSelect store={regular_data} show_all={true}/>
</Col>
<Col span={18}> <GroupSelect store={regular_data}/></Col>
<Col span={24}> <Space>
<DatePickerCharts hide_vs={true}/>
<Radio.Group value={regular_data.date_type}
onChange={regular_data.onChange_datetype}>
<Radio value="applyDate">预定日期</Radio>
<Radio value="startDate">出发日期</Radio>
<Radio value="ConfirmDate">确认日期</Radio>
</Radio.Group>
<Button type="primary" icon={<SearchOutlined/>} loading={regular_data.loading}
onClick={() => {
regular_data.regular_customer_order();
regular_data.regular_customer_order(true);
}}>统计</Button>
</Space>
<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,
...regular_data.searchValues,
},
shows: ['DateType', 'DepartmentList', 'WebCode', 'dates'],
fieldProps: {
DepartmentList: { show_all: false, mode: 'multiple' },
WebCode: { show_all: false, mode: 'multiple' },
dates: { hide_vs: true },
},
}}
onSubmit={(_err, obj, form, str) => {
customer_store.setSearchValues(obj, form, 'regular_data');
customer_store.regular_customer_order();
customer_store.regular_customer_order(true);
}}
/>
</Col>
</Row>
<Col span={24}>
<h2>老客户</h2>
</Col>
<Col span={1}></Col>
<Col span={24}>
<Table dataSource={regular_data.data} columns={
<Table dataSource={regular_data.data} loading={regular_data.loading} columns={
[
{
title: '统计条目',
@ -100,7 +86,7 @@ const Customer_care_regular = () => {
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={regular_data.data_detail} columns={
<Table id="table_to_xlsx" pagination={false} loading={regular_data.loading} dataSource={regular_data.data_detail} columns={
[
{
title: '订单号',

8
src/charts/Orders.jsx
Unescape Escape View File

@ -1,16 +1,10 @@
import React, { Component } from 'react';
import { Row, Col, Button, Tabs, Table, Space } from 'antd';
import { Button, Space } from 'antd';
import {
ContainerOutlined,
CarryOutOutlined,
SmileOutlined,
TagsOutlined,
GlobalOutlined,
SearchOutlined,
} from '@ant-design/icons';
import { stores_Context } from '../config';
import { Line } from '@ant-design/charts';
import SiteSelect from '../components/search/SiteSelect';
import { observer } from 'mobx-react';
import DatePickerCharts from '../components/search/DatePickerCharts';
import DateGroupRadio from '../components/DateGroupRadio';

4
src/components/search/SearchForm.jsx
Unescape Escape View File

@ -14,7 +14,7 @@ import DateTypeSelect from './DataTypeSelect';
import DatePickerCharts from './DatePickerCharts';
import YearPickerCharts from './YearPickerCharts';
import SearchInput from './Input';
import { objectMapper, at, empty } from './../../utils/commons';
import { objectMapper, at, empty, isEmpty } from './../../utils/commons';
import './search.css';
@ -76,7 +76,7 @@ export default observer((props) => {
'WebCode': {
key: 'WebCode',
transform: (value) => {
return Array.isArray(value) ? value.map((ele) => ele.key).join(',') : value ? value.key : '';
return isEmpty(value) ? 'ALL': Array.isArray(value) ? value.map((ele) => ele.key).filter(ele => ele !== 'ALL').join(',') : value ? value.key : '';
},
default: '',
},

7
src/components/search/SiteSelect.jsx
Unescape Escape View File

@ -13,13 +13,14 @@ class SiteSelect extends Component {
const { store, mode, value, onChange, show_all, ...extProps } = this.props;
const _mode = mode || store?.group_select_mode || null;
const _show_all = ['tags', 'multiple'].includes(_mode) ? false : show_all;
const _value = !['tags', 'multiple'].includes(_mode) ? (value || store?.webcode || undefined) : (value || store?.webcode || []).filter(item => item.value !== 'ALL');
return (
<div>
<Select
mode={_mode}
style={{width: '100%'}}
placeholder="选择来源"
defaultValue={value || store?.webcode || undefined }
value={_value}
onChange={(value) => {
if (typeof onChange === 'function') {
onChange(value);
@ -28,12 +29,12 @@ class SiteSelect extends Component {
}}
labelInValue={false}
maxTagCount={1}
maxTagPlaceholder={(omittedValues) => ` + ${omittedValues.length} 更多...`}
maxTagPlaceholder={(omittedValues) => ` +${omittedValues.length}...`}
allowClear={_mode != null}
{...extProps}
>
{_show_all===true ? <Select.Option key="ALL" value="ALL">所有来源</Select.Option> : ''}
{sites.map(ele => <Select.Option key={ele.key} value={ele.code}>{ele.label}</Select.Option>)}
{sites.map(ele => <Select.Option key={ele.code} value={ele.code}>{ele.label}</Select.Option>)}
</Select>
</div>
);

2
src/libs/ht.js
Unescape Escape View File

@ -57,6 +57,7 @@ export const groups = [
{ value: '31', key: '31', label: '花梨鹰', code: '', children: [] },
];
export const groupsMappedByCode = groups.reduce((a, c) => ({ ...a, [String(c.code || c.key)]: c }), {});
export const groupsMappedByKey = groups.reduce((a, c) => ({ ...a, [String(c.key)]: c }), {});
export const leafGroup = groups.slice(3);
export const overviewGroup = groups.slice(0, 3); // todo: 花梨鹰 APP Trippest
/**
@ -87,6 +88,7 @@ export const sites = [
{ value: '30', key: '30', label: 'TP', code: 'trippest' },
{ value: '31', key: '31', label: '花梨鹰', code: 'HLY' },
];
export const sitesMappedByCode = sites.reduce((a, c) => ({ ...a, [String(c.code)]: {...c, key: c.code, value: c.code } }), {});
export const dateTypes = [
{ key: 'applyDate', value: 'applyDate', label: '提交日期' },
{ key: 'ConfirmDate', value: 'ConfirmDate', label: '确认日期' },

26
src/stores/CustomerStore.js
Unescape Escape View File

@ -1,5 +1,6 @@
import {makeAutoObservable, runInAction} from "mobx";
import * as config from "../config";
import { groupsMappedByKey, dataFieldAlias, sitesMappedByCode } from './../libs/ht';
class CustomerStore {
@ -79,6 +80,12 @@ class CustomerStore {
potential_customer_order: this.potential_customer_order.bind(this),
onChange_show_detail_table: this.onChange_show_detail_table.bind(this),
handleChange_webcode: this.handleChange_webcode.bind(this),
searchValues: {
DepartmentList: ['1', '2', '7'].map(kk => groupsMappedByKey[kk]),
WebCode: ['GHKYZG'].map(kk => sitesMappedByCode[kk]),
DateType: { key: 'applyDate', label: '提交日期'},
},
};
// 潜力客户 end
@ -152,6 +159,12 @@ class CustomerStore {
regular_customer_order: this.regular_customer_order.bind(this),
onChange_show_detail_table: this.onChange_show_detail_table_regular.bind(this),
handleChange_webcode: this.handleChange_webcode_regular.bind(this),
searchValues: {
DepartmentList: ['1', '2', '28', '7'].map(kk => groupsMappedByKey[kk]),
WebCode: undefined, // ['ALL'].map(kk => sitesMappedByCode[kk]),
DateType: { key: 'applyDate', label: '提交日期'},
},
};
// 老客户 end
@ -225,9 +238,22 @@ class CustomerStore {
inchina_customer_order: this.inchina_customer_order.bind(this),
onChange_show_detail_table: this.onChange_show_detail_table_inchina.bind(this),
handleChange_webcode: this.handleChange_webcode_inchina.bind(this),
searchValues: {
DepartmentList: ['1', '2', '28', '7'].map(kk => groupsMappedByKey[kk]),
WebCode: undefined, // ['ALL'].map(kk => sitesMappedByCode[kk]),
DateType: { key: 'applyDate', label: '提交日期'},
},
};
// 在华客人 end
setSearchValues(obj, values, target) {
this[target].groups = obj.DepartmentList;
this[target].webcode = obj.WebCode;
this[target].include_tickets = obj.IncludeTickets;
this[target].date_type = obj.DateType;
}
}

8
src/views/Orders.jsx
Unescape Escape View File

@ -1,13 +1,9 @@
import React, { Component } from "react";
import { Row, Col, Button, Tabs, Table, Divider, Select, Radio, Spin } from "antd";
import { ContainerOutlined, CarryOutOutlined, BlockOutlined, SmileOutlined, TagsOutlined, GlobalOutlined, SearchOutlined, FullscreenOutlined, DingtalkOutlined } from "@ant-design/icons";
import { Row, Col, Tabs, Table, Divider, Spin } from "antd";
import { ContainerOutlined, BlockOutlined, SmileOutlined, TagsOutlined, GlobalOutlined, FullscreenOutlined, DingtalkOutlined } from "@ant-design/icons";
import { stores_Context } from "../config";
import { Line, Pie } from "@ant-design/charts";
import SiteSelect from "../components/search/SiteSelect";
import GroupSelect from "../components/search/GroupSelect";
import DataTypeSelect from "../components/search/DataTypeSelect";
import { observer } from "mobx-react";
import DatePickerCharts from "../components/search/DatePickerCharts";
import * as config from "../config";
import { NavLink } from "react-router-dom";
import * as comm from "../utils/commons";

70
src/views/Orders_sub.jsx
Unescape Escape View File

@ -1,18 +1,15 @@
import React, { useContext, useEffect } from "react";
import { Row, Col, Button, Tabs, Table, Select, Divider } from "antd";
import { ContainerOutlined, SearchOutlined } from "@ant-design/icons";
import { Row, Col, Tabs, Table, Divider } from "antd";
import { ContainerOutlined } from "@ant-design/icons";
import { stores_Context } from "../config";
import { Line } from "@ant-design/charts";
import { observer } from "mobx-react";
import DatePickerCharts from "../components/search/DatePickerCharts";
import SiteSelect from "../components/search/SiteSelect";
import GroupSelect from "../components/search/GroupSelect";
import DataTypeSelect from "../components/search/DataTypeSelect";
import { NavLink, useParams } from "react-router-dom";
import * as comm from "../utils/commons";
import * as config from "../config";
import { utils, writeFileXLSX } from "xlsx";
import DateGroupRadio from '../components/DateGroupRadio';
import SearchForm from './../components/search/SearchForm';
const Orders_sub = () => {
const { ordertype, ordertype_sub, ordertype_title } = useParams();
@ -184,49 +181,27 @@ const Orders_sub = () => {
<Col md={24} lg={12} xxl={14}>
<NavLink to={`/orders`}>返回</NavLink>
</Col>
<Col md={24} lg={12} xxl={10}>
<Row>
<Col md={24} lg={8} xxl={8}>
<GroupSelect store={orders_store} />
</Col>
<Col md={24} lg={8} xxl={8}>
<SiteSelect store={orders_store} show_all={true} />
</Col>
<Col md={24} lg={8} xxl={8}>
<Select style={{ width: "100%" }} placeholder="是否含门票" value={orders_store.include_tickets} onChange={orders_store.handleChange_include_tickets}>
<Select.Option key="1" value="1">
含门票
</Select.Option>
<Select.Option key="0" value="0">
不含门票
</Select.Option>
</Select>
</Col>
</Row>
<Row>
<Col md={24} lg={8} xxl={8}>
<DataTypeSelect store={orders_store} />
</Col>
<Col md={24} lg={12} xxl={12}>
<DatePickerCharts />
</Col>
<Col md={24} lg={4} xxl={4} className="align_right">
<Button
type="primary"
icon={<SearchOutlined />}
loading={orders_store.loading}
onClick={() => {
<Col className="gutter-row" span={24}>
<SearchForm
defaultValue={{
initialValue: {
...date_picker_store.formValues,
...orders_store.searchValues,
},
shows: ['DateType', 'DepartmentList', 'WebCode', 'IncludeTickets', 'dates'],
fieldProps: {
DepartmentList: { show_all: false },
WebCode: { show_all: true },
// dates: { hide_vs: true },
},
}}
onSubmit={(_err, obj, form, str) => {
orders_store.setSearchValues(obj, form);
orders_store.getOrderCount_type(ordertype, ordertype_sub);
orders_store.getOrderCountByType_sub(ordertype, ordertype_sub, orders_store.active_tab_key_sub);
}}>
统计
</Button>
</Col>
</Row>
}}
/>
</Col>
</Row>
<Row gutter={[16, { xs: 8, sm: 16, md: 24, lg: 32 }]}>
<Col span={24} style={{textAlign: 'right'}}>
<DateGroupRadio
visible={data_source.length!==0}
@ -237,6 +212,9 @@ const Orders_sub = () => {
fieldMapper={orders_store.orderCount_type_dateRadio.orderCountDataFieldMapper}
/>
</Col>
</Row>
<Row gutter={[16, { xs: 8, sm: 16, md: 24, lg: 32 }]}>
<Col className="gutter-row" span={24}>
<Line {...line} />
</Col>

14
src/views/Sale.jsx
Unescape Escape View File

@ -1,16 +1,10 @@
import React, { useContext, useEffect } from 'react';
import { Row, Col, Button, Tabs, Table, Divider, Radio, Select, Spin } from 'antd';
import { ContainerOutlined, SearchOutlined, UserSwitchOutlined } from '@ant-design/icons';
import React, { useContext } from 'react';
import { Row, Col, Tabs, Table, Divider, Spin } from 'antd';
import { ContainerOutlined, UserSwitchOutlined } from '@ant-design/icons';
import { stores_Context } from '../config';
import { Column, Pie, Treemap } from '@ant-design/charts';
import { Column, Pie } from '@ant-design/charts';
import { observer } from 'mobx-react';
import DatePickerCharts from '../components/search/DatePickerCharts';
import DataTypeSelect from '../components/search/DataTypeSelect';
import { NavLink, useParams } from 'react-router-dom';
import * as comm from '../utils/commons';
import * as config from '../config';
import SiteSelect from '../components/search/SiteSelect';
import GroupSelect from '../components/search/GroupSelect';
import { utils, writeFileXLSX } from 'xlsx';
import SearchForm from './../components/search/SearchForm';

Write Preview
Loading…
Cancel
Save