ttk-app-core/src/apps/portal/app-login/components/loginForm.js

@ttk/recat enterprise develop framework

import React, { useCallback, useState, useEffect } from 'react'
import { useDispatch } from 'react-redux'
import { Spin, Radio, Modal, Button, Form, Icon, Input, Checkbox, Divider, Row, Col, Message } from 'antd'
import { Link } from '@ttk/router'
import { useActions, useData } from '@ttk/app-loader'
import { fetch } from '@ttk/utils'
import { clearUserInfo } from '@/apps/portal/app-root/action'

export default function LoginForm(props) {
  const dispatch = useDispatch()
  const validateState = useData([props, 'validateState']).toJS()
  const formObj = useData([props, 'attributeForm']).toJS()
  // const { getFieldDecorator } = props.form
  const [loading, setLoading] = useState(false)
  const [showModal, setShowModal] = useState(false)
  const [visibleConfirmLogin, setVisibleConfirmLogin] = useState(false)
  const [systems, setSystems] = useState([])
  const [selectValue, setSelectValue] = useState(null)
  const [loginId, setLoginId] = useState(null)
  const actions = useActions(props)
  // 定义form表单字段，用于清除重置时回显和首次校验
  const formData = {
    username: null,
    password: null
  }

  // 初始化
  useEffect(() => {
    actions.initForm(formData)
  }, [])

  const handleSubmit = useCallback(event => {
    event.preventDefault()
    async function asyncFun() {
      setLoading(true)
      const res = await actions.loginAction(formObj)
      setLoading(false)
      // 如果是一个数组，用户需要在再选择登陆哪个平台
      if (res && res.loginId && Array.isArray(res.secInnerAccountDTOS)) {
        setLoginId(res.loginId)
        setSystems(res.secInnerAccountDTOS)
        setShowModal(true)
      } else {
        props.history.replace('/app-root/layout')
      }
    }
    async function validate() {
      let { form } = props;
      const result = await actions.updateFormObj()
      if (!result) return;
      asyncFun()
    }
    validate()
    // props.form.validateFields(async (err, values) => {
    //   if (!err) {
    //     setLoading(true)
    //     const res = await actions.loginAction(values)
    //     setLoading(false)
    //     // 如果是一个数组，用户需要在再选择登陆哪个平台
    //     if (res && res.loginId && Array.isArray(res.secInnerAccountDTOS)) {
    //       setLoginId(res.loginId)
    //       setSystems(res.secInnerAccountDTOS)
    //       setShowModal(true)
    //     } else {
    //       props.history.replace('/app-root/layout')
    //     }
    //   }
    // });
  }, [formObj])

  const onChange = useCallback(event => {
    setSelectValue(event.target.value)
  })

  const handleOk = useCallback(async (event) => {
    setLoading(true)
    const param = { depId: selectValue, loginId }
    await actions.loginAction(param)
    setLoading(false)
    props.history.push('/app-root/layout')
  })

  const handleCancel = useCallback(event => {
    setShowModal(false)
  })

  const cancelLogin = useCallback(event => {
    setVisibleConfirmLogin(false)
    props.history.goBack()
  })

  const confirmLogin = useCallback(event => {
    setVisibleConfirmLogin(false)
    dispatch(clearUserInfo())
  })

  useEffect(() => {
    const token = fetch.getAccessToken()
    if (token !== undefined && token.length > 0)
      setVisibleConfirmLogin(true)
  }, [])

  // 更新表单方法
  const updateForm = useCallback((e) => {
    console.log(1111, e);
    async function asyncFun(arges) {
      await actions.updateFormObj(e)
    }
    asyncFun(e)
  }, [])

  // form的验证规则可参考：https://github.com/yiminghe/async-validator
  return (
    <div className="login-form">
      <Spin tip="Loading..." spinning={loading}>
        <Form onSubmit={handleSubmit}>
          <Form.Item
            required={true}
            validateStatus={validateState.username.state}
            help={validateState.username.message}>
            <Input
              prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
              placeholder="用户名为：user" value={formObj.username} onChange={e => updateForm({ username: e.target.value })} />
            {/* {getFieldDecorator('username', {
              rules: [{
                type: 'string', required: true, message: '请输入登录名！'
              }, {
                min: 5, max: 24, message: '用户名长度应在5-24位。'
              }],
            })(
              <Input
                prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                placeholder="用户名为：user"
              />,
            )} */}
          </Form.Item>
          <Form.Item
            required={true}
            validateStatus={validateState.password.state}
            help={validateState.password.message}>
            <Input
              prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
              type="password"
              placeholder="密码为：user"
              value={formObj.password}
              onChange={e => updateForm({ password: e.target.value })}
            />
            {/* {getFieldDecorator('password', {
              rules: [{
                required: true, message: '请输入你的密码！'
              }, {
                type: 'string', min: 5, max: 24, message: '用户密码长度应该是5至24位。'
              }],
            })(
              <Input
                prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                type="password"
                placeholder="密码为：user"
                value={formObj.username} 
                onChange={e => updateForm({ name: e.target.value })}
              />,
            )} */}
          </Form.Item>
          <Form.Item>
            <Button style={{ width: '100%' }} type="primary" htmlType="submit" className="login-form-button">
              Log in
            </Button>
            <br />
            <Row>
              <Col span={12}>
                <Checkbox
                  checked={!!formObj.remember}
                  onChange={e => updateForm({ remember: e.target.checked })}>
                  一周内自动登录
                </Checkbox>
              </Col>
              <Col style={{ textAlign: "right" }} span={12}>
                <Link className="login-form-forgot" to="">
                  忘记密码
                </Link>
                <Divider type="vertical" /> <Link to="/app-root/app-registry">立即注册</Link>
              </Col>
            </Row>
          </Form.Item>
        </Form>
      </Spin>
      <Modal
        visible={visibleConfirmLogin}
        title="登录确认"
        centered
        onCancel={cancelLogin}
        onOk={confirmLogin}
      >
        您已经登录系统，是否重新登录？
      </Modal>
      <Modal
        title="请选择登录的系统"
        centered
        visible={showModal}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <Radio.Group onChange={onChange}>
          {
            systems && systems.map((item, index) => {
              return <Radio style={{ display: 'block' }} key={index} value={item.depId} >{item.depName}</Radio>
            })
          }
        </Radio.Group>
      </Modal>
    </div>
  )
}