信用卡账单数据分析,折线图、明细、项目类型统计等

src/stores/AuthStore.js

@@ -9,11 +9,11 @@ class AuthStore {
     constructor(rootStore) {
         this.rootStore = rootStore;
         makeAutoObservable(this);
-        this.get_auth();
+        this.get_auth(); //放到钉钉环境才能开启
     }
 
-    auth = ['admin'];
+    auth = ['admin']; //开发时候用，正式环境留空
-    user = {name:'ycc',userid:'12345678'};
+    user = {name:'ycc',userid:'12345678'};//开发时候用，正式环境留空
 
     has_permission(requireds) {
         if (Object.keys(requireds).length == 0) {

src/stores/FinancialStore.js

@@ -1,6 +1,7 @@
 import {makeAutoObservable, runInAction} from "mobx";
 import * as dd from 'dingtalk-jsapi';
 import * as config from "../config";
+import * as comm from '../utils/commons'
 
 
 //财务管理
@@ -38,16 +39,42 @@ class FinancialStore {
             });
     }
 
+    set_bill_filtered(values) {
+        if (Array.isArray(values)) {
+            this.credit_card_data.filteredValue = values;
+        } else if (comm.empty(values)) {
+            this.credit_card_data.filteredValue = [];
+        } else {
+            this.credit_card_data.filteredValue = [values];
+        }
+    }
+
+    set_active_tab(value) {
+        this.credit_card_data.active_tab = value;
+    }
+
+    set_table_handleChange = (pagination, filters, sorter) => {
+        let filters_arr = Object.values(filters);
+        if (!comm.empty(filters_arr)) {
+            this.set_bill_filtered(filters_arr[0]);
+        }
+    };
+
     credit_card_data = {
         data: [],
         data_by_type: [],
-        loading:false,
+        active_tab: 'summarized_data',
+        loading: false,
         bu_select_mode: false,
         business_units: ['ALL'],
         group_select_mode: false,
         groups: ['ALL'],
+        filteredValue: [],//默认的筛选值
         bu_handleChange: this.bu_handleChange.bind(this),
         group_handleChange: this.group_handleChange.bind(this),
+        set_bill_filtered: this.set_bill_filtered.bind(this),
+        set_active_tab: this.set_active_tab.bind(this),
+        set_table_handleChange: this.set_table_handleChange.bind(this),
     };
 
     bu_handleChange(value) {

src/utils/commons.js

@@ -197,15 +197,21 @@ export function clickUrl(url) {
     httpLink.click();
 }
 
-export function show_vs_tag(vs, data1, data2) {
+export function show_vs_tag(vs,vs_diff, data1, data2) {
     let tag = '-';
     if (parseInt(vs) < 0) {
-        tag = <Tag icon={<CaretDownOutlined/>} color="gold">{vs}</Tag>
+        tag = <Tag icon={<CaretDownOutlined/>} color="gold">{vs} {vs_diff}</Tag>
     } else if (parseInt(vs) > 0) {
-        tag = <Tag icon={< CaretUpOutlined/>} color="lime">{vs}</Tag>
+        tag = <Tag icon={< CaretUpOutlined/>} color="lime">{vs} {vs_diff}</Tag>
     } // else {
     //     return <span>{tag}</span>
     // }
     return <span><div>{data1} vs {data2}</div>
         {tag}</span>
+}
+
+//数组去掉重复
+export function unique(arr){
+    let x = new Set(arr);
+    return [...x];
 }

src/views/Credit_card_bill.js

@@ -22,39 +22,115 @@ import * as config from "../config";
 
 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 format_data = ((data) => {
         let result = {dataSource: [], columns: []}
         if (!comm.empty(data)) {
-            result.columns = [
+            if (date_picker_store.start_date_cp && date_picker_store.end_date_cp) { //有比较的数据
-                {
+                let total_data1 = data.BillTypeDataTotal1;
-                    title: '项目',
+                let total_data2 = data.BillTypeDataTotal2;
-                    children: [{
+                result.columns = [
-                        title: '',
+                    {
-                        dataIndex: 'cb_billtype',
+                        title: '项目类型',
-                    }],
+                        children: [{
-                },
+                            title: '',
-                {
+                            dataIndex: 'cb_billtype',
-                    title: '美金',
+                            render: (text, record) => <a onClick={() => {
-                    children: [{title: data.BillTypeDataTotal1.cb_usd, dataIndex: 'cb_usd'}],
+                                credit_card_data.set_bill_filtered(text);//切换到明细页
-                    sorter: (a, b) => parseFloat(b.cb_usd.replace(/,/g, '')) - parseFloat(a.cb_usd.replace(/,/g, '')),
+                                credit_card_data.set_active_tab('detail_data');
-                },
+                            }}>{text}</a>
-                {
+                        }],
-                    title: '人民币',
+                        sorter: (a, b) => a.cb_billtype.localeCompare(b.cb_billtype),
-                    children: [{title: data.BillTypeDataTotal1.cb_rmb, dataIndex: 'cb_rmb'}],
+                    },
-                    sorter: (a, b) => parseFloat(b.cb_rmb.replace(/,/g, '')) - parseFloat(a.cb_rmb.replace(/,/g, '')),
+                    {
-                },
+                        title: '美金',
-            ]
+                        children: [{
-            result.dataSource = data.BillTypeData1;
+                            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: '项目',
@@ -62,15 +138,35 @@ const Credit_card_bill = () => {
                         title: '',
                         dataIndex: 'cb_bill',
                     }],
+                    sorter: (a, b) => a.cb_bill.localeCompare(b.cb_bill),
+                },
+                {
+                    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: Math.round(data.billdate1.reduce((a, b) => a + b.cb_usd, 0)), dataIndex: 'cb_usd'}],
+                    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: Math.round(data.billdate1.reduce((a, b) => a + b.cb_rmb, 0)), dataIndex: 'cb_rmb'}],
+                    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,
                 },
 
@@ -85,15 +181,17 @@ const Credit_card_bill = () => {
                 {
                     title: '事业部',
                     children: [{title: '', dataIndex: 'cb_business_unit'}],
-                    sorter: (a, b) => b.cb_business_unit - a.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),
                 },
             ]
-            result.dataSource = data.billdate1;
+
         }
+
         return result;
     })
 
@@ -155,6 +253,7 @@ const Credit_card_bill = () => {
                             onClick={() => {
                                 financial_store.get_credit_card_bills();
                                 financial_store.get_credit_card_bills_by_type();
+                                financial_store.set_bill_filtered(false);
                             }}>统计</Button>
                 </Col>
             </Row>
@@ -164,7 +263,7 @@ const Credit_card_bill = () => {
                     <Line {...line_config} />
                 </Col>
                 <Col className="gutter-row" span={24}>
-                    <Tabs>
+                    <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}
@@ -180,6 +279,7 @@ const Credit_card_bill = () => {
                             <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={() => {