Skip to content

S
swifteditor
Commit 9374c39f by bert
Options

完善基本布局

parent 7d4a88a9
Showing with 443 additions and 411 deletions
README.md
# react-redux-antd-ie8 # react-redux-antd-ie8
## 兼容性
[antd 官方介绍](http://ant.design/docs/react/getting-started#兼容性)
#### Open `src/enntries/index.html` <br/>
对于 IE8/9 等浏览器，需要提供 es5-shim 等 Polyfills 的支持，推荐使用 babel-polyfill。特别对于 IE8 需要配合使用 react@0.14.x 版本。
```
<!--[if lt IE 10]>
<script src="https://as.alipayobjects.com/g/component/??console-polyfill/0.2.2/index.js,es5-shim/4.5.7/es5-shim.min.js,es5-shim/4.5.7/es5-sham.min.js,html5shiv/3.7.2/html5shiv.min.js,media-match/2.0.2/media.match.min.js"></script>
<![endif]-->
```
#### Open `package.json`
```diff
- "react": "^15.0.2",
- "react-dom": "^15.0.2",
- "react-router": "^2.0.1",
+ "react": "0.14.x",
+ "react-dom": "0.14.x",
+ "react-router": "2.3.x"
```
Remove hmr plugin.
```diff
- "start": "dora -p 8001 --plugins \"webpack,hmr,proxy,livereload?enableJs=false&injectHost=127.0.0.1,browser-history?index=/src/entries/index.html\"",
+ "start": "dora -p 8001 --plugins \"webpack,proxy,livereload?enableJs=false&injectHost=127.0.0.1,browser-history?index=/src/entries/index.html\"",
```
#### Open `webpack.config.js`, and enable es3ify-loader
```diff
// Enable this if you have to support IE8.
- // webpackConfig.module.loaders.unshift({
- // test: /\.jsx?$/,
- // loader: 'es3ify-loader',
- // });
+ webpackConfig.module.loaders.unshift({
+ test: /\.jsx?$/,
+ loader: 'es3ify-loader',
+ });
```
## Environment ## Environment
``` ```
node >= 4 node >= 4
``` ```
## Redux
```
+ "react-redux": "^4.4.0",
+ "redux": "^3.3.1",
+ "redux-logger": "^2.6.1",
+ "redux-thunk": "^2.0.1"
```
## Extension
```
+ "fetch-ie8": "^1.4.0",
+ "object-assign": "^4.0.1",
```
## Code Style ## Code Style
https://github.com/airbnb/javascript https://github.com/airbnb/javascript
......
package.json
...@@ -9,18 +9,26 @@ ...@@ -9,18 +9,26 @@
"babel-runtime": "^6.6.1", "babel-runtime": "^6.6.1",
"classnames": "^2.2.3", "classnames": "^2.2.3",
"es3ify-loader": "^0.2.0", "es3ify-loader": "^0.2.0",
"fetch-ie8": "^1.4.0",
"history": "^2.0.1", "history": "^2.0.1",
"immutable": "^3.8.1",
"isomorphic-fetch": "^2.2.1", "isomorphic-fetch": "^2.2.1",
"js-cookie": "^2.1.1", "js-cookie": "^2.1.1",
"key-mirror": "^1.0.1",
"lodash": "^4.13.1",
"md5": "^2.1.0",
"object-assign": "^4.0.1",
"react": "0.14.x", "react": "0.14.x",
"react-chartjs": "^0.7.3",
"react-dom": "0.14.x", "react-dom": "0.14.x",
"react-router": "2.3.x",
"fetch-ie8": "^1.4.0",
"object-assign": "^4.0.1",
"react-redux": "^4.4.0", "react-redux": "^4.4.0",
"react-router": "2.3.x",
"react-router-redux": "^4.0.5",
"redux": "^3.3.1", "redux": "^3.3.1",
"redux-logger": "^2.6.1", "redux-logger": "^2.6.1",
"redux-thunk": "^2.0.1" "redux-thunk": "^2.0.1",
"reqwest": "^2.0.5",
"superagent": "^2.1.0"
}, },
"devDependencies": { "devDependencies": {
"atool-test-mocha": "^0.1.4", "atool-test-mocha": "^0.1.4",
...@@ -47,4 +55,4 @@ ...@@ -47,4 +55,4 @@
"start": "dora -p 8001 --plugins \"webpack,proxy,livereload?enableJs=false&injectHost=127.0.0.1,browser-history?index=/src/entries/index.html\"", "start": "dora -p 8001 --plugins \"webpack,proxy,livereload?enableJs=false&injectHost=127.0.0.1,browser-history?index=/src/entries/index.html\"",
"test": "atool-test-mocha ./src/**/__tests__/*-test.js" "test": "atool-test-mocha ./src/**/__tests__/*-test.js"
} }
} }
\ No newline at end of file
src/components/Header/index.js
...@@ -155,15 +155,7 @@ class Header extends React.Component { ...@@ -155,15 +155,7 @@ class Header extends React.Component {
</Menu.Item> </Menu.Item>
) )
}); });
/**
* `selectKey` 用于默认显示
*
* 优化：
* 根据路由规则显示导航状态
* 需要在 `state` 中加入 `router` 这样就方便了对全局的管理了
* 学习下 `redux-simple-router` 来实现该功能
*
*/
// return ( // return (
// <div className='ant-layout-header'> // <div className='ant-layout-header'>
// <div className="ant-layout-wrapper"> // <div className="ant-layout-wrapper">
...@@ -198,8 +190,6 @@ Header.propTypes = propTypes; ...@@ -198,8 +190,6 @@ Header.propTypes = propTypes;
Header.defaultProps = defaultProps; Header.defaultProps = defaultProps;
const mapStateToProps = (state) => { const mapStateToProps = (state) => {
// console.log('state.router', state.router);
// console.log('state.routing', state.routing);
return { return {
// topMenu : state.menu.topMenu, // topMenu : state.menu.topMenu,
// currentIndex : state.menu.currentIndex, // currentIndex : state.menu.currentIndex,
......
src/components/NavPath/index.js
...@@ -3,7 +3,7 @@ import { bindActionCreators } from 'redux' ...@@ -3,7 +3,7 @@ import { bindActionCreators } from 'redux'
import { Breadcrumb } from 'antd' import { Breadcrumb } from 'antd'
import { connect } from 'react-redux' import { connect } from 'react-redux'
import './index.less' import styles from './index.less'
const defaultProps = { const defaultProps = {
navpath: [] navpath: []
...@@ -27,7 +27,7 @@ class NavPath extends React.Component { ...@@ -27,7 +27,7 @@ class NavPath extends React.Component {
}) })
const breadInit = <Breadcrumb.Item key={'bc-myMain'}>我的发布</Breadcrumb.Item> const breadInit = <Breadcrumb.Item key={'bc-myMain'}>我的发布</Breadcrumb.Item>
return ( return (
<div className="ant-layout-breadcrumb"> <div className={styles["ant-layout-breadcrumb"]}>
<Breadcrumb> <Breadcrumb>
<Breadcrumb.Item key='bc-0'>首页</Breadcrumb.Item> <Breadcrumb.Item key='bc-0'>首页</Breadcrumb.Item>
{bread.length == 0? breadInit: bread} {bread.length == 0? breadInit: bread}
......
src/components/Sidebar/index.js
...@@ -3,20 +3,10 @@ import { bindActionCreators } from 'redux' ...@@ -3,20 +3,10 @@ import { bindActionCreators } from 'redux'
import { connect } from 'react-redux' import { connect } from 'react-redux'
import { Link } from 'react-router'; import { Link } from 'react-router';
import { Menu, Icon, Badge, notification } from 'antd'; import { Menu, Icon, Badge, notification } from 'antd';
// import { getCaseMenu, updateNavPath, updateCollapse, updateStatus } from '../../store/modules/menu/menu_action'; import * as MenuAction from '../../store/modules/menu/menu_action';
// import { getCaseList } from '../../actions/case'; import { logout } from '../../store/modules/user/user_action';
// import { getAllCaseManage } from '../../actions/case_manage';
// import { logout } from '../../actions/user';
// import { getCaseList } from '../../store/modules/myCase/my_case_action';
// import { getMyTaskList } from '../../store/modules/myTask/my_task_action';
// import { getMyFocusList } from '../../store/modules/myFocus/my_focus_action';
// import { getCaseManageList } from '../../store/modules/caseManage/case_manage_action';
// import { getCaseGroupList } from '../../store/modules/caseGroup/case_group_action';
// import { logout } from '../../store/modules/user/user_action';
// import OPERATOR_INFO from '../../constants/OperatorInfo';
// import * as Util from '../../util'; // import * as Util from '../../util';
import logo from './logo.png' import logo from './logo.png'
...@@ -24,7 +14,6 @@ import touxiang from './touxiang.png' ...@@ -24,7 +14,6 @@ import touxiang from './touxiang.png'
const SubMenu = Menu.SubMenu const SubMenu = Menu.SubMenu
// import styles from './index.less'
import styles from '../../views/App/index.less' import styles from '../../views/App/index.less'
const defaultProps = { const defaultProps = {
...@@ -43,17 +32,18 @@ const contextTypes = { ...@@ -43,17 +32,18 @@ const contextTypes = {
}; };
class Sidebar extends React.Component { class Sidebar extends React.Component {
constructor (props) { constructor(props) {
super(props) super(props)
this.menuClickHandle = this.menuClickHandle.bind(this); this.menuClickHandle = this.menuClickHandle.bind(this);
this.logout = this.logout.bind(this); this.logout = this.logout.bind(this);
} }
componentDidMount () { componentDidMount() {
this.props.MenuAction.getCaseMenu();
} }
menuClickHandle (item) { menuClickHandle(item) {
this.props.updateNavPath(item.keyPath, item.key) this.props.updateNavPath(item.keyPath, item.key)
console.log('menuClickHandle click ', item); console.log('menuClickHandle click ', item);
this.setState({ this.setState({
...@@ -64,151 +54,26 @@ class Sidebar extends React.Component { ...@@ -64,151 +54,26 @@ class Sidebar extends React.Component {
this.props.logout(); this.props.logout();
} }
onClick(e) { onClick(e) {
/**
* 点击侧栏菜单，根据不同的 `Tab` 状态查询不同的信息
*/
// let getList = function(){},reqParams = {};
// if (this.props.leftMenuType == 'my_case') {
// getList = this.props.getCaseList;
// reqParams = this.props.myCaseReqParams;
// reqParams.pageId = 1;
// }
// if (this.props.leftMenuType == 'my_focus') {
// getList = this.props.getMyFocusList;
// reqParams = this.props.myFocusReqParams;
// reqParams.pageId = 1;
// }
// if (this.props.leftMenuType == 'my_task') {
// getList = this.props.getMyTaskList;
// reqParams = this.props.myTaskReqParams;
// reqParams.pageId = 1;
// }
// if (this.props.leftMenuType == 'case_manage') {
// getList = this.props.getCaseManageList;
// reqParams = this.props.caseManageReqParams;
// reqParams.pageId = 1;
// }
// if (this.props.leftMenuType == 'case_group') {
// getList = this.props.getCaseGroupList;
// reqParams = this.props.caseGroupReqParams;
// reqParams.pageId = 1;
// }
// switch (e.key) {
// case 'logout':
// this.props.logout();
// notification.success({
// message: 'Logout Success',
// description: 'goodbye',
// duration: 2,
// });
// this.context.router.replace('/login');
// break;
// case 'ongoing':
// reqParams.status = 1;
// break;
// case 'completed':
// reqParams.status = 2;
// break;
// case 'confirm_completed':
// reqParams.status = 3;
// break;
// case 'closed':
// reqParams.status = 4;
// break;
// default :
// this.props.other(e.key)
// break;
// }
// getList(reqParams)
// this.props.updateStatus(reqParams.status);
} }
render () { render() {
// const { leftMenu } = this.props const { leftMenu } = this.props
// let defaultSelectedKeys;
// switch (this.props.status) {
// case 1 :
// defaultSelectedKeys = ['ongoing']
// break;
// case 2 :
// defaultSelectedKeys = ['completed']
// break;
// case 3 :
// defaultSelectedKeys = ['confirm_completed']
// break;
// case 4 :
// defaultSelectedKeys = ['closed']
// break;
// }
const leftMenu = [
{
key: 'ongoing',
name: '待处理数',
icon: 'info-circle-o',
dot: false
},
{
key: 'completed',
name: '已完成数',
icon: 'check-circle-o',
dot: false
},
{
key: 'confirm_completed',
name: '确认完成',
icon: 'check-circle',
dot: false
},
{
key: 'closed',
name: '已关闭数',
icon: 'poweroff',
dot: false
},
{
key: 'gratuity',
name: '获得打赏',
icon: 'pay-circle-o',
dot: false
},
{
key: 'thumb_up',
name: '总点赞数',
icon: 'like',
dot: false
},
{
key: 'dislike',
name: '总差评数',
icon: 'dislike',
dot: false
},
// {
// key: 'logout',
// name: '退出登录',
// icon: 'logout',
// dot: false
// }
];
let openKey = [] let openKey = []
const menu = leftMenu.map((item) => { const menu = leftMenu.map((item) => {
openKey.push('sub'+item.key) openKey.push('sub' + item.key)
return ( return (
<Menu.Item style={{ zIndex: 10}} key={item.key}> <Menu.Item style={{ zIndex: 10 }} key={item.key}>
<Badge dot={item.dot}> <Badge dot={item.dot}>
<Icon type={item.icon} /> <Icon type={item.icon} />
</Badge> </Badge>
<span className={styles["nav-text"]}>{item.name}</span> <span className={styles["nav-text"]}>{item.name}</span>
<span className={styles["nav-badge"]} style={{float:'right'}}>{ item.num }</span> <span className={styles["nav-badge"]} style={{ float: 'right' }}>{ item.num }</span>
</Menu.Item> </Menu.Item>
) )
}); });
// <div className="nav-portrait-title">编辑显示昵称</div> // <div className="nav-portrait-title">编辑显示昵称</div>
// return ( // return (
// <aside className="ant-layout-sider"> // <aside className="ant-layout-sider">
// <div className="ant-layout-logo"><img src={logo} /><span className="nav-text">催费跟踪后台</span></div> // <div className="ant-layout-logo"><img src={logo} /><span className="nav-text">催费跟踪后台</span></div>
...@@ -222,19 +87,19 @@ class Sidebar extends React.Component { ...@@ -222,19 +87,19 @@ class Sidebar extends React.Component {
// </Menu> // </Menu>
// </aside> // </aside>
// ) // )
return ( return (
<aside className={styles["ant-layout-sider"]}> <aside className={styles["ant-layout-sider"]}>
<div className={styles["ant-layout-logo"]}><img src={logo} /><span className={styles["nav-text"]}>催费跟踪后台</span></div> <div className={styles["ant-layout-logo"]}><img src={logo} /><span className={styles["nav-text"]}>催费跟踪后台</span></div>
<div className={styles["ant-layout-portrait"]}> <div className={styles["ant-layout-portrait"]}>
<div className={styles["nav-portrait"]}><img src={touxiang} /></div> <div className={styles["nav-portrait"]}><img src={touxiang} /></div>
<div className={styles["nav-portrait-name"]}>aaa</div> <div className={styles["nav-portrait-name"]}>admin</div>
<div className={styles["nav-portrait-title"]} onClick={this.logout}>注销</div> <div className={styles["nav-portrait-title"]} onClick={this.logout}>注销</div>
</div> </div>
<Menu mode="inline" theme="dark" onClick={this.onClick.bind(this)}> <Menu mode="inline" theme="dark" onClick={this.onClick.bind(this) }>
{ menu } { menu }
</Menu> </Menu>
</aside> </aside>
) )
} }
} }
...@@ -243,42 +108,18 @@ Sidebar.propTypes = propTypes; ...@@ -243,42 +108,18 @@ Sidebar.propTypes = propTypes;
Sidebar.defaultProps = defaultProps; Sidebar.defaultProps = defaultProps;
Sidebar.contextTypes = contextTypes; Sidebar.contextTypes = contextTypes;
function mapStateToProps(state) { function mapStateToProps(state) {
// console.log('state.menu.leftMenu', state.menu.leftMenu); console.log('state', state);
return { return {
// leftMenuType : state.menu.leftMenuType, leftMenuType: state.menu.leftMenuType,
// leftMenu : state.menu.leftMenu, leftMenu: state.menu.leftMenu,
// currentIndex : state.menu.currentIndex, currentIndex: state.menu.currentIndex,
// status : state.menu.status,
// myCaseReqParams : Util.myCaseParamsFromat(state),
// myCasePager : state.myCase.pager,
// myTaskReqParams : Util.myTaskParamsFromat(state),
// myTaskPager : state.myTask.pager,
// myFocusReqParams : Util.myFocusParamsFromat(state),
// myFocusPager : state.myFocus.pager,
// caseManageReqParams : Util.caseManageParamsFromat(state),
// caseManagePager : state.caseManage.pager,
// caseGroupReqParams : Util.caseGroupParamsFromat(state),
// caseGroupPager : state.caseGroup.pager
} }
} }
function mapDispatchToProps(dispatch) { function mapDispatchToProps(dispatch) {
return { return {
// getCaseMenu : bindActionCreators(getCaseMenu, dispatch), logout: bindActionCreators(logout, dispatch),
// updateNavPath : bindActionCreators(updateNavPath, dispatch), MenuAction: bindActionCreators(MenuAction, dispatch)
// logout : bindActionCreators(logout, dispatch),
// updateStatus : bindActionCreators(updateStatus, dispatch),
// getCaseList : bindActionCreators(getCaseList, dispatch),
// getCaseManageList : bindActionCreators(getCaseManageList, dispatch),
// getMyTaskList : bindActionCreators(getMyTaskList, dispatch),
// getMyFocusList : bindActionCreators(getMyFocusList, dispatch),
// getCaseGroupList : bindActionCreators(getCaseGroupList, dispatch)
} }
} }
......
src/constants/AgCode.js 0 → 100644
/**
* 1、处理 `Ag` 参数
* 2、appId、token、ts 加密传输
* 3、提供AgUrl
*/
import md5 from 'md5';
// const appID = window.globalConfig.appid;
// const token = window.globalConfig.token;
// const ts = new Date().getTime().toString().substring(0,10);
// const agUrl = window.globalConfig.url;
const agConf = ''//{
// appID : appID,
// token : token,
// ts : ts,
// sign : md5(appID + ts + token + 'false'),
// agUrl : agUrl
// }
export default agConf
\ No newline at end of file
src/constants1/AgCode.js deleted 100644 → 0
/**
* 1、处理 `Ag` 参数
* 2、appId、token、ts 加密传输
* 3、提供AgUrl
*/
import md5 from 'md5';
const appID = window.globalConfig.appid;
const token = window.globalConfig.token;
const ts = new Date().getTime().toString().substring(0,10);
const agUrl = window.globalConfig.url;
const agConf = {
appID : appID,
token : token,
ts : ts,
sign : md5(appID + ts + token + 'false'),
agUrl : agUrl
}
export default agConf
\ No newline at end of file
src/fake/leftMenu.js 0 → 100644
module.exports.caseMenu = [
{
key: 'ongoing',
name: '待处理数',
icon: 'info-circle-o',
num: '10',
dot: false
},
{
key: 'completed',
name: '已完成数',
icon: 'check-circle-o',
num: '20',
dot: false
},
{
key: 'confirm_completed',
name: '确认完成',
icon: 'check-circle',
num: '11',
dot: false
},
{
key: 'closed',
name: '已关闭数',
icon: 'poweroff',
num: '12',
dot: false
},
{
key: 'gratuity',
name: '获得打赏',
icon: 'pay-circle-o',
num: '10',
dot: false
},
{
key: 'thumb_up',
name: '总点赞数',
icon: 'like',
num: '101',
dot: false
},
{
key: 'dislike',
name: '总差评数',
icon: 'dislike',
num: '0',
dot: false
}
]
module.exports.emptyMenu = []
\ No newline at end of file
src/fake/myFocusTableHead.js 0 → 100644
import React from 'react'
import { Link } from 'react-router'
module.exports = [
{
title: '工号',
dataIndex: 'caseNo',
}, {
title: '标题',
render: (text, record, index) => <div className="yincang" style={{width: '300'}}>{record.caseTitle}</div>,
},{
title: '发起人',
dataIndex: 'createUser',
key: 'createUser'
},{
title: '发起时间',
dataIndex: 'createTime',
key: 'createTime',
sorter: true
},{
title: '执行人',
render: (text, record, index) => record.executorList[0] && record.executorList[0].userName,
key: 'executorUser'
},{
title: '类型',
dataIndex: 'caseTypeName',
key: 'caseTypeName' ,
filters: [
{ text: '管理', value: 'manage' },
{ text: '信息', value: 'info' },
{ text: '数据', value: 'data' },
{ text: '间接', value: 'indirect' },
{ text: '派单', value: 'dispatch' },
{ text: 'Bug信息', value: 'bug' }],
// filterMultiple: false
},{
title: '状态',
render: function(text, record, index){
switch (record.status) {
case '1':
return (<div><span className="case-state state-error"></span>进行中</div>);
case '2':
return (<div><span className="case-state state-success"></span>已完成</div>);
case '3':
return (<div><span className="case-state state-close"></span>确认完成</div>);
case '4':
return (<div><span className="case-state state-close"></span>已关闭</div>);
}
},
key: 'status',
},{
title: '催费金额',
dataIndex: 'amount',
key: 'amount',
sorter: true
},{
title: '关注人',
render: (text, record, index) => <div className="yincang" style={{width: '400'}}>{record.focusList}</div>,
key: 'focusUser'
},{
title: '管理',
key: 'operation',
fixed: 'right',
render: (record) => <Link to={{pathname:"case_detail/" + record.id}}>详情</Link>
}
]
\ No newline at end of file
src/fake/topMenu.js 0 → 100644
module.exports = [
// {
// key: 'releaseTask',
// name: '发起任务',
// icon: 'edit'
// },
{
key: 'myMain',
name: '我的发布',
icon: 'book'
},
{
key: 'home',
name: '我的任务',
icon: 'user'
},
{
key: 'myTask',
name: '我的关注',
icon: 'eye-o'
},
{
key: 'manage',
name: 'case管理',
icon: 'setting'
},{
key: 'index.html',
name: '返回旧版',
icon: 'retweet'
}
]
src/routes/index.js
...@@ -2,6 +2,8 @@ import React, { PropTypes } from 'react'; ...@@ -2,6 +2,8 @@ import React, { PropTypes } from 'react';
import { Router, Route, IndexRoute, Link } from 'react-router'; import { Router, Route, IndexRoute, Link } from 'react-router';
import App from '../components/App'; import App from '../components/App';
import Appp from '../views/App'; import Appp from '../views/App';
import Home from '../views/Home';
import Test from '../views/Test';
import NotFound from '../components/NotFound'; import NotFound from '../components/NotFound';
const Routes = ({ history }) => const Routes = ({ history }) =>
...@@ -9,7 +11,11 @@ const Routes = ({ history }) => ...@@ -9,7 +11,11 @@ const Routes = ({ history }) =>
<Route path="/" component={App} /> <Route path="/" component={App} />
<Route path="/actived" component={App} /> <Route path="/actived" component={App} />
<Route path="/completed" component={App} /> <Route path="/completed" component={App} />
<Route path="/test" component={Appp}/> <Route component={Appp}>
<Route path="home" component={Home}/>
<Route path="app" component={App}/>
<Route path="test" component={Test}/>
</Route>
<Route path="*" component={NotFound}/> <Route path="*" component={NotFound}/>
</Router>; </Router>;
......
src/store/modules/menu/menu_action.js
...@@ -2,9 +2,7 @@ import api from '../../../api'; ...@@ -2,9 +2,7 @@ import api from '../../../api';
import types from '../../types'; import types from '../../types';
import reqwest from 'reqwest'; import reqwest from 'reqwest';
import AG_CONF from '../../../constants/AgCode'; import {emptyMenu, caseMenu} from '../../../fake/leftMenu';
import OPERATOR_INFO from '../../../constants/OperatorInfo';
import {emptyMenu, caseMenu} from '../../../../fake/leftMenu';
/** /**
* 顶部菜单切换，更新面包屑 * 顶部菜单切换，更新面包屑
...@@ -53,14 +51,10 @@ export function getTopMenu() { ...@@ -53,14 +51,10 @@ export function getTopMenu() {
* @param {any} taskMatchObj * @param {any} taskMatchObj
* @returns * @returns
*/ */
export function getCaseMenu(taskMatchObj) { export function getCaseMenu() {
return { return {
type: types.GET_LEFT_MENU, type: types.GET_LEFT_MENU,
payload: {
promise: api.get('report/my', { params: taskMatchObj })
},
params: { params: {
...taskMatchObj,
leftMenu: caseMenu leftMenu: caseMenu
} }
} }
......
src/store/modules/menu/menu_reducer.js
...@@ -2,12 +2,12 @@ import _ from 'lodash'; ...@@ -2,12 +2,12 @@ import _ from 'lodash';
import { message } from 'antd'; import { message } from 'antd';
import { createReducer } from '../../../util'; import { createReducer } from '../../../util';
import types from '../../types'; import types from '../../types';
import InitState from './menu_state'; import initialState from './menu_state';
import objectAssign from 'object-assign';
export default createReducer(new InitState, { export default createReducer(initialState, {
[`${types.GET_TOP_MENU}_SUCCESS`]: (state, data) => { [`${types.GET_TOP_MENU}_SUCCESS`]: (state, data) => {
console.log('data', data) return objectAssign({}, state, { topMenu: data.content });
return state.set('topMenu', data.content)
}, },
[`${types.UPDATE_NAVPATH}`]: (state, data) => { [`${types.UPDATE_NAVPATH}`]: (state, data) => {
...@@ -62,148 +62,35 @@ export default createReducer(new InitState, { ...@@ -62,148 +62,35 @@ export default createReducer(new InitState, {
}) })
} }
return state.set('currentIndex', data.key * 1) return objectAssign({}, state, {
.set('navpath', navpath) currentIndex: data.key * 1,
.set('selectClass', selectClass) navpath: navpath,
selectClass: selectClass
});
}, },
[`${types.UPDATE_STATUS}`]: (state, data) => { [`${types.UPDATE_STATUS}`]: (state, data) => {
return objectAssign({}, state, { status: data.status });
return state.set('status', data.status)
}, },
[`${types.GET_LEFT_MENU}_SUCCESS`]: (state, data, params) => { [`${types.GET_LEFT_MENU}`]: (state, data, params) => {
return objectAssign({}, state, { leftMenu: params.leftMenu })
let report = data.content, leftMenuType;
params.leftMenu.map((item) => {
switch (item.key) {
case 'ongoing':
item.num = report.pending || 0;
break;
case 'completed':
item.num = report.finish || 0;
break;
case 'confirm_completed':
item.num = report.confirmFinish || 0;
break;
case 'closed':
item.num = report.closed || 0;
break;
case 'gratuity':
item.num = report.reward || 0;
break;
case 'thumb_up':
item.num = report.likeTotal || 0;
break;
case 'dislike':
item.num = report.booingTotal || 0;
break;
}
})
switch (params.taskMatch) {
case 1:
leftMenuType = 'my_case'
break;
case 2:
leftMenuType = 'my_task'
break;
case 3:
leftMenuType = 'my_focus'
break;
default:
break;
}
return state.set('leftMenuType', leftMenuType)
.set('leftMenu', params.leftMenu)
},
[`${types.GET_MANAGE_LEFT_MENU}_SUCCESS`]: (state, data, params) => {
let case_manage = data.content;
params.leftMenu.map((item) => {
switch (item.key) {
case 'ongoing':
item.num = case_manage.pending || 0;
break;
case 'completed':
item.num = case_manage.finish || 0;
break;
case 'confirm_completed':
item.num = case_manage.confirmFinish || 0;
break;
case 'closed':
item.num = case_manage.closed || 0;
break;
case 'gratuity':
item.num = case_manage.reward || 0;
break;
case 'thumb_up':
item.num = case_manage.likeTotal || 0;
break;
case 'dislike':
item.num = case_manage.booingTotal || 0;
break;
}
})
return state.set('leftMenuType', 'case_manage')
.set('leftMenu', params.leftMenu)
},
[`${types.GET_GROUP_STATISTICS}_SUCCESS`]: (state, data, params) => {
let case_group = data.content;
const leftMenu = _.map(params.leftMenu, ((item) => {
switch (item.key) {
case 'ongoing':
item.num = case_group.pending || 0;
break;
case 'completed':
item.num = case_group.finish || 0;
break;
case 'confirm_completed':
item.num = case_group.confirmFinish || 0;
break;
case 'closed':
item.num = case_group.closed || 0;
break;
case 'gratuity':
item.num = case_group.reward || 0;
break;
case 'thumb_up':
item.num = case_group.likeTotal || 0;
break;
case 'dislike':
item.num = case_group.booingTotal || 0;
break;
}
return item;
}))
return state.set('leftMenuType', 'case_group')
.set('leftMenu', leftMenu)
}, },
[`${types.INIT_MENU}`]: (state, data, params) => { [`${types.INIT_MENU}`]: (state, data, params) => {
params.leftMenu.map((item) => { params.leftMenu.map((item) => {
item.num = 0; item.num = 0;
}) });
return state.set('leftMenuType', '') return objectAssign({}, state, { leftMenuType: leftMenuType });
}, },
[`${types.UPDATE_COLLAPSE}`]: (state, data) => { [`${types.UPDATE_COLLAPSE}`]: (state, data) => {
return objectAssign({}, state, { collapse: !data.collapse });
return state.set('collapse', !data.collapse)
}, },
[`${types.GET_ADD_CASE_LEFT_MENU}`]: (state, data) => { [`${types.GET_ADD_CASE_LEFT_MENU}`]: (state, data) => {
return objectAssign({}, state, { leftMenu: leftMenu });
return state.set('leftMenu', data.leftMenu)
}, },
}) })
\ No newline at end of file
src/store/modules/user/user_action.js
import api from '../../../api';
import {getCookie} from '../../../util'; import {getCookie} from '../../../util';
import types from '../../types'; import types from '../../types';
import reqwest from 'reqwest'; import reqwest from 'reqwest';
import AG_CONF from '../../../constants/AgCode'; // import AG_CONF from '../../../constants/AgCode';
import OPERATOR_INFO from '../../../constants/OperatorInfo'; // import OPERATOR_INFO from '../../../constants/OperatorInfo';
/** /**
* 判断 `cookis` 中是否有 `uid` 没有触发没有发现 `uid` 的 `Action` * 判断 `cookis` 中是否有 `uid` 没有触发没有发现 `uid` 的 `Action`
...@@ -61,7 +60,7 @@ export function logout() { ...@@ -61,7 +60,7 @@ export function logout() {
return { return {
type: types.LOGOUT, type: types.LOGOUT,
payload: { payload: {
promise: api.post('logout') // promise: api.post('logout')
} }
} }
} }
src/store/modules/user/user_reducer.js
...@@ -2,35 +2,51 @@ ...@@ -2,35 +2,51 @@
import { message } from 'antd'; import { message } from 'antd';
import { createReducer } from '../../../util'; import { createReducer } from '../../../util';
import types from '../../types'; import types from '../../types';
import InitState from './user_state'; import initialState from './user_state';
import objectAssign from 'object-assign';
export default createReducer(new InitState, { export default createReducer(initialState, {
[`${types.LOGIN}_PENDING`]: (state, data) => { [`${types.LOGIN}_PENDING`]: (state, data) => {
return state.set('loggingIn', true)
return objectAssign({}, state, {
loggingIn : true
})
}, },
[`${types.LOGIN}_ERROR`]: (state, data) => { [`${types.LOGIN}_ERROR`]: (state, data) => {
return state.set('loggingIn', false)
.set('user', null) return objectAssign({}, state, {
.set('loginErrors', data.message) loggingIn : false,
user: null,
loginErrors: data.message
})
}, },
[`${types.LOGIN}_SUCCESS`]: (state, data) => { [`${types.LOGIN}_SUCCESS`]: (state, data) => {
return state.set('loggingIn', true)
.set('user', data.conten.user) return objectAssign({}, state, {
.set('loginErrors', null) loggingIn : true,
user: data.conten.user,
loginErrors: null
})
}, },
[`${types.LOGOUT}_SUCCESS`]: (state, data) => { [`${types.LOGOUT}_SUCCESS`]: (state, data) => {
return state.set('loggingOut', true)
.set('user', null) return objectAssign({}, state, {
.set('loginErrors', null) loggingOut : true,
user: null,
loginErrors: null
})
}, },
[`${types.FETCH_PROFILE}_SUCCESS`]: (state, data) => { [`${types.FETCH_PROFILE}_SUCCESS`]: (state, data) => {
return state.set('loggingIn', false)
.set('user', data.conten.user) return objectAssign({}, state, {
.set('loginErrors', null) loggingIn : false,
user: data.conten.user,
loginErrors: null
})
}, },
}) })
\ No newline at end of file
src/store/reducers.js
import { combineReducers } from 'redux'; import { combineReducers } from 'redux';
import { routerReducer } from 'react-router-redux'; // import { routerReducer } from 'react-router-redux';
import user from './modules/user/user_reducer'; import user from './modules/user/user_reducer';
import menu from './modules/menu/menu_reducer'; import menu from './modules/menu/menu_reducer';
...@@ -39,5 +39,5 @@ import menu from './modules/menu/menu_reducer'; ...@@ -39,5 +39,5 @@ import menu from './modules/menu/menu_reducer';
export default combineReducers({ export default combineReducers({
user, user,
menu, menu,
routing: routerReducer // routing: routerReducer
}); });
src/store1/actions.js
...@@ -14,7 +14,7 @@ import * as topMenuAction from './modules/topMenu/top_menu_action' // 顶部èœå ...@@ -14,7 +14,7 @@ import * as topMenuAction from './modules/topMenu/top_menu_action' // 顶部èœå
import * as userAction from './modules/user/user_action' // 用户 import * as userAction from './modules/user/user_action' // 用户
export default { export default {
...leftMenuAction, // ...leftMenuAction,
...topMenuAction, // ...topMenuAction,
...userAction, // ...userAction,
} }
src/views/App/index.js
...@@ -8,9 +8,8 @@ import Header from '../../components/Header'; ...@@ -8,9 +8,8 @@ import Header from '../../components/Header';
import Sidebar from '../../components/Sidebar'; import Sidebar from '../../components/Sidebar';
import Footer from '../../components/Footer'; import Footer from '../../components/Footer';
// import { fetchProfile, logout } from '../../store/modules/user/user_action'; import { fetchProfile, logout } from '../../store/modules/user/user_action';
import 'antd/dist/antd.less'; // import 'antd/dist/antd.less';
import styles from './index.less'; import styles from './index.less';
class App extends React.Component { class App extends React.Component {
...@@ -23,7 +22,7 @@ class App extends React.Component { ...@@ -23,7 +22,7 @@ class App extends React.Component {
*/ */
componentWillMount() { componentWillMount() {
const {actions} = this.props; const {actions} = this.props;
// actions.fetchProfile(); actions.fetchProfile();
} }
/** /**
* 监听porps * 监听porps
...@@ -33,10 +32,10 @@ class App extends React.Component { ...@@ -33,10 +32,10 @@ class App extends React.Component {
* @param {any} nextProps * @param {any} nextProps
*/ */
componentWillReceiveProps(nextProps) { componentWillReceiveProps(nextProps) {
// const loggingOut = nextProps.loggingOut; const loggingOut = nextProps.loggingOut;
// if (loggingOut) { if (loggingOut) {
// window.location.href = '/'; window.location.href = '/';
// } }
} }
render() { render() {
const {user, actions} = this.props; const {user, actions} = this.props;
...@@ -71,17 +70,17 @@ App.contextTypes = { ...@@ -71,17 +70,17 @@ App.contextTypes = {
}; };
const mapStateToProps = (state) => { const mapStateToProps = (state) => {
// const {user} = state; const {user} = state;
return { return {
// user: user ? user : null, user: user ? user : null,
// loggingOut: user.loggingOut, loggingOut: user.loggingOut,
// collapse: state.menu.collapse // collapse: state.menu.collapse
}; };
}; };
function mapDispatchToProps(dispatch) { function mapDispatchToProps(dispatch) {
return { return {
// actions: bindActionCreators({ fetchProfile, logout }, dispatch) actions: bindActionCreators({ fetchProfile, logout }, dispatch)
}; };
} }
......
src/views/Home/index.js 0 → 100644
import React from 'react'
import { Row, Col, Collapse, Alert } from 'antd';
const Panel = Collapse.Panel;
// import {Line,Pie,Doughnut} from 'react-chartjs';
import styles from'./index.less'
const chartOption = {
responsive: true
}
const text = `
A dog is a type of domesticated animal.
Known for its loyalty and faithfulness,
it can be found as a welcome guest in many households across the world.
A dog is a type of domesticated animal.
Known for its loyalty and faithfulness,
it can be found as a welcome guest in many households across the world.
A dog is a type of domesticated animal.
Known for its loyalty and faithfulness,
it can be found as a welcome guest in many households across the world.
`;
export default class Home extends React.Component {
constructor() {
super()
}
componentWillMount() {
}
callback() {
}
render() {
const detail = (
<Collapse defaultActiveKey={['1', '2', '3']} onChange={this.callback}>
<Panel header="This is panel header 1" key="1">
<p>{text}</p>
</Panel>
<Panel header="This is panel header 2" key="2">
<p>{text}</p>
</Panel>
<Panel header="This is panel header 3" key="3">
<p>{text}</p>
</Panel>
</Collapse>
)
return (
<div style={{overflow: 'hidden'}}>
<Alert
message="消息提示的文案"
description="消息提示的辅助性文字介绍消息提示的辅助性文，字介绍消息提示的辅助性文字介绍"
type="info"
showIcon
/>
<Row className={styles["home-row"]} type="flex" justify="space-between">
<Col span="11">
{detail}
</Col>
<Col span="2">
{/**/}
</Col>
<Col span="11">
{detail}
</Col>
</Row>
</div>
)
}
}
src/views/Home/index.less 0 → 100644
.home-row {
margin-bottom: 20px;
}
.home-title-x {
text-align: center;
line-height: 30px;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment