perf: 数据透视: 增加查看订单明细, 导出

src/libs/ht.js

@@ -334,7 +334,7 @@ export const pivotBy = (_data, [rows, columns, date]) => {
       DataGroupByKeys[colKey] = { ...calculatedData, ..._rowCalc };
     });
 
-    return { groupByKeys: DataGroupByKeys, key: outerKeys.join('_') };
+    return { groupByKeys: DataGroupByKeys, key: outerKeys.join('_'), keys: outerKeys.join('_').split('_') };
   };
 
   const groupData = groupBy(data, (row) => groupbyKeys.map((kk) => `${row[kk]}`).join('=@='));
@@ -348,7 +348,7 @@ export const pivotBy = (_data, [rows, columns, date]) => {
         const _colKey = dataKey || 'dataKey';
         const _colData = groupBy(dataProp[rowKey], (crow) => (colKeys || keys).map((kk) => `${crow[kk]}`).join('=@='));
         const _columnsObj = calcTradeFields(_colData);
-        return { ...pick(dataProp[rowKey][0], keys), [_colKey]: _columnsObj.groupByKeys, key: _columnsObj.key, rowLabel };
+        return { ...pick(dataProp[rowKey][0], keys), [_colKey]: _columnsObj.groupByKeys, key: _columnsObj.key, keys: _columnsObj.keys, rowLabel };
       })
       .map((everyR) => {
         const _colKey = dataKey || 'dataKey';

src/views/DataPivot.jsx

@@ -118,6 +118,8 @@ export default observer((props) => {
   const [dataBeforeXChange, setDataBeforeXChange] = useState([]);
   const [dataSource, setDataSource] = useState([]);
   // const [dataSourceMapped, setDataSourceMapped] = useState({});
+  const [pivotRow, setPivotRow] = useState({});
+  const [pivotRowDataSource, setPivotRowDataSource] = useState([]);
 
   const [pivotDataSource, setPivotDataSource] = useState([]);
   const [pivotTableDataSource, setPivotTableDataSource] = useState([]);
@@ -186,6 +188,8 @@ export default observer((props) => {
     // 表格数据
     const sortRowData = cloneDeep(summaryRows).sort(sortBy(defaultValKey)).reverse();
     setPivotTableDataSource(sortRowData);
+    setPivotRow({});
+    setPivotRowDataSource([]);
     // 列汇总
     const sortColData = summaryColumns.sort(sortBy(defaultValKey)).reverse();
     const colDataMapped = isEmpty(pivotDateColumns[1]) ? sortColData[0] : sortColData.reduce((r, v) => ({...r, [v[pivotDateColumns[1][0]]]: v}), {});
@@ -393,6 +397,72 @@ export default observer((props) => {
     ],
   };
 
+  const detailsTableProps = {
+    loading: false,
+    // sticky: true,
+    scroll: { x: 1000, y: 400 },
+    pagination: false,
+    columns: [
+      {
+        title: '订单号',
+        dataIndex: 'o_id',
+        key: 'o_id',
+      },
+      {
+        title: '来源站点',
+        dataIndex: 'WebCode',
+        key: 'WebCode',
+      },
+      {
+        title: '页面渠道',
+        dataIndex: 'COLI_LineClass',
+        key: 'COLI_LineClass',
+      },
+      {
+        title: '来源类型',
+        dataIndex: 'SourceType',
+        key: 'SourceType',
+      },
+      {
+        title: '客群类别',
+        dataIndex: 'guestGroupType',
+        key: 'guestGroupType',
+      },
+      {
+        title: '成行',
+        dataIndex: 'orderState',
+        key: 'orderState',
+        render: (text, record) => <span>{text === '1' ? '是' : '否'}</span>,
+        sorter: (a, b) => b.orderState - a.orderState,
+      },
+      // {
+      // 	title: "人数(成/童/婴)",
+      // 	dataIndex: "COLI_PersonNum",
+      // 	key: "COLI_PersonNum",
+      // 	render: (text, record) => (
+      // 		<span>
+      // 			{record.COLI_PersonNum}/{record.COLI_ChildNum}/{record.COLI_BabyNum}
+      // 		</span>
+      // 	),
+      // },
+      {
+        title: '预计利润',
+        dataIndex: 'ML',
+        key: 'ML',
+      },
+      {
+        title: '预定时间',
+        dataIndex: 'applyDate',
+        key: 'applyDate',
+      },
+      // {
+      //   title: '出发日期',
+      //   dataIndex: 'CGI_ArriveDate',
+      //   key: 'CGI_ArriveDate',
+      // },
+    ],
+  };
+
   return (
     <div key={pathname}>
       <Row gutter={16} className={siderBroken ? '' : 'sticky-top'}>
@@ -541,11 +611,7 @@ export default observer((props) => {
               </Col>
               <Col span={24}>
                 <Row gutter={16} align={'bottom'} className="mt-1">
-                  <Col span={24}>
-                    {showPassCountryTips && (
-                      <Alert message="途径的国家将会重复计算" type="warning" showIcon />
-                    )}
-                  </Col>
+                  <Col span={24}>{showPassCountryTips && <Alert message="途径的国家将会重复计算" type="warning" showIcon />}</Col>
                 </Row>
                 {/* {columnFields.length > 0
                   ? cloneDeep(pivotDateColumnsValues)
@@ -615,9 +681,43 @@ export default observer((props) => {
             透视汇总表: <span style={{ fontSize: 'smaller' }}>{dataFieldAlias[lineConfig.yField].label}</span>
           </h3>
           <Divider orientation="right">
-            <TableExportBtn label={'pivot'} {...{ columns: targetTableProps.columns, dataSource: pivotTableDataSource }} />
+            <TableExportBtn
+              label={'pivot-' + pivotDateColumns[0].map((ele, ri) => `${filterFieldsMapped[ele].label}`).join('×')}
+              {...{ columns: targetTableProps.columns, dataSource: pivotTableDataSource }}
+            />
+          </Divider>
+          <Table
+            {...targetTableProps}
+            dataSource={pivotTableDataSource}
+            components={{ body: { cell: TdCell } }}
+            onRow={(record) => {
+              return {
+                // 点击行
+                onClick: (event) => {
+                  setPivotRow(record);
+                  const thisDetail = rawData.filter((ele) => {
+                    return record.keys.includes(String(ele.key));
+                  });
+                  setPivotRowDataSource(thisDetail);
+                },
+              };
+            }}
+          />
+        </Spin>
+      </section>
+      <section>
+        <Spin spinning={loading}>
+          <h3>
+            点击上方表格行查看单行数据的订单明细:{' '}
+            <span style={{ fontSize: 'smaller' }}>{pivotDateColumns[0].map((ele, ri) => `${filterFieldsMapped[ele].label}: ${pivotRow[pivotDateColumns[0][ri]] || ''}`).join('; ')}</span>
+          </h3>
+          <Divider orientation="right">
+            <TableExportBtn
+              label={'pivot-' + pivotDateColumns[0].map((ele, ri) => `${pivotRow[pivotDateColumns[0][ri]] || ''}`).join('-')}
+              {...{ columns: detailsTableProps.columns, dataSource: pivotRowDataSource }}
+            />
           </Divider>
-          <Table {...targetTableProps} dataSource={pivotTableDataSource} components={{ body: { cell: TdCell } }} />
+          <Table {...detailsTableProps} dataSource={pivotRowDataSource} components={{ body: { cell: TdCell } }} />
         </Spin>
       </section>
     </div>