Lwj-business-frontend

一套企业级业务组件库。

在线文档： 简体中文

✨ 特性

• 🌈 提炼自企业级中后台产品的交互语言和视觉风格。
• 📦 开箱即用的业务组件。
• 🛡 使用 TypeScript 开发，提供完整的类型定义文件。

🖥 兼容环境

• 现代浏览器和 IE11（需要 polyfills）。
• 支持服务端渲染。
• Electron

IE / Edge	Firefox	Chrome	Safari	Electron
IE11, Edge	last 2 versions	last 2 versions	last 2 versions	last 2 versions

📦 安装

npm install lwj-business-frontend --save

or

yarn add lwj-business-frontend

🌲 环境依赖

1. mobx
2. react
3. typescript
4. umi3 + antd4

👣 开始使用(以umi示例)

1. 在项目app.js中，注册entityMap:

import {entity} from 'lwj-business-frontend'
import {entityMap} from '../entityMap' // 本地entityMap
// 设置entityMap
entity.setEntityMap(entityMap)

2. 在项目入口layout的Provider中注入stores:

import {ConfigProvider} from 'antd';
import zh_CN from 'antd/lib/locale-provider/zh_CN';
import {Provider} from 'mobx-react'
import React, {Component} from 'react';
import {bsStores} from 'lwj-business-frontend' // 引入lwi-business-frontend的store并注入
class Layout extends Component {
 render() {
   const props = this.props;
   return (
     <ConfigProvider locale={zh_CN}>
       <Provider {...bsStores}>
         {props.children}
       </Provider>
     </ConfigProvider>
   );
 }
}

export default Layout;

3. 使用

import {LwjTreeTablePresenter} from 'lwj-business-frontend'

export default class Demo extends React.Component {
 private treeTablePresenter: LwjTreeTablePresenter
 constructor(props: any) {
   super(props)
   this.treeTablePresenter = new LwjTreeTablePresenter({
     treeEntityName: 'catenav-list', // 树对应实体
     tableEntityName: 'goods', // 表对应实体
   })
 }
 componentDidMount() {
   this.treeTablePresenter.api.getPresenter().table.setColumns([
     {
       title: '商品名',
       dataIndex: 'name'
     },
     {
       title: '图片',
       dataIndex: 'cover_path',
       render(src) {
         return <img style={{width: 150, height: 150}} src={src} alt=""/>
       }
     },
     {
       title: '描述',
       dataIndex: 'description'
     }
   ])
 }
 render() {
   const TreeTable = this.treeTablePresenter.getComponent()
   return (
     <div>
       <TreeTable />  
     </div>
   )
 }
}