|
|
@@ -1,8 +1,12 @@
|
|
|
import logo from '@/assets/img/loginlogo.png'
|
|
|
+import { initUserState, updateUserInfo } from '@/store/modules/user'
|
|
|
+import { iUserInfo } from '@/store/modules/user/types'
|
|
|
+import { RootState } from '@/store/reducers'
|
|
|
import { iFromValues, iLoginProps, iRetrieveFormProps } from '@/types/login'
|
|
|
import consts from '@/utils/consts'
|
|
|
import { Button, Form, Input, Modal } from 'antd'
|
|
|
-import React, { useEffect, useState } from 'react'
|
|
|
+import React, { Component } from 'react'
|
|
|
+import { connect } from 'react-redux'
|
|
|
import { RouteComponentProps, withRouter } from 'react-router-dom'
|
|
|
import { apiLogin, apiProject } from "./api"
|
|
|
import styles from './index.module.scss'
|
|
|
@@ -14,87 +18,191 @@ interface iProjectInfo {
|
|
|
code?: number
|
|
|
name?: string
|
|
|
}
|
|
|
-const NormalLoginForm:React.FC<iLoginProps> = ({ history }) => {
|
|
|
- let timer: any = null
|
|
|
- const [ projectInfo, setProjectInfo ] = useState('')
|
|
|
- const [ visible, setVisible ] = useState(false)
|
|
|
- const [ projectAnimation, setProjectAnimation ] = useState(false) // 控制project-title的动画显示
|
|
|
- const onFinish = async (values: iFromValues) => {
|
|
|
+
|
|
|
+const initLoginState = {
|
|
|
+ projectInfo: '',
|
|
|
+ projectCode: '',
|
|
|
+ visible: false,
|
|
|
+ user: initUserState
|
|
|
+}
|
|
|
+type iState = typeof initLoginState
|
|
|
+const mapStateToProps = (state: RootState) => {
|
|
|
+ return {}
|
|
|
+}
|
|
|
+const mapDispathToProps = {
|
|
|
+ saveUser: (user: iUserInfo) => {
|
|
|
+ return updateUserInfo(user)
|
|
|
+ }
|
|
|
+}
|
|
|
+// @ts-ignore
|
|
|
+@connect(mapStateToProps, mapDispathToProps)
|
|
|
+class NormalLoginForm extends Component<Partial<iLoginProps>, iState> {
|
|
|
+
|
|
|
+ constructor(props: iLoginProps) {
|
|
|
+ super(props)
|
|
|
+ this.state = initLoginState
|
|
|
+ }
|
|
|
+ onFinish = async (values: iFromValues) => {
|
|
|
const { code = -1, data } = await apiLogin(values)
|
|
|
if (code === consts.RET_CODE.SUCCESS) {
|
|
|
- // store.dispatch({ type: SAVE_USER_INFO, payload: data })
|
|
|
- // store.dispatch({ type: SAVE_PERMISSION, payload: { isLogin: true, permission: data.Role } })
|
|
|
- history.push('/')
|
|
|
+ this.setState({ user: data })
|
|
|
+ this.props.history!.push('/')
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- const handleProjectCode = (e: any) => {
|
|
|
- if (timer) clearTimeout(timer)
|
|
|
+ componentWillUnmount() {
|
|
|
+ this.props.saveUser(this.state.user)
|
|
|
+ }
|
|
|
+ handleProjectCode = async (e: any) => {
|
|
|
+ console.log(this.props)
|
|
|
+
|
|
|
const projectCode = e.target?.value
|
|
|
- !projectCode && (setProjectInfo(''))
|
|
|
- timer = setTimeout(() => {
|
|
|
- projectCode && apiProject(projectCode).then(({ code = -1, data }) => {
|
|
|
- if (code === consts.RET_CODE.SUCCESS) {
|
|
|
- if (data.length) {
|
|
|
- const project: iProjectInfo = data[0]
|
|
|
- project.name && setProjectInfo(project.name)
|
|
|
- } else {
|
|
|
- setProjectInfo('')
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
- }, 300)
|
|
|
+ const { code = -1, data = [] } = await apiProject(projectCode)
|
|
|
+ if (code === consts.RET_CODE.SUCCESS) {
|
|
|
+ if (data.length && data[0].name) {
|
|
|
+ this.setState({ projectInfo: data[0].name })
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
}
|
|
|
- const handleForgetPsw = () => {
|
|
|
- setVisible(!visible)
|
|
|
+ setVisible = (label: boolean) => {
|
|
|
+ this.setState({ visible: label })
|
|
|
}
|
|
|
|
|
|
-useEffect(() => {
|
|
|
- if (projectInfo) {
|
|
|
- setProjectAnimation(false)
|
|
|
- } else {
|
|
|
- setProjectAnimation(true)
|
|
|
+ handleForgetPsw = () => {
|
|
|
+ this.setState({ visible: !this.state.visible })
|
|
|
}
|
|
|
-}, [ projectInfo ])
|
|
|
- return (
|
|
|
- <Form
|
|
|
- name="normal_login"
|
|
|
- className={styles.loginForm}
|
|
|
- initialValues={{ remember: true }}
|
|
|
- onFinish={onFinish}
|
|
|
- >
|
|
|
- <h4>纵横工程建设项目管理系统</h4>
|
|
|
- <h5 className={[ 'project-title', projectAnimation ? 'scale-out-ver-bottom' : 'scale-in-ver-bottom' ].join(' ')} >{projectInfo}</h5>
|
|
|
- <Form.Item
|
|
|
- name="code"
|
|
|
- rules={[ { required: true, message: 'Please input your Project!' } ]}
|
|
|
- >
|
|
|
- <Input placeholder="项目编号" onChange={handleProjectCode}/>
|
|
|
- </Form.Item>
|
|
|
- <Form.Item
|
|
|
- name="account"
|
|
|
- rules={[ { required: true, message: 'Please input your Account!' } ]}
|
|
|
- >
|
|
|
- <Input placeholder="登录账号" />
|
|
|
- </Form.Item>
|
|
|
- <Form.Item
|
|
|
- name="password"
|
|
|
- rules={[ { required: true, message: 'Please input your Password!' } ]}
|
|
|
+
|
|
|
+ render() {
|
|
|
+ const { projectInfo } = this.state
|
|
|
+ return (
|
|
|
+ <Form
|
|
|
+ name="normal_login"
|
|
|
+ className={styles.loginForm}
|
|
|
+ initialValues={{ remember: true }}
|
|
|
+ onFinish={this.onFinish}
|
|
|
>
|
|
|
- <Input.Password type="password" placeholder="密码"
|
|
|
- />
|
|
|
- </Form.Item>
|
|
|
-
|
|
|
- <Form.Item>
|
|
|
- <Button type="primary" htmlType="submit">登录</Button>
|
|
|
- </Form.Item>
|
|
|
- <div className={styles.textRight}>
|
|
|
- <span onClick={handleForgetPsw}>忘记密码?</span>
|
|
|
- </div>
|
|
|
- <RetrieveForm visible={visible} setVisible={setVisible}></RetrieveForm>
|
|
|
- </Form>
|
|
|
- )
|
|
|
+ <h4>纵横工程建设项目管理系统</h4>
|
|
|
+ <h5 className={[ 'project-title' ].join(' ')} >{projectInfo}</h5>
|
|
|
+ <Form.Item
|
|
|
+ name="code"
|
|
|
+ rules={[ { required: true, message: 'Please input your Project!' } ]}
|
|
|
+ >
|
|
|
+ <Input placeholder="项目编号" onChange={this.handleProjectCode}/>
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item
|
|
|
+ name="account"
|
|
|
+ rules={[ { required: true, message: 'Please input your Account!' } ]}
|
|
|
+ >
|
|
|
+ <Input placeholder="登录账号" />
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item
|
|
|
+ name="password"
|
|
|
+ rules={[ { required: true, message: 'Please input your Password!' } ]}
|
|
|
+ >
|
|
|
+ <Input.Password type="password" placeholder="密码"
|
|
|
+ />
|
|
|
+ </Form.Item>
|
|
|
+
|
|
|
+ <Form.Item>
|
|
|
+ <Button type="primary" htmlType="submit">登录</Button>
|
|
|
+ </Form.Item>
|
|
|
+ <div className={styles.textRight}>
|
|
|
+ <span onClick={this.handleForgetPsw}>忘记密码?</span>
|
|
|
+ </div>
|
|
|
+ <RetrieveForm visible={this.state.visible} setVisible={this.setVisible}></RetrieveForm>
|
|
|
+ </Form>
|
|
|
+ )
|
|
|
+ }
|
|
|
}
|
|
|
+// const NormalLoginForm:React.FC<iLoginProps> = ({ history }) => {
|
|
|
+// let timer: any = null
|
|
|
+// const [ projectInfo, setProjectInfo ] = useState('')
|
|
|
+// const [ visible, setVisible ] = useState(false)
|
|
|
+// const [ user, setUser ] = useState(initUserState.userInfo)
|
|
|
+// const [ projectAnimation, setProjectAnimation ] = useState(false) // 控制project-title的动画显示
|
|
|
+// const onFinish = async (values: iFromValues) => {
|
|
|
+// const { code = -1, data } = await apiLogin(values)
|
|
|
+// if (code === consts.RET_CODE.SUCCESS) {
|
|
|
+// console.log('data', data)
|
|
|
+
|
|
|
+// setUser(data)
|
|
|
+// }
|
|
|
+// }
|
|
|
+// useEffect(() => {
|
|
|
+// history.push('/')
|
|
|
+// return () => {
|
|
|
+// store.dispatch({ type: SAVE_USER_INFO, payload: user })
|
|
|
+// }
|
|
|
+// }, [ user ])
|
|
|
+// const handleProjectCode = (e: any) => {
|
|
|
+// if (timer) clearTimeout(timer)
|
|
|
+// const projectCode = e.target?.value
|
|
|
+// !projectCode && (setProjectInfo(''))
|
|
|
+// timer = setTimeout(() => {
|
|
|
+// projectCode && apiProject(projectCode).then(({ code = -1, data }) => {
|
|
|
+// if (code === consts.RET_CODE.SUCCESS) {
|
|
|
+// if (data.length) {
|
|
|
+// const project: iProjectInfo = data[0]
|
|
|
+// project.name && setProjectInfo(project.name)
|
|
|
+// } else {
|
|
|
+// setProjectInfo('')
|
|
|
+// }
|
|
|
+// }
|
|
|
+// })
|
|
|
+// }, 300)
|
|
|
+// }
|
|
|
+// const handleForgetPsw = () => {
|
|
|
+// setVisible(!visible)
|
|
|
+// }
|
|
|
+
|
|
|
+// useEffect(() => {
|
|
|
+// if (projectInfo) {
|
|
|
+// setProjectAnimation(false)
|
|
|
+// } else {
|
|
|
+// setProjectAnimation(true)
|
|
|
+// }
|
|
|
+// }, [ projectInfo ])
|
|
|
+// return (
|
|
|
+// <Form
|
|
|
+// name="normal_login"
|
|
|
+// className={styles.loginForm}
|
|
|
+// initialValues={{ remember: true }}
|
|
|
+// onFinish={onFinish}
|
|
|
+// >
|
|
|
+// <h4>纵横工程建设项目管理系统</h4>
|
|
|
+// <h5 className={[ 'project-title', projectAnimation ? 'scale-out-ver-bottom' : 'scale-in-ver-bottom' ].join(' ')} >{projectInfo}</h5>
|
|
|
+// <Form.Item
|
|
|
+// name="code"
|
|
|
+// rules={[ { required: true, message: 'Please input your Project!' } ]}
|
|
|
+// >
|
|
|
+// <Input placeholder="项目编号" onChange={handleProjectCode}/>
|
|
|
+// </Form.Item>
|
|
|
+// <Form.Item
|
|
|
+// name="account"
|
|
|
+// rules={[ { required: true, message: 'Please input your Account!' } ]}
|
|
|
+// >
|
|
|
+// <Input placeholder="登录账号" />
|
|
|
+// </Form.Item>
|
|
|
+// <Form.Item
|
|
|
+// name="password"
|
|
|
+// rules={[ { required: true, message: 'Please input your Password!' } ]}
|
|
|
+// >
|
|
|
+// <Input.Password type="password" placeholder="密码"
|
|
|
+// />
|
|
|
+// </Form.Item>
|
|
|
+
|
|
|
+// <Form.Item>
|
|
|
+// <Button type="primary" htmlType="submit">登录</Button>
|
|
|
+// </Form.Item>
|
|
|
+// <div className={styles.textRight}>
|
|
|
+// <span onClick={handleForgetPsw}>忘记密码?</span>
|
|
|
+// </div>
|
|
|
+// <RetrieveForm visible={visible} setVisible={setVisible}></RetrieveForm>
|
|
|
+// </Form>
|
|
|
+// )
|
|
|
+// }
|
|
|
|
|
|
// 找回密码Form表单
|
|
|
const RetrieveForm:React.FC<iRetrieveFormProps>= ({ visible, setVisible }) => {
|
lanjianrong