齿轮排序

chenxt
1 parent 117ad119
Showing 1 changed file with 73 additions and 14 deletions
src/components/Common/AffixMenu.js
@@ -8,6 +8,8 @@ import config from &#39;@/utils/config&#39;;
 import * as commonFunc from '@/components/Common/commonFunc';
 import AntdDraggableModal from '@/components/Common/AntdDraggableModal';
 import SvgIcon from '../SvgIcon';
+import { DndProvider, useDrag, useDrop } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
 const { Option } = Select;
 const { TabPane } = Tabs;
@@ -370,7 +372,48 @@ class AffixMenuComponent extends Component {
     })
     this.onInit();
   }
+  moveRow = (dragIndex, hoverIndex, dataSourceKey) => {
+    const dataSource = this.state[dataSourceKey];
+    // 确保 dataSource 是一个数组
+    if (!Array.isArray(dataSource)) {
+      console.error(`dataSource for key ${dataSourceKey} is not an array.`, dataSource);
+      return;
+    }
+
+    // 确保索引在合法范围内
+    if (
+      dragIndex < 0 ||
+      dragIndex >= dataSource.length ||
+      hoverIndex < 0 ||
+      hoverIndex >= dataSource.length ||
+      dragIndex === hoverIndex
+    ) {
+      console.warn('Invalid indices for moveRow:', dragIndex, hoverIndex);
+      return;
+    }
+
+    // const newData = update(dataSource, {
+    //   $splice: [
+    //     [dragIndex, 1], // 从 dragIndex 位置移除 1 个元素
+    //     [hoverIndex, 0, dataSource[dragIndex]], // 在 hoverIndex 位置插入移除的元素
+    //   ],
+    // });
+    // 创建一个新的数组来存储更新后的数据
+    const newData = [...dataSource];
+    // 移除 dragIndex 位置的元素
+    const [removed] = newData.splice(dragIndex, 1);
+    // 在 hoverIndex 位置插入移除的元素
+    newData.splice(hoverIndex, 0, removed);
+
+    // 更新 iOrder 字段，使其与新的顺序一致
+    newData.forEach((item, index) => {
+      // 根据索引来更新 iOrder，使用 index + 1 因为排序通常从1开始，而不是0
+      newData[index].iOrder = (index + 1);
+    });
+
+    this.setState({ [dataSourceKey]: newData });
+  };
   render() {
     const { modalData, roleShow } = this.state;
     const { app, sTabId, sModelsType } = this.props;
@@ -400,12 +443,21 @@ class AffixMenuComponent extends Component {
       const configName = commonUtils.isNotEmptyArr(splitArr) ? splitArr[0] : '';
       const configId = commonUtils.isNotEmptyArr(splitArr) ? splitArr[1] : '';
       let childTable = '';
-      let dataSource = [];
-      if (commonUtils.isNotEmptyObject(configId)) { /*  从缓存中取宽度 */
-        dataSource = this.state[`modalContentData_${configId}`];
-      } else {
-        dataSource = this.state[`modalContentData${count}`];
+      // let dataSource = [];
+      // if (commonUtils.isNotEmptyObject(configId)) { /*  从缓存中取宽度 */
+      //   dataSource = this.state[`modalContentData_${configId}`];
+      // } else {
+      //   dataSource = this.state[`modalContentData${count}`];
+      // }
+      let dataSourceKey = `modalContentData${count}`;
+      if (commonUtils.isNotEmptyObject(configId)) {
+        dataSourceKey = `modalContentData_${configId}`;
       }
+      let dataSource = this.state[dataSourceKey] || [];
+      dataSource.forEach((item, index) => {
+        // 根据索引来更新 iOrder，使用 index + 1 因为排序通常从1开始，而不是0
+        dataSource[index].iOrder = (index + 1) * 10;
+      });
       dataSource?.forEach((item, index) => {
         // 根据索引来更新 iOrder，使用 index + 1 因为排序通常从1开始，而不是0
         dataSource[index].iOrder = (index + 1) * 10;
@@ -510,21 +562,28 @@ class AffixMenuComponent extends Component {
             {checkBoxShow}
             &nbsp;&nbsp;&nbsp;
             {checkAll}
-            <Table
-              bordered
-              columns={columns}
-              components={components}
-              dataSource={dataSource_dep}
-              pagination={false}
-              scroll={{ y: 310 }}
-              className={styles.affixMenuTable}
-            />
+            <DndProvider backend={HTML5Backend}>
+              <Table
+                bordered
+                columns={columns}
+                dataSource={dataSource}
+                components={components}
+                onRow={(record, index) => ({
+                  index,
+                  moveRow: (dragIndex, hoverIndex) => this.moveRow(dragIndex, hoverIndex, dataSourceKey),
+                })}
+                pagination={false}
+                scroll={{ y: 310 }}
+                className={styles.affixMenuTable}
+              />
+            </DndProvider>
           </div>
         </TabPane>
       );
       modalContent.push(childTable);
       count += 1;
     });
+
     return (
       <div>
         <Affix offsetTop={this.state.top} style={{ position: 'absolute', top: 50, left: 1000 }}>