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
## 兼容性
[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
```
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
https://github.com/airbnb/javascript
......
package.json
......@@ -9,18 +9,26 @@
"babel-runtime": "^6.6.1",
"classnames": "^2.2.3",
"es3ify-loader": "^0.2.0",
"fetch-ie8": "^1.4.0",
"history": "^2.0.1",
"immutable": "^3.8.1",
"isomorphic-fetch": "^2.2.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-chartjs": "^0.7.3",
"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-router": "2.3.x",
"react-router-redux": "^4.0.5",
"redux": "^3.3.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": {
"atool-test-mocha": "^0.1.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\"",
"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 {
</Menu.Item>
)
});
/**
* `selectKey` 用于默认显示
*
* 优化：
* 根据路由规则显示导航状态
* 需要在 `state` 中加入 `router` 这样就方便了对全局的管理了
* 学习下 `redux-simple-router` 来实现该功能
*
*/
// return (
// <div className='ant-layout-header'>
// <div className="ant-layout-wrapper">
......@@ -198,8 +190,6 @@ Header.propTypes = propTypes;
Header.defaultProps = defaultProps;
const mapStateToProps = (state) => {
// console.log('state.router', state.router);
// console.log('state.routing', state.routing);
return {
// topMenu : state.menu.topMenu,
// currentIndex : state.menu.currentIndex,
......
src/components/NavPath/index.js
......@@ -3,7 +3,7 @@ import { bindActionCreators } from 'redux'
import { Breadcrumb } from 'antd'
import { connect } from 'react-redux'
import './index.less'
import styles from './index.less'
const defaultProps = {
navpath: []
......@@ -27,7 +27,7 @@ class NavPath extends React.Component {
})
const breadInit = <Breadcrumb.Item key={'bc-myMain'}>我的发布</Breadcrumb.Item>
return (
<div className="ant-layout-breadcrumb">
<div className={styles["ant-layout-breadcrumb"]}>
<Breadcrumb>
<Breadcrumb.Item key='bc-0'>首页</Breadcrumb.Item>
{bread.length == 0? breadInit: bread}
......
src/components/Sidebar/index.js
......@@ -3,20 +3,10 @@ import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import { Link } from 'react-router';
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 { getAllCaseManage } from '../../actions/case_manage';
// import { logout } from '../../actions/user';
import { logout } from '../../store/modules/user/user_action';
// 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 logo from './logo.png'
......@@ -24,7 +14,6 @@ import touxiang from './touxiang.png'
const SubMenu = Menu.SubMenu
// import styles from './index.less'
import styles from '../../views/App/index.less'
const defaultProps = {
......@@ -43,17 +32,18 @@ const contextTypes = {
};
class Sidebar extends React.Component {
constructor (props) {
constructor(props) {
super(props)
this.menuClickHandle = this.menuClickHandle.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)
console.log('menuClickHandle click ', item);
this.setState({
......@@ -64,151 +54,26 @@ class Sidebar extends React.Component {
this.props.logout();
}
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 () {
// const { leftMenu } = this.props
render() {
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 = []
const menu = leftMenu.map((item) => {
openKey.push('sub'+item.key)
openKey.push('sub' + item.key)
return (
<Menu.Item style={{ zIndex: 10}} key={item.key}>
<Badge dot={item.dot}>
<Icon type={item.icon} />
</Badge>
<span className={styles["nav-text"]}>{item.name}</span>
<span className={styles["nav-badge"]} style={{float:'right'}}>{ item.num }</span>
<Menu.Item style={{ zIndex: 10 }} key={item.key}>
<Badge dot={item.dot}>
<Icon type={item.icon} />
</Badge>
<span className={styles["nav-text"]}>{item.name}</span>
<span className={styles["nav-badge"]} style={{ float: 'right' }}>{ item.num }</span>
</Menu.Item>
)
});
// <div className="nav-portrait-title">编辑显示昵称</div>
// <div className="nav-portrait-title">编辑显示昵称</div>
// return (
// <aside className="ant-layout-sider">
// <div className="ant-layout-logo"><img src={logo} /><span className="nav-text">催费跟踪后台</span></div>
......@@ -222,19 +87,19 @@ class Sidebar extends React.Component {
// </Menu>
// </aside>
// )
return (
<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-portrait"]}>
<div className={styles["nav-portrait"]}><img src={touxiang} /></div>
<div className={styles["nav-portrait-name"]}>aaa</div>
<div className={styles["nav-portrait-title"]} onClick={this.logout}>注销</div>
</div>
<Menu mode="inline" theme="dark" onClick={this.onClick.bind(this)}>
{ menu }
</Menu>
</aside>
<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-portrait"]}>
<div className={styles["nav-portrait"]}><img src={touxiang} /></div>
<div className={styles["nav-portrait-name"]}>admin</div>
<div className={styles["nav-portrait-title"]} onClick={this.logout}>注销</div>
</div>
<Menu mode="inline" theme="dark" onClick={this.onClick.bind(this) }>
{ menu }
</Menu>
</aside>
)
}
}
......@@ -243,42 +108,18 @@ Sidebar.propTypes = propTypes;
Sidebar.defaultProps = defaultProps;
Sidebar.contextTypes = contextTypes;
function mapStateToProps(state) {
// console.log('state.menu.leftMenu', state.menu.leftMenu);
console.log('state', state);
return {
// leftMenuType : state.menu.leftMenuType,
// leftMenu : state.menu.leftMenu,
// 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
leftMenuType: state.menu.leftMenuType,
leftMenu: state.menu.leftMenu,
currentIndex: state.menu.currentIndex,
}
}
function mapDispatchToProps(dispatch) {
return {
// getCaseMenu : bindActionCreators(getCaseMenu, dispatch),
// updateNavPath : bindActionCreators(updateNavPath, 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)
logout: bindActionCreators(logout, dispatch),
MenuAction: bindActionCreators(MenuAction, 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';
import { Router, Route, IndexRoute, Link } from 'react-router';
import App from '../components/App';
import Appp from '../views/App';
import Home from '../views/Home';
import Test from '../views/Test';
import NotFound from '../components/NotFound';
const Routes = ({ history }) =>
......@@ -9,7 +11,11 @@ const Routes = ({ history }) =>
<Route path="/" component={App} />
<Route path="/actived" 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}/>
</Router>;
......
src/store/modules/menu/menu_action.js
......@@ -2,9 +2,7 @@ import api from '../../../api';
import types from '../../types';
import reqwest from 'reqwest';
import AG_CONF from '../../../constants/AgCode';
import OPERATOR_INFO from '../../../constants/OperatorInfo';
import {emptyMenu, caseMenu} from '../../../../fake/leftMenu';
import {emptyMenu, caseMenu} from '../../../fake/leftMenu';
/**
* 顶部菜单切换，更新面包屑
......@@ -53,14 +51,10 @@ export function getTopMenu() {
* @param {any} taskMatchObj
* @returns
*/
export function getCaseMenu(taskMatchObj) {
export function getCaseMenu() {
return {
type: types.GET_LEFT_MENU,
payload: {
promise: api.get('report/my', { params: taskMatchObj })
},
params: {
...taskMatchObj,
leftMenu: caseMenu
}
}
......
src/store/modules/menu/menu_reducer.js
......@@ -2,12 +2,12 @@ import _ from 'lodash';
import { message } from 'antd';
import { createReducer } from '../../../util';
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) => {
console.log('data', data)
return state.set('topMenu', data.content)
return objectAssign({}, state, { topMenu: data.content });
},
[`${types.UPDATE_NAVPATH}`]: (state, data) => {
......@@ -62,148 +62,35 @@ export default createReducer(new InitState, {
})
}
return state.set('currentIndex', data.key * 1)
.set('navpath', navpath)
.set('selectClass', selectClass)
return objectAssign({}, state, {
currentIndex: data.key * 1,
navpath: navpath,
selectClass: selectClass
});
},
[`${types.UPDATE_STATUS}`]: (state, data) => {
return state.set('status', data.status)
return objectAssign({}, state, { status: data.status });
},
[`${types.GET_LEFT_MENU}_SUCCESS`]: (state, data, params) => {
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.GET_LEFT_MENU}`]: (state, data, params) => {
return objectAssign({}, state, { leftMenu: params.leftMenu })
},
[`${types.INIT_MENU}`]: (state, data, params) => {
params.leftMenu.map((item) => {
item.num = 0;
})
});
return state.set('leftMenuType', '')
return objectAssign({}, state, { leftMenuType: leftMenuType });
},
[`${types.UPDATE_COLLAPSE}`]: (state, data) => {
return state.set('collapse', !data.collapse)
return objectAssign({}, state, { collapse: !data.collapse });
},
[`${types.GET_ADD_CASE_LEFT_MENU}`]: (state, data) => {
return state.set('leftMenu', data.leftMenu)
return objectAssign({}, state, { leftMenu: leftMenu });
},
})
\ No newline at end of file
src/store/modules/user/user_action.js
import api from '../../../api';
import {getCookie} from '../../../util';
import types from '../../types';
import reqwest from 'reqwest';
import AG_CONF from '../../../constants/AgCode';
import OPERATOR_INFO from '../../../constants/OperatorInfo';
// import AG_CONF from '../../../constants/AgCode';
// import OPERATOR_INFO from '../../../constants/OperatorInfo';
/**
* 判断 `cookis` 中是否有 `uid` 没有触发没有发现 `uid` 的 `Action`
......@@ -61,7 +60,7 @@ export function logout() {
return {
type: types.LOGOUT,
payload: {
promise: api.post('logout')
// promise: api.post('logout')
}
}
}
src/store/modules/user/user_reducer.js
......@@ -2,35 +2,51 @@
import { message } from 'antd';
import { createReducer } from '../../../util';
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) => {
return state.set('loggingIn', true)
return objectAssign({}, state, {
loggingIn : true
})
},
[`${types.LOGIN}_ERROR`]: (state, data) => {
return state.set('loggingIn', false)
.set('user', null)
.set('loginErrors', data.message)
return objectAssign({}, state, {
loggingIn : false,
user: null,
loginErrors: data.message
})
},
[`${types.LOGIN}_SUCCESS`]: (state, data) => {
return state.set('loggingIn', true)
.set('user', data.conten.user)
.set('loginErrors', null)
return objectAssign({}, state, {
loggingIn : true,
user: data.conten.user,
loginErrors: null
})
},
[`${types.LOGOUT}_SUCCESS`]: (state, data) => {
return state.set('loggingOut', true)
.set('user', null)
.set('loginErrors', null)
return objectAssign({}, state, {
loggingOut : true,
user: null,
loginErrors: null
})
},
[`${types.FETCH_PROFILE}_SUCCESS`]: (state, data) => {
return state.set('loggingIn', false)
.set('user', data.conten.user)
.set('loginErrors', null)
return objectAssign({}, state, {
loggingIn : false,
user: data.conten.user,
loginErrors: null
})
},
})
\ No newline at end of file
src/store/reducers.js
import { combineReducers } from 'redux';
import { routerReducer } from 'react-router-redux';
// import { routerReducer } from 'react-router-redux';
import user from './modules/user/user_reducer';
import menu from './modules/menu/menu_reducer';
......@@ -39,5 +39,5 @@ import menu from './modules/menu/menu_reducer';
export default combineReducers({
user,
menu,
routing: routerReducer
// routing: routerReducer
});
src/store1/actions.js
......@@ -14,7 +14,7 @@ import * as topMenuAction from './modules/topMenu/top_menu_action' // 顶部èœå
import * as userAction from './modules/user/user_action' // 用户
export default {
...leftMenuAction,
...topMenuAction,
...userAction,
// ...leftMenuAction,
// ...topMenuAction,
// ...userAction,
}
src/views/App/index.js
......@@ -8,9 +8,8 @@ import Header from '../../components/Header';
import Sidebar from '../../components/Sidebar';
import Footer from '../../components/Footer';
// import { fetchProfile, logout } from '../../store/modules/user/user_action';
import 'antd/dist/antd.less';
import { fetchProfile, logout } from '../../store/modules/user/user_action';
// import 'antd/dist/antd.less';
import styles from './index.less';
class App extends React.Component {
......@@ -23,7 +22,7 @@ class App extends React.Component {
*/
componentWillMount() {
const {actions} = this.props;
// actions.fetchProfile();
actions.fetchProfile();
}
/**
* 监听porps
......@@ -33,10 +32,10 @@ class App extends React.Component {
* @param {any} nextProps
*/
componentWillReceiveProps(nextProps) {
// const loggingOut = nextProps.loggingOut;
// if (loggingOut) {
// window.location.href = '/';
// }
const loggingOut = nextProps.loggingOut;
if (loggingOut) {
window.location.href = '/';
}
}
render() {
const {user, actions} = this.props;
......@@ -71,17 +70,17 @@ App.contextTypes = {
};
const mapStateToProps = (state) => {
// const {user} = state;
const {user} = state;
return {
// user: user ? user : null,
// loggingOut: user.loggingOut,
// collapse: state.menu.collapse
user: user ? user : null,
loggingOut: user.loggingOut,
// collapse: state.menu.collapse
};
};
function mapDispatchToProps(dispatch) {
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