management/src/pages/Login/index.tsx

import logo from '@/assets/img/loginlogo.png'
import { userStore } from '@/store/mobx'
import { iFromValues, iLoginProps, iRetrieveFormProps } from '@/types/login'
import consts from '@/utils/consts'
import { Button, Form, Input, Modal } from 'antd'
import React, { useState } from 'react'
import { RouteComponentProps, withRouter } from 'react-router-dom'
import { apiProject } from "./api"
import styles from './index.module.scss'
import QueueAnim from 'rc-queue-anim'
import './index.scss'
// 正常登录Form表单
const initLoginState = {
  projectInfo: '',
  projectCode: '',
  visible: false,
  user: userStore.userInfo
}

type iState = typeof initLoginState
const NormalLoginForm: React.FC<iLoginProps> = () => {

  const [ state, setState ] = useState<iState>(initLoginState)
  const onFinish = (values: iFromValues) => {
    userStore.login(values)
  }


  const handleProjectCode = async (e: any) => {
    const projectCode = e.target?.value
    const { code = -1, data = [] } = await apiProject(projectCode)
    if (code === consts.RET_CODE.SUCCESS) {
      if (data.length && data[0].name) {
        setState({ ...state, projectInfo: data[0].name })
      }
    }

  }

  const setVisible = (label: boolean) => {
    setState({ ...state, visible: label })
  }

  const handleForgetPsw = () => {
    setState({ ...state, visible: !state.visible })
  }

  return (
    <Form
      name="normal_login"
      className={styles.loginForm}
      // initialValues={{ password: '123456', code : '234' }}
      onFinish={onFinish}
    >
      <h4>纵横工程建设项目管理系统</h4>
      <h5 className={[ 'project-title' ].join(' ')} >{state.projectInfo}</h5>

      <QueueAnim >
        <div key="code">
          <Form.Item
            name="code"
            rules={[ { required: true, message: '请输入项目编号!' } ]}
          >
            <Input placeholder="项目编号" onChange={handleProjectCode} />
          </Form.Item>
        </div>
        <div key="account">
          <Form.Item
            name="account"
            rules={[ { required: true, message: '请输入账号!' } ]}
          >
            <Input placeholder="登录账号" />
          </Form.Item>

        </div>
        <div key="password">
          <Form.Item
            name="password"
            rules={[ { required: true, message: '请输入密码!' } ]}
          >
            <Input.Password type="password" placeholder="密码" />
          </Form.Item>

        </div>

        <div key="button">
          <Form.Item>
            <Button type="primary" htmlType="submit">登录</Button>
          </Form.Item>

        </div>

        {/* <div className={styles.textRight}>
            <span onClick={this.handleForgetPsw}>忘记密码?</span>
          </div> */}
        {/* <RetrieveForm visible={state.visible} setVisible={setVisible} /> */}

      </QueueAnim>
    </Form>
  )
}

// 找回密码Form表单
const RetrieveForm: React.FC<iRetrieveFormProps> = ({ visible, setVisible }) => {
  const handleOk = () => {
    console.log('ok')

  }
  const handleCancel = () => {
    console.log('cancel')
    setVisible(!visible)
  }
  return (
    <Modal
      title="找回密码"
      visible={visible}
      onOk={handleOk}
      onCancel={handleCancel}
      cancelText="取消"
      closable={false}
      okText="重置密码"
    />
  )
}

const Login = (props: RouteComponentProps) => {
  const { history } = props
  return (
    <div className="login-container">
      <div className="login-content">
        <div className="form-sign pi-flex pi-flex-row">
          <div className="pi-flex-sub">
            <img src={logo} />
          </div>
          <div className="pi-flex-sub">
            <NormalLoginForm history={history} />
          </div>
        </div>
        <footer>
          <p className="mb-1">Copyright © 2019 <a href="https://smartcost.com.cn">珠海纵横创新软件有限公司</a>.All Rights Reserved.<a className="mb-2" href="http://www.miitbeian.gov.cn">粤ICP备14032472号</a></p>
        </footer>
      </div>
    </div>
  )
}

export default withRouter(Login)