From 8b84f613172d988a2cf2092b27fcce16872ba635 Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期二, 27 二月 2024 13:29:02 +0800
Subject: [PATCH] #
---
zy-asrs-flow/src/pages/User/Setting/index.jsx | 335 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
zy-asrs-flow/src/pages/User/Setting/logo.png | 0
zy-asrs-flow/src/pages/User/Login/index.jsx | 1
3 files changed, 335 insertions(+), 1 deletions(-)
diff --git a/zy-asrs-flow/src/pages/User/Login/index.jsx b/zy-asrs-flow/src/pages/User/Login/index.jsx
index 87e97fa..c15c371 100644
--- a/zy-asrs-flow/src/pages/User/Login/index.jsx
+++ b/zy-asrs-flow/src/pages/User/Login/index.jsx
@@ -145,7 +145,6 @@
>
<LoginFormPage
form={form}
- backgroundImageUrl="https://mdn.alipayobjects.com/huamei_gcee1x/afts/img/A*y0ZTS6WLwvgAAAAAAAAAAAAADml6AQ/fmt.webp"
logo={logo}
backgroundVideoUrl="https://gw.alipayobjects.com/v/huamei_gcee1x/afts/video/jXRBRK_VAwoAAAAAAAAAAAAAK4eUAQBr"
// title="闄嗘檽娑�"
diff --git a/zy-asrs-flow/src/pages/User/Setting/index.jsx b/zy-asrs-flow/src/pages/User/Setting/index.jsx
new file mode 100644
index 0000000..87e97fa
--- /dev/null
+++ b/zy-asrs-flow/src/pages/User/Setting/index.jsx
@@ -0,0 +1,335 @@
+import {
+ LockOutlined,
+ MobileOutlined,
+ UserOutlined,
+} from '@ant-design/icons';
+import {
+ LoginFormPage,
+ ProConfigProvider,
+ ProFormCaptcha,
+ ProFormCheckbox,
+ ProFormText,
+ ProFormSelect
+} from '@ant-design/pro-components';
+import { Button, Divider, Alert, Tabs, message, theme, Form } from 'antd';
+import { useState, useEffect } from 'react';
+import { FormattedMessage, history, SelectLang, useIntl, useModel, Helmet } from '@umijs/max';
+import { flushSync } from 'react-dom';
+import { request } from '@umijs/max';
+import { setToken } from '@/utils/token-util'
+import { PROJECT_NAME } from '@/config/setting'
+import Http from '@/utils/http';
+
+import logo from './logo.png'
+
+const LoginMessage = ({ content }) => {
+ return (
+ <Alert
+ style={{
+ marginBottom: 24,
+ }}
+ message={content}
+ type="error"
+ showIcon
+ />
+ );
+};
+
+const Page = () => {
+ const intl = useIntl();
+ const { initialState, setInitialState } = useModel('@@initialState');
+ const { token } = theme.useToken();
+
+ const [form] = Form.useForm();
+ const [loginType, setLoginType] = useState('account');
+ const [status, setStatus] = useState(200);
+ const [rememberMe, setRememberMe] = useState(() => {
+ const storedValue = localStorage.getItem('rememberMe');
+ return storedValue !== null ? JSON.parse(storedValue) : true;
+ });
+ const [rememberData, setRememberData] = useState(() => {
+ const storedValue = localStorage.getItem('rememberData');
+ return storedValue !== null ? JSON.parse(storedValue) : true;
+ });
+ const [hostList, setHostList] = useState([]);
+
+ useEffect(() => {
+ form.setFieldsValue({
+ autoLogin: rememberMe
+ });
+ localStorage.setItem('rememberMe', JSON.stringify(rememberMe));
+ }, [rememberMe])
+
+ useEffect(() => {
+ form.setFieldsValue({
+ username: rememberData.username,
+ password: rememberData.password
+ });
+ localStorage.setItem('rememberData', JSON.stringify(rememberData));
+ }, [rememberData])
+
+ useEffect(() => {
+ const fetchHostList = async () => {
+ const resp = await Http.doGet('api/auth/host');
+ const list = resp.data.map(item => ({
+ label: item.name,
+ value: item.id
+ }));
+ setHostList(list);
+ if (list && list.length > 0) {
+ form.setFieldsValue({
+ hostId: list[0].value
+ });
+ }
+ }
+ fetchHostList();
+ }, []);
+
+ 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) {
+ localStorage.removeItem("rememberData");
+ if (rememberMe) {
+ setRememberData({
+ username: values.username,
+ password: values.password
+ })
+ }
+ 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;
+ }
+ setStatus(r.code);
+ } catch (error) {
+ console.log(error);
+ message.error(intl.formatMessage({
+ id: 'pages.login.failure',
+ defaultMessage: '鐧诲綍澶辫触锛岃閲嶈瘯锛�',
+ }));
+ }
+ }
+
+ return (
+ <div
+ style={{
+ backgroundColor: 'white',
+ height: '100vh',
+ }}
+ >
+ <LoginFormPage
+ form={form}
+ backgroundImageUrl="https://mdn.alipayobjects.com/huamei_gcee1x/afts/img/A*y0ZTS6WLwvgAAAAAAAAAAAAADml6AQ/fmt.webp"
+ logo={logo}
+ backgroundVideoUrl="https://gw.alipayobjects.com/v/huamei_gcee1x/afts/video/jXRBRK_VAwoAAAAAAAAAAAAAK4eUAQBr"
+ // title="闄嗘檽娑�"
+ // subTitle="闄嗘檽娑�..."
+ containerStyle={{
+ backgroundColor: 'rgba(0, 0, 0,0.65)',
+ backdropFilter: 'blur(4px)',
+ }}
+ onFinish={async (values) => {
+ await handleSubmit(values);
+ }}
+ initialValue={{
+ }}
+ >
+ <Tabs
+ centered
+ activeKey={loginType}
+ onChange={(activeKey) => setLoginType(activeKey)}
+ >
+ <Tabs.TabPane key={'account'} tab={'璐﹀彿瀵嗙爜鐧诲綍'} />
+ <Tabs.TabPane key={'phone'} tab={'鎵嬫満鍙风櫥褰�'} />
+ </Tabs>
+ {loginType === 'account' && (
+ <>
+ <ProFormSelect
+ className="centered-select"
+ name="hostId"
+ placeholder="鏈烘瀯锛�"
+ rules={[
+ {
+ required: true,
+ message: '璇烽�夋嫨鏈烘瀯!',
+ },
+ ]}
+ options={hostList}
+ />
+ <ProFormText
+ name="username"
+ fieldProps={{
+ size: 'large',
+ prefix: (
+ <UserOutlined
+ style={{
+ color: token.colorText,
+ }}
+ className={'prefixIcon'}
+ />
+ ),
+ }}
+ placeholder={'鐢ㄦ埛鍚�: '}
+ rules={[
+ {
+ required: true,
+ message: '璇疯緭鍏ョ敤鎴峰悕!',
+ },
+ ]}
+ />
+ <ProFormText.Password
+ name="password"
+ fieldProps={{
+ size: 'large',
+ prefix: (
+ <LockOutlined
+ style={{
+ color: token.colorText,
+ }}
+ className={'prefixIcon'}
+ />
+ ),
+ }}
+ placeholder={'瀵嗙爜: '}
+ rules={[
+ {
+ required: true,
+ message: '璇疯緭鍏ュ瘑鐮侊紒',
+ },
+ ]}
+ />
+ </>
+ )}
+ {status !== 200 && loginType === 'account' && (
+ <LoginMessage
+ content={'璐︽埛鎴栧瘑鐮侀敊璇�'}
+ />
+ )}
+ {loginType === 'phone' && (
+ <>
+ <ProFormSelect
+ className="centered-select"
+ name="hostId"
+ placeholder="鏈烘瀯锛�"
+ rules={[
+ {
+ required: true,
+ message: '璇烽�夋嫨鏈烘瀯!',
+ },
+ ]}
+ options={hostList}
+ />
+ <ProFormText
+ fieldProps={{
+ size: 'large',
+ prefix: (
+ <MobileOutlined
+ style={{
+ color: token.colorText,
+ }}
+ className={'prefixIcon'}
+ />
+ ),
+ }}
+ name="mobile"
+ placeholder={'鎵嬫満鍙�'}
+ rules={[
+ {
+ required: true,
+ message: '璇疯緭鍏ユ墜鏈哄彿锛�',
+ },
+ {
+ pattern: /^1\d{10}$/,
+ message: '鎵嬫満鍙锋牸寮忛敊璇紒',
+ },
+ ]}
+ />
+ <ProFormCaptcha
+ fieldProps={{
+ size: 'large',
+ prefix: (
+ <LockOutlined
+ style={{
+ color: token.colorText,
+ }}
+ className={'prefixIcon'}
+ />
+ ),
+ }}
+ captchaProps={{
+ size: 'large',
+ }}
+ placeholder={'璇疯緭鍏ラ獙璇佺爜'}
+ captchaTextRender={(timing, count) => {
+ if (timing) {
+ return `${count} ${'鑾峰彇楠岃瘉鐮�'}`;
+ }
+ return '鑾峰彇楠岃瘉鐮�';
+ }}
+ name="captcha"
+ rules={[
+ {
+ required: true,
+ message: '璇疯緭鍏ラ獙璇佺爜锛�',
+ },
+ ]}
+ onGetCaptcha={async () => {
+ // message.success('鑾峰彇楠岃瘉鐮佹垚鍔燂紒楠岃瘉鐮佷负锛�1234');
+ message.warning('鏈紑鍚墜鏈哄彿鐧诲綍! ');
+ }}
+ />
+ </>
+ )}
+ <div
+ style={{
+ marginBlockEnd: 24,
+ }}
+ >
+ <ProFormCheckbox
+ noStyle
+ name="autoLogin"
+ onChange={(e) => {
+ setRememberMe(e.target.checked);
+ }}
+ >
+ 鑷姩鐧诲綍
+ </ProFormCheckbox>
+ </div>
+ </LoginFormPage>
+ </div>
+ );
+};
+
+export default () => {
+ return (
+ <ProConfigProvider dark>
+ <Page />
+ </ProConfigProvider>
+ );
+};
diff --git a/zy-asrs-flow/src/pages/User/Setting/logo.png b/zy-asrs-flow/src/pages/User/Setting/logo.png
new file mode 100644
index 0000000..21a19b9
--- /dev/null
+++ b/zy-asrs-flow/src/pages/User/Setting/logo.png
Binary files differ
--
Gitblit v1.9.1