/* eslint-disable */
|
/**柯礼钦
|
* 4/3/2020, 10:19:45 AM
|
* doc comment for the file goes here
|
*/
|
|
/** 登录页面 */
|
import React, { ReactNode, ReactEventHandler, Component } from 'react';
|
import { Form, Icon, Input, Button, Checkbox, message } from 'antd';
|
import './login.scss';
|
|
import logo from '../../img/logo.png';
|
import fetch from '../../api/request';
|
import { oaMenus, userMenus, getMenuListByPermission } from '../../menu';
|
import { Context } from '../../index';
|
import { createHashHistory } from 'history';
|
const history = createHashHistory();
|
|
class NormalLoginForm extends React.Component {
|
constructor(props) {
|
super(props);
|
this.config = {
|
navigationBarTitleText: '',
|
};
|
this.state = {
|
btnLoading: false
|
};
|
}
|
componentWillMount() {
|
document.title = '恒巨信息OA-用户登录';
|
}
|
|
handleSubmit = e => {
|
e.preventDefault();
|
this.props.form.validateFields((err, values) => {
|
if (!err) {
|
console.log('Received values of form: ', values);
|
this.setState({
|
btnLoading: true
|
});
|
fetch({
|
url: `api/account/login`,
|
method: 'POST',
|
data: {
|
...values
|
}
|
}).then(res => {
|
this.setState({
|
btnLoading: false
|
})
|
if (res) {
|
this.handleRes(res);
|
}
|
})
|
}
|
});
|
};
|
|
handleRes = (res) => {
|
|
// 将token放入缓存
|
window.localStorage.setItem('token', res.token);
|
window.localStorage.setItem('loginUser', JSON.stringify(res)); //登录的用户信息
|
|
// 获取登录用户的菜单权限
|
fetch({
|
url: `api/resource/getResource`,
|
}).then(res => {
|
console.log('res', res);
|
if (res) {
|
window.localStorage.setItem('menu', JSON.stringify(res));
|
window.localStorage.setItem('menusListByRole', JSON.stringify({
|
user: { role: 'user', menus: userMenus },
|
oa: {
|
role: 'oa', menus: getMenuListByPermission(oaMenus, res && res.map(({ symbol }) => (symbol)).concat(res.map(({ moduleSymbol }) => (moduleSymbol))).reduce((p, n) => {
|
if (p.indexOf(n) == -1) {
|
return p.concat(n)
|
} else {
|
return p
|
}
|
}, []))
|
}
|
}));//所有模块菜单
|
message.success('登录成功');
|
console.log('this props', this.props);
|
history.push({ pathname: "/index" });
|
|
this.props.setContext && this.props.setContext({ role: 'oa' })
|
}
|
})
|
}
|
|
render() {
|
const { getFieldDecorator } = this.props.form;
|
const { btnLoading } = this.state;
|
return (
|
<div className="login-main">
|
<div className="login-div">
|
<div className="login-div-top">
|
<img className="login-div-top-img" src={logo} />
|
</div>
|
<div className="login-div-content">
|
<div className="login-div-content-div">
|
<div className="login-div-content-div-title">登录OA云平台</div>
|
<Form onSubmit={this.handleSubmit} className="login-form">
|
<Form.Item className="login-div-content-form-flex" >
|
{getFieldDecorator('account', {
|
rules: [{ required: true, message: '请输入账号!' }],
|
})(
|
<Input
|
style={{ width: '300px', height: '48px', margin: '12px' }}
|
prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
|
placeholder="请输入账号"
|
/>,
|
)}
|
</Form.Item>
|
<Form.Item className="login-div-content-form-flex">
|
{getFieldDecorator('credential', {
|
rules: [{ required: true, message: '请输入密码!' }],
|
// initialValue: 'admin'
|
})(
|
<Input
|
style={{ width: '300px', height: '48px', margin: '12px' }}
|
prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
|
type="password"
|
placeholder="请输入密码"
|
/>,
|
)}
|
</Form.Item>
|
<Form.Item className="login-div-content-form-flex">
|
{/* {getFieldDecorator('remember', {
|
valuePropName: 'checked',
|
initialValue: true,
|
})(<Checkbox>记住</Checkbox>)}
|
<a className="login-form-forgot" href="">
|
忘记密码
|
</a> */}
|
<Button type="primary" htmlType="submit" className="login-form-button" loading={btnLoading}>登录</Button>
|
</Form.Item>
|
</Form>
|
|
</div>
|
</div>
|
<div className="login-div-bottom">2011 10215489广州恒巨信息科技有限公司 版权所有 - 粤ICP备10215489号</div>
|
</div>
|
</div>
|
);
|
}
|
}
|
|
const WrappedNormalLoginForm = Form.create({ name: 'normal_login' })(NormalLoginForm);
|
export default WrappedNormalLoginForm;
|
