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 bgImg from '../../../public/loginBg.png';
|
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',
|
backgroundImage: `url(${bgImg})`,
|
backgroundSize: 'cover',
|
backgroundPosition: 'center',
|
};
|
});
|
|
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",
|
"/party_member",
|
"/party_member/list",
|
"/party_member/edit",
|
"/party_member/del",
|
"/party_member/detail",
|
"/party_member/add",
|
"/party_member/freeze",
|
"/party_member/import",
|
"/party_member/export",
|
"/party_member_audit/list",
|
"/party_member_audit/audit",
|
"/complaint",
|
"/complaint/list",
|
"/complaint/detail",
|
"/complaint/community-problem-export",
|
"/complaint/problem-handle-export",
|
"/complaint/notice-export",
|
"/complaint/export",
|
];
|
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%)',
|
}}
|
>
|
<div className='sysName'>
|
<div>“三个身边”</div>
|
<div>群众工作机制</div>
|
</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);
|
}}
|
>
|
<div style={{ fontSize: '23px', lineHeight: '32px', textAlign: 'center', marginBottom: '45px', fontWeight: 'bold' }}>登录</div>
|
{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: <img src={require('../../../public/account.png')} style={{ width: 18, height: 18 }} />,
|
}}
|
placeholder="请输入账号"
|
rules={[
|
{
|
required: true,
|
message: '请输入账号',
|
},
|
]}
|
/>
|
<ProFormText.Password
|
name="password"
|
fieldProps={{
|
size: 'large',
|
prefix: <img src={require('../../../public/password.png')} style={{ width: 18, height: 18 }} />,
|
}}
|
placeholder="请输入密码"
|
rules={[
|
{
|
required: true,
|
message: '请输入密码',
|
},
|
]}
|
/>
|
<div className='codeBox'>
|
<ProFormText
|
name="code"
|
fieldProps={{
|
size: 'large',
|
prefix: <img src={require('../../../public/code.png')} style={{ width: 18, height: 18 }} />,
|
}}
|
placeholder="请输入验证码"
|
rules={[
|
{
|
required: true,
|
message: '请输入验证码',
|
},
|
]}
|
/>
|
<div>
|
<Captcha onChange={handleClick} ref={captchaRef} bgColor="#fff" height={52} />
|
</div>
|
</div>
|
</>
|
)}
|
{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;
|
