2020-12-08

king

2020-12-08 655ac8aef54bc134c1420c19975023182a10cae4

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

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

import asyncComponent from '@/utils/asyncComponent'
import asyncIconComponent from '@/utils/asyncIconComponent'
@@ -15,6 +15,7 @@
const { confirm } = Modal
const coldict = localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS
const EditColumn = asyncIconComponent(() => import('./editColumn'))
const MarkColumn = asyncIconComponent(() => import('./markcolumn'))
const CardCellComponent = asyncComponent(() => import('@/menu/components/card/cardcellcomponent'))

class HeaderCol extends Component {
@@ -30,6 +31,11 @@
    })
  }

  updateMarks = (vals) => {
    const { column } = this.props
    this.props.updateCol({...column, marks: vals})
  }

  shouldComponentUpdate (nextProps, nextState) {

    if (!nextProps.column) return false
@@ -40,18 +46,19 @@
  }

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

    if (index !== undefined) {
      return connectDragSource(
        connectDropTarget(<th {...restProps} index={index} style={{ cursor: 'move', textAlign: align }}>
          <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
            <div className="mk-popover-control">
              {column && (column.type === 'custom' || column.type === 'colspan' || column.type === 'action') ?
              {column && ['custom', 'colspan', 'action'].includes(column.type) ?
                <Icon className="plus" title="添加" type="plus" onClick={() => this.props.addElement(column)} /> : null
              }
              <Icon className="edit" title="编辑" type="edit" onClick={() => this.props.editColumn(column)} />
              <Icon className="close" title="删除" type="delete" onClick={this.deleteCol} />
              {column && ['text', 'number'].includes(column.type) ? <MarkColumn dict={coldict} columns={fields} marks={column.marks} onSubmit={this.updateMarks} /> : null }
            </div>
          } trigger="hover">
            {children}
@@ -68,6 +75,7 @@
              }
              <Icon className="edit" title="编辑" type="edit" onClick={() => this.props.editColumn(column)} />
              <Icon className="close" title="删除" type="delete" onClick={this.deleteCol} />
              {column && ['text', 'number'].includes(column.type) ? <MarkColumn dict={coldict} columns={fields} marks={column.marks} onSubmit={this.updateMarks} /> : null }
            </div>
          } trigger="hover">
            {children}
@@ -145,6 +153,7 @@
      return (
        <td style={{...style, minWidth: column.Width || 100}} className={className}>
          {column.field}
          {column.marks && column.marks.length > 0 ? <Icon className="profile" type="ant-design"/> : null}
        </td>
      )
    } else {
@@ -166,7 +175,8 @@
  state = {
    data: [{uuid: Utils.getuuid()}],
    columns: [],
    fields: []
    fields: [],
    lineMarks: []
  }

  UNSAFE_componentWillMount () {
@@ -174,7 +184,8 @@

    this.setState({
      columns: fromJS(config.cols).toJS(),
      fields: fromJS(config.columns).toJS()
      fields: fromJS(config.columns).toJS(),
      lineMarks: config.lineMarks ? fromJS(config.lineMarks).toJS() : []
    })
  }

@@ -338,9 +349,41 @@
    })
  }

  updateLineMarks = (vals) => {
    this.setState({
      lineMarks: vals
    }, () => {
      this.props.updatecolumn({...this.props.config, lineMarks: vals})
    })
  }

  /**
   * @description 显示列复制
   */
  copycolumn = () => {
    const { columns } = this.state

    let oInput = document.createElement('input')
    let val = {
      copyType: 'columns',
      columns: columns
    }

    oInput.value = window.btoa(window.encodeURIComponent(JSON.stringify(val)))
    document.body.appendChild(oInput)
    oInput.select()
    document.execCommand('Copy')
    oInput.className = 'oInput'
    oInput.style.display = 'none'

    message.success('复制成功。')

    document.body.removeChild(oInput)
  }

  render() {
    const { config } = this.props
    const { fields, card } = this.state
    const { fields, card, lineMarks } = this.state
    const components = {
      header: {
        cell: DragableHeaderCol
@@ -374,7 +417,9 @@
          }),
          onHeaderCell: () => ({
            column: cell,
            fields: fields,
            align: cell.Align,
            updateCol: this.updateCol,
            addElement: this.addElement,
            editColumn: this.editColumn,
            deleteCol: this.deleteCol,
@@ -383,8 +428,10 @@
        onHeaderCell: () => ({
          index,
          column: col,
          fields: fields,
          align: col.Align,
          moveCol: this.moveCol,
          updateCol: this.updateCol,
          addElement: this.addElement,
          editColumn: this.editColumn,
          deleteCol: this.deleteCol,
@@ -394,6 +441,10 @@

    return (
      <div className={`normal-table-columns ${config.setting.laypage} ${config.wrap.tableType}`}>
        <div className="col-control">
          <Icon title="复制" type="copy" onClick={this.copycolumn} />
          <MarkColumn dict={coldict} columns={fields} type="line" marks={lineMarks} onSubmit={this.updateLineMarks} />
        </div>
        <DndProvider>
          <Table
            rowKey="uuid"