功能模块页面排序

chenxt
1 parent 1d3f0f77
Showing 4 changed files with 96 additions and 30 deletions
src/components/Common/AffixMenu.js
src/components/Common/CommonNewBill.js
src/components/Common/CommonNewBillEvent.js
src/components/Common/CommonTable/index.js
@@ -11,7 +11,46 @@ import SvgIcon from &#39;../SvgIcon&#39;;
  
 const { Option } = Select;
 const { TabPane } = Tabs;
+const type = 'DraggableBodyRow';
+// 自定义可拖拽的表格行
+const DraggableBodyRow = ({ index, moveRow, className, style, ...restProps }) => {
+  const ref = React.useRef();
+  const [{ isOver, dropClassName }, drop] = useDrop({
+    accept: type,
+    collect: (monitor) => {
+      const { index: dragIndex } = monitor.getItem() || {};
+      if (dragIndex === index) {
+        return {};
+      }
+      return {
+        isOver: monitor.isOver(),
+        dropClassName: dragIndex < index ? 'drop-over-downward' : 'drop-over-upward',
+      };
+    },
+    drop: (item) => {
+      moveRow(item.index, index);
+    },
+  });
+
+  const [, drag] = useDrag({
+    type,
+    item: { index },
+    collect: (monitor) => ({
+      isDragging: monitor.isDragging(),
+    }),
+  });
+
+  drop(drag(ref));
  
+  return (
+    <tr
+      ref={ref}
+      className={`${className}${isOver ? dropClassName : ''}`}
+      style={{ cursor: 'move', ...style }}
+      {...restProps}
+    />
+  );
+};
 class AffixMenuComponent extends Component {
   constructor(props) {
     super(props);
@@ -367,6 +406,10 @@ class AffixMenuComponent extends Component {
       } else {
         dataSource = this.state[`modalContentData${count}`];
       }
+      dataSource.forEach((item, index) => {
+        // 根据索引来更新 iOrder，使用 index + 1 因为排序通常从1开始，而不是0
+        dataSource[index].iOrder = (index + 1) * 10;
+      });
       const columns = [{
         title: columniOrder,
         dataIndex: 'iOrder',
@@ -456,7 +499,11 @@ class AffixMenuComponent extends Component {
           }
         }
       }
-
+      const components = {
+        body: {
+          row: DraggableBodyRow,
+        },
+      };
       childTable = (
         <TabPane tab={configName} key={count}>
           <div key={count} className={styles.affixMenuTableAll}>
@@ -466,6 +513,7 @@ class AffixMenuComponent extends Component {
             <Table
               bordered
               columns={columns}
+              components={components}
               dataSource={dataSource_dep}
               pagination={false}
               scroll={{ y: 310 }}
@@ -2046,6 +2046,18 @@ const BillComponent = Form.create({
       onChange: props.onTitleChange.bind(this, "slave0"),
     },
   };
+  
+  if (sModelsId === '16411004790004762980820285096000') {
+    slaveTableProps.tableProps.AutoTableHeight = 344
+    slaveTableProps.isDragAndDrop = true
+    slaveTableProps.onMoveRow = props.onMoveRow
+    slaveTableProps.isSettingFunctions = true
+    slave0TableProps.tableProps.AutoTableHeight = 344
+    slave0TableProps.isDragAndDrop = true
+    slave0TableProps.onMoveRow = props.onMove0Row
+    slave0TableProps.isSettingFunctions = true
+    slave0TableProps.noVlistTable = true
+  }
   const bCheck1 = commonUtils.isNotEmptyObject(slave1Config) && slave1Config.sTbName === "sysbillcheckresult" ? true : false;
   const slave1TableProps = {
     ...commonBusiness.getTableTypes("slave1", props),
@@ -6518,36 +6518,32 @@ export default ChildComponent =&gt; {
     /* 拖拽表格树形节点 */
     handleMoveRow = (dragIndex, hoverIndex, dragKey, hoverKey, props) => {
       const { slaveData: data } = this.props;
-      // const dragRow = data[dragIndex];
+      const newData = [...data];
+      const [removed] = newData.splice(dragIndex, 1);
+      newData.splice(hoverIndex, 0, removed);
       const dragObject = commonUtils.isNotEmptyArr(data.filter(ele => ele.sId === dragKey)) ? data.filter(ele => ele.sId === dragKey)[0] : {};
-      const hoverObject = commonUtils.isNotEmptyArr(data.filter(ele => ele.sId === hoverKey)) ? data.filter(ele => ele.sId === hoverKey)[0] : {};
-      // 同级菜单的移动
-      let newData = data.filter(ele => ele.sId !== dragKey);
-      let insertIndex = 0;
-      if (commonUtils.isNotEmptyArr(newData)) {
-        newData.forEach((ele, index) => {
-          if (ele.sId === hoverKey) {
-            if (dragIndex > hoverIndex) {
-              // 上移：dragKey表示的元素   放到 hoverKey表示的元素之前
-              insertIndex = index;
-            } else {
-              // 下移  dragKey表示的元素 放到  hoverKey表示的元素之后
-              insertIndex = index + 1;
-            }
-          }
-        });
-        newData.splice(insertIndex, 0, dragObject);
-        if (commonUtils.isNotEmptyObject(dragObject)) {
-          dragObject.handleType = dragObject.handleType ? dragObject.handleType : "update";
-          dragObject.iOrder = hoverObject.iOrder + 1
-        }
-        // newData.forEach((item,index) =>{
-        //   item.handleType = 'update'
-        //   item.iOrder =
-        // })
-        this.props.onSaveState({ slaveData: newData });
-      }
+      newData.forEach((item, index) => {
+        // 根据索引来更新 iOrder，使用 index + 1 因为排序通常从1开始，而不是0
+        newData[index].iOrder = (index + 1) * 10;
+        newData[index].handleType = dragObject.handleType ? dragObject.handleType : "update";
+      });
+      this.props.onSaveState({ slaveData: newData });
     };
+    handleMove0Row = (dragIndex, hoverIndex, dragKey, hoverKey, props) => {
+      const { slave0Data: data } = this.props;
+      const newData = [...data];
+      const [removed] = newData.splice(dragIndex, 1);
+      newData.splice(hoverIndex, 0, removed);
+      const dragObject = commonUtils.isNotEmptyArr(data.filter(ele => ele.sId === dragKey)) ? data.filter(ele => ele.sId === dragKey)[0] : {};
+      newData.forEach((item, index) => {
+        // 根据索引来更新 iOrder，使用 index + 1 因为排序通常从1开始，而不是0
+        newData[index].iOrder = (index + 1) * 10000;
+        newData[index].handleType = dragObject.handleType ? dragObject.handleType : "update";
+      });
+      this.props.onSaveState({ slave0Data: newData });
+      // }
+    };
+
     render() {
       const { masterData, sModelsType, app } = this.props;
       const imgSrc = commonBusiness.handleAddIcon(masterData, sModelsType, app);
@@ -6610,6 +6606,7 @@ export default ChildComponent =&gt; {
           onGetParamsValue={this.handleGetParamsValue}
           onSelectCommonPopup={this.handleSelectCommonPopup}
           onMoveRow={this.handleMoveRow}
+          onMove0Row={this.handleMove0Row}
         />
       );
     }
@@ -7396,7 +7396,16 @@ class CommonTableRc extends React.Component {
  
     const hasColorInfo = this.props?.masterConfig?.sTableColorTs;
     const BtnUpload = commonFunc.showLocalMessage(this.props, "BtnUpload", "上传");
-
+    const { sModelsId } = this.props
+    const columniOrder = commonFunc.showMessage(this.props.app.commonConst, 'columniOrder');/* 排序 */
+    if (sModelsId === '16411004790004762980820285096000') {
+      tableProps.onRow = (record, index) => ({
+        index,
+        moveRow: (dragIndex, hoverIndex, dragKey, hoverKey) => {
+          this.moveRow(dragIndex, hoverIndex, dragKey, hoverKey);
+        },
+      });
+    }
     return (
       <FormItem className={styles.subForm} style={{ height: '100%' }}>
         <div className={styles.extraAction} onselectstart="return false">