表格-行内编辑

01. 说明

可以用于在表格内批量编辑或新增数据，每一行数据为一个表单。

EditTable 组件会向每一行的数据record中设置名为$form表单属性。

新增的行数据需要设置_status属性，值为create，编辑的行数据需要设置_status属性，值为update。

同时需要使用getEditTableData函数：该函数接收两个参数，dataSource：Table 的数据源，数组类型；filterList：不需要传递给后台的字段（例如：新建时的id字段），字符串数组类型；该函数主要做两件事件：

执行表单效验
返回新增或编辑处理后的数据（数组类型）；

ps: 请使用1.0.40及以上版本的hzero-ui

02. API

支持完整的Table组件属性，属性详情请查看HZERO-UI Table 组件

ps: 不能在可编辑的列上设置fixed属性。

03. 使用示例

1. 引入表格行内编辑组件，同时引入getEditTableForm函数

  import EditTable from 'components/EditTable';
  import { getEditTableData } from 'utils/utils';

1. 定义columns

  const columns = [
    {
      title: intl.get('hpfm.purchaseOrg.model.org.organizationCode').d('采购组织编码'),
      width: 150,
      dataIndex: 'organizationCode',
      render: (val, record) => {
        if (record._status === 'update' || record._status === 'create') {
          const { getFieldDecorator } = record.$form;
          return (
            <FormItem>
              {getFieldDecorator('organizationCode', {
                initialValue: record.organizationCode,
                rules: [
                  {
                    required: true,
                    message: intl.get('hzero.common.validation.notNull', {
                      name: intl
                        .get('hpfm.purchaseOrg.model.org.organizationCode')
                        .d('采购组织编码'),
                    }),
                  },
                ],
              })(
                <Input
                  disabled={record.sourceCode === 'ERP'}
                  typeCase="upper"
                  inputChinese={false}
                />
              )}
            </FormItem>
          );
        } else {
          return val;
        }
      },
    },
    // 非编辑字段使用方式不变
    {
      title: intl.get('hpfm.purchaseOrg.model.org.sourceCode').d('数据来源'),
      align: 'center',
      width: 100,
      dataIndex: 'sourceCode',
    },
    {
      title: intl.get('hzero.common.button.action').d('操作'),
      align: 'center',
      width: 100,
      render: (val, record) => {
        if (record._status === 'update') {
          return (
            <a onClick={() => this.handleOrgEdit(record, false)}>
              {intl.get('hzero.common.button.cancel').d('取消')}
            </a>
          );
        } else if (record._status === 'create') {
          return (
            <a onClick={() => this.handleRemoveOrg(record)}>
              {intl.get('hzero.common.button.delete').d('删除')}
            </a>
          );
        } else {
          return (
            <a onClick={() => this.handleOrgEdit(record, true)}>
              {intl.get('hzero.common.button.edit').d('编辑')}
            </a>
          );
        }
      },
    },
  ];

1. 新增操作时构建的行数据需要有_status属性，属性值为create

  const newItem = {
    _status: 'create', // 新增节点的标识
    purchaseOrgId: uuid(), // Table 的 rowKey，新建行的唯一标识
    enabledFlag: 1,
    organizationCode: '',
    organizationName: '',
    sourceCode: 'SRM',
  },

// 编辑操作时则需要给 record 设置 _status 属性，值为 update
    record._status = 'update';

1. 获取新建或编辑处理后的数据

  // 新建的数据需要过滤`id`字段，树形结构的`Table`需要过滤`children`字段
  const params = getEditTableData(dataSource, ['children', 'purchaseOrgId']);

1. 保存操作前，需要验证是否有编辑或新建数据，可依据上一步getEditTableData返回的数据自行处理

  if (Array.isArray(params) && params.length > 0) {
    dispatch({
      type: 'purchaseOrg/savePurchaseOrg',
      payload: {
        organizationId: this.state.orgId,
        purchaseOrgList: params,
      },
    }).then(res => {
      if (res) {
        notification.success();
        this.fetchDataList();
      }
    });
  }

04. 注意事项

无法正常使用的可能性原因：

没有升级hzero-ui到1.0.40以上的版本，需要使用yarn更新依赖，更新之后重新启动项目。
可编辑的列render没有return，可编辑的列在编辑状态下和非编辑状态下都需要return。
没有使用EditTable组件：使用<EditTable />而不是<Table />。
在可编辑列上使用了fixed属性。
遗漏了_status状态判断。
没有给编辑行设置_status属性：编辑或新增时，需要设置编辑行属性_status: 'update'或_status: 'create'。