• 用户个性化

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

    Choerodon-UI

    步骤1:引入高阶组件

    在页面的入口文件中,引入 hzero-front-hcuz 模块下的WithCustomizeCustButton组件。

    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

    步骤1:引入高阶组件

    在页面的入口文件中,引入 hzero-front-hcuz 模块下的WithCustomizeCustButton组件。

    import withCustomize from 'hzero-front-hcuz/lib/index';
    import CustButton from 'hzero-front-hcuz/lib/components/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', // 单元编码,必传
    },
    <EditTable
      columns={columns}
      ...
    />
    )