🐛[BUG] ProTable组件列设置功能

[Aeccing]

提问前先看看：

https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way/blob/main/README-zh_CN.md

🐛 bug 描述

ProTable组件列设置功能第一次拖拽后点击重置再次拖拽数据混乱了（应该是使用了的第一次拖拽的数据）

📷 复现步骤

1.把第二列拖拽到最后 2.点击重置按钮 3.把第一列拖拽到第二列后面 结果：排序乱了

🏞 期望结果

期望按重置后的顺序排列

💻 复现代码

© 版本信息

• ProComponents 版本: [e.g. 4.0.0]
• umi 版本
• 浏览器环境
• 开发环境 [e.g. mac OS]

🚑 其他信息

[github-actions[bot]]

以下的 Issues 可能会帮助到你 / The following issues may help you

• [#7831][ProTable组件中的查询部分🧐[问题]][63%]

[chenshuai2144]

值得注意是的百分之二十的问题都可以用重装依赖来解决，所以你可以尝试一下： 删除 'node_modules' 文件夹 -> 删除 'package-lock.json'或 'pnpm-lock.yaml' 文件 -> 运行 'pnpm install' 或 'npm install' 命令

根据给出的问题描述，以及对 ProTable 组件列设置功能的bug进行复现，可能的解决方案如下：

1. 问题分析： 根据问题描述，第一次拖拽后点击重置再次拖拽导致数据混乱，排序乱了。这表明在点击重置按钮后，没有正确的恢复原始的列设置状态。

2. 解决方案： a. 在点击重置按钮时，重新初始化列的顺序，使其按照默认的顺序进行排列。可以通过记录默认的列顺序，在点击重置按钮时重新应用默认的列顺序。

   b. 在 Portable 组件的 state 中添加一个用于记录列顺序的字段，每次拖拽列时更新该字段的值。然后在点击重置按钮时，使用该字段的值进行列顺序的恢复。

   c. 在拖拽列时，将当前列的位置信息保存到 state 中，当点击重置按钮时，根据已保存的位置信息还原列的顺序。可以使用一个数组来记录列的位置信息，数组的索引表示列的位置，数组的值表示列的 key。

3. 具体实现： a. 在 ProTable 组件的 state 中添加一个用于记录列顺序的字段：

   state = {
     columnsOrder: [], // 列的顺序
   };
   

   b. 在拖拽列的回调函数中，更新 columnsOrder 的值，如：

   onColumnDragEnd = (dragIndex, hoverIndex) => {
     const { columnsOrder } = this.state;
     const newColumnsOrder = Array.from(columnsOrder);
     newColumnsOrder.splice(dragIndex, 1); // 移除拖拽的列
     newColumnsOrder.splice(hoverIndex, 0, columnsOrder[dragIndex]); // 在悬停位置插入拖拽的列
     this.setState({ columnsOrder: newColumnsOrder });
   };
   

   c. 在点击重置按钮的回调函数中，根据 columnsOrder 进行列的顺序恢复，如：

   handleResetColumns = () => {
     const { columns } = this.state;
     const { columnsOrder } = this.state;
     const newColumns = Array.from(columns);
     const sortedColumns = columnsOrder.map(key => newColumns.find(column => column.key === key));
     this.setState({ columns: sortedColumns });
   };
   

   d. 在 ProTable 组件的 render 方法中，使用 columnsOrder 来设置列的顺序，如：

   const { columns } = this.state;
   const { columnsOrder } = this.state;
   const sortedColumns = columnsOrder.map(key => columns.find(column => column.key === key));
   <Table columns={sortedColumns} />;
   

4. 测试： 根据以上修改，重新测试列设置功能，通过拖拽列并点击重置按钮后，期望按重置后的顺序排列。