From f895e8af9e6a393f71fec0dc26fdf1b9b6616cb4 Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期五, 11 十二月 2020 18:53:04 +0800 Subject: [PATCH] 2020-12-11 --- src/templates/zshare/modalform/datatable/index.jsx | 140 ++++++++++++++++++++++++++++++++-------------- 1 files changed, 97 insertions(+), 43 deletions(-) diff --git a/src/templates/zshare/modalform/datatable/index.jsx b/src/templates/zshare/modalform/datatable/index.jsx index d05be5e..50e0cc6 100644 --- a/src/templates/zshare/modalform/datatable/index.jsx +++ b/src/templates/zshare/modalform/datatable/index.jsx @@ -1,6 +1,7 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' +import { DndProvider, DragSource, DropTarget } from 'react-dnd' import { Table, Input, Popconfirm, Form, Icon, notification } from 'antd' import Utils from '@/utils/utils.js' @@ -8,6 +9,64 @@ import './index.scss' const EditableContext = React.createContext() +let dragingIndex = -1 + +class BodyRow extends React.Component { + render() { + const { isOver, moveAble, connectDragSource, connectDropTarget, moveRow, ...restProps } = this.props + let { className } = restProps + + if (isOver && moveAble) { + if (restProps.index > dragingIndex) { + className += ' drop-over-downward' + } + if (restProps.index < dragingIndex) { + className += ' drop-over-upward' + } + } + + if (moveAble) { + return connectDragSource( + connectDropTarget(<tr {...restProps} className={className} style={{...restProps.style, cursor: 'move'}} />), + ) + } else { + return (<tr {...restProps} className={className} style={restProps.style} />) + } + } +} + +const rowSource = { + beginDrag(props) { + dragingIndex = props.index + return { + index: props.index, + } + } +} + +const rowTarget = { + drop(props, monitor) { + const dragIndex = monitor.getItem().index + const hoverIndex = props.index + + if (dragIndex === hoverIndex) { + return + } + + props.moveRow(dragIndex, hoverIndex) + + monitor.getItem().index = hoverIndex + }, +} + +const DragableBodyRow = DropTarget('row', rowTarget, (connect, monitor) => ({ + connectDropTarget: connect.dropTarget(), + isOver: monitor.isOver(), +}))( + DragSource('row', rowSource, connect => ({ + connectDragSource: connect.dragSource(), + }))(BodyRow), +) class EditableCell extends Component { getInput = (form) => { @@ -161,8 +220,9 @@ }) columns.push({ - title: 'operation', + title: '鎿嶄綔', dataIndex: 'operation', + align: 'center', width: '18%', render: (text, record) => { const { editingKey } = this.state @@ -181,8 +241,6 @@ ) : ( <div className={'operation-btn' + (editingKey !== '' ? ' disabled' : '')}> <span className="primary" onClick={() => {editingKey === '' && this.edit(record.key)}}><Icon type="edit" /></span> - <span className="primary" onClick={() => {editingKey === '' && this.handleUpDown(record.key, 'up')}}><Icon type="arrow-up" /></span> - <span className="danger" onClick={() => {editingKey === '' && this.handleUpDown(record.key, 'down')}}><Icon type="arrow-down" /></span> {editingKey === '' ? <Popconfirm overlayClassName="popover-confirm" title={this.props.dict['model.query.delete']} @@ -219,27 +277,6 @@ handleDelete = (key) => { const { data } = this.state let _data = data.filter(item => key !== item.key) - - this.setState({ - data: _data - }, () => { - this.props.onChange(_data) - }) - } - - handleUpDown = (key, direction) => { - let _data = fromJS(this.state.data).toJS() - const index = _data.findIndex(item => key === item.key) - - if ((index === 0 && direction === 'up') || (index === _data.length - 1 && direction === 'down')) { - return - } - - if (direction === 'up') { - _data.splice(index - 1, 0, ..._data.splice(index, 1)) - } else { - _data.splice(index + 1, 0, ..._data.splice(index, 1)) - } this.setState({ data: _data @@ -286,14 +323,7 @@ handleAdd = () => { const { fields, type } = this.props - if (this.state.editingKey) { - notification.warning({ - top: 92, - message: '璇蜂繚瀛樼紪杈戜腑鐨勫厓绱狅紒', - duration: 5 - }) - return - } else if (this.state.data.length >= 20) { + if (this.state.data.length >= 20) { notification.warning({ top: 92, message: '鏈�澶氬彲娣诲姞20椤癸紒', @@ -314,7 +344,7 @@ let data = [...this.state.data, item] - this.setState({ data }, () => { + this.setState({ data, editingKey: '' }, () => { this.props.onChange(data) }) } @@ -323,11 +353,27 @@ this.setState({ editingKey: key }) } + moveRow = (dragIndex, hoverIndex) => { + const { editingKey } = this.state + let _data = fromJS(this.state.data).toJS() + + if (editingKey) return + + _data.splice(hoverIndex, 0, ..._data.splice(dragIndex, 1)) + + this.setState({ + data: _data + }, () => { + this.props.onChange(_data) + }) + } + render() { const components = { body: { - cell: EditableCell, - }, + row: DragableBodyRow, + cell: EditableCell + } } const columns = this.state.columns.map(col => { @@ -358,14 +404,22 @@ <EditableContext.Provider value={this.props.form}> <div className="modal-card-data-table"> {addable ? <Icon className="add-row" type="plus" onClick={this.handleAdd} /> : null} - <Table - components={components} - bordered - dataSource={this.state.data} - columns={columns} - rowClassName="editable-row" - pagination={false} - /> + <DndProvider> + <Table + components={components} + bordered + rowKey="key" + dataSource={this.state.data} + columns={columns} + rowClassName="editable-row" + onRow={(record, index) => ({ + index, + moveAble: !this.state.editingKey, + moveRow: this.moveRow, + })} + pagination={false} + /> + </DndProvider> </div> </EditableContext.Provider> ) -- Gitblit v1.8.0