~jinfei/pc-plat.git

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'
import CusSwitch from './cusSwitch'
import zhCN from '@/locales/zh-CN/model.js'
import enUS from '@/locales/en-US/model.js'
import './index.scss'
 
let eTDict = localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS
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) => {
    const { inputType, options, min, max, unlimit } = this.props
 
    if (inputType === 'number' && unlimit) {
      return <InputNumber onPressEnter={() => this.getValue(form)} />
    } else if (inputType === 'number') {
      return <InputNumber min={min} max={max} precision={0} onPressEnter={() => this.getValue(form)} />
    } else if (inputType === 'color') {
      return <ColorSketch />
    } else if (inputType === 'switch') {
      return <CusSwitch />
    } else if (inputType === 'select') {
      return (
        <Select>
          {options.map((item, i) => (<Select.Option key={i} value={item.field || item.value}> {item.label || item.text} </Select.Option>))}
        </Select>
      )
    } else if (inputType === 'multiStr') {
      return (
        <Select mode="multiple">
          {options.map((item, i) => (<Select.Option key={i} value={item.field || item.value}> {item.label || item.text} </Select.Option>))}
        </Select>
      )
    } else if (inputType === 'cascader') {
      return (
        <Cascader options={options} placeholder=""/>
      )
    } else if (inputType === 'radio') {
      return (
        <Radio.Group>
          {options.map((item, i) => (<Radio key={i} value={item.field || item.value}> {item.label || item.text} </Radio>))}
        </Radio.Group>
      )
    } else {
      return <Input onPressEnter={() => this.getValue(form)}/>
    }
  }
 
  getValue = (form) => {
    const { record } = this.props
    form.validateFields((error, row) => {
      if (error) {
        return
      }
      this.props.onSave({...record, ...row})
    })
  }
 
  renderCell = (form) => {
    const { getFieldDecorator } = form
    const { editing, dataIndex, title, record, children, className, required, inputType } = this.props
 
    return (
      <td className={className}>
        {editing ? (
          <Form.Item style={{ margin: 0 }}>
            {getFieldDecorator(dataIndex, {
              rules: [
                {
                  required: required,
                  message: ['number', 'text', 'input'].includes(inputType) ? `${eTDict['form.required.input']} ${title}!` : `${eTDict['form.required.select']} ${title}!`,
                }
              ],
              initialValue: inputType === 'multiStr' ? (record[dataIndex] ? record[dataIndex].split(',') : []) : record[dataIndex],
            })(this.getInput(form))}
          </Form.Item>
        ) : (
          children
        )}
      </td>
    )
  }
 
  render() {
    return <EditableContext.Consumer>{this.renderCell}</EditableContext.Consumer>
  }
}
 
class EditTable extends Component {
  static propTpyes = {
    actions: PropTypes.any,         // 操作项
    data: PropTypes.any,            // 数据列表
    columns: PropTypes.array,       // 显示列
    onChange: PropTypes.func        // 数据变化
  }
 
  state = {
    data: [],
    editingKey: '',
    columns: []
  }
 
  UNSAFE_componentWillMount () {
    const { data, actions } = this.props
    let columns = fromJS(this.props.columns).toJS()
 
    if (!actions || actions.length > 0) {
      columns.push({
        title: eTDict['model.operation'],
        dataIndex: 'operation',
        width: '140px',
        render: (text, record) => {
          const { editingKey } = this.state
          const editable = this.isEditing(record)
          return editable ? (
            <div style={{textAlign: 'center', minWidth: '110px'}}>
              <EditableContext.Consumer>
                {form => (
                  <span onClick={() => this.save(form, record.uuid)} style={{ marginRight: 8 , color: '#1890ff', cursor: 'pointer'}}>
                    {eTDict['model.save']}
                  </span>
                )}
              </EditableContext.Consumer>
              <span style={{ color: '#1890ff', cursor: 'pointer'}} onClick={() => this.cancel(record.uuid)}>{eTDict['model.cancel']}</span>
            </div>
          ) : (
            <div className={'edit-operation-btn' + (editingKey !== '' ? ' disabled' : '')} style={{minWidth: '110px'}}>
              {!actions || actions.includes('edit') ? <span className="primary" onClick={() => {editingKey === '' && this.edit(record.uuid)}}><Icon type="edit" /></span> : null}
              {(!actions || actions.includes('del')) && editingKey === '' ? <Popconfirm
                overlayClassName="popover-confirm"
                title={eTDict['model.query.delete']}
                onConfirm={() => this.handleDelete(record.uuid)
              }>
                <span className="danger"><Icon type="delete" /></span>
              </Popconfirm> : null}
              {(!actions || actions.includes('del')) && editingKey !== '' ? <span className="danger"><Icon type="delete" /></span> : null}
            </div>
          )
        }
      })
    }
 
    this.setState({
      data: data || [],
      oricolumns: fromJS(this.props.columns).toJS(),
      columns
    })
  }
 
  UNSAFE_componentWillReceiveProps (nextProps) {
    if (!is(fromJS(this.state.data), fromJS(nextProps.data))) {
      this.setState({data: nextProps.data, editingKey: ''})
    } else if (!is(fromJS(this.state.oricolumns), fromJS(nextProps.columns))) {
      let cols = {}
      nextProps.columns.forEach(col => {cols[col.dataIndex] = col})
 
      this.setState({
        oricolumns: fromJS(nextProps.columns).toJS(),
        columns: this.state.columns.map(col => {
          if (cols[col.dataIndex]) {
            return cols[col.dataIndex]
          }
          return col
        })
      })
    }
  }
 
  isEditing = record => record.uuid === this.state.editingKey
 
  cancel = () => {
    this.setState({ editingKey: '' })
  }
 
  onSave = (record) => {
    const { columns } = this.state
    const newData = [...this.state.data]
    const index = newData.findIndex(item => record.uuid === item.uuid)
 
    if (index === -1) {
      notification.warning({
        top: 92,
        message: '数据错误，无法找到行ID！',
        duration: 5
      })
      return
    }
 
    let unique = true
    columns.forEach(col => {
      if (col.unique !== true || !unique) return
 
      let _index = newData.findIndex(item => record.uuid !== item.uuid && record[col.dataIndex] === item[col.dataIndex])
 
      if (_index > -1) {
        notification.warning({
          top: 92,
          message: col.title + '不可重复！',
          duration: 5
        })
        unique = false
      }
    })
 
    if (!unique) return
 
    newData.splice(index, 1, record)
    this.setState({ data: newData, editingKey: '' }, () => {
      this.props.onChange(newData)
    })
  }
 
  handleDelete = (uuid) => {
    const { data } = this.state
    let _data = data.filter(item => uuid !== item.uuid)
 
    this.setState({
      data: _data
    }, () => {
      this.props.onChange(_data)
    })
  }
 
  save(form, uuid) {
    const { columns } = this.state
    form.validateFields((error, row) => {
      if (error) {
        return;
      }
      const newData = [...this.state.data]
      const index = newData.findIndex(item => uuid === item.uuid)
 
      let unique = true
      columns.forEach(col => {
        if (col.unique !== true || !unique) return
 
        let _index = newData.findIndex(item => uuid !== item.uuid && row[col.dataIndex] === item[col.dataIndex])
 
        if (_index > -1) {
          notification.warning({
            top: 92,
            message: col.title + '不可重复！',
            duration: 5
          })
          unique = false
        }
      })
 
      if (!unique) return
 
      if (index > -1) {
        const item = newData[index]
        newData.splice(index, 1, {
          ...item,
          ...row,
        })
        this.setState({ data: newData, editingKey: '' }, () => {
          this.props.onChange(newData)
        })
      } else {
        newData.push(row);
        this.setState({ data: newData, editingKey: '' }, () => {
          this.props.onChange(newData)
        })
      }
    })
  }
 
  edit(uuid) {
    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 { actions } = this.props
 
    let components = {
      body: {
        cell: EditableCell
      }
    }
    if (!actions || actions.length === 0 || actions.includes('down') || actions.includes('up')) {
      components.body.row = DragableBodyRow
    }
    
    const columns = this.state.columns.map(col => {
      if (!col.editable) return col
      return {
        ...col,
        onCell: record => ({
          record,
          inputType: col.inputType,
          dataIndex: col.dataIndex,
          options: col.options || [],
          min: col.min || 0,
          max: col.max || 500,
          unlimit: col.unlimit,
          required: col.required !== false ? true : false,
          title: col.title,
          editing: this.isEditing(record),
          onSave: this.onSave,
        }),
      }
    })
 
    return (
      <EditableContext.Provider value={this.props.form}>
        <div className="modal-edit-table">
          <DndProvider>
            <Table
              bordered
              rowKey="uuid"
              components={components}
              dataSource={this.state.data}
              columns={columns}
              rowClassName="editable-row"
              pagination={false}
              onRow={(record, index) => ({
                index,
                moveAble: !this.state.editingKey,
                moveRow: this.moveRow,
              })}
            />
          </DndProvider>
        </div>
      </EditableContext.Provider>
    )
  }
}
 
export default Form.create()(EditTable)