个性化组件

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

用法

个性化组件包含表单(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 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)
  );
}