diff --git a/src/views/DataPivot.jsx b/src/views/DataPivot.jsx index dff9bad..7315ff6 100644 --- a/src/views/DataPivot.jsx +++ b/src/views/DataPivot.jsx @@ -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) => ( {ele.label} - ))} + ))} */} @@ -613,12 +637,13 @@ export default observer((props) => { maxTagCount={2} maxTagPlaceholder={(omittedValues) => ` + ${omittedValues.length} 更多...`} allowClear={true} + options={rightFields} > - {rightFields.map((ele) => ( + {/* {rightFields.map((ele) => ( {ele.label} - ))} + ))} */}