From edfa49f201d3fc8fc6b51b700e91f80246660855 Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期二, 13 二月 2024 20:29:14 +0800
Subject: [PATCH] #
---
zy-asrs-flow/src/pages/User/Login/index.jsx | 648 +++++++++++++++++++++++++++++-----------------------------
1 files changed, 323 insertions(+), 325 deletions(-)
diff --git a/zy-asrs-flow/src/pages/User/Login/index.jsx b/zy-asrs-flow/src/pages/User/Login/index.jsx
index 93bb913..632355e 100644
--- a/zy-asrs-flow/src/pages/User/Login/index.jsx
+++ b/zy-asrs-flow/src/pages/User/Login/index.jsx
@@ -2,360 +2,358 @@
import { login } from '@/services/ant-design-pro/api';
import { getFakeCaptcha } from '@/services/ant-design-pro/login';
import {
- LockOutlined,
- MobileOutlined,
- UserOutlined,
+ LockOutlined,
+ MobileOutlined,
+ UserOutlined,
} from '@ant-design/icons';
import {
- LoginForm,
- ProFormCaptcha,
- ProFormCheckbox,
- ProFormText,
+ LoginForm,
+ ProFormCaptcha,
+ ProFormCheckbox,
+ ProFormText,
} from '@ant-design/pro-components';
import { FormattedMessage, history, SelectLang, useIntl, useModel, Helmet } from '@umijs/max';
import { Alert, message, Tabs } from 'antd';
-import Settings from '../../../../config/defaultSettings';
import React, { useState } from 'react';
import { flushSync } from 'react-dom';
import { createStyles } from 'antd-style';
import { request } from '@umijs/max';
import { setToken } from '@/utils/token-util'
+import { PROJECT_NAME } from '@/config/setting'
const useStyles = createStyles(({ token }) => {
- return {
- action: {
- marginLeft: '8px',
- color: 'rgba(0, 0, 0, 0.2)',
- fontSize: '24px',
- verticalAlign: 'middle',
- cursor: 'pointer',
- transition: 'color 0.3s',
- '&:hover': {
- color: token.colorPrimaryActive,
- },
- },
- lang: {
- width: 42,
- height: 42,
- lineHeight: '42px',
- position: 'fixed',
- right: 16,
- borderRadius: token.borderRadius,
- ':hover': {
- backgroundColor: token.colorBgTextHover,
- },
- },
- container: {
- display: 'flex',
- flexDirection: 'column',
- height: '100vh',
- overflow: 'auto',
- backgroundImage:
- "url('https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/V-_oS6r-i7wAAAAAAAAAAAAAFl94AQBr')",
- backgroundSize: '100% 100%',
- },
- };
+ return {
+ action: {
+ marginLeft: '8px',
+ color: 'rgba(0, 0, 0, 0.2)',
+ fontSize: '24px',
+ verticalAlign: 'middle',
+ cursor: 'pointer',
+ transition: 'color 0.3s',
+ '&:hover': {
+ color: token.colorPrimaryActive,
+ },
+ },
+ lang: {
+ width: 42,
+ height: 42,
+ lineHeight: '42px',
+ position: 'fixed',
+ right: 16,
+ borderRadius: token.borderRadius,
+ ':hover': {
+ backgroundColor: token.colorBgTextHover,
+ },
+ },
+ container: {
+ display: 'flex',
+ flexDirection: 'column',
+ height: '100vh',
+ overflow: 'auto',
+ backgroundImage:
+ "url('https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/V-_oS6r-i7wAAAAAAAAAAAAAFl94AQBr')",
+ backgroundSize: '100% 100%',
+ },
+ };
});
const Lang = () => {
- const { styles } = useStyles();
+ const { styles } = useStyles();
- return (
- <div className={styles.lang} data-lang>
- {SelectLang && <SelectLang />}
- </div>
- );
+ return (
+ <div className={styles.lang} data-lang>
+ {SelectLang && <SelectLang />}
+ </div>
+ );
};
const LoginMessage = ({ content }) => {
- return (
- <Alert
- style={{
- marginBottom: 24,
- }}
- message={content}
- type="error"
- showIcon
- />
- );
+ return (
+ <Alert
+ style={{
+ marginBottom: 24,
+ }}
+ message={content}
+ type="error"
+ showIcon
+ />
+ );
};
const Login = () => {
- const [userLoginState, setUserLoginState] = useState({});
- const [type, setType] = useState('account');
- const { initialState, setInitialState } = useModel('@@initialState');
- const { styles } = useStyles();
- const intl = useIntl();
+ const [userLoginState, setUserLoginState] = useState({});
+ const [type, setType] = useState('account');
+ const { initialState, setInitialState } = useModel('@@initialState');
+ const { styles } = useStyles();
+ const intl = useIntl();
- console.log(initialState.memo);
+ console.log(initialState.memo);
- const fetchUserInfo = async () => {
- const userInfo = await initialState?.fetchUserInfo?.();
- if (userInfo) {
- flushSync(() => {
- setInitialState((s) => ({
- ...s,
- currentUser: userInfo,
- }));
- });
- }
- };
+ const fetchUserInfo = async () => {
+ const userInfo = await initialState?.fetchUserInfo?.();
+ if (userInfo) {
+ flushSync(() => {
+ setInitialState((s) => ({
+ ...s,
+ currentUser: userInfo,
+ }));
+ });
+ }
+ };
- const handleSubmit = async (values) => {
- try {
- const r = await request('/api/login', {
- baseURL: 'http://localhost:9090/wcs',
- method: 'POST',
- headers: {
- 'Content-Type': 'application/json'
- },
- data: values
- })
+ const handleSubmit = async (values) => {
+ try {
+ const r = await request('/api/login', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json'
+ },
+ data: values
+ })
- if (r.code === 200) {
- message.success(intl.formatMessage({
- id: 'pages.login.success',
- defaultMessage: '鐧诲綍鎴愬姛锛�',
- }));
- setToken(r.data.accessToken, values.autoLogin);
- await fetchUserInfo();
- const urlParams = new URL(window.location.href).searchParams;
- history.push(urlParams.get('redirect') || '/');
- return;
- }
- setUserLoginState({
- status: r.code,
- type: type,
- })
+ if (r.code === 200) {
+ message.success(intl.formatMessage({
+ id: 'pages.login.success',
+ defaultMessage: '鐧诲綍鎴愬姛锛�',
+ }));
+ setToken(r.data.accessToken, values.autoLogin);
+ await fetchUserInfo();
+ const urlParams = new URL(window.location.href).searchParams;
+ history.push(urlParams.get('redirect') || '/');
+ return;
+ }
+ setUserLoginState({
+ status: r.code,
+ type: 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();
- // const urlParams = new URL(window.location.href).searchParams;
- // history.push(urlParams.get('redirect') || '/');
- // return;
- // }
- // // 濡傛灉澶辫触鍘昏缃敤鎴烽敊璇俊鎭�
- // setUserLoginState(msg);
- } catch (error) {
- console.log(error);
- message.error(intl.formatMessage({
- id: 'pages.login.failure',
- defaultMessage: '鐧诲綍澶辫触锛岃閲嶈瘯锛�',
- }));
- }
- };
- const { status, type: loginType } = userLoginState;
+ // 鐧诲綍
+ // const msg = await login({ ...values, type });
+ // if (msg.status === 'ok') {
+ // const defaultLoginSuccessMessage = intl.formatMessage({
+ // id: 'pages.login.success',
+ // defaultMessage: '鐧诲綍鎴愬姛锛�',
+ // });
+ // message.success(defaultLoginSuccessMessage);
+ // await fetchUserInfo();
+ // const urlParams = new URL(window.location.href).searchParams;
+ // history.push(urlParams.get('redirect') || '/');
+ // return;
+ // }
+ // // 濡傛灉澶辫触鍘昏缃敤鎴烽敊璇俊鎭�
+ // setUserLoginState(msg);
+ } catch (error) {
+ console.log(error);
+ message.error(intl.formatMessage({
+ id: 'pages.login.failure',
+ defaultMessage: '鐧诲綍澶辫触锛岃閲嶈瘯锛�',
+ }));
+ }
+ };
+ const { status, type: loginType } = userLoginState;
+ return (
+ <div className={styles.container}>
+ <Helmet>
+ <title>
+ {intl.formatMessage({
+ id: 'menu.login',
+ defaultMessage: '鐧诲綍椤�',
+ })}
+ - {PROJECT_NAME}
+ </title>
+ </Helmet>
+ <Lang />
+ <div style={{ flex: '1', padding: '32px 0', }} >
+ <LoginForm
+ contentStyle={{
+ minWidth: 280,
+ maxWidth: '75vw',
+ }}
+ logo={<img alt="logo" src="/logo.svg" />}
+ title="Ant Design"
+ subTitle={intl.formatMessage({ id: 'pages.layouts.userLayout.title' })}
+ initialValues={{
+ autoLogin: true,
+ }}
+ onFinish={async (values) => {
+ await handleSubmit(values);
+ }}
+ >
+ <Tabs
+ activeKey={type}
+ onChange={setType}
+ centered
+ items={[
+ {
+ key: 'account',
+ label: intl.formatMessage({
+ id: 'pages.login.accountLogin.tab',
+ defaultMessage: '璐︽埛瀵嗙爜鐧诲綍',
+ }),
+ },
+ {
+ key: 'mobile',
+ label: intl.formatMessage({
+ id: 'pages.login.phoneLogin.tab',
+ defaultMessage: '鎵嬫満鍙风櫥褰�',
+ }),
+ },
+ ]}
+ />
- return (
- <div className={styles.container}>
- <Helmet>
- <title>
- {intl.formatMessage({
- id: 'menu.login',
- defaultMessage: '鐧诲綍椤�',
- })}
- - {Settings.title}
- </title>
- </Helmet>
- <Lang />
- <div style={{ flex: '1', padding: '32px 0', }} >
- <LoginForm
- contentStyle={{
- minWidth: 280,
- maxWidth: '75vw',
- }}
- logo={<img alt="logo" src="/logo.svg" />}
- title="Ant Design"
- subTitle={intl.formatMessage({ id: 'pages.layouts.userLayout.title' })}
- initialValues={{
- autoLogin: true,
- }}
- onFinish={async (values) => {
- await handleSubmit(values);
- }}
- >
- <Tabs
- activeKey={type}
- onChange={setType}
- centered
- items={[
- {
- key: 'account',
- label: intl.formatMessage({
- id: 'pages.login.accountLogin.tab',
- defaultMessage: '璐︽埛瀵嗙爜鐧诲綍',
- }),
- },
- {
- key: 'mobile',
- label: intl.formatMessage({
- id: 'pages.login.phoneLogin.tab',
- defaultMessage: '鎵嬫満鍙风櫥褰�',
- }),
- },
- ]}
- />
+ {status !== 200 && loginType === 'account' && (
+ <LoginMessage
+ content={intl.formatMessage({
+ id: 'pages.login.accountLogin.errorMessage',
+ defaultMessage: '璐︽埛鎴栧瘑鐮侀敊璇�',
+ })}
+ />
+ )}
+ {type === 'account' && (
+ <>
+ <ProFormText
+ name="username"
+ fieldProps={{
+ size: 'large',
+ prefix: <UserOutlined />,
+ }}
+ placeholder={intl.formatMessage({
+ id: 'pages.login.username.placeholder',
+ defaultMessage: '鐢ㄦ埛鍚�:',
+ })}
+ rules={[
+ {
+ required: true,
+ message: (
+ <FormattedMessage
+ id="pages.login.username.required"
+ defaultMessage="璇疯緭鍏ョ敤鎴峰悕!"
+ />
+ ),
+ },
+ ]}
+ />
+ <ProFormText.Password
+ name="password"
+ fieldProps={{
+ size: 'large',
+ prefix: <LockOutlined />,
+ }}
+ placeholder={intl.formatMessage({
+ id: 'pages.login.password.placeholder',
+ defaultMessage: '瀵嗙爜:',
+ })}
+ rules={[
+ {
+ required: true,
+ message: (
+ <FormattedMessage
+ id="pages.login.password.required"
+ defaultMessage="璇疯緭鍏ュ瘑鐮侊紒"
+ />
+ ),
+ },
+ ]}
+ />
+ </>
+ )}
- {status !== 200 && loginType === 'account' && (
- <LoginMessage
- content={intl.formatMessage({
- id: 'pages.login.accountLogin.errorMessage',
- defaultMessage: '璐︽埛鎴栧瘑鐮侀敊璇�',
- })}
- />
- )}
- {type === 'account' && (
- <>
- <ProFormText
- name="username"
- fieldProps={{
- size: 'large',
- prefix: <UserOutlined />,
- }}
- placeholder={intl.formatMessage({
- id: 'pages.login.username.placeholder',
- defaultMessage: '鐢ㄦ埛鍚�:',
- })}
- rules={[
- {
- required: true,
- message: (
- <FormattedMessage
- id="pages.login.username.required"
- defaultMessage="璇疯緭鍏ョ敤鎴峰悕!"
- />
- ),
- },
- ]}
- />
- <ProFormText.Password
- name="password"
- fieldProps={{
- size: 'large',
- prefix: <LockOutlined />,
- }}
- placeholder={intl.formatMessage({
- id: 'pages.login.password.placeholder',
- defaultMessage: '瀵嗙爜:',
- })}
- rules={[
- {
- required: true,
- message: (
- <FormattedMessage
- id="pages.login.password.required"
- defaultMessage="璇疯緭鍏ュ瘑鐮侊紒"
- />
- ),
- },
- ]}
- />
- </>
- )}
-
- {status !== 200 && loginType === 'mobile' && <LoginMessage content="楠岃瘉鐮侀敊璇�" />}
- {type === 'mobile' && (
- <>
- <ProFormText
- fieldProps={{
- size: 'large',
- prefix: <MobileOutlined />,
- }}
- 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 />,
- }}
- 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) {
- return;
- }
- message.success('鑾峰彇楠岃瘉鐮佹垚鍔燂紒楠岃瘉鐮佷负锛�1234');
- }}
- />
- </>
- )}
- <div
- style={{
- marginBottom: 24,
- }}
- >
- <ProFormCheckbox noStyle name="autoLogin">
- <FormattedMessage id="pages.login.rememberMe" defaultMessage="鑷姩鐧诲綍" />
- </ProFormCheckbox>
- </div>
- </LoginForm>
- </div>
- <Footer />
- </div>
- );
+ {status !== 200 && loginType === 'mobile' && <LoginMessage content="楠岃瘉鐮侀敊璇�" />}
+ {type === 'mobile' && (
+ <>
+ <ProFormText
+ fieldProps={{
+ size: 'large',
+ prefix: <MobileOutlined />,
+ }}
+ 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 />,
+ }}
+ 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) {
+ return;
+ }
+ message.success('鑾峰彇楠岃瘉鐮佹垚鍔燂紒楠岃瘉鐮佷负锛�1234');
+ }}
+ />
+ </>
+ )}
+ <div
+ style={{
+ marginBottom: 24,
+ }}
+ >
+ <ProFormCheckbox noStyle name="autoLogin">
+ <FormattedMessage id="pages.login.rememberMe" defaultMessage="鑷姩鐧诲綍" />
+ </ProFormCheckbox>
+ </div>
+ </LoginForm>
+ </div>
+ <Footer />
+ </div>
+ );
};
export default Login;
--
Gitblit v1.9.1