oms-component

安装

npm i oms-component -S

需要注意的是，使用 oms-component 之前，请确保项目已经安装了 react 和 antd。

示例

oms-component 提供了两个组件：Header 和 Nav，它们的用法如下

// 引入 React
import React, { Component } from 'react';
 
// 引入 antd 的布局组件
import { Layout } from 'antd';
 
// 引入 oms-component
import { Nav, Header } from 'oms-component';
 
// 样式需要单独引入
import 'oms-component/lib/index.css';
 
const { Content } = Layout;
 
export default class App extends Component {
  state = {
    collapsed: false,
    modules: [
      {
        baseApplicationId: 7,
        baseApplicationModuleId: 22,
        baseModuleName: '商品管理文件夹',
        baseParentId: 0,
        childs: [],
      },
      {
        baseApplicationId: 7,
        baseApplicationModuleId: 23,
        baseModuleName: '进货渠道文件夹',
        baseParentId: 0,
        childs: [
          {
            baseApplicationId: 7,
            baseApplicationModuleId: 26,
            baseModuleName: '财务报表文件夹',
            baseParentId: 23,
            childs: [],
          },
        ],
      },
    ],
    activeKey: '26',
    systemApps: [
      {
        baseApplicationId: 32,
        baseApplicationName: '系统01',
        baseApplicationType: 0,
      },
    ],
    thirdPartyApps: [
      {
        baseApplicationId: 27,
        baseApplicationName: '腾yy讯01',
        baseApplicationUrl: 'www.yxy.com',
        baseApplicationType: 1,
      },
      {
        baseApplicationId: 21,
        baseApplicationName: '腾yy讯',
        baseApplicationUrl: 'www.yxy.com',
        baseApplicationType: 1,
      },
      {
        baseApplicationId: 20,
        baseApplicationName: '百xx度',
        baseApplicationUrl: 'www.baixxxdu.com',
        baseApplicationType: 1,
      },
    ],
    organizations: [
      {
        baseOrgId: 1,
        baseOrgName: '组织1',
      },
      {
        baseOrgId: 2,
        baseOrgName: '组织2',
      },
    ],
    appId: 32,
    orgId: 1,
    user: {
      baseAdminName: '白药创建者',
      baseAdminUrl: 'http://smk.org.uk/wp-content/uploads/avatar.jpg',
    },
  };
 
  toggleCollapsed = () => {
    this.setState({ collapsed: !this.state.collapsed });
  };
 
  changeApp = (app) => {
    console.log('switch to', app);
  };
 
  changeOrg = (org) => {
    this.setState({ orgId: org.baseOrgId });
  };
 
  onMenuItemClick = (item) => {
    this.setState({ activeKey: item.key });
  };
 
  render() {
    const {
      collapsed,
      modules,
      activeKey,
      systemApps,
      thirdPartyApps,
      organizations,
      appId,
      orgId,
      user,
    } = this.state;
    return (
      <Layout>
        <Nav
          // 是否为收起状态
          collapsed={collapsed}
          // 导航数据，结构请参考 state 中的 modules 字段
          modules={modules}
          // 当前被激活的导航的 key
          activeKey={activeKey}
          // 点击导航条目的回调
          onMenuItemClick={this.onMenuItemClick}
        />
        <Layout>
          <Header
            // 是否为收起状态
            collapsed={collapsed}
            // 点击收起/展开按钮的回调
            toggle={this.toggleCollapsed}
            // 系统应用列表，结构请参考 state 中的 systemApps 字段
            systemApps={systemApps}
            // 第三方应用列表，结构请参考 state 中的 thirdPartyApps 字段
            thirdPartyApps={thirdPartyApps}
            // 当前应用的 ID
            appId={appId}
            // 切换应用的回调
            changeApp={this.changeApp}
            // 组织列表，结构请参考 state 中的 organizations 字段
            organizations={organizations}
            // 当前组织的 ID
            orgId={orgId}
            // 切换组织的回调
            changeOrg={this.changeOrg}
            // 当前登录用户，结构请参考 state 中的 user 字段
            user={user}
          />
          <Content>{this.props.children}</Content>
        </Layout>
      </Layout>
    );
  }
}

以上示例 state 中的 module、systemApps、thirdPartyApps、organizations、user 字段均可直接使用接口返回的数据，无需额外处理。