You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
117 lines
4.7 KiB
117 lines
4.7 KiB
'use strict';
|
|
import React, { useEffect, useRef } from 'react';
|
|
import { connect } from 'react-redux';
|
|
import { push } from 'react-router-redux';
|
|
import { Form, Button, Toast } from '@douyinfe/semi-ui';
|
|
import { login, LOGIN_SUCCESS } from '../actions/auth';
|
|
import { IconLock, IconUser } from '@douyinfe/semi-icons';
|
|
import '../style.less'
|
|
|
|
const Login = props => {
|
|
const { dispatch, user, error, actions, apiRoot, isRequesting } = props
|
|
const form = useRef();
|
|
|
|
useEffect(() => {
|
|
if (error) {
|
|
Toast.error(error);
|
|
form.current.setValue('password', '')
|
|
}
|
|
}, [error])
|
|
|
|
useEffect(() => {
|
|
if (user && user.authorized) {
|
|
dispatch(push('/businessManagement/pmReport/reserveItemsReporting'));
|
|
localStorage.setItem('poms_open_sider', JSON.stringify(["pmReport"]))
|
|
localStorage.setItem('poms_selected_sider', JSON.stringify(["businessManagement"]))
|
|
}
|
|
}, [user])
|
|
|
|
return (
|
|
<div style={{
|
|
width: '100%',
|
|
height: '100%',
|
|
background: "linear-gradient(#eff4fe, #f6f9fe)",
|
|
}}>
|
|
<div style={{
|
|
width: '57.64%',
|
|
height: '100%'
|
|
}}>
|
|
<div className='zoomImage'>
|
|
{/* <img src="/assets/images/background/loginText.png" style={{ width: 587, height: 81, margin: "143px 0 0 69px" }} /> */}
|
|
</div>
|
|
</div>
|
|
<div style={{
|
|
width: '42.36%',
|
|
height: '100%',
|
|
padding: '45px 60px',
|
|
background: 'rgb(255 255 255 / 50%)',
|
|
backdropFilter: "saturate(100%) contrast(100%) blur(17px)",
|
|
position: 'absolute',
|
|
top: 0,
|
|
right: 0,
|
|
zIndex: "6",
|
|
textAlign: 'center',
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
background: '#FFFFFF'
|
|
}}>
|
|
<div style={{
|
|
width: 388,
|
|
marginTop: "18.33%"
|
|
}}>
|
|
<div style={{ fontSize: 31, color: '#000000', marginBottom: 90 }}>
|
|
数据报表中心
|
|
</div>
|
|
<Form
|
|
onSubmit={values => {
|
|
dispatch(login(values.username, values.password)).then(res => {
|
|
const data = res.payload.user
|
|
localStorage.setItem('word', JSON.stringify(values.password))
|
|
dispatch(actions.layout.initWebSocket({ ioUrl: apiRoot, token: data.token, dcUserId: data.dcUserInfo && dcUserInfo.id }))
|
|
})
|
|
}}
|
|
getFormApi={formApi => form.current = formApi}
|
|
>
|
|
<Form.Input
|
|
className='inputbgc'
|
|
field='username'
|
|
noLabel={true}
|
|
label='用户名'
|
|
placeholder='请输入账号'
|
|
prefix={<IconUser style={{ color: '#717171', marginRight: 14, marginLeft: 8 }} />}
|
|
style={{ background: '#FFFFFF', height: 46, marginBottom: 33, border: '1px solid rgb(185 211 239)', borderRadius: '4px' }}
|
|
/>
|
|
<Form.Input
|
|
field='password'
|
|
noLabel={true}
|
|
mode="password"
|
|
autoComplete=""
|
|
placeholder='请输入密码'
|
|
label='密码'
|
|
prefix={<IconLock style={{ color: '#717171', marginRight: 14, marginLeft: 8 }} />}
|
|
style={{ background: '#FFFFFF', height: 46, border: '1px solid rgb(185 211 239)', borderRadius: '4px' }}
|
|
/>
|
|
<img src="/assets/images/background/xiangqi.png" style={{ width: 112, height: 14, margin: "4px 0 0 278px" }} />
|
|
<Button htmlType='submit' block theme="solid" loading={isRequesting} style={{ marginTop: 56, height: 46, backgroundColor: '#0F7EFB', borderRadius: '27px' }}>立即登录</Button>
|
|
|
|
</Form>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div >
|
|
);
|
|
}
|
|
|
|
function mapStateToProps(state) {
|
|
const { auth, global } = state;
|
|
return {
|
|
user: auth.user,
|
|
error: auth.error,
|
|
actions: global.actions,
|
|
apiRoot: global.apiRoot,
|
|
isRequesting: auth.isRequesting
|
|
}
|
|
}
|
|
|
|
export default connect(mapStateToProps)(Login);
|