2020-12-21

king

2020-12-21 4f2e4e84fd2cdca1407ac06c1b44319518be39b9

 src/templates/zshare/editTable/index.jsx

@@ -2,9 +2,11 @@
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 { Table, Input, InputNumber, Popconfirm, Form, Icon, Select, Radio, Cascader, notification, message, Modal } from 'antd'

import Utils from '@/utils/utils.js'
import ColorSketch from '@/mob/colorsketch'
import PasteForm from '@/templates/zshare/pasteform'
import CusSwitch from './cusSwitch'
import zhCN from '@/locales/zh-CN/model.js'
import enUS from '@/locales/en-US/model.js'
@@ -161,6 +163,7 @@
  state = {
    data: [],
    editingKey: '',
    visible: false,
    columns: []
  }

@@ -168,9 +171,17 @@
    const { data, actions } = this.props
    let columns = fromJS(this.props.columns).toJS()

    if (!actions || actions.length > 0) {
    if (actions && (actions.includes('edit') || actions.includes('copy') || actions.includes('del'))) {
      columns.push({
        title: eTDict['model.operation'],
        title: (<div>
          {eTDict['model.operation']}
          {actions.includes('copy') ? (
            <span className="copy-control">
              <Icon type="copy" onClick={() => this.copy()} />
              <Icon type="snippets" onClick={this.paste} />
            </span>
          ) : null}
        </div>),
        dataIndex: 'operation',
        width: '140px',
        render: (text, record) => {
@@ -189,15 +200,16 @@
            </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
              {actions.includes('edit') ? <span className="primary" onClick={() => {editingKey === '' && this.edit(record.uuid)}}><Icon type="edit" /></span> : null}
              {actions.includes('copy') ? <span className="copy" onClick={() => {editingKey === '' && this.copy(record)}}><Icon type="copy" /></span> : null}
              {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}
              {actions.includes('del') && editingKey !== '' ? <span className="danger"><Icon type="delete" /></span> : null}
            </div>
          )
        }
@@ -234,6 +246,108 @@

  cancel = () => {
    this.setState({ editingKey: '' })
  }

  copy = (item) => {
    const { type } = this.props
    const { data } = this.state

    if (!data || data.length === 0) {
      message.warning('未获取到配置信息')
      return
    }

    let msg = { key: type }

    if (item) {
      msg.type = 'line'
      msg.data = item
    } else {
      msg.type = 'array'
      msg.data = data
    }

    try {
      msg = window.btoa(window.encodeURIComponent(JSON.stringify(msg)))
    } catch {
      console.warn('Stringify Failure')
      msg = ''
    }

    if (msg) {
      let oInput = document.createElement('input')
      oInput.value = msg
      document.body.appendChild(oInput)
      oInput.select()
      document.execCommand('Copy')
      document.body.removeChild(oInput)
      message.success('复制成功。')
    }
  }
  
  paste = () => {
    this.setState({visible: true})
  }
  
  pasteSubmit = () => {
    const { type } = this.props
    const { columns } = this.state
    let data = fromJS(this.state.data).toJS()

    this.pasteFormRef.handleConfirm().then(res => {
      if (res.key !== type) {
        message.warning('配置信息格式错误！')
        return
      }

      if (res.type === 'line') {
        let unique = true
        res.data.uuid = Utils.getuuid()
        columns.forEach(col => {
          if (col.unique !== true || !unique) return

          let _index = data.findIndex(item => res.data[col.dataIndex] === item[col.dataIndex])

          if (_index > -1) {
            notification.warning({
              top: 92,
              message: col.title + '不可重复！',
              duration: 5
            })
            unique = false
          }
        })

        if (!unique) return

        data.unshift(res.data)
        this.setState({ data, editingKey: '', visible: false }, () => {
          this.props.onChange(data)
        })
      } else if (res.type === 'array') {
        res.data.forEach(cell => {
          let unique = true
          cell.uuid = Utils.getuuid()
          columns.forEach(col => {
            if (col.unique !== true || !unique) return
            let _index = data.findIndex(item => cell[col.dataIndex] === item[col.dataIndex])
  
            if (_index > -1) {
              unique = false
            }
          })
  
          if (!unique) return
  
          data.unshift(cell)
        })

        this.setState({ data, editingKey: '', visible: false }, () => {
          this.props.onChange(data)
        })
      }
      message.success('粘贴成功。')
    })
  }

  onSave = (record) => {
@@ -357,7 +471,7 @@
        cell: EditableCell
      }
    }
    if (!actions || actions.length === 0 || actions.includes('down') || actions.includes('up')) {
    if (actions.includes('move')) {
      components.body.row = DragableBodyRow
    }
    
@@ -400,6 +514,18 @@
              })}
            />
          </DndProvider>
          {/* 信息粘贴 */}
          <Modal
            title={eTDict['header.form.paste']}
            visible={this.state.visible}
            width={600}
            maskClosable={false}
            onOk={this.pasteSubmit}
            onCancel={() => {this.setState({visible: false})}}
            destroyOnClose
          >
            <PasteForm dict={eTDict} wrappedComponentRef={(inst) => this.pasteFormRef = inst}/>
          </Modal>
        </div>
      </EditableContext.Provider>
    )