2019-11-15

king

2019-11-15 d3edd6d592db12fbec67e2700d168e07546aed29

 src/components/sidemenu/comtableconfig/editable/index.jsx

@@ -30,17 +30,19 @@
  save = e => {
    const { record, handleSave } = this.props
    this.form.validateFields((error, values) => {
      handleSave({ ...record, ...values })
      if (error && error[e.currentTarget.id]) {
        return
      }
      this.toggleEdit()
      handleSave({ ...record, ...values })
      // handleSave({ ...record, ...values })
    })
  }

  renderCell = form => {
    this.form = form
    const { children, dataIndex, record, title } = this.props
    // const { children, dataIndex, record, title } = this.props
    const { children, dataIndex, record } = this.props
    const { editing } = this.state
    return editing ? (
      <Form.Item style={{ margin: 0 }}>
@@ -48,11 +50,12 @@
          rules: [
            {
              required: true,
              message: `${title} is required.`,
              // message: `${title} is required.`,
              message: 'NOT NULL.',
            },
          ],
          initialValue: record[dataIndex]
        })(<Input ref={node => (this.input = node)} onPressEnter={this.save} onBlur={this.save} />)}
        })(<Input ref={node => (this.input = node)} autoComplete="off" onPressEnter={this.save} onBlur={this.save} />)}
      </Form.Item>
    ) : (
      <div
@@ -90,17 +93,17 @@
class EditTable extends Component {
  constructor(props) {
    super(props)
    this.columns = [
    let columns = [
      {
        title: 'ID',
        dataIndex: 'ID',
        width: '40%',
        title: 'Value',
        dataIndex: 'Value',
        width: props.type === 'link' ? '27%' : '40%',
        editable: true
      },
      {
        title: 'Value',
        dataIndex: 'value',
        width: '40%',
        title: 'Text',
        dataIndex: 'Text',
        width: props.type === 'link' ? '27%' : '40%',
        editable: true
      },
      {
@@ -116,9 +119,20 @@
      }
    ]

    if (props.type === 'link') {
      columns.unshift({
        title: 'ParentID',
        dataIndex: 'ParentID',
        width: '27%',
        editable: true
      })
    }

    this.state = {
      columns: columns,
      dataSource: props.data,
      count: props.data.length
      count: props.data.length,
      type: props.type
    }
  }

@@ -128,11 +142,14 @@
  }

  handleAdd = () => {
    const { count, dataSource } = this.state
    const { type, count, dataSource } = this.state
    const newData = {
      key: Utils.getuuid(),
      ID: `${count}`,
      value: `${count}`
      Value: `${count}`,
      Text: `${count}`
    }
    if (type === 'link') {
      newData.ParentID = `${count}`
    }
    this.setState({
      dataSource: [...dataSource, newData],
@@ -151,14 +168,53 @@
    this.setState({ dataSource: newData })
  }

  // UNSAFE_componentWillMount () {
  //   if (this.props.data) {
  //     this.setState({
  //       dataSource: this.props.data,
  //       count: this.props.data.length
  //     })
  //   }
  // }
  resetColumn = (type) => {
    let columns = [
      {
        title: 'Value',
        dataIndex: 'Value',
        width: type === 'link' ? '27%' : '40%',
        editable: true
      },
      {
        title: 'Text',
        dataIndex: 'Text',
        width: type === 'link' ? '27%' : '40%',
        editable: true
      },
      {
        title: '操作',
        align: 'center',
        dataIndex: 'operation',
        render: (text, record) =>
          this.state.dataSource.length >= 1 ? (
            <Popconfirm title="Sure to delete?" onConfirm={() => this.handleDelete(record.key)}>
              <span style={{color: '#1890ff', cursor: 'pointer'}}><Icon type="delete" /></span>
            </Popconfirm>
          ) : null,
      }
    ]

    if (type === 'link') {
      columns.unshift({
        title: 'ParentID',
        dataIndex: 'ParentID',
        width: '27%',
        editable: true
      })
    }

    this.setState({
      columns: columns,
      type: type
    })
  }

  UNSAFE_componentWillReceiveProps (nextProps) {
    if (this.props.type !== nextProps.type) {
      this.resetColumn(nextProps.type)
    }
  }

  render() {
    const { dataSource } = this.state
@@ -168,7 +224,7 @@
        cell: EditableCell
      }
    }
    const columns = this.columns.map(col => {
    const columns = this.state.columns.map(col => {
      if (!col.editable) {
        return col
      }