1

liuwh

2020-04-06 12d561aea1143eae863d80edebf8b4cbe3cc85df

 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);