index.js

import React from 'react';
import { Table, Popconfirm, Form, Icon } from 'antd';
import { EditableContext, EditableCell } from './EditableCell';
import styles from './index.less';

class EditableTable extends React.Component {
  static defaultProps = {
    pageSize: 10,
  };

  constructor(props) {
    super(props);
    const { dataSource } = props;
    this.state = {
      data: dataSource,
      editingKey: '',
    };
    this.actionColumns = [
      {
        title: '操作',
        width: 80,
        dataIndex: 'operation',
        render: (text, record) => {
          const { editingKey } = this.state;
          const editable = this.isEditing(record);
          const showDelete = this.showDelete(record, editable);
          return (
            <div>
              {editable ? (
                <span>
                  <EditableContext.Consumer>
                    {form => (
                      <a onClick={e => this.save(e, form, record)} style={{ marginRight: 8 }}>
                        <Icon type="save" theme="filled" />
                      </a>
                    )}
                  </EditableContext.Consumer>
                  <Popconfirm title="确定取消?" onConfirm={() => this.cancel(record)}>
                    <a>
                      <Icon type="stop" theme="filled" />
                    </a>
                  </Popconfirm>
                </span>
              ) : (
                <a
                  disabled={editingKey !== ''}
                  // 进入可编辑
                  onClick={() => this.edit(record.key)}
                >
                  <Icon
                    type="edit"
                    theme="filled"
                    twoToneColor={editingKey !== '' && '#bec5d4'}
                    className={styles.disable}
                  />
                </a>
              )}
              {showDelete && (
                <Popconfirm title="确定删除?" onConfirm={() => this.delete(record)}>
                  <a style={{ marginLeft: 8 }}>
                    <Icon type="delete" theme="filled" />
                  </a>
                </Popconfirm>
              )}
            </div>
          );
        },
      },
    ];
  }

  // componentWillReceiveProps
  componentWillReceiveProps(nextProps) {
    const { dataSource } = this.props;
    if (dataSource !== nextProps.dataSource) {
      this.setState({ data: nextProps.dataSource });
    }
  }

  // 是否显示删除按钮
  showDelete = (record, editable) => {
    if (record.action === 'add' || editable) {
      return false;
    }
    return true;
  };

  // eslint-disable-next-line react/destructuring-assignment
  isEditing = record => record.key === this.state.editingKey;

  // change
  onChangeTable = (pagination, filters, sorter) => {
    const { onChangeTable } = this.props;
    if (onChangeTable && onChangeTable instanceof Function) {
      onChangeTable(pagination, filters, sorter);
    }
    this.cancel();
  };

  // 删除
  delete = async record => {
    const { onDelete, total, pageNum, pageSize } = this.props;
    if (onDelete instanceof Function) {
      // do someting
      const goPrePage = total === (pageNum - 1) * pageSize + 1;
      onDelete({ ...record, goPrePage }).then(() => {
        this.cancel();
      });
    }
  };

  // 增加行
  addRow = row => {
    const { dataSource } = this.props;
    const newData = [...dataSource];
    newData.splice(0, 0, row);
    this.setState({
      editingKey: row.key,
      data: newData,
    });
    setTimeout(() => {
      document
        .querySelectorAll('tr[data-row-key]:first-child')[0]
        .getElementsByTagName('input')[0]
        .focus();
    }, 800);
  };

  // 取消
  cancel = record => {
    const { data } = this.state;
    if (record && record.action === 'add') {
      // 去掉第一条记录
      const newData = [...data];
      newData.splice(0, 1);
      this.setState({
        data: newData,
      });
    }
    this.setState({
      editingKey: '',
    });
  };

  /**
   * 编辑
   * @param {*} key
   */
  edit(key) {
    this.setState({
      editingKey: key,
    });
  }

  /**
   * 保存
   * @param {*} form
   * @param {*} key
   */
  save(e, form, record) {
    e.preventDefault();
    form.validateFields((error, row) => {
      if (error) {
        return;
      }
      // 新增需要刷新页面  编辑可不刷新页面
      const { onAdd, onEdit } = this.props;
      if (record.action === 'add') {
        if (onAdd instanceof Function) {
          onAdd({ ...record, ...row }).then(result => {
            if (result) {
              this.setState({
                editingKey: '',
              });
            }
          });
        }
      } else if (onEdit instanceof Function) {
        onEdit({ ...record, ...row }).then(result => {
          if (result) {
            this.setState({
              editingKey: '',
            });
          }
        });
      }
    });
  }

  render() {
    const { data } = this.state;
    const { form, pageData, loading, columns = [] } = this.props;
    const components = {
      body: {
        cell: EditableCell,
      },
    };

    const cols = columns.concat(this.actionColumns).map(col => {
      if (!col.editable) {
        return col;
      }
      return {
        ...col,
        onCell: record => ({
          renderEditing: col.renderEditing,
          record,
          rules: col.rules,
          dataIndex: col.dataIndex,
          title: col.title,
          editing: this.isEditing(record),
        }),
      };
    });

    return (
      <div className={styles.root}>
        <EditableContext.Provider value={form}>
          <Table
            className="fixedWidthTable"
            // scroll={{ x: 1300 }}
            components={components}
            dataSource={data}
            columns={cols}
            loading={loading}
            onChange={this.onChangeTable}
            rowClassName="editable-row"
            pagination={{
              ...pageData,
              showQuickJumper: true,
              showSizeChanger: true,
            }}
          />
        </EditableContext.Provider>
      </div>
    );
  }
}

const EditableFormTable = Form.create()(EditableTable);
export default EditableFormTable;