dashboard/src/views/Credit_card_bill.js

import React, {Component, useContext} from 'react';
import {observer} from 'mobx-react';
import {Row, Col, Button, Tabs, Table, Divider} from 'antd';
import {stores_Context} from '../config'
import {utils, writeFileXLSX} from "xlsx";
import {NavLink, useNavigate} from "react-router-dom";
import {
    SlackOutlined,
    ContainerOutlined,
    CarryOutOutlined,
    SearchOutlined,
    GithubOutlined
} from '@ant-design/icons';
import BillTypeSelect from '../charts/BillTypeSelect'
import GroupSelect from '../charts/GroupSelect'
import Business_unit from '../charts/Business_unit'
import DatePickerCharts from '../charts/DatePickerCharts'
import {Line} from "@ant-design/charts";
import * as comm from '../utils/commons'
import * as config from "../config";


const Credit_card_bill = () => {

    const {financial_store} = useContext(stores_Context);
    const {bill_type_data, credit_card_data} = financial_store;

    const format_data = ((data) => {
        let result = {dataSource: [], columns: []}
        if (!comm.empty(data)) {
            result.columns = [
                {
                    title: '项目',
                    children: [{
                        title: '',
                        dataIndex: 'cb_billtype',
                    }],
                },
                {
                    title: '美金',
                    children: [{title: data.BillTypeDataTotal1.cb_usd, dataIndex: 'cb_usd'}],
                    sorter: (a, b) => parseFloat(b.cb_usd.replace(/,/g, '')) - parseFloat(a.cb_usd.replace(/,/g, '')),
                },
                {
                    title: '人民币',
                    children: [{title: data.BillTypeDataTotal1.cb_rmb, dataIndex: 'cb_rmb'}],
                    sorter: (a, b) => parseFloat(b.cb_rmb.replace(/,/g, '')) - parseFloat(a.cb_rmb.replace(/,/g, '')),
                },
            ]
            result.dataSource = data.BillTypeData1;
        }
        return result;
    })

    const format_data_detail = ((data) => {
        let result = {dataSource: [], columns: []}
        if (!comm.empty(data)) {
            result.columns = [
                {
                    title: '项目',
                    children: [{
                        title: '',
                        dataIndex: 'cb_bill',
                    }],
                },
                {
                    title: '美金',
                    children: [{title: Math.round(data.billdate1.reduce((a, b) => a + b.cb_usd, 0)), dataIndex: 'cb_usd'}],
                    sorter: (a, b) => b.cb_usd - a.cb_usd,
                },
                {
                    title: '人民币',
                    children: [{title: Math.round(data.billdate1.reduce((a, b) => a + b.cb_rmb, 0)), dataIndex: 'cb_rmb'}],
                    sorter: (a, b) => b.cb_rmb - a.cb_rmb,
                },

                {
                    title: '交易日期',
                    children: [{title: '', dataIndex: 'cb_datetime'}],
                },
                {
                    title: '账期',
                    children: [{title: '', dataIndex: 'cb_billdate'}],
                },
                {
                    title: '事业部',
                    children: [{title: '', dataIndex: 'cb_business_unit'}],
                    sorter: (a, b) => b.cb_business_unit - a.cb_business_unit,
                },
                {
                    title: '小组',
                    children: [{title: '', dataIndex: 'cb_group'}],
                },
            ]
            result.dataSource = data.billdate1;
        }
        return result;
    })

    const credit_card_bills = !comm.empty(credit_card_data.data) ? format_data_detail(credit_card_data.data) : format_data_detail([]);
    const credit_card_bills_by_type = !comm.empty(credit_card_data.data_by_type) ? format_data(credit_card_data.data_by_type) : format_data([]);

    const line_config = {
        data: credit_card_bills.dataSource,
        padding: 'auto',
        xField: 'cb_datetime',
        yField: 'cb_usd',
        seriesField: 'groups',
        xAxis: {
            type: 'timeCat',
        },
        point: {
            size: 4,
            shape: 'cicle',
        },
        label: {},//显示标签
        legend: {
            itemValue: {
                formatter: (text, item) => {
                    const items = credit_card_bills.dataSource.filter((d) => d.groups === item.value);//按站点筛选
                    return items.length ? Math.round(items.reduce((a, b) => a + b.cb_usd, 0)) : '';//计算总数
                },
            },
        },
        // tooltip: {
        //     customContent: (title, items) => {
        //         const data = items[0]?.data || {};
        //         return `<div>${title}</div><div>${data.seriesField} ${data.yField}</div>`;
        //     }
        // },
        smooth: true,
    };

    return (
        <div>
            <Row>
                <Col span={11}>
                    <h2>信用卡账单</h2>
                </Col>
                <Col span={10}>
                    <Row>
                        <Col span={24}><BillTypeSelect store={bill_type_data} show_all={true}/></Col>
                        <Col span={12}>
                            <Business_unit store={credit_card_data} show_all={true}/>
                            <GroupSelect store={credit_card_data} show_all={true}/>
                        </Col>
                        <Col span={12}>
                            <DatePickerCharts/>
                        </Col>
                    </Row>
                </Col>
                <Col span={1}></Col>
                <Col span={2}>
                    <Button type="primary" icon={<SearchOutlined/>} size='large' loading={credit_card_data.loading}
                            onClick={() => {
                                financial_store.get_credit_card_bills();
                                financial_store.get_credit_card_bills_by_type();
                            }}>统计</Button>
                </Col>
            </Row>

            <Row>
                <Col span={24}>
                    <Line {...line_config} />
                </Col>
                <Col className="gutter-row" span={24}>
                    <Tabs>
                        <Tabs.TabPane tab={<span><CarryOutOutlined/>项目汇总</span>} key="summarized_data">
                            <Table id="table_by_type" dataSource={credit_card_bills_by_type.dataSource}
                                   columns={credit_card_bills_by_type.columns}
                                   pagination={false}
                                   size="small"/>
                            <Divider orientation="right"><a
                                onClick={() => {
                                    const wb = utils.table_to_book(document.getElementById("table_by_type").getElementsByTagName('table')[0]);
                                    writeFileXLSX(wb, "项目汇总.xlsx");
                                }}>导出excel</a></Divider>
                        </Tabs.TabPane>
                        <Tabs.TabPane tab={<span><ContainerOutlined/>明细</span>} key="detail_data">
                            <Table id="table_by_detail" dataSource={credit_card_bills.dataSource}
                                   columns={credit_card_bills.columns}
                                   pagination={false}
                                   size="small"/>
                            <Divider orientation="right"><a
                                onClick={() => {
                                    const wb = utils.table_to_book(document.getElementById("table_by_detail").getElementsByTagName('table')[0]);
                                    writeFileXLSX(wb, "明细.xlsx");
                                }}>导出excel</a></Divider>
                        </Tabs.TabPane>
                    </Tabs>
                </Col>
            </Row>
        </div>
    );

}

export default observer(Credit_card_bill);