|
|
|
@ -1,12 +1,13 @@
|
|
|
|
import React, {Component, useContext} from 'react';
|
|
|
|
import React, {Component, useContext} from 'react';
|
|
|
|
import {observer} from 'mobx-react';
|
|
|
|
import {observer} from 'mobx-react';
|
|
|
|
import {Row, Col, Button, Tabs, Table} from 'antd';
|
|
|
|
import {Row, Col, Button, Tabs, Table, Divider} from 'antd';
|
|
|
|
import {stores_Context} from '../config'
|
|
|
|
import {stores_Context} from '../config'
|
|
|
|
import {useNavigate} from "react-router-dom";
|
|
|
|
import {utils, writeFileXLSX} from "xlsx";
|
|
|
|
|
|
|
|
import {NavLink, useNavigate} from "react-router-dom";
|
|
|
|
import {
|
|
|
|
import {
|
|
|
|
SlackOutlined,
|
|
|
|
SlackOutlined,
|
|
|
|
SketchOutlined,
|
|
|
|
ContainerOutlined,
|
|
|
|
AntCloudOutlined,
|
|
|
|
CarryOutOutlined,
|
|
|
|
SearchOutlined,
|
|
|
|
SearchOutlined,
|
|
|
|
GithubOutlined
|
|
|
|
GithubOutlined
|
|
|
|
} from '@ant-design/icons';
|
|
|
|
} from '@ant-design/icons';
|
|
|
|
@ -15,15 +16,190 @@ import GroupSelect from '../charts/GroupSelect'
|
|
|
|
import Business_unit from '../charts/Business_unit'
|
|
|
|
import Business_unit from '../charts/Business_unit'
|
|
|
|
import DatePickerCharts from '../charts/DatePickerCharts'
|
|
|
|
import DatePickerCharts from '../charts/DatePickerCharts'
|
|
|
|
import {Line} from "@ant-design/charts";
|
|
|
|
import {Line} from "@ant-design/charts";
|
|
|
|
import * as com from '../utils/commons'
|
|
|
|
import * as comm from '../utils/commons'
|
|
|
|
|
|
|
|
import * as config from "../config";
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const Credit_card_bill = () => {
|
|
|
|
const Credit_card_bill = () => {
|
|
|
|
|
|
|
|
|
|
|
|
const {financial_store} = useContext(stores_Context);
|
|
|
|
const {financial_store, date_picker_store} = useContext(stores_Context);
|
|
|
|
const {bill_type_data, credit_card_data} = financial_store;
|
|
|
|
const {bill_type_data, credit_card_data} = financial_store;
|
|
|
|
const data_source = !com.empty(credit_card_data.data) ? credit_card_data.data.billdate1 : [];
|
|
|
|
|
|
|
|
|
|
|
|
const format_data = ((data) => {
|
|
|
|
|
|
|
|
let result = {dataSource: [], columns: []}
|
|
|
|
|
|
|
|
if (!comm.empty(data)) {
|
|
|
|
|
|
|
|
if (date_picker_store.start_date_cp && date_picker_store.end_date_cp) { //有比较的数据
|
|
|
|
|
|
|
|
let total_data1 = data.BillTypeDataTotal1;
|
|
|
|
|
|
|
|
let total_data2 = data.BillTypeDataTotal2;
|
|
|
|
|
|
|
|
result.columns = [
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
title: '项目类型',
|
|
|
|
|
|
|
|
children: [{
|
|
|
|
|
|
|
|
title: '',
|
|
|
|
|
|
|
|
dataIndex: 'cb_billtype',
|
|
|
|
|
|
|
|
render: (text, record) => <a onClick={() => {
|
|
|
|
|
|
|
|
credit_card_data.set_bill_filtered(text);//切换到明细页
|
|
|
|
|
|
|
|
credit_card_data.set_active_tab('detail_data');
|
|
|
|
|
|
|
|
}}>{text}</a>
|
|
|
|
|
|
|
|
}],
|
|
|
|
|
|
|
|
sorter: (a, b) => a.cb_billtype.localeCompare(b.cb_billtype),
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
title: '美金',
|
|
|
|
|
|
|
|
children: [{
|
|
|
|
|
|
|
|
title: comm.show_vs_tag(total_data1.usd_vs, total_data1.usd_diff, total_data1.cb_usd, total_data2.cb_usd),
|
|
|
|
|
|
|
|
dataIndex: 'cb_usd'
|
|
|
|
|
|
|
|
}],
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
title: '人民币',
|
|
|
|
|
|
|
|
children: [{
|
|
|
|
|
|
|
|
title: comm.show_vs_tag(total_data1.rmb_vs, total_data1.rmb_diff, total_data1.cb_rmb, total_data2.cb_rmb),
|
|
|
|
|
|
|
|
dataIndex: 'cb_rmb'
|
|
|
|
|
|
|
|
}],
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
];
|
|
|
|
|
|
|
|
for (let item of data.BillTypeData1) {
|
|
|
|
|
|
|
|
for (let item2 of data.BillTypeData2) {
|
|
|
|
|
|
|
|
if (item.cb_billtype == item2.cb_billtype) {
|
|
|
|
|
|
|
|
result.dataSource.push({
|
|
|
|
|
|
|
|
key: item.key,
|
|
|
|
|
|
|
|
cb_billtype: item.cb_billtype,
|
|
|
|
|
|
|
|
groups: item.groups,
|
|
|
|
|
|
|
|
cb_usd: comm.show_vs_tag(item.usd_vs, item.usd_diff, item.cb_usd, item2.cb_usd),
|
|
|
|
|
|
|
|
cb_rmb: comm.show_vs_tag(item.rmb_vs, item.rmb_diff, item.cb_rmb, item2.cb_rmb),
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
result.columns = [
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
title: '项目类型',
|
|
|
|
|
|
|
|
children: [{
|
|
|
|
|
|
|
|
title: '',
|
|
|
|
|
|
|
|
dataIndex: 'cb_billtype',
|
|
|
|
|
|
|
|
render: (text, record) => <a onClick={() => {
|
|
|
|
|
|
|
|
credit_card_data.set_bill_filtered(text);//切换到明细页
|
|
|
|
|
|
|
|
credit_card_data.set_active_tab('detail_data');
|
|
|
|
|
|
|
|
}}>{text}</a>
|
|
|
|
|
|
|
|
}],
|
|
|
|
|
|
|
|
sorter: (a, b) => a.cb_billtype.localeCompare(b.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 filters_array = (data_array) => {
|
|
|
|
|
|
|
|
return comm.unique(data_array).map(item => {
|
|
|
|
|
|
|
|
return {text: item, value: item}
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const format_data_detail = ((data) => {
|
|
|
|
|
|
|
|
let result = {dataSource: [], columns: []}
|
|
|
|
|
|
|
|
if (!comm.empty(data)) {
|
|
|
|
|
|
|
|
let show_vs = false;
|
|
|
|
|
|
|
|
let usd_totle1, usd_totle2, usd_diff, usd_vs, rmb_totle1, rmb_totle2, rmb_diff, rmb_vs = 0;
|
|
|
|
|
|
|
|
usd_totle1 = Math.round(data.billdate1.reduce((a, b) => a + b.cb_usd, 0));
|
|
|
|
|
|
|
|
rmb_totle1 = Math.round(data.billdate1.reduce((a, b) => a + b.cb_rmb, 0));
|
|
|
|
|
|
|
|
if (date_picker_store.start_date_cp && date_picker_store.end_date_cp) { //有比较的数据
|
|
|
|
|
|
|
|
show_vs = true;
|
|
|
|
|
|
|
|
//计算汇总的变化
|
|
|
|
|
|
|
|
usd_totle2 = Math.round(data.billdate2.reduce((a, b) => a + b.cb_usd, 0));
|
|
|
|
|
|
|
|
usd_diff = usd_totle1 - usd_totle2;
|
|
|
|
|
|
|
|
usd_vs = comm.formatPercent(usd_diff / usd_totle1);
|
|
|
|
|
|
|
|
rmb_totle2 = Math.round(data.billdate2.reduce((a, b) => a + b.cb_rmb, 0));
|
|
|
|
|
|
|
|
rmb_diff = rmb_totle1 - rmb_totle2;
|
|
|
|
|
|
|
|
rmb_vs = comm.formatPercent(rmb_diff / rmb_totle1);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
if (show_vs) { //有比较的数据
|
|
|
|
|
|
|
|
result.dataSource.push(...data.billdate1, ...data.billdate2);
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
result.dataSource.push(...data.billdate1);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
result.columns = [
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
title: '项目类型',
|
|
|
|
|
|
|
|
children: [{
|
|
|
|
|
|
|
|
title: '',
|
|
|
|
|
|
|
|
dataIndex: 'cb_billtype',
|
|
|
|
|
|
|
|
}],
|
|
|
|
|
|
|
|
sorter: (a, b) => a.cb_billtype.localeCompare(b.cb_billtype),
|
|
|
|
|
|
|
|
filters: filters_array(result.dataSource.map((item) => {
|
|
|
|
|
|
|
|
return item.cb_billtype
|
|
|
|
|
|
|
|
})),
|
|
|
|
|
|
|
|
filteredValue: credit_card_data.filteredValue || null,
|
|
|
|
|
|
|
|
onFilter: (value, record) => record.cb_billtype.indexOf(value) === 0,
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
title: '项目',
|
|
|
|
|
|
|
|
children: [{
|
|
|
|
|
|
|
|
title: '',
|
|
|
|
|
|
|
|
dataIndex: 'cb_bill',
|
|
|
|
|
|
|
|
}],
|
|
|
|
|
|
|
|
sorter: (a, b) => a.cb_bill.localeCompare(b.cb_bill),
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
title: '美金',
|
|
|
|
|
|
|
|
children: [{
|
|
|
|
|
|
|
|
title: show_vs ? comm.show_vs_tag(usd_vs, usd_diff, usd_totle1, usd_totle2) : usd_totle1,
|
|
|
|
|
|
|
|
dataIndex: 'cb_usd'
|
|
|
|
|
|
|
|
}],
|
|
|
|
|
|
|
|
sorter: (a, b) => b.cb_usd - a.cb_usd,
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
title: '人民币',
|
|
|
|
|
|
|
|
children: [{
|
|
|
|
|
|
|
|
title: show_vs ? comm.show_vs_tag(rmb_vs, rmb_diff, rmb_totle1, rmb_totle2) : rmb_totle1,
|
|
|
|
|
|
|
|
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) => a.cb_business_unit.localeCompare(b.cb_business_unit),
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
title: '小组',
|
|
|
|
|
|
|
|
children: [{title: '', dataIndex: 'cb_group'}],
|
|
|
|
|
|
|
|
sorter: (a, b) => a.cb_group.localeCompare(b.cb_group),
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
]
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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 = {
|
|
|
|
const line_config = {
|
|
|
|
data: data_source,
|
|
|
|
data: credit_card_bills.dataSource,
|
|
|
|
padding: 'auto',
|
|
|
|
padding: 'auto',
|
|
|
|
xField: 'cb_datetime',
|
|
|
|
xField: 'cb_datetime',
|
|
|
|
yField: 'cb_usd',
|
|
|
|
yField: 'cb_usd',
|
|
|
|
@ -39,7 +215,7 @@ const Credit_card_bill = () => {
|
|
|
|
legend: {
|
|
|
|
legend: {
|
|
|
|
itemValue: {
|
|
|
|
itemValue: {
|
|
|
|
formatter: (text, item) => {
|
|
|
|
formatter: (text, item) => {
|
|
|
|
const items = data_source.filter((d) => d.groups === item.value);//按站点筛选
|
|
|
|
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)) : '';//计算总数
|
|
|
|
return items.length ? Math.round(items.reduce((a, b) => a + b.cb_usd, 0)) : '';//计算总数
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
@ -61,10 +237,10 @@ const Credit_card_bill = () => {
|
|
|
|
</Col>
|
|
|
|
</Col>
|
|
|
|
<Col span={10}>
|
|
|
|
<Col span={10}>
|
|
|
|
<Row>
|
|
|
|
<Row>
|
|
|
|
<Col span={24}><BillTypeSelect store={bill_type_data} show_all={true}/></Col>
|
|
|
|
|
|
|
|
<Col span={12}>
|
|
|
|
<Col span={12}>
|
|
|
|
|
|
|
|
<BillTypeSelect store={bill_type_data} show_all={true}/>
|
|
|
|
<Business_unit store={credit_card_data} show_all={true}/>
|
|
|
|
<Business_unit store={credit_card_data} show_all={true}/>
|
|
|
|
<GroupSelect store={credit_card_data} show_all={true}/>
|
|
|
|
{/*<GroupSelect store={credit_card_data} show_all={true}/>*/}
|
|
|
|
</Col>
|
|
|
|
</Col>
|
|
|
|
<Col span={12}>
|
|
|
|
<Col span={12}>
|
|
|
|
<DatePickerCharts/>
|
|
|
|
<DatePickerCharts/>
|
|
|
|
@ -76,6 +252,8 @@ const Credit_card_bill = () => {
|
|
|
|
<Button type="primary" icon={<SearchOutlined/>} size='large' loading={credit_card_data.loading}
|
|
|
|
<Button type="primary" icon={<SearchOutlined/>} size='large' loading={credit_card_data.loading}
|
|
|
|
onClick={() => {
|
|
|
|
onClick={() => {
|
|
|
|
financial_store.get_credit_card_bills();
|
|
|
|
financial_store.get_credit_card_bills();
|
|
|
|
|
|
|
|
financial_store.get_credit_card_bills_by_type();
|
|
|
|
|
|
|
|
financial_store.set_bill_filtered(false);
|
|
|
|
}}>统计</Button>
|
|
|
|
}}>统计</Button>
|
|
|
|
</Col>
|
|
|
|
</Col>
|
|
|
|
</Row>
|
|
|
|
</Row>
|
|
|
|
@ -84,6 +262,33 @@ const Credit_card_bill = () => {
|
|
|
|
<Col span={24}>
|
|
|
|
<Col span={24}>
|
|
|
|
<Line {...line_config} />
|
|
|
|
<Line {...line_config} />
|
|
|
|
</Col>
|
|
|
|
</Col>
|
|
|
|
|
|
|
|
<Col className="gutter-row" span={24}>
|
|
|
|
|
|
|
|
<Tabs activeKey={credit_card_data.active_tab} onChange={credit_card_data.set_active_tab}>
|
|
|
|
|
|
|
|
<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}
|
|
|
|
|
|
|
|
onChange={credit_card_data.set_table_handleChange}
|
|
|
|
|
|
|
|
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>
|
|
|
|
</Row>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
);
|
|
|
|
|
LiaoYijun
3 years ago