• 说明

    属性

    审批表单组件有以下属性:

    onLoad必须在componentDidMount()的时候调用

    使用

    /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
    

    在上面建好的index文件里面编写审批表单demo

    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>
        );
      }
    }