Haina
/
dashboard
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

perf: 订单>子维度: 表格导出

Browse Source
feature/pivot
Lei OT 2 years ago
parent e34f769723
commit 150b42418f
2 changed files with 196 additions and 146 deletions
Show Stats Download Patch File Download Diff File

53
src/components/Data.jsx
Unescape Escape View File

@ -1,5 +1,8 @@
import { Tag } from 'antd'; import { useState, useEffect } from "react";
import { CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons'; import { Tag, Button, message } from 'antd';
import { CaretUpOutlined, CaretDownOutlined, DownloadOutlined } from '@ant-design/icons';
import { utils, writeFile } from "xlsx";
import { isEmpty } from "../utils/commons";
/** /**
* @property diffPercent * @property diffPercent
@ -24,3 +27,49 @@ export const VSTag = (props) => {
</span> </span>
); );
}; };
/**
* 导出表格数据存为xlsx
*/
export const TableExportBtn = (props) => {
const output_name = `${props.label}`;
const [columnsMap, setColumnsMap] = useState([]);
useEffect(() => {
const flatCols = props.columns.flatMap((v, k) => (v.children ? v.children.map((vc) => ({ ...vc, title: `${v.title}-${vc.title}` })) : v)).filter(c => c.title);
setColumnsMap(flatCols);
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 ? item[kset.dataIndex] : undefined;
const v = { [kset.title]: render_val || data_val };
return { ...sv, ...v };
}, {});
return itemMapped;
});
const ws = utils.json_to_sheet(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>
);
};

289
src/views/Orders_sub.jsx
Unescape Escape View File

@ -1,4 +1,4 @@
import React, { useContext, useEffect } from "react"; import React, { useContext, useEffect, useState } from "react";
import { Row, Col, Tabs, Table, Divider } from "antd"; import { Row, Col, Tabs, Table, Divider } from "antd";
import { ContainerOutlined } from "@ant-design/icons"; import { ContainerOutlined } from "@ant-design/icons";
import { stores_Context } from "../config"; import { stores_Context } from "../config";
@ -10,6 +10,7 @@ import * as config from "../config";
import { utils, writeFileXLSX } from "xlsx"; import { utils, writeFileXLSX } from "xlsx";
import DateGroupRadio from '../components/DateGroupRadio'; import DateGroupRadio from '../components/DateGroupRadio';
import SearchForm from './../components/search/SearchForm'; import SearchForm from './../components/search/SearchForm';
import { TableExportBtn } from './../components/Data';
const Orders_sub = () => { const Orders_sub = () => {
const { ordertype, ordertype_sub, ordertype_title } = useParams(); const { ordertype, ordertype_sub, ordertype_title } = useParams();
@ -175,154 +176,154 @@ const Orders_sub = () => {
const table_data_p = format_data(orders_store.orderCountData_Form_sub.ordercount1); const table_data_p = format_data(orders_store.orderCountData_Form_sub.ordercount1);
const table_data2_p = format_data(orders_store.orderCountData_Form_sub.ordercount2); const table_data2_p = format_data(orders_store.orderCountData_Form_sub.ordercount2);
return (
<div> const tab_items = [
<Row gutter={{ sm: 16, lg: 32 }}> {
<Col md={24} lg={12} xxl={14}> key: 'detail', label: <span><ContainerOutlined />订单内容</span>, title: '订单内容',
<NavLink to={`/orders`}>返回</NavLink> children: (<Row>
</Col> <Col span={24}>
<Col className="gutter-row" span={24}> {date_picker_store.start_date.format(config.DATE_FORMAT)}~{date_picker_store.end_date.format(config.DATE_FORMAT)}
<SearchForm <Table
defaultValue={{ id="table_to_xlsx_form"
initialValue: { dataSource={table_data.dataSource}
...date_picker_store.formValues, columns={table_data.columns}
...orders_store.searchValues, size="small"
}, pagination={false}
shows: ['DateType', 'DepartmentList', 'WebCode', 'IncludeTickets', 'dates'], rowKey={record => record.key}
fieldProps: { expandable={{
DepartmentList: { show_all: false }, expandedRowRender: record => (
WebCode: { show_all: true }, <pre>
// dates: { hide_vs: true }, <Divider orientation="left" plain>
}, 客户需求
}} </Divider>
onSubmit={(_err, obj, form, str) => { {record.COLI_CustomerRequest}
orders_store.setSearchValues(obj, form); <Divider orientation="left" plain>
orders_store.getOrderCount_type(ordertype, ordertype_sub); 订单内容
orders_store.getOrderCountByType_sub(ordertype, ordertype_sub, orders_store.active_tab_key_sub); </Divider>
}} {record.COLI_OrderDetailText}
/> </pre>
),
}}
/>
<Divider orientation="right" plain>
<a
onClick={() => {
const wb = utils.table_to_book(document.getElementById("table_to_xlsx_form").getElementsByTagName("table")[0]);
writeFileXLSX(wb, "订单列表.xlsx");
}}>
导出excel
</a>
</Divider>
</Col>
<Col span={24}>
{date_picker_store.start_date_cp ? date_picker_store.start_date_cp.format(config.DATE_FORMAT) + "~" + date_picker_store.end_date_cp.format(config.DATE_FORMAT) : ""}
<Table
dataSource={table_data2.dataSource}
columns={table_data2.columns}
size="small"
rowKey={record => record.key}
expandable={{
expandedRowRender: record => <pre>{record.COLI_OrderDetailText}</pre>,
}}
/>
</Col>
</Row>),
},
{ key: 'page', label: <span><ContainerOutlined />访问路径</span>, title: '访问路径',children: (<Row>
<Col span={24}>
{date_picker_store.start_date.format(config.DATE_FORMAT)}~{date_picker_store.end_date.format(config.DATE_FORMAT)}
<Table dataSource={table_data_p.dataSource} rowKey={record => record.key} columns={table_data_p.columns} size="small" />
</Col>
<Col span={24}>
{date_picker_store.start_date_cp ? date_picker_store.start_date_cp.format(config.DATE_FORMAT) + "~" + date_picker_store.end_date_cp.format(config.DATE_FORMAT) : ""}
<Table dataSource={table_data2_p.dataSource} rowKey={record => record.key} columns={table_data2_p.columns} size="small" />
</Col>
</Row>)},
{ key: 'page_cxstate1', label: <span><ContainerOutlined />访问路径（成行）</span>, title: '访问路径（成行）',children: (<Row>
<Col span={24}>
{date_picker_store.start_date.format(config.DATE_FORMAT)}~{date_picker_store.end_date.format(config.DATE_FORMAT)}
<Table dataSource={table_data_p.dataSource} rowKey={record => record.key} columns={table_data_p.columns} size="small" />
</Col> </Col>
<Col span={24} style={{textAlign: 'right'}}>
<DateGroupRadio
visible={data_source.length!==0}
dataRaw={orders_store.orderCountDataRaw_type}
onChange={orders_store.onChangeDateGroupSub}
value={orders_store.orderCount_type_dateRadio.lineChartXGroup}
dataMapper={orders_store.orderCount_type_dateRadio.orderCountDataMapper}
fieldMapper={orders_store.orderCount_type_dateRadio.orderCountDataFieldMapper}
/>
</Col>
</Row>
<Row gutter={[16, { xs: 8, sm: 16, md: 24, lg: 32 }]}> <Col span={24}>
<Col className="gutter-row" span={24}> {date_picker_store.start_date_cp ? date_picker_store.start_date_cp.format(config.DATE_FORMAT) + "~" + date_picker_store.end_date_cp.format(config.DATE_FORMAT) : ""}
<Line {...line} /> <Table dataSource={table_data2_p.dataSource} rowKey={record => record.key} columns={table_data2_p.columns} size="small" />
</Col> </Col>
</Row>)},
];
<Col className="gutter-row" span={24}> const [propsForExport, setPropsForExport] = useState(tab_items[0]);
<Tabs activeKey={orders_store.active_tab_key_sub} onChange={active_key => orders_store.onChange_Tabs_sub(ordertype, ordertype_sub, active_key)}> const tabItemsMapped = tab_items.reduce((r, v) => ({...r, [v.key]: v}), {});
<Tabs.TabPane const onTabsChange = (active_key) => {
tab={ setPropsForExport(tabItemsMapped[active_key]);
<span> orders_store.onChange_Tabs_sub(ordertype, ordertype_sub, active_key);
<ContainerOutlined /> };
订单内容
</span>
}
key="detail">
<Row>
<Col span={24}>
{date_picker_store.start_date.format(config.DATE_FORMAT)}~{date_picker_store.end_date.format(config.DATE_FORMAT)}
<Table
id="table_to_xlsx_form"
dataSource={table_data.dataSource}
columns={table_data.columns}
size="small"
pagination={false}
rowKey={record => record.key}
expandable={{
expandedRowRender: record => (
<pre>
<Divider orientation="left" plain>
客户需求
</Divider>
{record.COLI_CustomerRequest}
<Divider orientation="left" plain>
订单内容
</Divider>
{record.COLI_OrderDetailText}
</pre>
),
}}
/>
<Divider orientation="right" plain>
<a
onClick={() => {
const wb = utils.table_to_book(document.getElementById("table_to_xlsx_form").getElementsByTagName("table")[0]);
writeFileXLSX(wb, "订单列表.xlsx");
}}>
导出excel
</a>
</Divider>
</Col>
<Col span={24}> return (
{date_picker_store.start_date_cp ? date_picker_store.start_date_cp.format(config.DATE_FORMAT) + "~" + date_picker_store.end_date_cp.format(config.DATE_FORMAT) : ""} <div>
<Table <Row gutter={{ sm: 16, lg: 32 }}>
dataSource={table_data2.dataSource} <Col md={24} lg={12} xxl={14}>
columns={table_data2.columns} <NavLink to={`/orders`}>返回</NavLink>
size="small" </Col>
rowKey={record => record.key} <Col className="gutter-row" span={24}>
expandable={{ <SearchForm
expandedRowRender: record => <pre>{record.COLI_OrderDetailText}</pre>, defaultValue={{
}} initialValue: {
/> ...date_picker_store.formValues,
</Col> ...orders_store.searchValues,
</Row> },
</Tabs.TabPane> shows: ['DateType', 'DepartmentList', 'WebCode', 'IncludeTickets', 'dates'],
<Tabs.TabPane fieldProps: {
tab={ DepartmentList: { show_all: false },
<span> WebCode: { show_all: true },
<ContainerOutlined /> // dates: { hide_vs: true },
访问路径 },
</span> }}
} onSubmit={(_err, obj, form, str) => {
key="page"> orders_store.setSearchValues(obj, form);
<Row> orders_store.getOrderCount_type(ordertype, ordertype_sub);
<Col span={24}> orders_store.getOrderCountByType_sub(ordertype, ordertype_sub, orders_store.active_tab_key_sub);
{date_picker_store.start_date.format(config.DATE_FORMAT)}~{date_picker_store.end_date.format(config.DATE_FORMAT)} }}
<Table dataSource={table_data_p.dataSource} rowKey={record => record.key} columns={table_data_p.columns} size="small" /> />
</Col> </Col>
<Col span={24} style={{ textAlign: 'right' }}>
<DateGroupRadio
visible={data_source.length !== 0}
dataRaw={orders_store.orderCountDataRaw_type}
onChange={orders_store.onChangeDateGroupSub}
value={orders_store.orderCount_type_dateRadio.lineChartXGroup}
dataMapper={orders_store.orderCount_type_dateRadio.orderCountDataMapper}
fieldMapper={orders_store.orderCount_type_dateRadio.orderCountDataFieldMapper}
/>
</Col>
</Row>
<Col span={24}> <Row gutter={[16, { xs: 8, sm: 16, md: 24, lg: 32 }]}>
{date_picker_store.start_date_cp ? date_picker_store.start_date_cp.format(config.DATE_FORMAT) + "~" + date_picker_store.end_date_cp.format(config.DATE_FORMAT) : ""} <Col className="gutter-row" span={24}>
<Table dataSource={table_data2_p.dataSource} rowKey={record => record.key} columns={table_data2_p.columns} size="small" /> <Line {...line} />
</Col> </Col>
</Row>
</Tabs.TabPane>
<Tabs.TabPane
tab={
<span>
<ContainerOutlined />
访问路径（成行）
</span>
}
key="page_cxstate1">
<Row>
<Col span={24}>
{date_picker_store.start_date.format(config.DATE_FORMAT)}~{date_picker_store.end_date.format(config.DATE_FORMAT)}
<Table dataSource={table_data_p.dataSource} rowKey={record => record.key} columns={table_data_p.columns} size="small" />
</Col>
<Col span={24}> <Col className="gutter-row" span={24}>
{date_picker_store.start_date_cp ? date_picker_store.start_date_cp.format(config.DATE_FORMAT) + "~" + date_picker_store.end_date_cp.format(config.DATE_FORMAT) : ""} <Tabs
<Table dataSource={table_data2_p.dataSource} rowKey={record => record.key} columns={table_data2_p.columns} size="small" /> activeKey={orders_store.active_tab_key_sub}
</Col> onChange={onTabsChange}
</Row> tabBarExtraContent={{
</Tabs.TabPane> right: (
</Tabs> <TableExportBtn
</Col> label={propsForExport.title}
</Row> {...(orders_store.active_tab_key_sub === 'detail'
</div> ? { columns: table_data.columns, dataSource: table_data.dataSource }
); : { columns: table_data_p.columns, dataSource: table_data_p.dataSource })}
/>
),
}}
items={tab_items}
/>
</Col>
</Row>
</div>
);
}; };
export default observer(Orders_sub); export default observer(Orders_sub);

Write Preview
Loading…
Cancel
Save