🐛透视表自定义排序，排序异常

[wujincun]

🏷 Version

Package	Version
@antv/s2	1.47.1
@antv/s2-vue	1.5.0

Sheet Type

• [✓] PivotSheet
• [ ] TableSheet
• [ ] GridAnalysisSheet
• [ ] StrategySheet
• [ ] EditableSheet

🖋 Description

透视表自定义排序，排序异常

⌨️ Code Snapshots

import React, { useEffect, useState } from "react"; import ReactDOM from "react-dom"; import { SheetComponent } from "@antv/s2-react"; import {toUpper} from 'lodash'

const SortMethodType = { asc: 'asc', desc: 'desc', none: 'none', }

const MENUS = [ { key: SortMethodType.none, text: '不排序' }, { key: SortMethodType.asc, text: '升序', icon: 'GroupAsc' }, { key: SortMethodType.desc, text: '降序', icon: 'GroupDesc' }, ];

const s2Options = { width: 600, height: 480, // 关闭默认icon showDefaultHeaderActionIcon: false, // 自定义 icon hierarchyType: "tree", tooltip: { showTooltip: true, }, };

const dataCfg = {"fields":{"rows":["province","city"],"values":["price","cost"]},"meta":[{"field":"province","name":"省份"},{"field":"city","name":"城市"},{"field":"type","name":"商品类别"},{"field":"price","name":"价格"},{"field":"cost","name":"成本"}],"data":[{"province":"浙江","city":"杭州","price":"2"},{"province":"浙江","city":"舟山","price":"6"},{"province":"吉林","city":"长春","price":"3"},{"province":"吉林","city":"白山","price":"25"},{"province":"浙江","city":"杭州","cost":"20"},{"province":"浙江","city":"舟山","cost":"0.12"},{"province":"吉林","city":"长春","cost":"3"},{"province":"吉林","city":"白山","cost":"1"}]}

const getHeaderActionIcons= (sortParams,sortHandle,sheetType)=>{ const sortParam = sortParams?.[0] const getIconName = (sortParam)=>{ const sortMethod = sortParam?.sortMethod const upSortMethod = toUpper(sortMethod) if (upSortMethod === 'ASC') { return 'groupAsc'; } if (upSortMethod === 'DESC') { return 'groupDesc'; } return 'SortDown'
} const getDisplayCondition = (meta,sheetType)=>{ const key = sheetType === 'table' ? sortParam?.sortFieldId : sortParam?.sortByMeasure const value = sheetType === 'table' ? meta.field : meta.value return key === value } const iconName = getIconName(sortParam) return [ { // 选择icon,可以是 S2 自带的，也可以是自定义的 icon iconNames:[ iconName], //getIconName(sortParam), // 通过 belongsCell + displayCondition 设置 icon 的展示位置 belongsCell: 'colCell', displayCondition: (meta)=> getDisplayCondition(meta,sheetType), // icon 点击之后的执行函数 action: (props) => {

            const { meta, event } = props;
            const operator = {
                onClick: ({ key }) => {
                    sortHandle(meta,key)
                    meta.spreadsheet.hideTooltip();
                },
                menus: MENUS,
            };
            // 自定义 tooltip 配置，展示 toolTip
            meta.spreadsheet.showTooltipWithInfo(event, [], {
                operator,
                showSingleTips: true,
                onlyMenu: true,
            });
        }
    },
    {
        // 选择icon,可以是 S2 自带的，也可以是自定义的 icon
        iconNames:['SortDown'], //getIconName(sortParam),
        // 通过 belongsCell + displayCondition 设置 icon 的展示位置
        belongsCell: 'colCell',
        displayCondition: (meta)=> !getDisplayCondition(meta,sheetType),
        // icon 点击之后的执行函数
        action: (props) => {
            const { meta, event } = props;
            const operator = {
                onClick: ({ key }) => {
                    sortHandle(meta,key)
                    meta.spreadsheet.hideTooltip();
                },
                menus: MENUS,
            };
            // 自定义 tooltip 配置，展示 toolTip
            meta.spreadsheet.showTooltipWithInfo(event, [], {
                operator,
                showSingleTips: true,
                onlyMenu: true,
            });
        }
    }
]

}

const App = () => { const sortHandle = (meta, key) => { let sortParams = []; const rows = meta?.spreadsheet?.dataCfg?.fields?.rows; const sortFieldId = rows ? rows[rows.length - 1] : ""; sortParams = [ { sortFieldId: sortFieldId, sortMethod: key, sortByMeasure: meta.value, }, ]; setSortParams(sortParams) };

const [ sortParams, setSortParams ] = useState([]);

// 设置自定义 `icon` 的展示条件
const headerActionIcons = getHeaderActionIcons(dataCfg.sortParams,sortHandle,'povit')

return <SheetComponent dataCfg={ { ...dataCfg, sortParams: sortParams } } options={ {...s2Options, headerActionIcons} }/>;

}

// 使用 ReactDOM.render( , document.getElementById('container'), );

🔗 Reproduce Link

🤔 Steps to Reproduce

😊 Expected Behavior

多列表格，每一列的排序都正常

😅 Current Behavior

需求是单列排序，因此重写排序方法， 但是价格一列多次点击排序不生效，成本一列排序正常 项目中是s2-vue，demo使用的是react组件同样有问题

💻 System information

Environment	Info
System
Browser

[github-actions[bot]]

你好 @wujincun，请编辑你的 issue 标题, 一个言简意赅的 issue 标题可以节省大家的时间, 请不要将标题当做正文, 或者为空。

Hello, @wujincun, please edit your issue title. a concise issue title will save everyone time. please do not leave the title as the body or empty.

[1wkk]

• 整理一下 Code Snapshots，有点乱不好复制
• 提供一下复现链接

[xiaoxiao-lady]

你好这个问题解决了么，我也遇到透视表排序有的列点击不生效