2021-09-01

king

2021-09-01 31ec63f0419895876cbaba99637a884a32d33d0d

 src/templates/zshare/editTable/index.jsx

@@ -14,6 +14,7 @@

let eTDict = sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS
const EditableContext = React.createContext()
const { confirm } = Modal
let dragingIndex = -1
const { Paragraph } = Typography

@@ -171,6 +172,7 @@
  UNSAFE_componentWillMount () {
    const { data, actions } = this.props
    let columns = fromJS(this.props.columns).toJS()
    let operation = null

    if (actions && (actions.includes('edit') || actions.includes('copy') || actions.includes('del'))) {
      let _operation = null
@@ -181,15 +183,14 @@
        return item.dataIndex !== 'operation'
      })

      let operation = {
      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}
          <span className="copy-control">
            {actions.includes('copy') ? <Icon type="copy" title="复制" onClick={() => this.copy()} /> : null}
            {actions.includes('copy') ? <Icon type="snippets" title="粘贴" onClick={this.paste} /> : null}
            {actions.includes('clear') ? <Icon type="delete" title="清空" onClick={this.clear} /> : null}
          </span>
        </div>),
        dataIndex: 'operation',
        width: '140px',
@@ -233,7 +234,7 @@

    this.setState({
      data: data || [],
      oricolumns: fromJS(this.props.columns).toJS(),
      operation,
      columns
    })
  }
@@ -241,19 +242,26 @@
  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
    } else if (!is(fromJS(this.props.columns), fromJS(nextProps.columns))) {
      if (nextProps.columns.length === this.props.columns.length) {
        let cols = {}
        nextProps.columns.forEach(col => {cols[col.dataIndex] = col})
  
        this.setState({
          columns: this.state.columns.map(col => {
            if (cols[col.dataIndex]) {
              return cols[col.dataIndex]
            }
            return col
          })
        })
      })
      } else {
        let columns = fromJS(nextProps.columns).toJS()
        if (this.state.operation) {
          columns.push(this.state.operation)
        }
        this.setState({columns})
      }
    }
  }

@@ -261,6 +269,21 @@

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

  clear = () => {
    const _this = this
    
    confirm({
      title: '确定清空列表吗？',
      content: '',
      onOk() {
        _this.setState({ data: [], editingKey: '' }, () => {
          _this.props.onChange([])
        })
      },
      onCancel() {}
    })
  }

  copy = (item) => {
@@ -284,7 +307,7 @@

    try {
      msg = window.btoa(window.encodeURIComponent(JSON.stringify(msg)))
    } catch {
    } catch (e) {
      console.warn('Stringify Failure')
      msg = ''
    }
@@ -494,7 +517,7 @@
      moveprops.moveRow = this.moveRow
    }
    
    const columns = this.state.columns.map(col => {
    let  columns = this.state.columns.map(col => {
      if (col.copy) {
        col.render = (text) => (<Paragraph copyable>{text}</Paragraph>)
      }
@@ -517,6 +540,19 @@
      }
    })

    columns.unshift({
      title: '序号',
      dataIndex: '$index',
      className: 'mk-index',
      width: '60px',
    })

    const data = this.state.data.map((item, index) => {
      item.$index = index + 1

      return item
    })

    return (
      <EditableContext.Provider value={this.props.form}>
        <div className="modal-edit-table">
@@ -525,7 +561,7 @@
              bordered
              rowKey="uuid"
              components={components}
              dataSource={this.state.data}
              dataSource={data}
              columns={columns}
              rowClassName="editable-row"
              pagination={false}