• 弹性域组件

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

    用法

    弹性域组件包含表单(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}
          />
        );
      }
    }
    

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

    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