弹性域组件

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

用法

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

首先确保要使用的页面功能包含hzero前端标准表单(form)和表格(table)功能,然后在页面入口文件(一般是index.js)或者使用表单的弹性域页面引入弹性域高阶函数
弹性域组件与页面个性化组件一样需要配合工具箱组件一起使用

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}
      />
    );
  }
}

关于发送弹性域的数据处理方法如下:

import { withFormDataFlex } from 'hzero-front-hpfm/lib/components/FlexFields/utils';

// 在index.js

/**
 *  保存
 */
@Bind()

handleSave() {
    const {
      dispatch,
      storeRoom: { storeRoomList, pagination },
    } = this.props;
    const inventoryList = getEditTableData(storeRoomList, ['inventoryId']);
    if (Array.isArray(inventoryList) && inventoryList.length === 0) {
      return;
    }
    const newInventoryList = inventoryList.map(item => withFormDataFlex(item));
    // 对于要发送的数据，使用withFormDataFlex对每条数据进行处理
    dispatch({
      type: 'storeRoom/saveStoreRoom',
      payload: { flexRuleCode, body: newInventoryList },
    }).then(res => {
      if (res) {
        notification.success();
        this.handleSearch(pagination);
      }
    });
  }

  // 在services.js中
  export async function saveStoreRoom(params) {
  const { body, flexRuleCode } = params;
  return request(`${HZERO_PLATFORM}/v1/${organizationId}/inventories/batch-save`, {
    method: 'POST',
    body,
    query: { flexRuleCode }, // 将弹性域编码以参数形式拼接在请求上，弹性域编码一定要传给接口
  });
}

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