From c635d78b479510ebe2556a420948effcd30a0731 Mon Sep 17 00:00:00 2001 From: skyouc Date: 星期六, 21 十二月 2024 18:40:43 +0800 Subject: [PATCH] 新建德森项目分支 --- zy-asrs-flow/src/pages/User/Login/index0.jsx | 718 +++++++++++++++++++++++++++++----------------------------- 1 files changed, 359 insertions(+), 359 deletions(-) diff --git a/zy-asrs-flow/src/pages/User/Login/index0.jsx b/zy-asrs-flow/src/pages/User/Login/index0.jsx index 235e7aa..8a7ad2c 100644 --- a/zy-asrs-flow/src/pages/User/Login/index0.jsx +++ b/zy-asrs-flow/src/pages/User/Login/index0.jsx @@ -1,359 +1,359 @@ -import { Footer } from '@/components'; -import { login } from '@/services/ant-design-pro/api'; -import { getFakeCaptcha } from '@/services/ant-design-pro/login'; -import { - LockOutlined, - MobileOutlined, - UserOutlined, -} from '@ant-design/icons'; -import { - 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 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%', - }, - }; -}); - -const Lang = () => { - const { styles } = useStyles(); - - return ( - <div className={styles.lang} data-lang> - {SelectLang && <SelectLang />} - </div> - ); -}; - -const LoginMessage = ({ content }) => { - 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(); - - console.log(initialState.memo); - - 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', { - 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, - }) - - // 鐧诲綍 - // 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: '鎵嬫満鍙风櫥褰�', - }), - }, - ]} - /> - - {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> - ); -}; - -export default Login; +import { Footer } from '@/components'; +import { login } from '@/services/ant-design-pro/api'; +import { getFakeCaptcha } from '@/services/ant-design-pro/login'; +import { + LockOutlined, + MobileOutlined, + UserOutlined, +} from '@ant-design/icons'; +import { + 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 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%', + }, + }; +}); + +const Lang = () => { + const { styles } = useStyles(); + + return ( + <div className={styles.lang} data-lang> + {SelectLang && <SelectLang />} + </div> + ); +}; + +const LoginMessage = ({ content }) => { + 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(); + + console.log(initialState.memo); + + 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', { + 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, + }) + + // 鐧诲綍 + // 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: '鎵嬫満鍙风櫥褰�', + }), + }, + ]} + /> + + {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> + ); +}; + +export default Login; -- Gitblit v1.9.1