You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
95 lines
3.2 KiB
JavaScript
95 lines
3.2 KiB
JavaScript
import React, { useState, useEffect } from "react";
|
|
import { Tag, Button, message } from 'antd';
|
|
import { CaretUpOutlined, CaretDownOutlined, DownloadOutlined } from '@ant-design/icons';
|
|
import { utils, writeFile } from "xlsx";
|
|
import { isEmpty, getNestedValue } from "../utils/commons";
|
|
|
|
/**
|
|
* @property diffPercent
|
|
* @property diffData
|
|
* @property data1
|
|
* @property data2
|
|
*/
|
|
export const VSTag = (props) => {
|
|
const { diffPercent, diffData, data1, data2 } = props;
|
|
const CaretIcon = parseInt(diffPercent) < 0 ? CaretDownOutlined : CaretUpOutlined;
|
|
const tagColor = parseInt(diffPercent) < 0 ? 'gold' : 'lime';
|
|
return parseInt(diffPercent) === 0 ? (
|
|
'-'
|
|
) : (
|
|
<span>
|
|
{/* <div>
|
|
{data1} vs {data2}
|
|
</div> */}
|
|
<Tag icon={<CaretIcon />} color={tagColor}>
|
|
{diffPercent}<span>%</span>{' '}<span>{diffData}</span>
|
|
</Tag>
|
|
</span>
|
|
);
|
|
};
|
|
|
|
/**
|
|
* 导出表格数据存为xlsx
|
|
*/
|
|
export const TableExportBtn = (props) => {
|
|
const output_name = `${props.label}`;
|
|
const [columnsMap, setColumnsMap] = useState([]);
|
|
const [summaryRow, setSummaryRow] = useState({});
|
|
useEffect(() => {
|
|
const r1 = props.columns.reduce((r, v) => ({
|
|
...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);
|
|
// console.log('flatCols', flatCols);
|
|
|
|
setSummaryRow(r1);
|
|
// console.log('summaryRow', r1);
|
|
|
|
return () => {};
|
|
}, [props.columns]);
|
|
|
|
const onExport = () => {
|
|
if (isEmpty(props.dataSource)) {
|
|
message.warning('无结果.');
|
|
return false;
|
|
}
|
|
const data = props.dataSource.map((item) => {
|
|
const itemMapped = columnsMap.reduce((sv, kset) => {
|
|
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 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 itemMapped;
|
|
});
|
|
const ws = utils.json_to_sheet([summaryRow, ...data], { header: columnsMap.filter((r) => r.dataIndex).map((r) => r.title) });
|
|
const wb = utils.book_new();
|
|
utils.book_append_sheet(wb, ws, 'sheet');
|
|
writeFile(wb, `${output_name}.xlsx`);
|
|
};
|
|
|
|
return (
|
|
<Button
|
|
type="link"
|
|
icon={<DownloadOutlined />}
|
|
size="small"
|
|
disabled={false}
|
|
onClick={onExport}
|
|
>
|
|
导出excel
|
|
</Button>
|
|
);
|
|
};
|