/src/customize
├── customizeWorkflowApproveFrom.js
└── index.js

/src/utils
├── router.js

// 主模块 审批表单的 customize
/* hzero-front/src/customize/workflowApproveForm.js */
import { isFunction } from 'lodash';

import { mapCustomize } from 'utils/customize';

/**
 * 如果 审批表单存在 则加载表单
 * 否则 返回 null
 * @param formCode
 * @return {Promise<null|*>}
 */
export async function loadWorkflowApproveFormAsync(formCode) {
  if (
    mapCustomize.has({ module: 'hzero-front-hwfp', feature: 'workflowApproveForm', key: formCode })
  ) {
    const layout = mapCustomize.get({
      module: 'hzero-front-hwfp',
      feature: 'workflowApproveForm',
      key: formCode,
    });
    if (isFunction(layout && layout.component)) {
      const approveForm = await layout.component();
      return approveForm;
    }
  }
  return null;
}

export function setWorkflowApproveForm(formConfig) {
  mapCustomize.set({
    module: 'hzero-front-hwfp',
    feature: 'workflowApproveForm',
    key: formConfig.code,
    data: { component: formConfig.component },
  });
}

/* src/utils/router.js */
// ... 其他代码
// 增加 customize 的引入
import '../customize';
// ... 其他代码

/* src/customize/index.js */
// 引入 审批表单 配置
import './customizeWorkflowApproveForm';

/* src/customize/customizeWorkflowApproveForm.js */
// 引入 存储 卡片配置的方法
import { setWorkflowApproveForm } from 'hzero-front/lib/customize/workflowApproveForm';
// 引入 加载 model 的包装方法
import { dynamicWrapper } from '../utils/router';

// 设置 编码为 approveform 的 卡片
setWorkflowApproveForm({
  code: 'approveform',
  component: async () => {
    return dynamicWrapper(window.dvaApp, ['approveForm/workflowApproveForm'], () =>
      import('../routes/ApproveForm/WorkflowApproveForm')
    );
  },
});

/src/routes/ApproveForm/WorlFlowApproveForm
└── index.js

import React, { Component } from 'react';
import { Card, Col, Form, Input, Row, Spin } from 'hzero-ui';
import { connect } from 'dva';
import { Bind } from 'lodash-decorators';

import { Content, Header } from 'components/Page';
import Lov from 'components/Lov';
import Switch from 'components/Switch';

import formatterCollections from 'utils/intl/formatterCollections';
import intl from 'utils/intl';
import { getCurrentOrganizationId, isTenantRoleLevel } from 'utils/utils';
import { CODE_UPPER } from 'utils/regExp';
import {
  DETAIL_CARD_CLASSNAME,
  EDIT_FORM_ITEM_LAYOUT,
  EDIT_FORM_ROW_LAYOUT,
  FORM_COL_3_LAYOUT,
} from 'utils/constants';

@formatterCollections({ code: ['hwfp.interfaceDefinition', 'hwfp.common'] })
@Form.create({ fieldNameProp: null })
@connect(({ workflowApproveForm, loading }) => ({
  workflowApproveForm,
  isSiteFlag: !isTenantRoleLevel(),
  tenantId: getCurrentOrganizationId(),
  fetchDetailLoading: loading.effects['workflowApproveForm/fetchDetail'],
}))
export default class Detail extends Component {
  componentDidMount() {
    const {
      dispatch,
      id, // 审批表单的id属性
      params: { tenantId = getCurrentOrganizationId() } = {},
      onLoad, // 审批表单的onLoad属性
    } = this.props;
    dispatch({
      type: 'workflowApproveForm/fetchDetail',
      payload: {
        interfaceId: 16,
        id,
        tenantId,
      },
    });
    onLoad({
      submit: this.submit,
    }); // onLoad 接收一个对象{submit: this.submit}, submit函数返回一个Promise
  }

  @Bind()
  async submit() {
    const {
      workflowApproveForm: { interfaceDefinitionDetail = {} },
      form,
      dispatch,
    } = this.props;
    return new Promise((resolve, reject) => { // submit函数返回一个Promise
      form.validateFields((err, fieldsValue) => {
        if (!err) {
          dispatch({
            type: 'workflowApproveForm/updateInterface',
            payload: {
              ...interfaceDefinitionDetail,
              ...fieldsValue,
            },
          }).then(res => {
            if (res) {
              resolve(res);
            } else {
              reject(new Error(res)); // 异常
            }
          });
        } else {
          reject(err); // 表单校验失败
        }
      });
    });
  }
  render() {
    const {
      form,
      isSiteFlag,
      workflowApproveForm: { interfaceDefinitionDetail = {} },
      fetchDetailLoading,
      disabled, // 审批表单组件的disabled属性
    } = this.props;
    const { getFieldDecorator, getFieldValue, setFieldsValue } = form;
    const {
      serviceName,
    } = interfaceDefinitionDetail && interfaceDefinitionDetail;
    return (
      <React.Fragment>
        <Header title={intl.get('hwfp.serviceDefinition.view.title.edit').d('编辑接口定义')} />
        <Content>
          <Spin spinning={fetchDetailLoading}>
            <Card
              bordered={false}
              className={DETAIL_CARD_CLASSNAME}
              title={
                <h3>
                  {intl.get('hwfp.serviceDefinition.view.title.interfaceDefinition').d('接口定义')}
                </h3>
              }
              loading={false}
            >
              <Form>
                <Row {...EDIT_FORM_ROW_LAYOUT} className="inclusion-row">
                  <Col {...FORM_COL_3_LAYOUT}>
                    <Form.Item
                      label={intl
                        .get('hwfp.interfaceDefinition.model.interface.serviceName')
                        .d('服务名称')}
                      {...EDIT_FORM_ITEM_LAYOUT}
                    >
                      {getFieldDecorator('serviceName', {
                        initialValue: serviceName,
                        rules: [
                          {
                            required: true,
                            message: intl.get('hzero.common.validation.notNull', {
                              name: intl
                                .get('hwfp.interfaceDefinition.model.interface.serviceName')
                                .d('服务名称'),
                            }),
                          },
                        ],
                      })(
                        <Lov
                          code={
                            isSiteFlag ? 'HADM.ROUTE.SERVICE_CODE' : 'HADM.ROUTE.SERVICE_CODE.ORG'
                          }
                          disabled={disabled} // 审批表单disabled属性的使用
                          textValue={serviceName}
                          allowClear
                          onChange={this.serviceNameChange}
                        />
                      )}
                    </Form.Item>
                  </Col>
                </Row>
              </Form>
            </Card>
          </Spin>
        </Content>
      </React.Fragment>
    );
  }
}