From 12d561aea1143eae863d80edebf8b4cbe3cc85df Mon Sep 17 00:00:00 2001 From: liuwh <hugeinfo123> Date: Mon, 06 Apr 2020 19:05:16 +0800 Subject: [PATCH] 1 --- src/pages/login/login.jsx | 192 ++++++++++++++++++++++++++--------------------- 1 files changed, 106 insertions(+), 86 deletions(-) diff --git a/src/pages/login/login.jsx b/src/pages/login/login.jsx index 4a6a87b..b5b4827 100644 --- a/src/pages/login/login.jsx +++ b/src/pages/login/login.jsx @@ -8,107 +8,127 @@ 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'; class NormalLoginForm extends React.Component { - constructor(props) { - super(props); - this.config = { - navigationBarTitleText: '', - }; - this.state = { - btnLoading: false - }; - } - componentWillMount() { - document.title = '用户登录' - } - - 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: `hik-common/api/opus/user/loginTest`, - params: { - ...values - } - }).then(res => { - this.setState({ - btnLoading: false - }) - if (res) { - this.handleRes(res); - } - }) - } - }); + constructor(props) { + super(props); + this.config = { + navigationBarTitleText: '', }; + this.state = { + btnLoading: false + }; + } + componentWillMount() { + document.title = '用户登录' + } - handleRes = (res) => { - let loginUser = {}; - let curPosIndex = window.localStorage.getItem('curPosIndex'); - curPosIndex = (curPosIndex || curPosIndex == {}) || 0; - loginUser = res.user[curPosIndex]; - - window.localStorage.setItem('user', res); - window.localStorage.setItem('token', res.token); - window.localStorage.setItem('curPosIndex', curPosIndex); - window.localStorage.setItem('loginUser', JSON.stringify(loginUser)); - message.success('登录成功', () => { - this.props.history.push({ pathname: "/index" }); + 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) => { - render() { - const { getFieldDecorator } = this.props.form; - const { btnLoading } = this.state; - return ( - <div className="login-main"> - <Form onSubmit={this.handleSubmit} className="login-form"> - <Form.Item> - {getFieldDecorator('loginName', { - rules: [{ required: true, message: '请输入账号!' }], - })( - <Input - prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} - placeholder="请输入账号" - />, - )} - </Form.Item> - <Form.Item> - {getFieldDecorator('passWord', { - rules: [{ required: true, message: '请输入密码!' }], - initialValue: 'psw' - })( - <Input - prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} - type="password" - placeholder="请输入密码" - />, - )} - </Form.Item> - <Form.Item> - {/* {getFieldDecorator('remember', { + // 将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)); + message.success('登录成功'); + this.props.history.push({ pathname: "/index" }); + } + }) + } + + 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: '32vh', height: '5vh', 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: '32vh', height: '5vh', 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> + <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); -- Gitblit v1.8.0