2019-12-30

king

2019-12-30 84e806945ef8982508a79e0b62a7bcb0881b108c

 src/templates/tableshare/transferform/index.jsx

@@ -1,6 +1,6 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { Transfer } from 'antd'
import { Transfer, Icon } from 'antd'
import './index.scss'

class TransferForm extends Component {
@@ -17,6 +17,9 @@
  }

  handleChange = (nextTargetKeys, direction, moveKeys) => {
    console.log(direction)
    console.log(moveKeys)
    console.log(nextTargetKeys)
    this.setState({ targetKeys: nextTargetKeys })
  }

@@ -46,6 +49,7 @@
        return {
          key: item.uuid,
          title: item.label,
          field: item.field,
          description: ''
        }
      }),
@@ -53,8 +57,47 @@
    })
  }

  changeorder = (e, item, type) => {
    const { targetKeys } = this.state
    e.stopPropagation()

    let _index = 0
    let keys = targetKeys.filter((key, i) => {
      if (key === item.key) {
        _index = i
        return false
      } else {
        return true
      }
    })

    if ((_index === 0 && type === 'up') || (_index === targetKeys.length - 1 && type === 'down')) {
      return
    }

    if (type === 'up') {
      keys.splice(_index - 1, 0, item.key)
    } else {
      keys.splice(_index + 1, 0, item.key)
    }

    this.setState({
      targetKeys: keys
    })
  }

  getItem = (item) => {
    let content = item.title + '(' + item.field + ')'
    return <span title={content}>
      {content}
      <Icon type="arrow-up" onClick={(e) => {this.changeorder(e, item, 'up')}} />
      <Icon type="arrow-down" onClick={(e) => {this.changeorder(e, item, 'down')}} />
    </span>
  }

  render() {
    const { targetKeys, selectedKeys } = this.state

    return (
      <div className="common-table-columns-transfer">
        <Transfer
@@ -65,7 +108,7 @@
          selectedKeys={selectedKeys}
          onChange={this.handleChange}
          onSelectChange={this.handleSelectChange}
          render={item => item.title}
          render={this.getItem}
        />
      </div>
    )