From 79e4981aa6cc9354276fc54cdf6d14eb08ab7fee Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期四, 22 六月 2023 15:59:04 +0800 Subject: [PATCH] Merge branch 'develop' of ssh://121.36.20.145:29418/~jinfei/pc-plat into develop --- src/menu/components/table/edit-table/columns/index.jsx | 144 +++++++++++++++++++++++------------------------ 1 files changed, 71 insertions(+), 73 deletions(-) diff --git a/src/menu/components/table/edit-table/columns/index.jsx b/src/menu/components/table/edit-table/columns/index.jsx index 51b977c..ba13cb7 100644 --- a/src/menu/components/table/edit-table/columns/index.jsx +++ b/src/menu/components/table/edit-table/columns/index.jsx @@ -52,71 +52,40 @@ } render() { - const { connectDragSource, connectDropTarget, moveCol, dropCol, addElement, updateCol, editColumn, pasteCell, changeStyle, deleteCol, index, column, align, fields, children, ...restProps } = this.props + const { connectDragSource, connectDropTarget, moveCol, componentId, dropCol, addElement, updateCol, editColumn, pasteCell, changeStyle, deleteCol, index, column, align, fields, children, ...restProps } = this.props if (!column) return ( - <th {...restProps} index={index}> - {children} - </th> + <th {...restProps}>{children}</th> ) - if (index !== undefined) { - let style = {cursor: 'move', textAlign: align} - if (column.Width) { - style.width = column.Width - style.minWidth = column.Width - } - - if (window.GLOB.columnId === column.uuid) { - style.color = '#1890ff' - } - - return connectDragSource( - connectDropTarget(<th {...restProps} index={index} style={style} onDoubleClick={() => this.props.editColumn(column)}> - <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ - <div className="mk-popover-control" onDoubleClick={(e) => e.stopPropagation()}> - {column.type === 'colspan' ? <PlusOutlined className="plus" title="娣诲姞鍒�" onClick={() => this.props.addElement(column)} /> : null} - {column.type === 'custom' ? <PlusOutlined className="plus" title="娣诲姞鍏冪礌" onClick={() => this.props.addElement(column)} /> : null} - {column.type === 'custom' ? <PlusSquareOutlined className="plus" title="娣诲姞鎸夐挳" onClick={() => this.props.addElement(column, 'button')} /> : null} - <EditOutlined className="edit" title="缂栬緫" onClick={() => this.props.editColumn(column)} /> - {column.type === 'custom' ? <PasteComponent options={['customCardElement', 'action']} updateConfig={(res, resolve) => this.props.pasteCell(column, res, resolve)} /> : null} - {column.type === 'custom' ? <FontColorsOutlined className="style" title="璋冩暣鏍峰紡" onClick={() => this.props.changeStyle(column)}/> : null} - <DeleteOutlined className="close" title="鍒犻櫎" onClick={this.deleteCol} /> - {['text', 'number', 'formula'].includes(column.type) ? <MarkColumn field={column.field || ''} columns={fields} marks={column.marks} onSubmit={this.updateMarks} /> : null } - </div> - } trigger="hover"> - {children} - </Popover> - </th>), - ) - } else if (column) { - let style = {textAlign: align} - if (column.Width) { - style.width = column.Width - style.minWidth = column.Width - } - if (window.GLOB.columnId === column.uuid) { - style.color = '#1890ff' - } - - return ( - <th {...restProps} style={style} key={column.uuid} onDoubleClick={() => this.props.editColumn(column)}> - <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ - <div className="mk-popover-control" onDoubleClick={(e) => e.stopPropagation()}> - {column.type === 'colspan' ? <PlusOutlined className="plus" title="娣诲姞鍒�" onClick={() => this.props.addElement(column)} /> : null} - {column.type === 'custom' ? <PlusOutlined className="plus" title="娣诲姞鍏冪礌" onClick={() => this.props.addElement(column)} /> : null} - {column.type === 'custom' ? <PlusSquareOutlined className="plus" title="娣诲姞鎸夐挳" onClick={() => this.props.addElement(column, 'button')} /> : null} - <EditOutlined className="edit" title="缂栬緫" onClick={() => this.props.editColumn(column)} /> - {column.type === 'custom' ? <PasteComponent options={['customCardElement', 'action']} updateConfig={(res, resolve) => this.props.pasteCell(column, res, resolve)} /> : null} - <DeleteOutlined className="close" title="鍒犻櫎" onClick={this.deleteCol} /> - {['text', 'number', 'formula'].includes(column.type) ? <MarkColumn field={column.field || ''} columns={fields} marks={column.marks} onSubmit={this.updateMarks} /> : null } - </div> - } trigger="hover"> - {children} - </Popover> - </th> - ) + let style = {cursor: 'move', textAlign: align} + if (column.Width) { + style.width = column.Width + style.minWidth = column.Width } + + if (window.GLOB.columnId === column.uuid) { + style.color = '#1890ff' + } + + return connectDragSource( + connectDropTarget(<th {...restProps} index={index} style={style} onDoubleClick={() => this.props.editColumn(column)}> + <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ + <div className="mk-popover-control" onDoubleClick={(e) => e.stopPropagation()}> + {column.type === 'colspan' ? <PlusOutlined className="plus" title="娣诲姞鍒�" onClick={() => this.props.addElement(column)} /> : null} + {column.type === 'custom' ? <PlusOutlined className="plus" title="娣诲姞鍏冪礌" onClick={() => this.props.addElement(column)} /> : null} + {column.type === 'custom' ? <PlusSquareOutlined className="plus" title="娣诲姞鎸夐挳" onClick={() => this.props.addElement(column, 'button')} /> : null} + <EditOutlined className="edit" title="缂栬緫" onClick={() => this.props.editColumn(column)} /> + {column.type === 'custom' ? <PasteComponent options={['customCardElement', 'action']} updateConfig={(res, resolve) => this.props.pasteCell(column, res, resolve)} /> : null} + {column.type === 'custom' ? <FontColorsOutlined className="style" title="璋冩暣鏍峰紡" onClick={() => this.props.changeStyle(column)}/> : null} + <DeleteOutlined className="close" title="鍒犻櫎" onClick={this.deleteCol} /> + {['text', 'number', 'formula'].includes(column.type) ? <MarkColumn field={column.field || ''} columns={fields} marks={column.marks} onSubmit={this.updateMarks} /> : null } + </div> + } trigger="hover"> + {children} + </Popover> + </th>), + ) } } @@ -131,17 +100,28 @@ const ColTarget = { drop(props, monitor) { const item = monitor.getItem() - const dragIndex = item.index - const hoverIndex = props.index + let dragIndex = item.index + let hoverIndex = props.index if (item.$init) { - props.dropCol(item, hoverIndex) + if (/sub_/.test(hoverIndex)) { + message.warning('鍚堝苟鍒楀瓙鍏冪礌鏆備笉鏀寔鎷栨嫿娣诲姞銆�') + } else { + props.dropCol(item, hoverIndex.replace(new RegExp(props.componentId + '@', 'ig'), '')) + } return } else if (dragIndex === undefined || hoverIndex === undefined || dragIndex === hoverIndex) { return + } else { + let reg = new RegExp(props.componentId + '@', 'ig') + if (reg.test(dragIndex)) { + props.moveCol(dragIndex.replace(reg, ''), hoverIndex.replace(reg, '')) + } else { + message.warning('鎷栧姩鍏冪礌涓嶅湪褰撳墠缁勪欢涓��') + return + } } - - props.moveCol(dragIndex, hoverIndex) + monitor.getItem().index = hoverIndex }, } @@ -281,12 +261,32 @@ moveCol = (dragIndex, hoverIndex) => { let _columns = fromJS(this.state.columns).toJS() - _columns.splice(hoverIndex, 0, ..._columns.splice(dragIndex, 1)) + if (/^sub_/.test(dragIndex) || /^sub_/.test(hoverIndex)) { + let sign1 = dragIndex.split('_') + let sign2 = hoverIndex.split('_') + if (sign1[1] !== sign2[1]) { + message.warning('鎷栧姩鍏冪礌涓嶅湪鍚屼竴涓悎骞跺垪涓��') + return + } + this.loopMoveCol(_columns, sign1[1], sign1[2], sign2[2]) + } else { + _columns.splice(hoverIndex, 0, ..._columns.splice(dragIndex, 1)) + } this.setState({ columns: _columns }, () => { this.props.updatecolumn({...this.props.config, cols: _columns}) + }) + } + + loopMoveCol = (columns, colId, dragIndex, hoverIndex) => { + columns.forEach(column => { + if (column.type === 'colspan' && column.uuid === colId) { + column.subcols.splice(hoverIndex, 0, ...column.subcols.splice(dragIndex, 1)) + } else if (column.type === 'colspan') { + this.loopMoveCol(column.subcols, colId, dragIndex, hoverIndex) + } }) } @@ -624,7 +624,7 @@ MKEmitter.removeListener('submitStyle', this.getStyle) } - handlecolumns = (columns, fields, config, isSub) => { + handlecolumns = (columns, fields, config, pId) => { return columns.map((col, index) => { let title = col.label if (col.editable === 'true') { @@ -643,8 +643,9 @@ upComponent: this.updateCol }), onHeaderCell: () => ({ - index: isSub ? undefined : index, + index: pId ? config.uuid + '@sub_' + pId + '_' + index : config.uuid + '@' + index, column: col, + componentId: config.uuid, fields: fields, align: col.Align, moveCol: this.moveCol, @@ -656,7 +657,7 @@ changeStyle: this.changeStyle, deleteCol: this.deleteCol, }), - children: col.subcols && col.subcols.length ? this.handlecolumns(col.subcols, fields, config, true) : null, + children: col.subcols && col.subcols.length ? this.handlecolumns(col.subcols, fields, config, col.uuid) : null, } }) } @@ -728,10 +729,7 @@ destroyOnClose > <TableVerify - card={config.submit} - setting={config.setting} - cols={config.cols} - columns={config.columns} + config={config} wrappedComponentRef={(inst) => this.verifyRef = inst} /> </Modal> -- Gitblit v1.8.0