• 通用导入组件

    01. 说明

    02. API

    参数是放在search中

    参数 说明 类型 默认值 必输 版本
    prefixPath 导入接口前缀 string v1.0
    tenantId 租户id number 当前租户id v1.0
    backPath 作为子路由时的backPath string v1.0
    sync 是否同步导入 boolean false v1.0
    auto 是否自动导入 boolean false v1.0
    args 与当前批次号绑定的参数 string(需要使用JSON.stringify格式化) ‘null’ v1.0
    autoRefreshInterval 自动刷新的间隔 number(ms) 5000 v1.0
    action 标题 string Header的标题或者其编码 v1.0

    03. 使用示例

    v1.0.0

        // 按照新页面配置路由,
        // path中必须包含 :code 占位路由
        // component 指向 当前模块下的 src/routes/himp/CommentImport
        // authorized: true, 如果配置子路由, 则为false, 且必须符合子路由规范
        module.exports = [
            {
                path: '/hiam/comment-import/:code',
                component: '/himp/CommentImport',
                authorized: true,
            }
        ];
    
    // 当前模块/src/routes/himp/CommentImport.js
    // 先从 himp 模块引进 CommentImport
    // 再将 CommentImport 默认导出
    import CommentImport from 'hzero-front-himp/lib/routes/CommentImport';
    
    export default CommentImport;
    
    import React from 'react';
    import { Button } from 'hzero-ui';
    import { Bind } from 'lodash-decorators';
    import queryString from 'query-string';
    
    import { Header, Content } from 'components/Page';
    
    import { openTab } from 'utils/menuTab';
    import { HZERO_IAM } from 'utils/config';
    
    export class Demo extends React.Component {
    
        @Bind()
        handleBatchExport() {
            openTab({
                // 编码是后端给出的
                key: `/hiam/comment-import/HIAM.ACCOUNT_CREATE`,
                // MenuTab 的国际化必须使用 hzero.common 开头(或者其他公用多语言)
                title: 'hzero.common.title.subAccountImport',
                search: queryString.stringify({
                    // 如果是客户端导入, 那么一般是该模块的接口前缀,
                    prefixPath: HZERO_IAM,
                    action: intl.get('hiam.subAccount.view.button.subAccountImport').d('账户导入'),
                }),
            });
        }
    
        render(){
            <React.Fragment>
                <Header>
                    <Button 
                        onClick={this.handleBatchExport}
                    >
                        {intl.get('hiam.subAccount.view.button.subAccountImport').d('账户导入')}
                    </Button>
                </Header>
                <Content/>
            </React.Fragment>
        }
    }
    

    v1.3.0

        // 按照新页面配置路由,
        // path中必须包含 :code 占位路由
        // component 指向 当前模块下的 src/routes/himp/CommentImport
        // authorized: true, 如果配置子路由, 则为false, 且必须符合子路由规范
        module.exports = [
            {
                path: '/hiam/comment-import/:code',
                component: '/himp/CommentImport',
                authorized: true,
            }
        ];
    

    传统方式

    // 先引入 components/CommonImport/Route
    // 参数会从 url 上截取
    // 再将 CommentImport 默认导出
    import CommonImport from 'components/CommonImport/Route';
    
    import formatterCollections from 'utils/intl/formatterCollections';
    
    export default formatterCollections({ code: ['hiam.subAccount'] })(CommonImport);
    
    
    import React from 'react';
    import { Button } from 'hzero-ui';
    import { Bind } from 'lodash-decorators';
    import queryString from 'query-string';
    
    import { Header, Content } from 'components/Page';
    
    import { openTab } from 'utils/menuTab';
    import { HZERO_IAM } from 'utils/config';
    
    export class Demo extends React.Component {
    
        @Bind()
        handleBatchExport() {
            openTab({
                // 编码是后端给出的
                key: `/hiam/comment-import/HIAM.ACCOUNT_CREATE`,
                // MenuTab 的国际化必须使用 hzero.common 开头(或者其他公用多语言)
                title: 'hzero.common.title.subAccountImport',
                search: queryString.stringify({
                    // 如果是客户端导入, 那么一般是该模块的接口前缀,
                    prefixPath: HZERO_IAM,
                    action: 'hiam.subAccount.view.button.subAccountImport',
                }),
            });
        }
    
        render(){
            <React.Fragment>
                <Header>
                    <Button 
                        onClick={this.handleBatchExport}
                    >
                        {intl.get('hiam.subAccount.view.button.subAccountImport').d('账户导入')}
                    </Button>
                </Header>
                <Content/>
            </React.Fragment>
        }
    }
    

    新方式

    
    import React from 'react';
    import { toSafeInteger } from 'lodash';
    import { withRouter } from 'dva/router';
    
    import { getCurrentOrganizationId } from 'utils/utils';
    
    import CommonImport from 'components/CommonImport';
    
    const AUTO_REFRESH_DEBOUNCE = 5000;
    
    @withRouter
    export default class CommonImportRoute extends React.Component {
      constructor(props) {
        super(props);
        const {
          location,
          match: { params },
        } = props;
        const {
          sync = false,
          auto = false,
          prefixPatch,
          args = 'null',
          autoRefreshInterval,
          backPath,
          tenantId = getCurrentOrganizationId(),
          action,
          key,
        } = location.state;
        this.state = {
          sync, // 是否是同步的接口
          auto, // 是否是 同步自动的接口
          backPath: backPath || undefined, // 返回地址, 如果返回地址为空, 设置为 undefined
          // 兼容 两个模式, 1: 使用者指定前缀, 2: 前缀由服务端确认
          prefixPatch, // 客户端路径前缀
          args: JSON.parse(args), // 上传文件时传递的数据
          tenantId, // 租户id, 是可配置的
          autoRefreshInterval: toSafeInteger(autoRefreshInterval) || AUTO_REFRESH_DEBOUNCE,
          code: params.code,
          action,
          key,
        };
      }
    
      render() {
        const {
          sync,
          auto,
          prefixPatch,
          args,
          autoRefreshInterval,
          backPath,
          tenantId,
          code,
          action,
          key,
        } = this.state;
        return (
          <CommonImport
            sync={sync}
            auto={auto}
            prefixPatch={prefixPatch}
            args={args}
            autoRefreshInterval={autoRefreshInterval}
            backPath={backPath}
            tenantId={tenantId}
            code={code}
            action={action}
            pathKey={key}
          />
        );
      }
    }
    
    
    import React from 'react';
    import { Button } from 'hzero-ui';
    import { Bind } from 'lodash-decorators';
    import queryString from 'query-string';
    
    import { Header, Content } from 'components/Page';
    
    import { openTab, getActiveTabKey, getTabFromKey } from 'utils/menuTab';
    import { HZERO_IAM } from 'utils/config';
    
    export class Demo extends React.Component {
    
        @Bind()
        handleBatchExport() {
            // 如果觉得判断过于复杂可以直接 routerRedux.push ,在 config/routers 里配置 title
        const activeTabKey = getActiveTabKey();
            // MenuTab 的国际化必须使用 hzero.common 开头(或者其他公用多语言)
        const oldTab = getTabFromKey(`/hiam/sub-account-org/data-import/HIAM.ACCOUNT_CREATE`);
        const newTab =
        {
          key: `/hiam/sub-account-org/data-import/HIAM.ACCOUNT_CREATE`,
          path: `/hiam/sub-account-org/data-import/HIAM.ACCOUNT_CREATE`,
          title: 'hzero.common.title.subAccountImport',
          closable: true,
        };
        if (oldTab.key === '/workplace') {
          this.props.dispatch({
            type: 'global/addTab',
            payload: {
              newTab,
            },
          },
          );
          this.props.dispatch(
            routerRedux.push({
              pathname: '/hiam/sub-account-org/data-import/HIAM.ACCOUNT_CREATE',
              state: {
                // action可以是编码,也可以是多语言
                action: 'hiam.subAccount.view.button.subAccountImport',
              },
            })
          );
        } else if (activeTabKey !== oldTab.key) {
          this.props.dispatch({
            type: 'global/replaceTab',
            payload: {
              newTab,
              tab: newTab,
            },
          });
          this.props.dispatch(
            routerRedux.push({
              pathname: '/hiam/sub-account-org/data-import/HIAM.ACCOUNT_CREATE',
              state: {
                action: 'hiam.subAccount.view.button.subAccountImport',
              },
            })
          );
        }
        }
    
        render(){
            <React.Fragment>
                <Header>
                    <Button 
                        onClick={this.handleBatchExport}
                    >
                        {intl.get('hiam.subAccount.view.button.subAccountImport').d('账户导入')}
                    </Button>
                </Header>
                <Content/>
            </React.Fragment>
        }
        
    }