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

perf: 数据透视: 行列的选项组

Browse Source
main
Lei OT 5 months ago
parent 7f69902d2f
commit 1e94e2708e
1 changed files with 57 additions and 32 deletions
Show Stats Download Patch File Download Diff File

89
src/views/DataPivot.jsx
Unescape Escape View File

@ -13,38 +13,58 @@ import { TableExportBtn } from './../components/Data';
const { Text } = Typography;
const filterFields = [
{ key: 'SourceType', label: '来源类型' },
{ key: 'productType', label: '产品类型' },
{ key: 'country', label: '国籍' },
{ key: 'CLI_NO', label: '线路' },
{
label: '渠道',
options: [
{ key: 'SourceType', value: 'SourceType', label: '来源类型' },
{ key: 'guestGroupType', value: 'guestGroupType', label: '客群类别' },
{ key: 'campaign', value: 'campaign', label: 'PPC广告' },
{ key: 'WebCode', value: 'WebCode', label: '来源站点' },
],
},
{
label: '产品',
options: [
{ key: 'productType', value: 'productType', label: '产品类型' },
{ key: 'CLI_NO', value: 'CLI_NO', label: '线路' },
{ key: 'destinationCountry', value: 'destinationCountry', label: '目的地国籍' },
{ key: 'destinations', value: 'destinations', label: '目的地城市' },
{ key: 'HotelStar', value: 'HotelStar', label: '酒店星级' },
],
},
{
label: '客户',
options: [
{ key: 'country', value: 'country', label: '国籍' },
{ key: 'travelMotivation', value: 'travelMotivation', label: '出行目的' },
{ key: 'IsOld_txt', value: 'IsOld_txt', label: '是否老客户' },
{ key: 'isCusCommend_txt', value: 'isCusCommend_txt', label: '是否老客户推荐' },
{ key: 'hasOld_txt', value: 'hasOld_txt', label: '老客户(推荐)' },
{ key: 'RTXF_WB_range', value: 'RTXF_WB_range', label: '人天消费(外币)' },
],
},
{
label: '业绩',
options: [
{ key: 'startMonth', value: 'startMonth', label: '出行日期-月份' },
{ key: 'startYearMonth', value: 'startYearMonth', label: '出行日期-年月' },
{ key: 'applyMonth', value: 'applyMonth', label: '预订日期-月份' },
{ key: 'applyYearMonth', value: 'applyYearMonth', label: '预订日期-年月' },
{ key: 'operatorName', value: 'operatorName', label: '顾问' },
{ key: 'PPPriceRange', value: 'PPPriceRange', label: '人均天/单(外币)' },
{ key: 'SumML_ctxt', value: 'SumML_ctxt', label: '毛利' },
],
},
// { key: 'destination', label: '目的地' },
{ key: 'COLI_LineClass', label: '页面渠道' },
{ key: 'guestGroupType', label: '客群类别' },
{ key: 'campaign', label: 'PPC广告' },
{ key: 'travelMotivation', label: '出行目的' },
{ key: 'startMonth', label: '出行日期-月份' },
{ key: 'startYearMonth', label: '出行日期-年月' },
{ key: 'applyMonth', label: '预订日期-月份' },
{ key: 'applyYearMonth', label: '预订日期-年月' },
{ key: 'operatorName', label: '顾问' },
{ key: 'WebCode', label: '来源站点' },
{ key: 'IsOld_txt', label: '是否老客户' },
{ key: 'isCusCommend_txt', label: '是否老客户推荐' },
{ key: 'hasOld_txt', label: '老客户(推荐)' },
{ key: 'HotelStar', label: '酒店星级' },
{ key: 'destinationCountry', label: '目的地国籍' },
{ key: 'destinations', label: '目的地城市' },
{ key: 'RTXF_WB_range', label: '人天消费(外币)' },
{ key: 'PPPriceRange', label: '人均天/单(外币)' },
// { key: 'unitPPPriceRange', label: '人均天(外币)' },
// { key: 'SumML_ctxt1', label: '毛利范围[1W]' },
// { key: 'SumML_ctxt1_5', label: '毛利范围[1.5W]' },
// { key: 'SumML_ctxt2', label: '毛利范围[2W]' },
// { key: 'SumML_ctxt3', label: '毛利范围[3W]' },
// { key: 'SumML_ctxt4', label: '毛利范围[4W]' },
{ key: 'SumML_ctxt', label: '毛利' },
];
const filterFieldsMapped = filterFields.reduce((r, v) => ({ ...r, [v.key]: v }), {});
const filterFieldsMapped = filterFields.reduce((a, c) => a.concat(c.options) ,[]).reduce((r, v) => ({ ...r, [v.key]: v }), {});
/** 预设的选项, 只有行 */
const quickOptions = [
@ -281,8 +301,10 @@ export default observer((props) => {
const pickKeys = v.map((ele) => ele.key);
setRowFields(pickKeys);
// const leftFieldsMapped = leftFields.reduce((r, v) => ({ ...r, [v.key]: v }), {});
const _left = omit(filterFieldsMapped, pickKeys);
setRightFields(isEmpty(v) ? filterFields : Object.values(_left));
// const _left = omit(filterFieldsMapped, pickKeys);
const _left = structuredClone(filterFields).map(g => ({...g, options: g.options.filter(ele => !pickKeys.includes( ele.key))}));
// console.log('📙', _left);
setRightFields(isEmpty(v) ? filterFields : _left); // Object.values(_left)
// setPivotDateColumns([].concat(pickKeys, columnFields));
setPivotDateColumns([pickKeys, columnFields]);
resetItemFilter();
@ -292,8 +314,9 @@ export default observer((props) => {
setColumnSelection(val);
const pickKeys = isEmpty(val) ? [] : Array.isArray(val) ? val.map((ele) => ele.key) : [val.key];
setColumnFields(pickKeys);
const afterLeft = Object.values(omit(filterFieldsMapped, rowFields));
setRightFields(afterLeft); // 单选
// 列选项, 不改变
// const afterLeft = Object.values(omit(filterFieldsMapped, rowFields));
// setRightFields(afterLeft); // 单选
// const rightFieldsMapped = rightFields.reduce((r, v) => ({ ...r, [v.key]: v }), {});
// const _left = omit(rightFieldsMapped, pickKeys);
// setRightFields(isEmpty(val) ? afterLeft : Object.values(_left)); // 多选
@ -552,12 +575,13 @@ export default observer((props) => {
maxTagCount={2}
maxTagPlaceholder={(omittedValues) => ` + ${omittedValues.length} 更多...`}
allowClear={true}
options={filterFields}
>
{filterFields.map((ele) => (
{/* {filterFields.map((ele) => (
<Select.Option key={ele.key} value={ele.key}>
{ele.label}
</Select.Option>
))}
))} */}
</Select>
</Col>
<Col span={24}>
@ -613,12 +637,13 @@ export default observer((props) => {
maxTagCount={2}
maxTagPlaceholder={(omittedValues) => ` + ${omittedValues.length} 更多...`}
allowClear={true}
options={rightFields}
>
{rightFields.map((ele) => (
{/* {rightFields.map((ele) => (
<Select.Option key={ele.key} value={ele.key}>
{ele.label}
</Select.Option>
))}
))} */}
</Select>
</Col>
<Col span={24}>

Write Preview
Loading…
Cancel
Save