dashboard/src/views/Sale.js

import React, { useContext, useEffect } from "react";
import { Row, Col, Button, Tabs, Table, Space, Radio, Select } from "antd";
import { ContainerOutlined, SearchOutlined } from "@ant-design/icons";
import { stores_Context } from "../config";
import { Column } 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 GroupSelect from "../charts/GroupSelect";

const Sale = () => {
	const { sale_store, date_picker_store } = useContext(stores_Context);

	const ml_data = sale_store.ml_data; //毛利数据
	const type_data = comm.empty(sale_store.type_data) ? { dataSource: [], columns: [] } : sale_store.type_data; //毛利数据

	const column_config = {
		data: ml_data,
		xField: "COLI_Date",
		yField: "COLI_YJLY",
		seriesField: "groups",
		label: {
			position: "top",
		},
		legend: {
			itemValue: {
				formatter: (text, item) => {
					const items = ml_data.filter(d => d.groups === item.value); //按分组筛选
					return items.length ? items.reduce((a, b) => a + b.COLI_YJLY, 0) : ""; //计算总数
				},
			},
		},
	};

	return (
		<div>
			<Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>
				<Col md={24} lg={10} xxl={12}></Col>
				<Col md={24} lg={14} xxl={12}>
					<Row>
						<Col md={24} lg={7} xxl={6}>
							<GroupSelect store={sale_store} />
							<Select value={sale_store.date_type} style={{ width: "95%" }} onChange={value => sale_store.onChange_datetype(value)}>
								<Select.Option key="1" value="okDate">
									确认日期
								</Select.Option>
								<Select.Option key="2" value="applyDate">
									下单日期
								</Select.Option>
								<Select.Option key="3" value="startDate">
									走团日期
								</Select.Option>
							</Select>
						</Col>
						<Col md={24} lg={12} xxl={10}>
							<DatePickerCharts />
						</Col>
						<Col md={24} lg={5} xxl={8}>
							<Button
								type="primary"
								icon={<SearchOutlined />}
								loading={sale_store.loading}
								onClick={() => {
									sale_store.get_department_order_ml(date_picker_store);
									sale_store.get_department_order_ml_by_type(date_picker_store);
								}}>
								统计
							</Button>
						</Col>
					</Row>
				</Col>
			</Row>

			<Row>
				<Col className="gutter-row" md={24}>
					<Column {...column_config} />
				</Col>

				<Col className="gutter-row" md={24}>
					<Tabs
						activeKey={sale_store.active_tab_key}
						onChange={active_key => {
							sale_store.onChange_Tabs(active_key);
							sale_store.get_department_order_ml_by_type(date_picker_store);
						}}>
						<Tabs.TabPane
							tab={
								<span>
									<ContainerOutlined />
									概览
								</span>
							}
							key="All"></Tabs.TabPane>
						<Tabs.TabPane
							tab={
								<span>
									<ContainerOutlined />
									国籍
								</span>
							}
							key="Country"></Tabs.TabPane>
					</Tabs>
					<Row>
						<Col span={24}>
							{sale_store.date_title}
							<Table dataSource={type_data.dataSource} columns={type_data.columns} size="small" rowKey={record => record.key} loading={sale_store.loading_table} pagination={false} scroll={{ x: "100%" }} />
						</Col>
					</Row>
				</Col>
			</Row>
		</div>
	);
};
export default observer(Sale);