• 弹性域组件

    通过在平台弹性域规则/弹性域模型功能配置弹性域字段和字段逻辑,并使用弹性域组件,即可实现为表单/表格动态添加字段,并可配置其属性,弹性域字段支持保存/删除.

    用法

    弹性域组件包含表单(form)和表格(table)两部分, 主要以高阶函数和高阶组件的形式,用法如下

    withToolbox 工具箱高阶组件

    在包含有需要使用表单或者表格弹性域组件的功能页面中,可以在相关入口组件(入口文件)中,使用如下方式首先引入工具箱组件:

    import withToolbox from 'hzero-front-hpfm/lib/components/Toolbox/withToolbox'; // 引入工具箱组件

// ...
@withToolbox({ // 使用注解的方式引入工具箱高阶组件
  tools: [], // 工具集合数组
})
export default class Index extends Component { // 入口组件
  // ...
}

    引入工具箱组件后既可配置弹性域组件,配置方式如下:

    import withToolbox from 'hzero-front-hpfm/lib/components/Toolbox/withToolbox'; // 引入工具箱组件
import withFlexFields from 'hzero-front-hpfm/lib/components/FlexFields/withFlexFields';

// ...
@withToolbox({
  tools: [
    withFlexFields([
      {
        flexRuleCode: 'FLEX_FIELDS_CODE',
        permissionCode: {
          tenant: [{ code: 'hzero.personality.flex.ps.tenant', type: 'Button' }],
          role: [{ code: 'hzero.personality.flex.ps.role', type: 'Button' }],
        },
        title: '弹性域对象',
      }
    ]),
  ],
})
export default class Index extends Component { // 入口组件
  // ...
}

    withToolbox使用方式如下

    参数 说明 类型 版本
    tools 工具集合,目前支持配置页面个性化/弹性域工具组件 funtion(…args)[] v1.0.x

    ToolboxButton 工具箱按钮组件

    withToolbox 工具箱高阶组件会把工具箱按钮组件作为属性传递给目标组件(入口组件/文件),使用方法如下:

    import withToolbox from 'hzero-front-hpfm/lib/components/Toolbox/withToolbox'; // 引入工具箱组件

// ...
@withToolbox({ // 使用注解的方式引入工具箱高阶组件
  tools: [], // 工具集合数组
})
export default class Index extends Component { // 入口组件
  // ...
  render() {
    const { ToolboxButton } = this.props;

    // ...
    return (
      // ...
      <ToolboxButton />
    );
  }
}

    按钮组件的属性与hzero-ui的Button组件属性一致

    withFlexFields 弹性域高阶工具组件

    withFlexFields组件也是采用高阶组件的方式实现,支持多个弹性域规则配置

    使用方法如下:

    参数 说明 类型 版本
    flexRuleCode 弹性域规则编码,具有唯一性,需要在平台级弹性域规则功能配置编码 !string v1.0.x
    permissionCode 弹性域多层级权限编码 !object v1.0.x
    title 弹性域标题 string|object, {{ code: !string, default: string }} title v1.0.x

    title支持两种写法:

    {
  // ...
  title: '弹性域对象'
}

    title: {
  code: 'lang.code', // 国际化编码
  default: '弹性域对象', // 国际化默认值
}

    permissionCode

    使用方法如下:

    参数 说明 类型 版本
    tenant 租户级权限 {{ !code: string, !Type: string}} tenant,Array.<tenant> v1.0.x
    role 租户级权限 {{ !code: string, !Type: string}} role,Array.<role> v1.0.x

    withFlexFields 弹性域高阶工具组件方法

    withFlexFields 弹性域高阶工具组件会把一些方法作为属性传递给目标组件(入口组件/文件),方法如下:

    // 入口组件/文件
import React, { Component } from 'react';
import withToolbox from 'hzero-front-hpfm/lib/components/Toolbox/withToolbox'; // 引入工具箱组件
import withFlexFields from 'hzero-front-hpfm/lib/components/FlexFields/withFlexFields';
import CustomForm from './CustomForm';

// ...
@withToolbox({
  tools: [
    withFlexFields([
      {
        flexRuleCode: 'FLEX_FIELDS_CODE',
        permissionCode: {
          tenant: [{ code: 'hzero.personality.flex.ps.tenant', type: 'Button' }],
          role: [{ code: 'hzero.personality.flex.ps.role', type: 'Button' }],
        },
        title: '弹性域对象',
      }
    ]),
  ],
})
export default class Index extends Component { // 入口组件
  // ...

  render() {
    const { withFlexFieldsForm = () => {} } = this.props;
    const formProps = {
      withFlexFieldsForm,
      // ...
    };
    return (
      <CustomForm {...formProps} />
    );
  }
}

    弹性域表单方法的使用方法如下:

    // 需要使用弹性域的表单组件
import React, { Component } from 'react';
import { Form } from 'hzero-ui';
import { withFormDataSourceFlex } from 'hzero-front-hpfm/lib/components/FlexFields/utils';

export default class CustomForm extends Component {
  // ...
  render() {
    const { withFlexFieldsForm = () => {}, dataSource = {}, form } = this.props;

    // 转换数据源中的弹性域flex相关字段
    const dataSourceWithFlex = withFormDataSourceFlex(this.props.employeeInfo || {});
    return withFlexFieldsForm({
      ruleCode: 'FLEX_FIELDS_CODE',
      triggerForm: form, // 出发器表单
      targetForm: form, // 目标表单
      dataSource: dataSourceWithFlex,
      formComponentObject: (
        <Form>
          <Form.Item>
            {getFieldDecorator('employeeNum', {
              initialValue: dataSourceWithFlex.employeeNum,
            })(<Input />)}
          </Form.Item>
          {/* // ... */}
        </Form>
      ),
    });
  }
}

    弹性域表格方法的使用方法如下:

    // 需要使用弹性域的表格组件
import React, { PureComponent } from 'react';
import EditTable from 'components/EditTable';
import { withListDataSourceFlex } from 'hzero-front-hpfm/lib/components/FlexFields/utils';

export default class CusTable extends PureComponent {
  render() {
    const { dataSource = [], withFlexFieldsTable = () => {} } = this.props;
    const columns = [{
      title: '岗位编码',
      dataIndex: 'positionCode',
      width: 300
    }, {
      title: '岗位名称',
      dataIndex: 'positionName',
      width: 300,
    }];

    return (
      <EditTable
        bordered
        rowKey="id"
        loading={loading}
        columns={withFlexFieldsTable({ columns, ruleCode: 'FLEX_FIELDS_CODE', editable: true })}
        dataSource={withListDataSourceFlex(dataSource)}
        pagination={false}
      />
    );
  }
}

    withFlexFieldsForm 表单弹性域方法

    使用方法如下:

    参数 说明 类型 版本
    ruleCode 该表格的弹性域规则编码,来源于在withFlexFields方法中的配置 !string v1.0.x
    triggerForm 触发器表单form对象 !Object,form v1.0.x
    targetForm 触发器表单form对象 !Object,form v1.0.x
    dataSource 数据源对象,包含弹性域flex部分字段 !Object v1.0.x
    formComponentObject 表单对象,ReactNode实例对象 !Object, !ReactNodeObject v1.0.x

    withFlexFieldsTable 表格弹性域方法

    使用方法如下:

    参数 说明 类型 版本
    ruleCode 该表格的弹性域规则编码,来源于在withFlexFields方法中的配置 !string v1.0.x
    triggerForm 触发器表单form对象 Object,form v1.0.x
    columns 表格默认列 !Array v1.0.x
    setColumns 自定弹性域列方法 function(tableflexColumns, config) v1.0.x
    editable 是否使用可编辑的弹性域列 boolean v1.0.x