2020-11-27

king

2020-11-27 a06655e10f4242c350a3450c6c21e77f33302e2e

 src/templates/zshare/editTable/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, InputNumber, Popconfirm, Form, Icon, Select, Radio, Cascader, notification } from 'antd'

import ColorSketch from '@/mob/colorsketch'
@@ -11,6 +12,61 @@

let eTDict = localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS
const EditableContext = React.createContext()
let dragingIndex = -1

class BodyRow extends React.Component {
  render() {
    const { isOver, connectDragSource, connectDropTarget, moveRow, ...restProps } = this.props
    const style = { ...restProps.style, cursor: 'move' }

    let { className } = restProps
    if (isOver) {
      if (restProps.index > dragingIndex) {
        className += ' drop-over-downward'
      }
      if (restProps.index < dragingIndex) {
        className += ' drop-over-upward'
      }
    }

    return connectDragSource(
      connectDropTarget(<tr {...restProps} className={className} style={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) => {
@@ -130,8 +186,6 @@
        ) : (
          <div className={'edit-operation-btn' + (editingKey !== '' ? ' disabled' : '')}>
            {!actions || actions.includes('edit') ? <span className="primary" onClick={() => {editingKey === '' && this.edit(record.uuid)}}><Icon type="edit" /></span> : null}
            {!actions || actions.includes('up') ? <span className="primary" onClick={() => {editingKey === '' && this.handleUpDown(record.uuid, 'up')}}><Icon type="arrow-up" /></span> : null}
            {!actions || actions.includes('down') ? <span className="danger" onClick={() => {editingKey === '' && this.handleUpDown(record.uuid, 'down')}}><Icon type="arrow-down" /></span> : null}
            {(!actions || actions.includes('del')) && editingKey === '' ? <Popconfirm
              overlayClassName="popover-confirm"
              title={eTDict['model.query.delete']}
@@ -226,27 +280,6 @@
    })
  }

  handleUpDown = (uuid, direction) => {
    let _data = fromJS(this.state.data).toJS()
    const index = _data.findIndex(item => uuid === item.uuid)

    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
    }, () => {
      this.props.onChange(_data)
    })
  }

  save(form, uuid) {
    const { columns } = this.state
    form.validateFields((error, row) => {
@@ -296,11 +329,31 @@
    this.setState({ editingKey: uuid })
  }

  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 = {
    const { actions } = this.props

    let components = {
      body: {
        cell: EditableCell,
        cell: EditableCell
      }
    }
    if (!actions || actions.includes('down') || actions.includes('up')) {
      components.body.row = DragableBodyRow
    }
    
    const columns = this.state.columns.map(col => {
@@ -325,16 +378,22 @@

    return (
      <EditableContext.Provider value={this.props.form}>
        <div className="modal-edit-table">
          <Table
            bordered
            rowKey="uuid"
            components={components}
            dataSource={this.state.data}
            columns={columns}
            rowClassName="editable-row"
            pagination={false}
          />
        <div className={'modal-edit-table ' + (this.state.editingKey ? 'editing' : '')}>
          <DndProvider>
            <Table
              bordered
              rowKey="uuid"
              components={components}
              dataSource={this.state.data}
              columns={columns}
              rowClassName="editable-row"
              pagination={false}
              onRow={(record, index) => ({
                index,
                moveRow: this.moveRow,
              })}
            />
          </DndProvider>
        </div>
      </EditableContext.Provider>
    )