Darth-orga-ui NPM

UI-Components

公司内部项目UI标准React组件库。

支持环境

现代浏览器和 IE11 及以上。
内部css使用的sass预处理语言
国际化采用i18n

说明

内部css使用的sass预处理语言
国际化采用i18n，需要在将内部的国际语言配置项目的国际话配置中 import{orga_cn， orga_en} from darth-orga-ui/language
获取内部store import{orgStores} from darth-orga-ui
组织store 的key 是 'darthOrgStore', 比如 export default inject('darthOrgStore')(observer(DarthOrg))

import {orgStores,DarthOrgContent,DarthUser, DarthTree} from 'darth-orga-ui'

用户管理采用的本地后台接口，需要配置开发环境添加

    devServer: {
      ...
        proxy:{
            '/api/*':{  // 后台api
                target: 'http://10.119.9.106:8080/',
                changeOrigin: true,
                secure: false,
                pathRewrite: {"^/api" : ""}
            }
        }
    }

在入口文件中

const App = () => {
const allStore = {...stores, ...orgStores}
    return (
        <Provider {...allStore}>
           <BrowserRouter>
               <div>
                   {renderRoutes(routers)}
               </div>
           </BrowserRouter>
        </Provider>
    )
};

安装

npm install --save darth-portal-ui

示例

import React from 'react';
import {observer, inject} from "mobx-react";
import { AppstoreOutlined, SettingOutlined } from '@ant-design/icons';
import {DarthUser} from 'darth-orga-ui'



const DarthUserdemo = (props) => {

    const homeRouter = [
        {
            to:'/',
            title:'首页',
            key: '/'
        },
        {
            to:'/home',
            title:'组织中心',
            key: 'org'
        },
    ]
    const menuData = [
        {
            id:'1',
            title: '组织管理',
            icon :<SettingOutlined />,
        },{
            id:'2',
            title: '用户管理',
            icon :<AppstoreOutlined />
        }
    ]


    const onSelectMenu = e => {

        if (e.key == 2) {
            console.log(e)
            props.history.push('/user')
        }
    }

    return(
        <DarthUser
            {...props}
            menuData={menuData}
            homeRouter={homeRouter}
            selectMenu={onSelectMenu}
        />
    )
}



export default inject()(observer(DarthUserdemo))

DarthTree 组件的数据类型

成员	说明	类型	默认值
menuData	左侧菜单列表数据	array	[]
selectMenu	左侧菜选中	function	e=> e

menuData 数据格式为：

menuData = [
   {
       id:'1',
       title: '组织管理',
       icon :<SettingOutlined />,
       children:[
           {
               id:'1-1',
               title: '组织管理-1',
               icon :<SettingOutlined />,
           },
           {
               id:'1-2',
               title: '组织管理-1',
               icon :<SettingOutlined />,
           },
           {
               id:'1-3',
               title: '组织管理-1',
               icon :<SettingOutlined />,
           },
           {
               id:'1-4',
               title: '组织管理-1',
               icon :<SettingOutlined />,
           },
           {
               id:'1-5',
               title: '组织管理-1',
               icon :<SettingOutlined />,
           },
       ]
   },{
       id:'2',
       title: '用户管理',
       icon :<AppstoreOutlined />
   }

]