2020-12-01

king

2020-12-01 57da72c823fab94a3ec6fadab2bc75173c8a03b1

 src/menu/components/table/normal-table/columns/index.jsx

@@ -2,21 +2,56 @@
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { DndProvider, DragSource, DropTarget } from 'react-dnd'
import { Table, Form } from 'antd'
import { Table, Form, Popover, Icon } from 'antd'

import asyncIconComponent from '@/utils/asyncIconComponent'
import Utils from '@/utils/utils.js'
import zhCN from '@/locales/zh-CN/model.js'
import enUS from '@/locales/en-US/model.js'
import './index.scss'

const coldict = localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS
const EditColumn = asyncIconComponent(() => import('./editColumn'))

class HeaderCol extends Component {
  updateCol = (values) => {
    const { column } = this.props
    this.props.updateCol({...column, ...values})
  }

  deleteCol = () => {
    this.props.deleteCol(this.props.column)
  }

  render() {
    const { connectDragSource, connectDropTarget, moveCol, index, ...restProps } = this.props
    const { connectDragSource, connectDropTarget, moveCol, updateCol, deleteCol, index, column, fields, children, ...restProps } = this.props

    if (index !== undefined) {
      return connectDragSource(
        connectDropTarget(<th {...restProps} index={index} style={{ cursor: 'move' }}/>),
        connectDropTarget(<th {...restProps} index={index} style={{ cursor: 'move' }}>
          <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
            <div className="mk-popover-control">
              <EditColumn column={column} dict={coldict} fields={fields} updateCol={this.updateCol} deleteCol={this.deleteCol}/>
              <Icon className="close" title="delete" type="delete" onClick={this.deleteCol} />
            </div>
          } trigger="hover">
            {children}
          </Popover>
        </th>),
      )
    } else {
      return (<th {...restProps} index={index}/>)
      return (
        <th {...restProps}>
          <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
            <div className="mk-popover-control">
              <EditColumn column={column} dict={coldict} fields={fields} updateCol={this.updateCol} deleteCol={this.deleteCol}/>
              <Icon className="close" title="delete" type="delete" onClick={this.deleteCol} />
            </div>
          } trigger="hover">
            {children}
          </Popover>
        </th>
      )
    }
  }
}
@@ -81,20 +116,24 @@

  state = {
    data: [{uuid: Utils.getuuid()}],
    columns: []
    columns: [],
    fields: []
  }

  UNSAFE_componentWillMount () {
    this.setState({
      columns: fromJS(this.props.config.cols).toJS()
      columns: fromJS(this.props.config.cols).toJS(),
      fields: fromJS(this.props.config.columns).toJS()
    })
  }

  // UNSAFE_componentWillReceiveProps (nextProps) {
  //   if (!is(fromJS(this.state.data), fromJS(nextProps.data))) {
  //     this.setState({data: nextProps.data})
  //   }
  // }
  UNSAFE_componentWillReceiveProps (nextProps) {
    if (!is(fromJS(this.state.columns), fromJS(nextProps.config.cols))) {
      this.setState({columns: fromJS(nextProps.config.cols).toJS()})
    } else if (!is(fromJS(this.state.fields), fromJS(nextProps.config.columns))) {
      this.setState({fields: fromJS(nextProps.config.columns).toJS()})
    }
  }
  shouldComponentUpdate (nextProps, nextState) {
    return !is(fromJS(this.state), fromJS(nextState))
  }
@@ -111,8 +150,17 @@
    })
  }

  updateCol = (col) => {

  }

  deleteCol = (col) => {

  }

  render() {
    let components = {
    const { fields } = this.state
    const components = {
      header: {
        cell: DragableHeaderCol
      },
@@ -123,28 +171,36 @@
    
    const columns = this.state.columns.map((col, index) => {
      return {
        ...col,
        title: col.label,
        dataIndex: col.field,
        align: 'right',
        sorter: col.IsSort === 'true',
        onCell: () => ({
          column: col
          column: col,
          fields: fields
        }),
        children: col.subcols && col.subcols.length > 0 ? col.subcols.map(cell => ({
          align: 'left',
          title: cell.label,
          key: cell.uuid,
          width: 120,
          onCell: () => ({
            column: cell
            column: cell,
            fields: fields
          }),
          onHeaderCell: () => ({
            column: cell,
            fields: fields,
            updateCol: this.updateCol,
            deleteCol: this.deleteCol,
          })
        })) : null,
        onHeaderCell: column => ({
        onHeaderCell: () => ({
          index,
          key: column.uuid,
          title: column.label,
          column: col,
          fields: fields,
          moveCol: this.moveCol,
          updateCol: this.updateCol,
          deleteCol: this.deleteCol,
        })
      }
    })