通用导入组件

01. 说明

文档创建时间 2019-10-21
文档更新时间 2020-03-04

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

新方式

新方式主要针对于解决所有参数传在 url 可能会出现的长度问题。传参方式可以自己自己去定义设计，以下仅做于参考实例。


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