2019-12-03

king

2019-12-03 70c47c170ae1cc154e68c1af407e4f6ebf04669e

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { Form, Icon, Input, Button, Checkbox, Select, Modal } from 'antd'
import './index.scss'
 
const { warning } = Modal
 
class MainSearch extends Component {
  static propTpyes = {
    isDisabled: PropTypes.bool,
    changelang: PropTypes.func,
    handleSubmit: PropTypes.func,
    dict: PropTypes.object,
    auth: PropTypes.bool,
    lang: PropTypes.string,
    platName: PropTypes.string
  }
 
  state = {}
 
  handleConfirm = () => {
    // 表单提交时检查输入值是否正确
    return new Promise((resolve, reject) => {
      this.props.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          resolve(values)
        } else {
          reject(err)
        }
      })
    })
  }
 
  changelang = (item) => {
    this.props.changelang(item)
  }
 
  handleSubmit = e => {
    // 登录参数检验
    e.preventDefault()
    if (!this.props.auth) {
      warning({
        title: this.props.dict['login.auth.tip'],
        okText: this.props.dict['login.auth.ok'],
        cancelText: this.props.dict['login.auth.cancel'],
        onOk() {},
        onCancel() {}
      })
      return
    }
    this.props.handleSubmit()
  }
 
  componentDidMount () {
    const input = document.getElementById('username')
    if (input) {
      input.focus()
    }
  }
 
  render() {
    const { getFieldDecorator } = this.props.form
 
    return (
      <Form onSubmit={this.handleSubmit} className="login-form" id="login-form">
        <h4>{this.props.platName}</h4>
        <Form.Item>
          {getFieldDecorator('username', {
            rules: [{ required: true, message: this.props.dict['login.username.empty'] }],
            initialValue: localStorage.getItem('username') || '',
          })(
            <Input
              prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
              placeholder={this.props.dict['login.username']}
            />,
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('password', {
            initialValue: localStorage.getItem('password') || '',
            rules: [
              {
                required: true,
                message: this.props.dict['login.password.empty'],
              }
            ]
          })(<Input.Password placeholder={this.props.dict['login.password']} prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} />)}
        </Form.Item>
        <Form.Item className="minline">
          {getFieldDecorator('remember', {
            valuePropName: 'checked',
            initialValue: true,
          })(<Checkbox>{this.props.dict['login.remember']}</Checkbox>)}
        </Form.Item>
        <Form.Item className="minline right">
          {getFieldDecorator('lang', {
            initialValue: this.props.lang,
          })(
            <Select
              onChange={(value) => {this.changelang(value)}}
              getPopupContainer={() => document.getElementById('login-form')}
            >
              <Select.Option value="zh-CN">中文简体</Select.Option>
              <Select.Option value="en-US">English</Select.Option>
            </Select>
          )}
        </Form.Item>
        <Form.Item className="btn-login">
          <Button type="primary" htmlType="submit" className="login-form-button" disabled={this.props.isDisabled} loading={this.props.isDisabled}>
            {this.props.dict['login.submit']}
          </Button>
        </Form.Item>
      </Form>
    )
  }
}
 
export default Form.create()(MainSearch)