import React, {Component} from 'react'
|
import { Form, Icon, Input, Button, Checkbox, Dropdown, Menu, message } from 'antd'
|
import md5 from 'md5'
|
import Api from '@/api'
|
import zhCN from '@/locales/zh-CN/login.js'
|
import enUS from '@/locales/en-US/login.js'
|
import logourl from '../../assets/img/login-logo.png'
|
import './index.scss'
|
|
class Login extends Component {
|
state = {
|
langs: [{
|
name: '中文简体',
|
value: 'zh-CN'
|
}, {
|
name: 'English',
|
value: 'en-US'
|
}],
|
selectedlang: {
|
name: '中文简体',
|
value: 'zh-CN'
|
},
|
dict: zhCN,
|
isDisabled: false
|
}
|
|
changelang (item) {
|
// 切换语言
|
this.setState({
|
selectedlang: item,
|
dict: item.value === 'zh-CN' ? zhCN : enUS
|
})
|
}
|
|
md5Password (pwd) {
|
// md5密码加密
|
const salt = 'minkesoft'
|
return md5(md5(pwd + salt))
|
}
|
|
handleSubmit = e => {
|
// 登录参数检验
|
e.preventDefault()
|
this.props.form.validateFields((err, values) => {
|
if (err) return
|
this.setState({
|
isDisabled: true
|
})
|
this.loginsubmit(values)
|
})
|
}
|
|
async loginsubmit (param) {
|
// 登录提交
|
let password = this.md5Password(param.password)
|
let result = await Api.loginsystem(param.username, password)
|
if (result.status) {
|
sessionStorage.setItem('UserID', result.userid)
|
sessionStorage.setItem('lang', this.state.selectedlang.value)
|
|
if (param.remember) { // 记住密码时账号密码存入localStorage
|
localStorage.setItem('username', param.username)
|
localStorage.setItem('password', param.password)
|
} else {
|
localStorage.removeItem('username')
|
localStorage.removeItem('password')
|
}
|
|
if (this.props.location.state && this.props.location.state.from.pathname) {
|
// 查看是否为其他页面跳转，路径存在时，跳回原页面
|
this.props.history.replace(this.props.location.state.from.pathname)
|
} else {
|
this.props.history.replace('/main')
|
}
|
} else {
|
message.warning(result.message)
|
this.setState({
|
isDisabled: false
|
})
|
}
|
}
|
|
render () {
|
const { getFieldDecorator } = this.props.form
|
const menu = (
|
<Menu>
|
{this.state.langs.map((item, index) => {
|
return (
|
<Menu.Item key={index} onClick={() => {this.changelang(item)}}>
|
<span>{item.name}</span>
|
</Menu.Item>
|
)
|
})}
|
</Menu>
|
)
|
return (
|
<div className="login-container">
|
<div className="logo">
|
<img src={logourl} alt=""/>
|
</div>
|
<div className="login-middle">
|
<Form onSubmit={this.handleSubmit} className="login-form">
|
<h4>明科商业智能开放平台</h4>
|
<Form.Item>
|
{getFieldDecorator('username', {
|
rules: [{ required: true, message: this.state.dict['login.username.empty'] }],
|
initialValue: localStorage.getItem('username') || '',
|
})(
|
<Input
|
prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
|
placeholder={this.state.dict['login.username']}
|
/>,
|
)}
|
</Form.Item>
|
<Form.Item>
|
{getFieldDecorator('password', {
|
rules: [{ required: true, message: this.state.dict['login.password.empty'] }],
|
initialValue: localStorage.getItem('password') || '',
|
})(
|
<Input
|
prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
|
type="password"
|
placeholder={this.state.dict['login.password']}
|
/>,
|
)}
|
</Form.Item>
|
<Form.Item className="minline">
|
{getFieldDecorator('remember', {
|
valuePropName: 'checked',
|
initialValue: true,
|
})(<Checkbox>{this.state.dict['login.remember']}</Checkbox>)}
|
<Dropdown overlay={menu} trigger={['click']} placement="bottomRight">
|
<span className="ant-dropdown-link">
|
{this.state.selectedlang.name} <Icon type="down" />
|
</span>
|
</Dropdown>
|
</Form.Item>
|
<Form.Item>
|
<Button type="primary" htmlType="submit" className="login-form-button" disabled={this.state.isDisabled}>
|
{this.state.dict['login.submit']}
|
</Button>
|
</Form.Item>
|
</Form>
|
</div>
|
<div className="login-bottom">
|
<p>
|
<span className="split">Copyright©2017</span>
|
<span className="split">{this.state.dict['login.copyright']}</span>
|
<span>北京明科普华信息技术有限公司</span>
|
</p>
|
<p>
|
<span>ICP备案：</span>
|
<span>京ICP备12007830号</span>
|
</p>
|
</div>
|
</div>
|
)
|
}
|
}
|
|
export default Form.create()(Login)
|
