|
|
@@ -1,81 +1,72 @@
|
|
|
-import {
|
|
|
- AlipayCircleOutlined,
|
|
|
- LockOutlined,
|
|
|
- MobileOutlined,
|
|
|
- TaobaoCircleOutlined,
|
|
|
- UserOutlined,
|
|
|
- WeiboCircleOutlined,
|
|
|
-} from '@ant-design/icons';
|
|
|
-import { Alert, message, Tabs } from 'antd';
|
|
|
-import React, { useState } from 'react';
|
|
|
-import { ProFormCaptcha, ProFormCheckbox, ProFormText, LoginForm } from '@ant-design/pro-form';
|
|
|
-import { useIntl, history, FormattedMessage, SelectLang, useModel } from 'umi';
|
|
|
-import Footer from '@/components/Footer';
|
|
|
-import { login } from '@/services/ant-design-pro/api';
|
|
|
-import { getFakeCaptcha } from '@/services/ant-design-pro/login';
|
|
|
+import { LockOutlined, UserOutlined } from '@ant-design/icons'
|
|
|
+import { Alert, message, Tabs } from 'antd'
|
|
|
+import React, { useState } from 'react'
|
|
|
+import { ProFormCheckbox, ProFormText, LoginForm } from '@ant-design/pro-form'
|
|
|
+import { useIntl, history, FormattedMessage, SelectLang, useModel } from 'umi'
|
|
|
+import { login } from '@/services/ant-design-pro/api'
|
|
|
|
|
|
-import styles from './index.less';
|
|
|
+import styles from './index.less'
|
|
|
|
|
|
const LoginMessage: React.FC<{
|
|
|
- content: string;
|
|
|
+ content: string
|
|
|
}> = ({ content }) => (
|
|
|
<Alert
|
|
|
style={{
|
|
|
- marginBottom: 24,
|
|
|
+ marginBottom: 24
|
|
|
}}
|
|
|
message={content}
|
|
|
type="error"
|
|
|
showIcon
|
|
|
/>
|
|
|
-);
|
|
|
+)
|
|
|
|
|
|
const Login: React.FC = () => {
|
|
|
- const [userLoginState, setUserLoginState] = useState<API.LoginResult>({});
|
|
|
- const [type, setType] = useState<string>('account');
|
|
|
- const { initialState, setInitialState } = useModel('@@initialState');
|
|
|
+ const [userLoginState, setUserLoginState] = useState<API.LoginResult>({})
|
|
|
+ const [type, setType] = useState<string>('account')
|
|
|
+ const { initialState, setInitialState } = useModel('@@initialState')
|
|
|
|
|
|
- const intl = useIntl();
|
|
|
+ const intl = useIntl()
|
|
|
|
|
|
const fetchUserInfo = async () => {
|
|
|
- const userInfo = await initialState?.fetchUserInfo?.();
|
|
|
+ const userInfo = await initialState?.fetchUserInfo?.()
|
|
|
if (userInfo) {
|
|
|
- await setInitialState((s) => ({
|
|
|
+ await setInitialState(s => ({
|
|
|
...s,
|
|
|
- currentUser: userInfo,
|
|
|
- }));
|
|
|
+ currentUser: userInfo
|
|
|
+ }))
|
|
|
}
|
|
|
- };
|
|
|
+ }
|
|
|
|
|
|
const handleSubmit = async (values: API.LoginParams) => {
|
|
|
try {
|
|
|
// 登录
|
|
|
- const msg = await login({ ...values, type });
|
|
|
+ const msg = await login({ ...values, type })
|
|
|
if (msg.status === 'ok') {
|
|
|
const defaultLoginSuccessMessage = intl.formatMessage({
|
|
|
id: 'pages.login.success',
|
|
|
- defaultMessage: '登录成功！',
|
|
|
- });
|
|
|
- message.success(defaultLoginSuccessMessage);
|
|
|
- await fetchUserInfo();
|
|
|
+ defaultMessage: '登录成功！'
|
|
|
+ })
|
|
|
+ message.success(defaultLoginSuccessMessage)
|
|
|
+ await fetchUserInfo()
|
|
|
/** 此方法会跳转到 redirect 参数所在的位置 */
|
|
|
- if (!history) return;
|
|
|
- const { query } = history.location;
|
|
|
- const { redirect } = query as { redirect: string };
|
|
|
- history.push(redirect || '/');
|
|
|
- return;
|
|
|
+ if (!history) return
|
|
|
+ const { query } = history.location
|
|
|
+ const { redirect } = query as { redirect: string }
|
|
|
+ history.push(redirect || '/')
|
|
|
+ return
|
|
|
}
|
|
|
- console.log(msg);
|
|
|
+ console.log(msg)
|
|
|
// 如果失败去设置用户错误信息
|
|
|
- setUserLoginState(msg);
|
|
|
+ setUserLoginState(msg)
|
|
|
} catch (error) {
|
|
|
const defaultLoginFailureMessage = intl.formatMessage({
|
|
|
id: 'pages.login.failure',
|
|
|
- defaultMessage: '登录失败，请重试！',
|
|
|
- });
|
|
|
- message.error(defaultLoginFailureMessage);
|
|
|
+ defaultMessage: '登录失败，请重试！'
|
|
|
+ })
|
|
|
+ message.error(defaultLoginFailureMessage)
|
|
|
}
|
|
|
- };
|
|
|
- const { status, type: loginType } = userLoginState;
|
|
|
+ }
|
|
|
+ const { status, type: loginType } = userLoginState
|
|
|
|
|
|
return (
|
|
|
<div className={styles.container}>
|
|
|
@@ -85,23 +76,14 @@ const Login: React.FC = () => {
|
|
|
<div className={styles.content}>
|
|
|
<LoginForm
|
|
|
logo={<img alt="logo" src="/logo.svg" />}
|
|
|
- title="Ant Design"
|
|
|
+ title="财审管理系统"
|
|
|
subTitle={intl.formatMessage({ id: 'pages.layouts.userLayout.title' })}
|
|
|
initialValues={{
|
|
|
- autoLogin: true,
|
|
|
+ autoLogin: true
|
|
|
}}
|
|
|
- actions={[
|
|
|
- <FormattedMessage
|
|
|
- key="loginWith"
|
|
|
- id="pages.login.loginWith"
|
|
|
- defaultMessage="其他登录方式"
|
|
|
- />,
|
|
|
- <AlipayCircleOutlined key="AlipayCircleOutlined" className={styles.icon} />,
|
|
|
- <TaobaoCircleOutlined key="TaobaoCircleOutlined" className={styles.icon} />,
|
|
|
- <WeiboCircleOutlined key="WeiboCircleOutlined" className={styles.icon} />,
|
|
|
- ]}
|
|
|
- onFinish={async (values) => {
|
|
|
- await handleSubmit(values as API.LoginParams);
|
|
|
+ actions={[]}
|
|
|
+ onFinish={async values => {
|
|
|
+ await handleSubmit(values as API.LoginParams)
|
|
|
}}
|
|
|
>
|
|
|
<Tabs activeKey={type} onChange={setType}>
|
|
|
@@ -109,14 +91,7 @@ const Login: React.FC = () => {
|
|
|
key="account"
|
|
|
tab={intl.formatMessage({
|
|
|
id: 'pages.login.accountLogin.tab',
|
|
|
- defaultMessage: '账户密码登录',
|
|
|
- })}
|
|
|
- />
|
|
|
- <Tabs.TabPane
|
|
|
- key="mobile"
|
|
|
- tab={intl.formatMessage({
|
|
|
- id: 'pages.login.phoneLogin.tab',
|
|
|
- defaultMessage: '手机号登录',
|
|
|
+ defaultMessage: '账户密码登录'
|
|
|
})}
|
|
|
/>
|
|
|
</Tabs>
|
|
|
@@ -125,7 +100,7 @@ const Login: React.FC = () => {
|
|
|
<LoginMessage
|
|
|
content={intl.formatMessage({
|
|
|
id: 'pages.login.accountLogin.errorMessage',
|
|
|
- defaultMessage: '账户或密码错误(admin/ant.design)',
|
|
|
+ defaultMessage: '账户或密码错误(admin/ant.design)'
|
|
|
})}
|
|
|
/>
|
|
|
)}
|
|
|
@@ -135,11 +110,11 @@ const Login: React.FC = () => {
|
|
|
name="username"
|
|
|
fieldProps={{
|
|
|
size: 'large',
|
|
|
- prefix: <UserOutlined className={styles.prefixIcon} />,
|
|
|
+ prefix: <UserOutlined className={styles.prefixIcon} />
|
|
|
}}
|
|
|
placeholder={intl.formatMessage({
|
|
|
id: 'pages.login.username.placeholder',
|
|
|
- defaultMessage: '用户名: admin or user',
|
|
|
+ defaultMessage: '用户名: admin or user'
|
|
|
})}
|
|
|
rules={[
|
|
|
{
|
|
|
@@ -149,19 +124,19 @@ const Login: React.FC = () => {
|
|
|
id="pages.login.username.required"
|
|
|
defaultMessage="请输入用户名!"
|
|
|
/>
|
|
|
- ),
|
|
|
- },
|
|
|
+ )
|
|
|
+ }
|
|
|
]}
|
|
|
/>
|
|
|
<ProFormText.Password
|
|
|
name="password"
|
|
|
fieldProps={{
|
|
|
size: 'large',
|
|
|
- prefix: <LockOutlined className={styles.prefixIcon} />,
|
|
|
+ prefix: <LockOutlined className={styles.prefixIcon} />
|
|
|
}}
|
|
|
placeholder={intl.formatMessage({
|
|
|
id: 'pages.login.password.placeholder',
|
|
|
- defaultMessage: '密码: ant.design',
|
|
|
+ defaultMessage: '密码: ant.design'
|
|
|
})}
|
|
|
rules={[
|
|
|
{
|
|
|
@@ -171,98 +146,17 @@ const Login: React.FC = () => {
|
|
|
id="pages.login.password.required"
|
|
|
defaultMessage="请输入密码！"
|
|
|
/>
|
|
|
- ),
|
|
|
- },
|
|
|
+ )
|
|
|
+ }
|
|
|
]}
|
|
|
/>
|
|
|
</>
|
|
|
)}
|
|
|
|
|
|
{status === 'error' && loginType === 'mobile' && <LoginMessage content="验证码错误" />}
|
|
|
- {type === 'mobile' && (
|
|
|
- <>
|
|
|
- <ProFormText
|
|
|
- fieldProps={{
|
|
|
- size: 'large',
|
|
|
- prefix: <MobileOutlined className={styles.prefixIcon} />,
|
|
|
- }}
|
|
|
- name="mobile"
|
|
|
- placeholder={intl.formatMessage({
|
|
|
- id: 'pages.login.phoneNumber.placeholder',
|
|
|
- defaultMessage: '手机号',
|
|
|
- })}
|
|
|
- rules={[
|
|
|
- {
|
|
|
- required: true,
|
|
|
- message: (
|
|
|
- <FormattedMessage
|
|
|
- id="pages.login.phoneNumber.required"
|
|
|
- defaultMessage="请输入手机号！"
|
|
|
- />
|
|
|
- ),
|
|
|
- },
|
|
|
- {
|
|
|
- pattern: /^1\d{10}$/,
|
|
|
- message: (
|
|
|
- <FormattedMessage
|
|
|
- id="pages.login.phoneNumber.invalid"
|
|
|
- defaultMessage="手机号格式错误！"
|
|
|
- />
|
|
|
- ),
|
|
|
- },
|
|
|
- ]}
|
|
|
- />
|
|
|
- <ProFormCaptcha
|
|
|
- fieldProps={{
|
|
|
- size: 'large',
|
|
|
- prefix: <LockOutlined className={styles.prefixIcon} />,
|
|
|
- }}
|
|
|
- captchaProps={{
|
|
|
- size: 'large',
|
|
|
- }}
|
|
|
- placeholder={intl.formatMessage({
|
|
|
- id: 'pages.login.captcha.placeholder',
|
|
|
- defaultMessage: '请输入验证码',
|
|
|
- })}
|
|
|
- captchaTextRender={(timing, count) => {
|
|
|
- if (timing) {
|
|
|
- return `${count} ${intl.formatMessage({
|
|
|
- id: 'pages.getCaptchaSecondText',
|
|
|
- defaultMessage: '获取验证码',
|
|
|
- })}`;
|
|
|
- }
|
|
|
- return intl.formatMessage({
|
|
|
- id: 'pages.login.phoneLogin.getVerificationCode',
|
|
|
- defaultMessage: '获取验证码',
|
|
|
- });
|
|
|
- }}
|
|
|
- name="captcha"
|
|
|
- rules={[
|
|
|
- {
|
|
|
- required: true,
|
|
|
- message: (
|
|
|
- <FormattedMessage
|
|
|
- id="pages.login.captcha.required"
|
|
|
- defaultMessage="请输入验证码！"
|
|
|
- />
|
|
|
- ),
|
|
|
- },
|
|
|
- ]}
|
|
|
- onGetCaptcha={async (phone) => {
|
|
|
- const result = await getFakeCaptcha({
|
|
|
- phone,
|
|
|
- });
|
|
|
- if (result === false) {
|
|
|
- return;
|
|
|
- }
|
|
|
- message.success('获取验证码成功！验证码为：1234');
|
|
|
- }}
|
|
|
- />
|
|
|
- </>
|
|
|
- )}
|
|
|
<div
|
|
|
style={{
|
|
|
- marginBottom: 24,
|
|
|
+ marginBottom: 24
|
|
|
}}
|
|
|
>
|
|
|
<ProFormCheckbox noStyle name="autoLogin">
|
|
|
@@ -270,7 +164,7 @@ const Login: React.FC = () => {
|
|
|
</ProFormCheckbox>
|
|
|
<a
|
|
|
style={{
|
|
|
- float: 'right',
|
|
|
+ float: 'right'
|
|
|
}}
|
|
|
>
|
|
|
<FormattedMessage id="pages.login.forgotPassword" defaultMessage="忘记密码" />
|
|
|
@@ -278,9 +172,8 @@ const Login: React.FC = () => {
|
|
|
</div>
|
|
|
</LoginForm>
|
|
|
</div>
|
|
|
- <Footer />
|
|
|
</div>
|
|
|
- );
|
|
|
-};
|
|
|
+ )
|
|
|
+}
|
|
|
|
|
|
-export default Login;
|
|
|
+export default Login
|
