diff --git a/src/components/Data.jsx b/src/components/Data.jsx index e5c4891..12671c9 100644 --- a/src/components/Data.jsx +++ b/src/components/Data.jsx @@ -1,5 +1,8 @@ -import { Tag } from 'antd'; -import { CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons'; +import { 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 } from "../utils/commons"; /** * @property diffPercent @@ -24,3 +27,49 @@ export const VSTag = (props) => { ); }; + +/** + * 导出表格数据存为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 ( + + ); +}; diff --git a/src/views/Orders_sub.jsx b/src/views/Orders_sub.jsx index 453ec5d..b4b5489 100644 --- a/src/views/Orders_sub.jsx +++ b/src/views/Orders_sub.jsx @@ -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 { ContainerOutlined } from "@ant-design/icons"; import { stores_Context } from "../config"; @@ -10,6 +10,7 @@ import * as config from "../config"; import { utils, writeFileXLSX } from "xlsx"; import DateGroupRadio from '../components/DateGroupRadio'; import SearchForm from './../components/search/SearchForm'; +import { TableExportBtn } from './../components/Data'; const Orders_sub = () => { 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_data2_p = format_data(orders_store.orderCountData_Form_sub.ordercount2); - return ( -
- - - 返回 - - - { - orders_store.setSearchValues(obj, form); - orders_store.getOrderCount_type(ordertype, ordertype_sub); - orders_store.getOrderCountByType_sub(ordertype, ordertype_sub, orders_store.active_tab_key_sub); - }} - /> + + const tab_items = [ + { + key: 'detail', label: 订单内容, title: '订单内容', + children: ( + + {date_picker_store.start_date.format(config.DATE_FORMAT)}~{date_picker_store.end_date.format(config.DATE_FORMAT)} + record.key} + expandable={{ + expandedRowRender: record => ( + 
+                  
+                    客户需求
+                  
+                  {record.COLI_CustomerRequest}
+                  
+                    订单内容
+                  
+                  {record.COLI_OrderDetailText}
+
+ ), + }} + /> + + { + const wb = utils.table_to_book(document.getElementById("table_to_xlsx_form").getElementsByTagName("table")[0]); + writeFileXLSX(wb, "订单列表.xlsx"); + }}> + 导出excel + + + + + + {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) : ""} +
record.key} + expandable={{ + expandedRowRender: record => 
{record.COLI_OrderDetailText}
, + }} + /> + + ), + }, + { key: 'page', label: 访问路径, title: '访问路径',children: ( + + {date_picker_store.start_date.format(config.DATE_FORMAT)}~{date_picker_store.end_date.format(config.DATE_FORMAT)} +
record.key} columns={table_data_p.columns} size="small" /> + + + + {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) : ""} +
record.key} columns={table_data2_p.columns} size="small" /> + + )}, + { key: 'page_cxstate1', label: 访问路径（成行）, title: '访问路径（成行）',children: ( + + {date_picker_store.start_date.format(config.DATE_FORMAT)}~{date_picker_store.end_date.format(config.DATE_FORMAT)} +
record.key} columns={table_data_p.columns} size="small" /> - - - - - - - - + + {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) : ""} +
record.key} columns={table_data2_p.columns} size="small" /> + + )}, + ]; - - orders_store.onChange_Tabs_sub(ordertype, ordertype_sub, active_key)}> - - - 订单内容 - - } - key="detail"> - - - {date_picker_store.start_date.format(config.DATE_FORMAT)}~{date_picker_store.end_date.format(config.DATE_FORMAT)} -
record.key} - expandable={{ - expandedRowRender: record => ( - 
-													
-														客户需求
-													
-													{record.COLI_CustomerRequest}
-													
-														订单内容
-													
-													{record.COLI_OrderDetailText}
-
- ), - }} - /> - - { - const wb = utils.table_to_book(document.getElementById("table_to_xlsx_form").getElementsByTagName("table")[0]); - writeFileXLSX(wb, "订单列表.xlsx"); - }}> - 导出excel - - - + const [propsForExport, setPropsForExport] = useState(tab_items[0]); + const tabItemsMapped = tab_items.reduce((r, v) => ({...r, [v.key]: v}), {}); + const onTabsChange = (active_key) => { + setPropsForExport(tabItemsMapped[active_key]); + orders_store.onChange_Tabs_sub(ordertype, ordertype_sub, active_key); + }; - - {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) : ""} -
record.key} - expandable={{ - expandedRowRender: record => 
{record.COLI_OrderDetailText}
, - }} - /> - - - - - - 访问路径 - - } - key="page"> - - - {date_picker_store.start_date.format(config.DATE_FORMAT)}~{date_picker_store.end_date.format(config.DATE_FORMAT)} -
record.key} columns={table_data_p.columns} size="small" /> - + return ( +
+ +
+ 返回 + + + { + orders_store.setSearchValues(obj, form); + orders_store.getOrderCount_type(ordertype, ordertype_sub); + orders_store.getOrderCountByType_sub(ordertype, ordertype_sub, orders_store.active_tab_key_sub); + }} + /> + + + + + - - {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) : ""} -
record.key} columns={table_data2_p.columns} size="small" /> - - - - - - 访问路径（成行） - - } - key="page_cxstate1"> - - - {date_picker_store.start_date.format(config.DATE_FORMAT)}~{date_picker_store.end_date.format(config.DATE_FORMAT)} -
record.key} columns={table_data_p.columns} size="small" /> - + + + + - - {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) : ""} -
record.key} columns={table_data2_p.columns} size="small" /> - - - - - - - - ); + + + ), + }} + items={tab_items} + /> + + + + ); }; export default observer(Orders_sub);