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

[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]

你好 @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.

[d2FuZ3h1ZG9uZw]

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

[xiaoxiao-lady]

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