dashboard/src/charts/OrdersTempTable.js

import React, {Component} from 'react';
import {Table, Button, Space, Tooltip} from 'antd';
import {Line} from '@ant-design/charts';
import SiteSelect from './SiteSelect';
import {SearchOutlined} from '@ant-design/icons';
import * as config from '../config' ;
import {stores_Context} from "../config";
import DatePickerCharts from "./DatePickerCharts";
import {observer} from "mobx-react";


class OrdersTempTable extends Component {

    static contextType = stores_Context;

    constructor(props) {
        super(props);

    }

    // componentDidMount() {
    // }


    render() {
        const {dashboard_store} = this.context;
        const ordersTemp_data = dashboard_store.ordersTemp_data;

        const columns = [
            {
                title: '订单号',
                dataIndex: 'COLI_ID',
                key: 'COLI_ID',
            },
            {
                title: '网站',
                dataIndex: 'COLI_WebCode',
                key: 'COLI_WebCode',
            },
            {
                title: 'IP',
                dataIndex: 'COLI_SenderIP',
                key: 'COLI_SenderIP',
            },
            {
                title: '预定时间',
                dataIndex: 'COLI_ApplyDate',
                key: 'COLI_ApplyDate',
            },
            {
                title: '订单内容',
                dataIndex: 'COLI_OrderDetailText',
                key: 'COLI_OrderDetailText',
                ellipsis: true,
            },
            Table.EXPAND_COLUMN,
        ];
        const line = {
            data: [],
            padding: 'auto',
            xField: 'order_date',
            yField: 'order_count',
            seriesField: 'order_sitecode',
            xAxis: {
                type: 'timeCat',
            },
        };

        return (

            <div>
                <h2>临时订单数量</h2>
                <SiteSelect store={ordersTemp_data}/>
                <Space><DatePickerCharts hide_vs={true}/>
                    <Button type="primary" icon={<SearchOutlined/>} loading={ordersTemp_data.loading}
                            onClick={() => {
                                ordersTemp_data.asyncFetch();
                            }}>统计</Button>
                    <Button type="primary" icon={<SearchOutlined/>} loading={ordersTemp_data.loading_detail}
                            onClick={() => {
                                ordersTemp_data.asyncFetch_detail();
                            }}>查看详情</Button>
                </Space>
                {ordersTemp_data.show_table ? (
                    <Table dataSource={ordersTemp_data.data_detail} columns={columns} size="small"
                           rowKey={record => record.COLI_ID}
                           expandable={{
                               expandedRowRender: (record) => (
                                   <pre>{record.COLI_OrderDetailText}</pre>
                               ),
                           }}/>
                ) : (
                    <Line {...line} data={ordersTemp_data.data}/>
                )}
            </div>
        )
    }
}

export default observer(OrdersTempTable);