• 个性化组件

    个性化组件支持在租户/角色/用户三个层级自定义页面表单,表格的个性化配置

    用法

    个性化组件包含表单(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 withIndividuation from '@/components/Individuation/withIndividuation'; // 引入个性化组件
    
    // ...
    @withIndividuation({
          form: [
            {
              individuationCode: 'INDIVIDUATION_FORM',
              permissionCode: {
                tenant: [{ code: 'hzero.personality.form.ps.tenant', type: 'Button' }],
                user: [{ code: 'hzero.personality.form.ps.user', type: 'Button' }],
                role: [{ code: 'hzero.personality.form.ps.role', type: 'Button' }],
              },
              title: '个性化表单',
            },
          ],
          table: [
            {
              individuationCode: 'INDIVIDUATION_TABLE',
              permissionCode: {
                tenant: [{ code: 'hzero.personality.table.ps.tenant', type: 'Button' }],
                user: [{ code: 'hzero.personality.table.ps.user', type: 'Button' }],
                role: [{ code: 'hzero.personality.table.ps.role', type: 'Button' }],
              },
            },
          ],
        }),
    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组件属性一致

    withIndividuation 个性化高阶工具组件

    withIndividuation组件也是采用高阶组件的方式实现,支持多个表单/表格个性化配置

    使用方法如下:

    参数 说明 类型 版本
    individuationCode 弹性域规则编码,具有唯一性,需要在平台级弹性域规则功能配置编码 !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
    role 用户级权限 {{ !code: string, !Type: string}} role,Array.<user> v1.0.x

    withIndividuation 个性化高阶工具组件方法

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

    // 入口组件/文件
    import React, { Component } from 'react';
    import withToolbox from 'hzero-front-hpfm/lib/components/Toolbox/withToolbox'; // 引入工具箱组件
    import withIndividuation from '@/components/Individuation/withIndividuation'; // 引入个性化组件
    import CustomForm from './CustomForm';
    
    // ...
    @withToolbox({
      tools: [
        withIndividuation([
          {
            individuationCode: 'INDIVIDUATION_FORM_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 { withIndividuationForm = () => {} } = this.props;
        const formProps = {
          withIndividuationForm,
          // ...
        };
        return (
          <CustomForm {...formProps} />
        );
      }
    }
    

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

    // 需要使用弹性域的表单组件
    import React, { Component } from 'react';
    import { Form } from 'hzero-ui';
    
    export default class CustomForm extends Component {
      // ...
      render() {
        const { withIndividuationForm = () => {}, dataSource = {}, form } = this.props;
    
        return withIndividuationForm({
          code: 'INDIVIDUATION_FORM_CODE', // 个性化表格编码
          formComponentObject: (
            <Form>
              <Form.Item>
                {getFieldDecorator('employeeNum', {
                  initialValue: dataSource.employeeNum,
                })(<Input />)}
              </Form.Item>
              {/* // ... */}
            </Form>
          ),
        });
      }
    }
    

    个性化表格方法的使用方法如下:

    // 需要使用弹性域的表格组件
    import React, { PureComponent } from 'react';
    import EditTable from 'components/EditTable';
    
    export default class CusTable extends PureComponent {
      render() {
        const { dataSource = [], withIndividuationTable = () => {}, loading } = this.props;
        const columns = [{
          title: '岗位编码',
          dataIndex: 'positionCode',
          width: 300
        }, {
          title: '岗位名称',
          dataIndex: 'positionName',
          width: 300,
        }];
    
        return (
          withIndividuationTable('INDIVIDUATION_FORM_CODE', {
              bordered: true,
              rowKey: 'id',
              loading,
              columns,
              dataSource,
              pagination: false,
            })(EditTable)
        );
      }
    }
    

    withIndividuationForm 表单个性化方法

    使用方法如下:

    参数 说明 类型 版本
    code 该表单的个性化编码,来源于在withIndividuation方法中的配置 !string v1.0.x
    formComponentObject 表单对象,ReactNode实例对象 !Object, !ReactNodeObject v1.0.x

    withIndividuationTable 表格个性化方法

    使用方法如下:

    参数 说明 类型 版本
    code 该表格的个性化编码,来源于在withIndividuation方法中的配置 !string v1.0.x
    tableProps 表格属性 Object v1.0.x

    因为个性化表格方法是一个高阶组件方法所以还需要传入表格组件类

    import EditTable from 'components/EditTable'; // 引入行内编辑表格
    
    export default function IndividuationTable(props) {
      const { loading, columns, dataSource } = props;
      return (
        withIndividuationTable('INDIVIDUATION_FORM_CODE', {
            bordered: true,
            rowKey: 'id',
            loading,
            columns,
            dataSource,
            pagination: false,
          })(EditTable)
      );
    }