前端使用说明

步骤1：引入高阶组件

在页面的入口文件中，引入 hzero-front-hcuz 模块，获取其默认导出项 withCustomize 。

import withCustomize from 'hzero-front-hcuz';

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

  @withCustomize({
  unitCode: [
    'SSRC.INQUIRY_HALL.EDIT_HEADER',
    'SSRC.INQUIRY_HALL.EDIT_LINE',
    'SSRC.INQUIRY_HALL.EDIT_HEADER_OTHER',
    'SSRC.INQUIRY_HALL.EDIT_LINE_SUPPLIER',
    'SSRC.INQUIRY_HALL.EDIT_HEADER_EXPERT',
    'SSRC.INQUIRY_HALL.EDIT_HEADER_INDICS',
  ],
  })

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

表单个性化

写在前面：因为表单类型的个性化工具会重新生成新的Form结构，且在当前版本中，并不支持表单行列属性的个性化，故不适合包含半行文本域表单的个性化，若有必要，在使用前和产品沟通。

从 props 中获取 customizeForm

const { customizeForm } = this.props;

使用 customizeForm 工具函数修饰Form组件

customizeForm(
{
  code: 'SSRC.INQUIRY_HALL.EDIT_HEADER', // 必传，和unitCode一一对应
  form: this.props.form, // 无论个性化单元是否只读，均必传
    dataSource: header, // 必传，从后端接口获取到的数据
},
<Form className="writable-row-custom">
  <Row gutter={48} className="writable-row">
    <Col span={8}>
      <FormItem
        label={intl.get(`ssrc.inquiryHall.model.inquiryHall.RFXNo.`).d('RFX单号')}
        {...formLayout}
      >
        {getFieldDecorator('rfxNum', {
          initialValue: header.rfxNum,
        })(<Input disabled />)}
      </FormItem>
    </Col>
    ...
  </Row>
  ...
</Form>
)

个性化可用的表单标准结构如下所示；该结构仅用于提取 FormItem 及其子组件，最终用于渲染的组件树会另外生成。新组件树中 Row 的 gutter 默认为48，表单的样式类为 writable-row-custom，每行默认3列

/* Col的span属性必须设置 */
<Form>
  <Row>
    <Col span={3}>
      <FormItem>
        <Input />
      </FormItem>
    </Col>
  </Row>
</Form>

对于 FormItem 子组件为数组的，分为两种情况：1）隐藏字段；2）可编辑字段。隐藏字段不能有实际的页面元素，代码如下

<FormItem ...>
{getFieldDecorator('matchRestrictFlag', { initialValue: header.matchRestrictFlag})}
</FormItem>

当数组为可编辑字段时，会用第一个有实际页面元素的数组项字段编码作为该数组整体的配置，如下面示例的 quoteDay

<FormItem ...>
  {getFieldDecorator('startQuotationRunningDuration', {...})}
  {getFieldDecorator('quoteDay', {
    initialValue: quoteDay,
  })(
    <InputNumber .../>
  )}
  {getFieldDecorator('quoteHour', {
    initialValue: quoteHour,
    })(
      <InputNumber .../>
    )}
  {getFieldDecorator('quoteMinute', {
    initialValue: quoteMinute,
  })(
    <InputNumber .../>
  )}
</FormItem>

只读字段（也包括只读页面）必须使用 form 进行字段绑定，且必须有实际的页面元素，被绑定的字段将作为个性化配置信息的索引；

渲染类型只对非标准字段生效；

自定义行列时，若同一个位置存在多个字段，冲突字段会被放在指定位置之后的最近空位，若后端返回字段配置信息的顺序不变，则前端保证维持当前的行列状态；

表格个性化

从 props 中获取 customizeTable

const { customizeTable } = this.props;

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

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

查询表单个性化

从 props 中获取 customizeFilterForm、form，另外需要传入控制查询表单收起展开状态的参数 expand

const { customizeFilterForm } = this.props;

使用 customizeFilterForm 工具函数修饰如下结构的组件，

// 表格示例
customizeFilterForm(
{
  code: 'SSRC.INQUIRY_HALL.FILTER', // 单元编码，必传
  form,
  expand, // 控制查询表单收起展开状态的参数
},
  <Form layout="inline" className="more-fields-form">
    <Row>
      <Col span={18}>
        <Row>
          <Col span={8}>
            <Form.Item>
            ...
            </FormItem>
          </Col>
        </Row>
      </Col>
      <Col span={6} className="search-btn-more">
        <Form.Item>
          button...
        </FormItem>
      </Col>
    </Row>
  </Form>
)

头查询的按照位置字段进行排序，不支持行列控制。

查询字段区域不要超过两行，多余的字段需全部堆叠在第二个Row中。

通用导出个性化示例（前端）

通用导出组件使用hzero-front工程中的组件，该组件需要配置导出配置查询接口和执行导出动作时用到的参数，若导出的数据包含个性化内容，需要在这两个配置中加入单元编码，示例如下。

// requestUrl是查询导出数据中有哪些列的，这里加上单元编码便可勾选对应单元的个性化字段
<ExcelExport
  requestUrl={`{exportUrl}?customizeUnitCode=SSRC.INQUIRY_HALL.EDIT_HEADER`}
  queryParams={handleGetFormValue()}
/>

// queryParams用于过滤要导出的数据，可以是要导出行的主键id（视实际业务场景而定），此处单元编码用于导出表中个性化字段的实际数据
handleGetFormValue() {
    const filterValues = {
      // ...otherParamters,
      customizeUnitCode: 'SSRC.INQUIRY_HALL.EDIT_HEADER',
    };
    return filterValues;
}

步骤3：接口配置单元编码参数

保存/查询接口的 query 参数中加入 customizeCode，值为该接口关联的单元编码（多个编码以逗号分隔）

dispatch({
  type: 'inquiryHall/fetchItemLine',
  payload: {
    ...
    customizeUnitCode: 'SSRC.INQUIRY_HALL.EDIT_LINE',
  },
});

固定列不能放置编辑组件，此属于行内编辑表格组件的 bug

列的位置并非绝对位置，且左固定、右固定和不固定的排序相互独立

配置的字段编码不能重复，否则必输校验会出现异常行为；