1.1.6 • Published 4 years ago
darth-orga-ui v1.1.6
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 /> }
]