From 4fe036c9b215ca516ab411eec0c4f730506b4503 Mon Sep 17 00:00:00 2001 From: chenxt <10125295+chen-xintao97@user.noreply.gitee.com> Date: Mon, 8 Jun 2026 17:02:53 +0800 Subject: [PATCH] 功能模块页面排序 --- src/components/Common/AffixMenu.js | 50 +++++++++++++++++++++++++++++++++++++++++++++++++- src/components/Common/CommonNewBill.js | 12 ++++++++++++ src/components/Common/CommonNewBillEvent.js | 53 +++++++++++++++++++++++++---------------------------- src/components/Common/CommonTable/index.js | 11 ++++++++++- 4 files changed, 96 insertions(+), 30 deletions(-) diff --git a/src/components/Common/AffixMenu.js b/src/components/Common/AffixMenu.js index 65e817c..f8e0cdd 100644 --- a/src/components/Common/AffixMenu.js +++ b/src/components/Common/AffixMenu.js @@ -11,7 +11,46 @@ import SvgIcon from '../SvgIcon'; 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 ( + + ); +}; 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 = (
@@ -466,6 +513,7 @@ class AffixMenuComponent extends Component { { /* 拖拽表格树形节点 */ 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 => { onGetParamsValue={this.handleGetParamsValue} onSelectCommonPopup={this.handleSelectCommonPopup} onMoveRow={this.handleMoveRow} + onMove0Row={this.handleMove0Row} /> ); } diff --git a/src/components/Common/CommonTable/index.js b/src/components/Common/CommonTable/index.js index b8b6bab..96c4eaf 100644 --- a/src/components/Common/CommonTable/index.js +++ b/src/components/Common/CommonTable/index.js @@ -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 (
-- libgit2 0.22.2