import { login } from './service';
|
import { sendRequest } from '@/utils/antdUtils';
|
import { LockOutlined, SafetyOutlined, UserOutlined } from '@ant-design/icons';
|
import { LoginForm, ProFormText } from '@ant-design/pro-components';
|
import { useEmotionCss } from '@ant-design/use-emotion-css';
|
import { history, SelectLang, useIntl, useModel } from '@umijs/max';
|
import { Alert, message, Space } from 'antd';
|
import CryptoJS from 'crypto-js';
|
import React, { useRef, useState } from 'react';
|
import Captcha from 'react-captcha-code';
|
import Settings from '../../../config/defaultSettings';
|
import EditPwd from './editPwd.jsx';
|
import { updatePwd } from './service.js';
|
import './style.less';
|
|
const Lang = () => {
|
const langClassName = useEmotionCss(({ token }) => {
|
return {
|
width: 42,
|
height: 42,
|
lineHeight: '42px',
|
position: 'fixed',
|
right: 16,
|
borderRadius: token.borderRadius,
|
':hover': {
|
backgroundColor: token.colorBgTextHover,
|
},
|
};
|
});
|
|
return (
|
<div className={langClassName} data-lang>
|
{SelectLang && <SelectLang />}
|
</div>
|
);
|
};
|
|
const LoginMessage: React.FC<{
|
content: string;
|
}> = ({ content }) => {
|
return (
|
<Alert
|
style={{
|
marginBottom: 24,
|
}}
|
message={content}
|
type="error"
|
showIcon
|
/>
|
);
|
};
|
|
const Login: React.FC = (props) => {
|
const [userLoginState, setUserLoginState] = useState<API.LoginResult>({});
|
const [modalVisible, handleModalVisible] = useState<Boolean>(false);
|
const [captcha, setCaptcha] = useState<String>('');
|
const captchaRef = useRef();
|
const [type, setType] = useState<string>('username');
|
const { initialState, setInitialState } = useModel('@@initialState');
|
|
const containerClassName = useEmotionCss(() => {
|
return {
|
height: '100vh',
|
overflow: 'auto',
|
};
|
});
|
|
const intl = useIntl();
|
|
const getUserInfo = async (data: any) => {
|
const defaultLoginSuccessMessage = intl.formatMessage({
|
id: 'pages.login.success',
|
defaultMessage: '登录成功！',
|
});
|
const userInfo = { userName: data.name,...data };
|
localStorage.setItem('userInfo', JSON.stringify(userInfo));
|
let permissionList: any[] = [
|
"/work_order_transaction_management/work_order_item_configuration",
|
"/work_order_transaction_management",
|
"/system_setting/role_management/edit",
|
"/work_order_transaction_management/banner_management",
|
"/work_order_transaction_management/banner_management/del",
|
"/system_setting/position_management/add",
|
"/message_notification/mark_read",
|
"/system_setting/role_management",
|
"/system_setting/unit_management/del",
|
"/system_setting/people_management/freeze",
|
"/work_order_transaction_management/problem_type_management",
|
"/system_setting/position_management/edit",
|
"/system_setting/people_management/del",
|
"/work_order_transaction_management/problem_type_management/edit",
|
"/system_setting/position_management/del",
|
"/system_setting/unit_management/edit",
|
"/system_setting/people_management/edit",
|
"/work_order_transaction_management/problem_type_management/add",
|
"/system_setting/unit_management/add",
|
"/system_setting/people_management/detail",
|
"/system_setting/role_management/detail",
|
"/system_setting/unit_management",
|
"/message_notification",
|
"/system_setting/role_management/add",
|
"/work_order_transaction_management/banner_management/edit",
|
"/system_setting/role_management/del",
|
"/work_order_transaction_management/problem_type_management/del",
|
"/system_setting/people_management/add",
|
"/work_order_transaction_management/banner_management/add",
|
"/system_setting/position_management",
|
"/system_setting",
|
"/system_setting/people_management",
|
"/work_order_transaction_management/work_order_item_configuration/save",
|
];
|
let accessObj: any = {};
|
permissionList.map((item) => {
|
if (JSON.stringify(data.menu) === JSON.stringify(['*:*:*'])) {
|
accessObj[item] = true;
|
} else {
|
accessObj[item] = data.menu.includes(item);
|
}
|
});
|
|
|
setInitialState((s: any) => ({
|
...s,
|
token: data.token,
|
userName:data.name,
|
permission: accessObj,
|
currentUser: userInfo,
|
settings: Settings,
|
}));
|
localStorage.setItem('access', JSON.stringify(accessObj));
|
message.success(defaultLoginSuccessMessage);
|
const urlParams = new URL(window.location.href).searchParams;
|
setTimeout(() => {
|
history.push(urlParams.get('redirect') || '/Welcome');
|
}, 0);
|
};
|
|
const handleClick = (e: String) => {
|
setCaptcha(e);
|
};
|
const handleSubmit = async (values: API.LoginParams) => {
|
try {
|
// 登录
|
const res = await login({ ...values });
|
if (res.code == 200) {
|
localStorage.setItem('token', res.data.token);
|
getUserInfo(res.data);
|
return;
|
} else {
|
throw new Error('登录发生错误');
|
}
|
} catch (error) {
|
captchaRef?.current?.refresh();
|
}
|
};
|
|
const { status, type: loginType } = userLoginState;
|
|
return (
|
<div className={containerClassName}>
|
<div className="loginContent">
|
<div
|
style={{
|
position: 'absolute',
|
top: '50%',
|
left: '50%',
|
transform: 'translate(-50%,-50%)',
|
display: 'flex',
|
alignItems: 'center',
|
}}
|
>
|
<div style={{ width: '787px', fontSize: '26px', textAlign: 'center' }}>
|
<h1>
|
“三个身边”群众工作机制
|
</h1>
|
<h1>平台</h1>
|
</div>
|
<LoginForm
|
contentStyle={{
|
minWidth: 280,
|
maxWidth: '75vw',
|
}}
|
logo={false}
|
title={false}
|
subTitle={false}
|
initialValues={{
|
autoLogin: true,
|
}}
|
onFinish={async (values) => {
|
if (values.code != captcha) {
|
captchaRef?.current?.refresh();
|
message.error('验证码输入错误');
|
return;
|
}
|
delete values.code;
|
values.password = CryptoJS.MD5(values.password).toString();
|
await handleSubmit(values as API.LoginParams);
|
}}
|
>
|
<h1 style={{ fontSize: '26px', textAlign: 'center', marginBottom: '20px' }}>登录</h1>
|
{status === 'error' && loginType === 'username' && (
|
<LoginMessage
|
content={intl.formatMessage({
|
id: 'pages.login.accountLogin.errorMessage',
|
defaultMessage: '账户或密码错误(admin/ant.design)',
|
})}
|
/>
|
)}
|
{type === 'username' && (
|
<>
|
<ProFormText
|
name="phone"
|
fieldProps={{
|
size: 'large',
|
prefix: <UserOutlined />,
|
}}
|
placeholder="请输入账号"
|
rules={[
|
{
|
required: true,
|
message: '请输入账号',
|
},
|
]}
|
/>
|
<ProFormText.Password
|
name="password"
|
fieldProps={{
|
size: 'large',
|
prefix: <LockOutlined />,
|
}}
|
placeholder="请输入密码"
|
rules={[
|
{
|
required: true,
|
message: '请输入密码',
|
},
|
]}
|
/>
|
<Space>
|
<ProFormText
|
name="code"
|
fieldProps={{
|
size: 'large',
|
prefix: <SafetyOutlined />,
|
}}
|
placeholder="请输入验证码"
|
rules={[
|
{
|
required: true,
|
message: '请输入验证码',
|
},
|
]}
|
/>
|
<div style={{ marginBottom: '24px' }}>
|
<Captcha onChange={handleClick} ref={captchaRef} bgColor="#fff" />
|
</div>
|
</Space>
|
</>
|
)}
|
{status === 'error' && loginType === 'mobile' && <LoginMessage content="验证码错误" />}
|
</LoginForm>
|
</div>
|
<EditPwd
|
visible={modalVisible}
|
onSave={async (fileds: any) => {
|
const success = await sendRequest(updatePwd, fileds);
|
if (success) {
|
handleModalVisible(false);
|
}
|
}}
|
onCancel={() => handleModalVisible(false)}
|
/>
|
{/* <Footer /> */}
|
</div>
|
</div>
|
);
|
};
|
|
export default Login;
|
