perf: 导出表格: render 显示不正确; 酒店/三峡导出

src/components/Data.jsx

@@ -69,11 +69,12 @@ export const TableExportBtn = ({label, columns, dataSource, btnTxt, ...props}) =
     }
     const data = dataSource.map((item) => {
       const itemMapped = columnsMap.reduce((sv, kset) => {
+        const export_val = typeof kset?.dataExport === 'function' ? kset.dataExport('', 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 x_val = item[`${kset.dataIndex}_X`];
         // const _title = kset.title.replace('-[object Object]', '');
-        const v = { [kset.title]: x_val || data_val || render_val };
+        const v = { [kset.title]: x_val || export_val || data_val || render_val };
         return { ...sv, ...v };
       }, {});
       return itemMapped;

src/views/Cruise.jsx

@@ -1,9 +1,9 @@
 import React, { useContext } from 'react';
 import { observer } from 'mobx-react';
 import { stores_Context } from '../config';
-import { Row, Col, Table, Space, Typography } from 'antd';
+import { Row, Col, Table, Space, Typography, Divider } from 'antd';
 import SearchForm from './../components/search/SearchForm';
-import { VSTag } from './../components/Data';
+import { VSTag, TableExportBtn } from './../components/Data';
 import { CruiseAgency } from './../libs/ht';
 
 const { Text } = Typography;
@@ -16,12 +16,14 @@ export default observer((props) => {
   const { formValues, siderBroken } = searchFormStore;
 
   const tableSorter = (a, b, colName) => a[colName] - b[colName];
+  const tableExportDataRow = (col1, col2) => [col1, col2].filter((r) => r).join(' VS ');
   const tableProps = {
     size: 'small',
     bordered: true,
     pagination: false,
     columns: [
-      { title: '产品', children: [{ title: summaryRow.ProductName, dataIndex: 'ProductName', key: 'ProductName' }] },
+      { title: '产品',
+        sorter: (a, b) => a.ProductName.localeCompare(b.ProductName, 'zh-CN'),children: [{ title: summaryRow.ProductName, dataIndex: 'ProductName', key: 'ProductName' }] },
       {
         title: '房间数',
         sorter: (a, b) => tableSorter(a, b, 'TotalNum'),
@@ -38,6 +40,8 @@ export default observer((props) => {
                 </Space>
               </>
             ),
+            titleX: tableExportDataRow(summaryRow.TotalNum, summaryRow.CPTotalNum),
+            dataExport: (v, r) => tableExportDataRow(r.TotalNum, r.CPTotalNum),
             dataIndex: 'TotalNum',
             key: 'TotalNum',
             render: (v, r) => (
@@ -70,6 +74,8 @@ export default observer((props) => {
                 </Space>
               </>
             ),
+            titleX: tableExportDataRow(summaryRow.TotalPersonNum, summaryRow.CPTotalPersonNum),
+            dataExport: (v, r) => tableExportDataRow(r.TotalPersonNum, r.CPTotalPersonNum),
             dataIndex: 'TotalPersonNum',
             key: 'TotalPersonNum',
             render: (v, r) => (
@@ -102,6 +108,8 @@ export default observer((props) => {
                 </Space>
               </>
             ),
+            titleX: tableExportDataRow(summaryRow.TotalProfit, summaryRow.CPTotalProfit),
+            dataExport: (v, r) => tableExportDataRow(r.TotalProfit, r.CPTotalProfit),
             dataIndex: 'TotalProfit',
             key: 'TotalProfit',
             render: (v, r) => (
@@ -163,6 +171,9 @@ export default observer((props) => {
         </Col>
       </Row>
       <section>
+        <Divider orientation="right" >
+          <TableExportBtn label={'游船'} {...{ columns: tableProps.columns, dataSource }} />
+        </Divider>
         <Table {...tableProps} {...{ loading, dataSource }} rowKey={(record) => record.ProductName} />
       </section>
     </>

src/views/Hotel.jsx

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react';
 import { observer } from 'mobx-react';
 import { stores_Context } from '../config';
-import { Row, Col, Table, Space, Typography } from 'antd';
+import { Row, Col, Table, Space, Typography, Divider } from 'antd';
 import SearchForm from './../components/search/SearchForm';
 import { VSTag, TableExportBtn } from './../components/Data';
 const { Text } = Typography;
@@ -14,13 +14,18 @@ export default observer((props) => {
   const { formValues, siderBroken } = searchFormStore;
 
   const tableSorter = (a, b, colName) => a[colName] - b[colName];
+  const tableExportDataRow = (col1, col2) => [col1, col2].filter((r) => r).join(' VS ');
 
   const tableProps = {
     size: 'small',
     bordered: true,
     pagination: false,
     columns: [
-      { title: '目的地', children: [{ title: summaryRow.CityName, dataIndex: 'CityName', key: 'CityName' }] },
+      {
+        title: '目的地',
+        sorter: (a, b) => a.CityName.localeCompare(b.CityName, 'zh-CN'),
+        children: [{ title: summaryRow.CityName, dataIndex: 'CityName', key: 'CityName' }],
+      },
       {
         title: '总间夜',
         sorter: (a, b) => tableSorter(a, b, 'TotalNum'),
@@ -37,8 +42,10 @@ export default observer((props) => {
                 </Space>
               </>
             ),
+            titleX: tableExportDataRow(summaryRow.TotalNum, summaryRow.CPTotalNum),
             dataIndex: 'TotalNum',
             key: 'TotalNum',
+            dataExport: (v, r) => tableExportDataRow(r.TotalNum, r.CPTotalNum),
             render: (v, r) => (
               <>
                 <Space direction={'vertical'}>
@@ -69,8 +76,10 @@ export default observer((props) => {
                 </Space>
               </>
             ),
+            titleX: tableExportDataRow(summaryRow.RecomendNum, summaryRow.CPRecomendNum),
             dataIndex: 'RecomendNum',
             key: 'RecomendNum',
+            dataExport: (v, r) => tableExportDataRow(r.RecomendNum, r.CPRecomendNum),
             render: (v, r) => (
               <>
                 <Space direction={'vertical'}>
@@ -100,8 +109,10 @@ export default observer((props) => {
                 </Space>
               </>
             ),
+            titleX: tableExportDataRow(summaryRow.RecommendRate_100, summaryRow.CPRecommendRate_100),
             dataIndex: 'RecommendRate_100',
             key: 'RecommendRate_100',
+            dataExport: (v, r) => tableExportDataRow(r.RecommendRate_100, r.CPRecommendRate_100),
             render: (v, r) => (
               <>
                 <Space direction={'vertical'}>
@@ -129,8 +140,8 @@ export default observer((props) => {
                 ...date_picker_store.formValues,
                 ...HotelCruiseStore.searchValues,
               },
-              // 'countryArea', 'DateType', 'dates',
-              shows: ['DepartmentList', 'countryArea', 'orderStatus', 'hotelBookType', 'hotelRecommandRate', 'hotelStar', 'DateType', 'dates'],
+              // 'countryArea', 'DateType', 'dates', 'hotelRecommandRate',
+              shows: ['DepartmentList', 'countryArea', 'orderStatus', 'hotelBookType', 'hotelStar', 'DateType', 'dates'],
               sort: { DateType: 101, dates: 102 },
               fieldProps: {
                 DepartmentList: { show_all: true, mode: 'multiple' },
@@ -150,6 +161,9 @@ export default observer((props) => {
         </Col>
       </Row>
       <section>
+        <Divider orientation="right" >
+          <TableExportBtn label={'酒店'} {...{ columns: tableProps.columns, dataSource }} />
+        </Divider>
         <Table {...tableProps} bordered {...{ loading, dataSource }} rowKey={(record) => record.CityName} />
       </section>
     </>