• 表格-行内编辑


    01. 说明

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

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

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

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

    1. 执行表单效验
    2. 返回新增或编辑处理后的数据(数组类型);

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

    02. API

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

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

    03. 使用示例

      import EditTable from 'components/EditTable';
      import { getEditTableData } from 'utils/utils';
    
      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>
              );
            }
          },
        },
      ];
    
      const newItem = {
        _status: 'create', // 新增节点的标识
        purchaseOrgId: uuid(), // Table 的 rowKey,新建行的唯一标识
        enabledFlag: 1,
        organizationCode: '',
        organizationName: '',
        sourceCode: 'SRM',
      },
    
    // 编辑操作时则需要给 record 设置 _status 属性,值为 update
        record._status = 'update';
    
      // 新建的数据需要过滤`id`字段,树形结构的`Table`需要过滤`children`字段
      const params = getEditTableData(dataSource, ['children', 'purchaseOrgId']);
    
      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. 注意事项

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