fix: 导出

feature/hotel-cruise
Lei OT 2 years ago
parent b4f869453a
commit d272cf6806

@ -1,4 +1,4 @@
import { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import { Tag, Button, message } from 'antd'; import { Tag, Button, message } from 'antd';
import { CaretUpOutlined, CaretDownOutlined, DownloadOutlined } from '@ant-design/icons'; import { CaretUpOutlined, CaretDownOutlined, DownloadOutlined } from '@ant-design/icons';
import { utils, writeFile } from "xlsx"; import { utils, writeFile } from "xlsx";
@ -34,10 +34,26 @@ export const VSTag = (props) => {
export const TableExportBtn = (props) => { export const TableExportBtn = (props) => {
const output_name = `${props.label}`; const output_name = `${props.label}`;
const [columnsMap, setColumnsMap] = useState([]); const [columnsMap, setColumnsMap] = useState([]);
const [summaryRow, setSummaryRow] = useState({});
useEffect(() => { useEffect(() => {
const flatCols = props.columns.flatMap((v, k) => (v.children ? v.children.map((vc) => ({ ...vc, title: `${v?.titleX || v.title}-${vc.title || ''}` })) : v)).filter(c => c.title); const r1 = props.columns.reduce((r, v) => ({
// console.log('flatCols', flatCols); ...r,
...(v.children ? v.children.reduce((rc, vc) => ({
...rc,
...(vc?.titleX ? {[`${v?.titleX || v.title},${vc.titleX}`]: vc.titleX } : {[v?.titleX || v.title]: `${vc?.titleX || vc?.title || ''}`}),
}), {}) : {})
}), {});
const flatCols = props.columns.flatMap((v, k) =>
v.children ? v.children.map((vc) => ({ ...vc, title: `${v?.titleX || v.title}` + (vc?.titleX ? `,${vc.titleX}` : '') })) : v
);
// .filter((c) => c.dataIndex)
// !['string', 'number'].includes(typeof vc.title) ? `${v?.titleX || v.title}` : `${v?.titleX || v.title}-${vc.title || ''}`
;
setColumnsMap(flatCols); setColumnsMap(flatCols);
// console.log('flatCols', flatCols);
setSummaryRow(r1);
// console.log('summaryRow', r1);
return () => {}; return () => {};
}, [props.columns]); }, [props.columns]);
@ -51,13 +67,14 @@ export const TableExportBtn = (props) => {
const itemMapped = columnsMap.reduce((sv, kset) => { const itemMapped = columnsMap.reduce((sv, kset) => {
const render_val = typeof kset?.render === 'function' ? kset.render('', item) : null; const render_val = typeof kset?.render === 'function' ? kset.render('', item) : null;
const data_val = kset?.dataIndex ? (Array.isArray(kset.dataIndex) ? getNestedValue(item, kset.dataIndex) : item[kset.dataIndex]) : undefined; const data_val = kset?.dataIndex ? (Array.isArray(kset.dataIndex) ? getNestedValue(item, kset.dataIndex) : item[kset.dataIndex]) : undefined;
const v = { [kset.title]: data_val || render_val }; const x_val = item[`${kset.dataIndex}_X`];
// const _title = kset.title.replace('-[object Object]', '');
const v = { [kset.title]: x_val || data_val || render_val };
return { ...sv, ...v }; return { ...sv, ...v };
}, {}); }, {});
return itemMapped; return itemMapped;
}); });
// console.log('data', data); const ws = utils.json_to_sheet([summaryRow, ...data], { header: columnsMap.filter((r) => r.dataIndex).map((r) => r.title) });
const ws = utils.json_to_sheet(data, { header: columnsMap.filter((r) => r.dataIndex).map((r) => r.title) });
const wb = utils.book_new(); const wb = utils.book_new();
utils.book_append_sheet(wb, ws, 'sheet'); utils.book_append_sheet(wb, ws, 'sheet');
writeFile(wb, `${output_name}.xlsx`); writeFile(wb, `${output_name}.xlsx`);

@ -61,6 +61,19 @@ export default observer((props) => {
'#f5e7e8', '#f5e7e8',
'#fde7ea', '#fde7ea',
// '#8a1313',
// '#ad1818',
// '#b52f2f',
// '#bd4646',
// '#c55d5d',
// '#cd7474',
// '#d68b8b',
// '#dea2a2',
// '#e6b9b9',
// '#eed0d0',
// '#f6e7e7',
// '#fde7ea',
// '#001D70', // '#001D70',
// '#0047A5', // '#0047A5',
// '#1A4397', // '#1A4397',

@ -164,12 +164,14 @@ export default observer(() => {
children: [ children: [
{ {
title: '团数占比', title: '团数占比',
titleX: '团数占比',
width: 90, width: 90,
dataIndex: ['resultToY', 'ConfirmOrderPercent'], // 'ConfirmOrderPercent', dataIndex: ['resultToY', 'ConfirmOrderPercent'], // 'ConfirmOrderPercent',
render: (v, r) => r.resultToY.ConfirmOrderPercent ? <RingProgress {...RingProgressConfigY} percent={r.resultToY.ConfirmOrderPercent / 100} /> : '-', render: (v, r) => r.resultToY.ConfirmOrderPercent ? <RingProgress {...RingProgressConfigY} percent={r.resultToY.ConfirmOrderPercent / 100} /> : '-',
}, },
{ {
title: '业绩占比', title: '业绩占比',
titleX: '业绩占比',
width: 90, width: 90,
dataIndex: ['resultToY', 'SumMLPercent'], // 'SumMLPercent', dataIndex: ['resultToY', 'SumMLPercent'], // 'SumMLPercent',
render: (v, r) => r.resultToY.SumMLPercent ? <RingProgress {...RingProgressConfigY} percent={r.resultToY.SumMLPercent / 100} /> : '-', render: (v, r) => r.resultToY.SumMLPercent ? <RingProgress {...RingProgressConfigY} percent={r.resultToY.SumMLPercent / 100} /> : '-',
@ -183,12 +185,14 @@ export default observer(() => {
children: [ children: [
{ {
title: '团数占比', title: '团数占比',
titleX: '团数占比',
width: 90, width: 90,
dataIndex: ['resultToQ', 'ConfirmOrderPercent'], // 'ConfirmOrderPercent', dataIndex: ['resultToQ', 'ConfirmOrderPercent'], // 'ConfirmOrderPercent',
render: (v, r) => r.resultToQ.ConfirmOrderPercent ? <RingProgress {...RingProgressConfigQ} percent={r.resultToQ.ConfirmOrderPercent / 100} /> : '-', render: (v, r) => r.resultToQ.ConfirmOrderPercent ? <RingProgress {...RingProgressConfigQ} percent={r.resultToQ.ConfirmOrderPercent / 100} /> : '-',
}, },
{ {
title: '业绩占比', title: '业绩占比',
titleX: '业绩占比',
width: 90, width: 90,
dataIndex: ['resultToQ', 'SumMLPercent'], // 'SumMLPercent', dataIndex: ['resultToQ', 'SumMLPercent'], // 'SumMLPercent',
render: (v, r) => r.resultToQ.SumMLPercent ? <RingProgress {...RingProgressConfigQ} percent={r.resultToQ.SumMLPercent / 100} /> : '-', render: (v, r) => r.resultToQ.SumMLPercent ? <RingProgress {...RingProgressConfigQ} percent={r.resultToQ.SumMLPercent / 100} /> : '-',

@ -28,83 +28,92 @@ class Orders extends Component {
if (date_picker_store.start_date_cp && date_picker_store.end_date_cp) { if (date_picker_store.start_date_cp && date_picker_store.end_date_cp) {
// //
result.columns = [ result.columns = [
{ {
title: "", title: '#',
fixed: 'left', fixed: 'left',
children: [ children: [
{ {
title: ( title: (
<span> <span>
<div> <div>
{date_picker_store.start_date.format(config.DATE_FORMAT)}~{date_picker_store.end_date.format(config.DATE_FORMAT)} {date_picker_store.start_date.format(config.DATE_FORMAT)}~{date_picker_store.end_date.format(config.DATE_FORMAT)}
</div> </div>
<div> <div>
{date_picker_store.start_date_cp.format(config.DATE_FORMAT)}~{date_picker_store.end_date_cp.format(config.DATE_FORMAT)} {date_picker_store.start_date_cp.format(config.DATE_FORMAT)}~{date_picker_store.end_date_cp.format(config.DATE_FORMAT)}
</div> </div>
</span> </span>
), ),
dataIndex: "OrderType", titleX: `${date_picker_store.start_date.format(config.DATE_FORMAT)}~${date_picker_store.end_date.format(config.DATE_FORMAT)} vs ${date_picker_store.start_date_cp.format(
config.DATE_FORMAT
)}~${date_picker_store.end_date_cp.format(config.DATE_FORMAT)}`,
dataIndex: 'OrderType',
fixed: 'left', fixed: 'left',
render: (text, record) => <NavLink to={`/orders_sub/${orders_store.active_tab_key}/${record.OrderTypeSN}/${record.OrderType}`}>{text}</NavLink>, render: (text, record) => <NavLink to={`/orders_sub/${orders_store.active_tab_key}/${record.OrderTypeSN}/${record.OrderType}`}>{text}</NavLink>,
}, },
], ],
}, },
{ {
title: "数量", title: '数量',
children: [ children: [
{ {
title: comm.show_vs_tag(ordercountTotal1.OrderCount_vs, ordercountTotal1.OrderCount_diff, ordercountTotal1.OrderCount, ordercountTotal2.OrderCount), title: comm.show_vs_tag(ordercountTotal1.OrderCount_vs, ordercountTotal1.OrderCount_diff, ordercountTotal1.OrderCount, ordercountTotal2.OrderCount),
dataIndex: "OrderCount", titleX: [ordercountTotal1.OrderCount, ordercountTotal2.OrderCount].join(' vs '),
}, dataIndex: 'OrderCount',
], },
}, ],
{ },
title: "成交数", {
children: [ title: '成交数',
{ children: [
title: comm.show_vs_tag(ordercountTotal1.CJCount_vs, ordercountTotal1.CJCount_diff, ordercountTotal1.CJCount, ordercountTotal2.CJCount), {
dataIndex: "CJCount", title: comm.show_vs_tag(ordercountTotal1.CJCount_vs, ordercountTotal1.CJCount_diff, ordercountTotal1.CJCount, ordercountTotal2.CJCount),
}, titleX: [ordercountTotal1.CJCount, ordercountTotal2.CJCount].join(' vs '),
], dataIndex: 'CJCount',
}, },
{ ],
title: "成交人数", },
children: [ {
{ title: '成交人数',
title: comm.show_vs_tag(ordercountTotal1.CJPersonNum_vs, ordercountTotal1.CJPersonNum_diff, ordercountTotal1.CJPersonNum, ordercountTotal2.CJPersonNum), children: [
dataIndex: "CJPersonNum", {
}, title: comm.show_vs_tag(ordercountTotal1.CJPersonNum_vs, ordercountTotal1.CJPersonNum_diff, ordercountTotal1.CJPersonNum, ordercountTotal2.CJPersonNum),
], titleX: [ordercountTotal1.CJPersonNum, ordercountTotal2.CJPersonNum].join(' vs '),
}, dataIndex: 'CJPersonNum',
{ },
title: "成交率", ],
children: [ },
{ {
title: comm.show_vs_tag(ordercountTotal1.CJrate_vs, ordercountTotal1.CJrate_diff, ordercountTotal1.CJrate, ordercountTotal2.CJrate), title: '成交率',
dataIndex: "CJrate", children: [
}, {
], title: comm.show_vs_tag(ordercountTotal1.CJrate_vs, ordercountTotal1.CJrate_diff, ordercountTotal1.CJrate, ordercountTotal2.CJrate),
}, titleX: [ordercountTotal1.CJrate, ordercountTotal2.CJrate].join(' vs '),
{ dataIndex: 'CJrate',
title: "成交毛利(预计)", },
children: [ ],
{ },
title: comm.show_vs_tag(ordercountTotal1.YJLY_vs, ordercountTotal1.YJLY_diff, ordercountTotal1.YJLY, ordercountTotal2.YJLY), {
dataIndex: "YJLY", title: '成交毛利(预计)',
}, children: [
], {
}, title: comm.show_vs_tag(ordercountTotal1.YJLY_vs, ordercountTotal1.YJLY_diff, ordercountTotal1.YJLY, ordercountTotal2.YJLY),
titleX: [ordercountTotal1.YJLY, ordercountTotal2.YJLY].join(' vs '),
dataIndex: 'YJLY',
},
],
},
{ {
title: "单个订单价值", title: '单个订单价值',
children: [ children: [
{ {
title: comm.show_vs_tag(ordercountTotal1.Ordervalue_vs, ordercountTotal1.Ordervalue_diff, ordercountTotal1.Ordervalue, ordercountTotal2.Ordervalue), title: comm.show_vs_tag(ordercountTotal1.Ordervalue_vs, ordercountTotal1.Ordervalue_diff, ordercountTotal1.Ordervalue, ordercountTotal2.Ordervalue),
dataIndex: "Ordervalue", titleX: [ordercountTotal1.Ordervalue, ordercountTotal2.Ordervalue].join(' vs '),
}, dataIndex: 'Ordervalue',
], },
}, ],
]; },
];
// 1.OrderType 2.OrderType // 1.OrderType 2.OrderType
let has_same_type = false; // 12 let has_same_type = false; // 12
for (const item of data.ordercount1) { for (const item of data.ordercount1) {
@ -118,11 +127,17 @@ class Orders extends Component {
OrderType: item.OrderType, OrderType: item.OrderType,
OrderTypeSN: item.OrderTypeSN, OrderTypeSN: item.OrderTypeSN,
OrderCount: comm.show_vs_tag(item.OrderCount_vs, item.OrderCount_diff, item.OrderCount, item2.OrderCount), OrderCount: comm.show_vs_tag(item.OrderCount_vs, item.OrderCount_diff, item.OrderCount, item2.OrderCount),
OrderCount_X: ([item.OrderCount, item2.OrderCount].join(' vs ')),
CJCount: comm.show_vs_tag(item.CJCount_vs, item.CJCount_diff, item.CJCount, item2.CJCount), CJCount: comm.show_vs_tag(item.CJCount_vs, item.CJCount_diff, item.CJCount, item2.CJCount),
CJCount_X: ([item.CJCount, item2.CJCount].join(' vs ')),
CJPersonNum: comm.show_vs_tag(item.CJPersonNum_vs, item.CJPersonNum_diff, item.CJPersonNum, item2.CJPersonNum), CJPersonNum: comm.show_vs_tag(item.CJPersonNum_vs, item.CJPersonNum_diff, item.CJPersonNum, item2.CJPersonNum),
CJPersonNum_X: ([item.CJPersonNum, item2.CJPersonNum].join(' vs ')),
CJrate: comm.show_vs_tag(item.CJrate_vs, item.CJrate_diff, item.CJrate, item2.CJrate), CJrate: comm.show_vs_tag(item.CJrate_vs, item.CJrate_diff, item.CJrate, item2.CJrate),
CJrate_X: ([item.CJrate, item2.CJrate].join(' vs ')),
YJLY: comm.show_vs_tag(item.YJLY_vs, item.YJLY_diff, item.YJLY, item2.YJLY), YJLY: comm.show_vs_tag(item.YJLY_vs, item.YJLY_diff, item.YJLY, item2.YJLY),
YJLY_X: ([item.YJLY, item2.YJLY].join(' vs ')),
Ordervalue: comm.show_vs_tag(item.Ordervalue_vs, item.Ordervalue_diff, item.Ordervalue, item2.Ordervalue), Ordervalue: comm.show_vs_tag(item.Ordervalue_vs, item.Ordervalue_diff, item.Ordervalue, item2.Ordervalue),
Ordervalue_X: ([item.Ordervalue, item2.Ordervalue].join(' vs ')),
}); });
} }
} }
@ -133,11 +148,17 @@ class Orders extends Component {
OrderType: item.OrderType, OrderType: item.OrderType,
OrderTypeSN: item.OrderTypeSN, OrderTypeSN: item.OrderTypeSN,
OrderCount: comm.show_vs_tag(comm.formatPercent(item.OrderCount), item.OrderCount, item.OrderCount, 0), OrderCount: comm.show_vs_tag(comm.formatPercent(item.OrderCount), item.OrderCount, item.OrderCount, 0),
OrderCount_X: ([item.OrderCount, 0].join(' vs ')),
CJCount: comm.show_vs_tag(comm.formatPercent(item.CJCount), item.CJCount, item.CJCount, 0), CJCount: comm.show_vs_tag(comm.formatPercent(item.CJCount), item.CJCount, item.CJCount, 0),
CJCount_X: ([item.CJCount, 0].join(' vs ')),
CJPersonNum: comm.show_vs_tag(comm.formatPercent(item.CJPersonNum), item.CJPersonNum, item.CJPersonNum, 0), CJPersonNum: comm.show_vs_tag(comm.formatPercent(item.CJPersonNum), item.CJPersonNum, item.CJPersonNum, 0),
CJPersonNum_X: ([item.CJPersonNum, 0].join(' vs ')),
CJrate: comm.show_vs_tag(item.CJrate, item.CJrate, item.CJrate, 0), CJrate: comm.show_vs_tag(item.CJrate, item.CJrate, item.CJrate, 0),
CJrate_X: ([item.CJrate, 0].join(' vs ')),
YJLY: comm.show_vs_tag(comm.formatPercent(item.YJLY), item.YJLY, item.YJLY, 0), YJLY: comm.show_vs_tag(comm.formatPercent(item.YJLY), item.YJLY, item.YJLY, 0),
YJLY_X: ([item.YJLY, 0].join(' vs ')),
Ordervalue: comm.show_vs_tag(comm.formatPercent(item.Ordervalue), item.Ordervalue, item.Ordervalue, 0), Ordervalue: comm.show_vs_tag(comm.formatPercent(item.Ordervalue), item.Ordervalue, item.Ordervalue, 0),
Ordervalue_X: ([item.Ordervalue, 0].join(' vs ')),
}); });
} }
} }
@ -155,18 +176,24 @@ class Orders extends Component {
OrderType: item2.OrderType, OrderType: item2.OrderType,
OrderTypeSN: item2.OrderTypeSN, OrderTypeSN: item2.OrderTypeSN,
OrderCount: comm.show_vs_tag(comm.formatPercent(-item2.OrderCount), -item2.OrderCount, 0, item2.OrderCount), OrderCount: comm.show_vs_tag(comm.formatPercent(-item2.OrderCount), -item2.OrderCount, 0, item2.OrderCount),
OrderCount_X: ([ 0, item2.OrderCount].join(' vs ')),
CJCount: comm.show_vs_tag(comm.formatPercent(-item2.CJCount), -item2.CJCount, 0, item2.CJCount), CJCount: comm.show_vs_tag(comm.formatPercent(-item2.CJCount), -item2.CJCount, 0, item2.CJCount),
CJCount_X: ([ 0, item2.CJCount].join(' vs ')),
CJPersonNum: comm.show_vs_tag(comm.formatPercent(-item2.CJPersonNum), -item2.CJPersonNum, 0, item2.CJPersonNum), CJPersonNum: comm.show_vs_tag(comm.formatPercent(-item2.CJPersonNum), -item2.CJPersonNum, 0, item2.CJPersonNum),
CJPersonNum_X: ([0, item2.CJPersonNum].join(' vs ')),
CJrate: comm.show_vs_tag(-item2.CJrate, -item2.CJrate, 0, item2.CJrate), CJrate: comm.show_vs_tag(-item2.CJrate, -item2.CJrate, 0, item2.CJrate),
CJrate_X: ([ 0, item2.CJrate].join(' vs ')),
YJLY: comm.show_vs_tag(comm.formatPercent(-item2.YJLY), -item2.YJLY, 0, item2.YJLY), YJLY: comm.show_vs_tag(comm.formatPercent(-item2.YJLY), -item2.YJLY, 0, item2.YJLY),
YJLY_X: ([0, item2.YJLY].join(' vs ')),
Ordervalue: comm.show_vs_tag(comm.formatPercent(-item2.Ordervalue), -item2.Ordervalue, 0, item2.Ordervalue), Ordervalue: comm.show_vs_tag(comm.formatPercent(-item2.Ordervalue), -item2.Ordervalue, 0, item2.Ordervalue),
Ordervalue_X: ([ 0, item2.Ordervalue].join(' vs ')),
}); });
} }
} }
} else { } else {
result.columns = [ result.columns = [
{ {
title: "", title: "#",
fixed: 'left', fixed: 'left',
children: [ children: [
{ {
@ -177,6 +204,7 @@ class Orders extends Component {
</div> </div>
</span> </span>
), ),
titleX: `${date_picker_store.start_date.format(config.DATE_FORMAT)}~${date_picker_store.end_date.format(config.DATE_FORMAT)}`,
fixed: 'left', fixed: 'left',
dataIndex: "OrderType", dataIndex: "OrderType",
render: (text, record) => <NavLink to={`/orders_sub/${orders_store.active_tab_key}/${record.OrderTypeSN}/${record.OrderType}`}>{text}</NavLink>, render: (text, record) => <NavLink to={`/orders_sub/${orders_store.active_tab_key}/${record.OrderTypeSN}/${record.OrderType}`}>{text}</NavLink>,

Loading…
Cancel
Save