2021-07-27 antd 封装的可编辑表格

封装的可编辑表格

/* component > index.jsx */
import './index.less';
import React, {
    useEffect, Component, useState } from 'react';
import {
    Table, Popconfirm, Form, Spin } from 'antd';
import {
    SwitchComponents } from './SwitchComponents';

const EditableContext = React.createContext();

/**
 * columns:
  {
    title: string,
    dataIndex: string,
    required?: boolean,
    render?: () => Element,
    edit?: (record) => Element,
    editType?: 'text' | 'select' | 'switch' | '',
  }

  tableProps:
    columns       表头配置   []
    dataSource    数据      []
    init          是否需要初始化 false
    initCallback  初始化后的回调
    loading       加载中    false
    onRowSave     操作行的回调
    pagination    分页配置
    refreshRow    是否初始化行
    refreshRowCallback  初始化行的回调
    rowKey    数据唯一id
    title     表格标题
 *
 *
 */

/**
 * 单元格
 */
class EditableCell extends Component {
   
  getComponent = () => {
   
    const {
    editing, editType, edit, record, defaultRender } = this.props;
    const disabled = !editing;
    // 内置组件
    if (editing) {
   
      // 编辑
      if (edit) return edit(record, disabled);
      if (editType) return SwitchComponents(editType, {
    disabled });
    } else {
   
      // 显示
      if (defaultRender) return false;
      if (editType) return SwitchComponents(editType, {
    disabled });
      if (edit) return edit(record, disabled);
      return this.props.children;
    }
  };
  renderCell = ({
     getFieldDecorator }) => {
   
    const {
   
      editing,
      dataIndex,
      title,
      record = {
   },
      children,
      required,
      editType,
      edit,
      defaultRender,
      parent,
      ...restProps
    } = this.props;
    // 编辑状态：有edit显示edit的内容。否则显示editType的内容，否则显示文字
    if (!edit && !editType) {
   
      return (
        <td {
   ...restProps}>
          {
   children}
        </td>
      );
    }
    // 显示状态：有render显示render，否则显示edit/editType的disabled，否则显示文字

    if (!editing && defaultRender && editType) {
   
      return (
        <td {
   ...restProps}>
          {
   children}
        </td>
      );
    }

    if (dataIndex && parent) {
   
      const dom = this.getComponent();
      if (!dom) {
   
        return (
          <td {
   ...restProps}>
            {
   defaultRender(record[dataIndex], record, !editing)}
          </td>
        );
      }
      return (
        <td {
   ...restProps}>
          {
   
            (children || edit || editType) && (
              <Form.Item style={
   {
    margin: 0 }}>
                {
   getFieldDecorator(`${
     record[parent]}.${
     dataIndex}`, {
   
                  rules: [
                    {
   
                      required,
                      message: `请输入 ${
     title}!`
                    }
                  ],
                  initialValue: record[dataIndex],
                  valuePropName: editType === 'switch' ? 'checked' : 'value'
                })(dom)}
              </Form.Item>
            )}
        </td>
      );
    }

    return children;
  };

  render() {
   
    return (
      <EditableContext.Consumer>{
   this.renderCell}</EditableContext.Consumer>
    );
  }
}

/**
 * 行
 */
const EditableRow = ({
     form, refresh, callback, ...props }) => {
   
  useEffect(() => {
   
    if (refresh) {
   
      form.resetFields();
      if (callback) callback();
    }
  }, [refresh])
  return