用户个性化

用户级个性化，在页面中添加个性化按钮组件实现对页面中的表单，表格单元进行个性化，分为 Choerodon-UI和Hzero UI两种版本。

Choerodon-UI

步骤1：引入高阶组件

在页面的入口文件中，引入 hzero-front-hcuz 模块下的WithCustomize和CustButton组件。

import WithCustomize from 'hzero-front-hcuz/lib/components/c7n/withCustomize';
import CustButton from 'hzero-front-hcuz/lib/components/c7n/custBox/CustButton';

使用 WithCustomize 对页面组件进行装饰。该高阶函数接收一个对象作为参数，参数选项中包含一个数组形式的单元编码；在返回的高阶组件中，会在组件挂载时查询传入单元编码的配置信息，随后将一些工具函数注入到修饰的组件中:

  @WithCustomize({
  unitCode: [
   'HPFM.SYNC_OUTER_SYSTEM.ORG_INFO.LINE',
   'HPFM.EMPLOYEE_DEFINITION.LINE.GRID',
  ],
  })

使用CustButton组件在页面中添加用户个性化的按钮。给该组件传入一个数据类型为数组的unit属性，数组的每一项元素为当前页面的个性化单元，设置code属性为个性化单元的单元编码即可：

  <CustButton
    unit={[
      {
        code: 'HPFM.SYNC_OUTER_SYSTEM.ORG_INFO.LINE', // 单元编码，必传
      },
      {
        code: 'HPFM.EMPLOYEE_DEFINITION.LINE.GRID', // 单元编码，必传
      }
    ]}
  />

步骤2：使用工具函数对个性化单元进行处理

表格个性化

从 props 中获取 customizeTable

const { customizeTable } = this.props;

使用 customizeTable 工具函数修饰Table组件，

// 表格示例
customizeTable(
{
  code: 'SSRC.INQUIRY_HALL.EDIT_LINE', // 单元编码，必传
},
<Table
  columns={columns}
  ...
/>
)

Hzero UI