<template>
|
<div class="main">
|
<a-form-model class="user-layout-login" @keyup.enter.native="handleSubmit">
|
<!-- <a-tabs :activeKey="customActiveKey" :tabBarStyle="{ textAlign: 'center', borderBottom: 'unset' }" @change="handleTabClick">
|
<a-tab-pane key="tab1" tab=""> -->
|
<div style="font-size: 22px;margin-top: 20px;font-weight: 500;" class="ml-50 animate-enter-x1">登录 </div>
|
<div style="height: 40px;"></div>
|
<login-account ref="alogin" @validateFail="validateFail" @success="requestSuccess" @fail="requestFailed">
|
</login-account>
|
<!-- </a-tab-pane>
|
|
<a-tab-pane key="tab2" tab="手机号登录">
|
<login-phone ref="plogin" @validateFail="validateFail" @success="requestSuccess" @fail="requestFailed"></login-phone>
|
</a-tab-pane>
|
</a-tabs> -->
|
|
<a-form-model-item style="opacity: 0;" class="animate-enter-x4" >
|
|
<a-checkbox @change="handleRememberMeChange" default-checked>自动登录</a-checkbox>
|
<!-- <router-link :to="{ name: 'alteration'}" class="forge-password" style="float: right;">
|
忘记密码
|
</router-link>
|
<router-link :to="{ name: 'register'}" class="forge-password" style="float: right;margin-right: 10px">
|
注册账户
|
</router-link>-->
|
</a-form-model-item>
|
|
<a-form-item style="margin-top:24px;opacity: 0;" class="animate-enter-x5" >
|
<a-button size="large" type="primary" htmlType="submit" class="login-button" :loading="loginBtn"
|
@click.stop.prevent="handleSubmit" :disabled="loginBtn">确定
|
</a-button>
|
</a-form-item>
|
|
</a-form-model>
|
|
<two-step-captcha v-if="requiredTwoStepCaptcha" :visible="stepCaptchaVisible" @success="stepCaptchaSuccess"
|
@cancel="stepCaptchaCancel"></two-step-captcha>
|
<login-select-tenant ref="loginSelect" @success="loginSelectOk"></login-select-tenant>
|
<login-select-department ref='loginSelectDepart' @success="loginSelectDepartOk"></login-select-department>
|
<!-- <third-login ref="thirdLogin"></third-login>-->
|
</div>
|
</template>
|
|
<script>
|
import Vue from 'vue'
|
import {
|
ACCESS_TOKEN,
|
ENCRYPTED_STRING
|
} from '@/store/mutation-types'
|
import ThirdLogin from './third/ThirdLogin'
|
import LoginSelectTenant from './LoginSelectTenant'
|
import TwoStepCaptcha from '@/components/tools/TwoStepCaptcha'
|
import {
|
getEncryptedString
|
} from '@/utils/encryption/aesEncrypt'
|
import {
|
timeFix
|
} from '@/utils/util'
|
|
import LoginAccount from './LoginAccount'
|
import LoginPhone from './LoginPhone'
|
import LoginSelectDepartment from '@views/user/LoginSelectDepartment'
|
|
export default {
|
components: {
|
LoginSelectDepartment,
|
LoginSelectTenant,
|
TwoStepCaptcha,
|
ThirdLogin,
|
LoginAccount,
|
LoginPhone
|
},
|
data() {
|
return {
|
customActiveKey: 'tab1',
|
rememberMe: true,
|
loginBtn: false,
|
requiredTwoStepCaptcha: false,
|
stepCaptchaVisible: false,
|
encryptedString: {
|
key: "",
|
iv: "",
|
},
|
}
|
},
|
created() {
|
Vue.ls.remove(ACCESS_TOKEN)
|
this.getRouterData();
|
this.rememberMe = true
|
},
|
methods: {
|
handleTabClick(key) {
|
this.customActiveKey = key
|
},
|
handleRememberMeChange(e) {
|
this.rememberMe = e.target.checked
|
},
|
/**跳转到登录页面的参数-账号获取*/
|
getRouterData() {
|
this.$nextTick(() => {
|
let temp = this.$route.params.username || this.$route.query.username || ''
|
if (temp) {
|
this.$refs.alogin.acceptUsername(temp)
|
}
|
})
|
},
|
|
//登录
|
handleSubmit() {
|
this.loginBtn = true;
|
if (this.customActiveKey === 'tab1') {
|
// 使用账户密码登录
|
this.$refs.alogin.handleLogin(this.rememberMe)
|
} else {
|
//手机号码登录
|
this.$refs.plogin.handleLogin(this.rememberMe)
|
}
|
},
|
// 校验失败
|
validateFail() {
|
this.loginBtn = false;
|
},
|
// 登录后台成功
|
requestSuccess(loginResult) {
|
//如果没有部门，让用户选择部门后重新登录
|
console.info(loginResult)
|
if(!loginResult.departs || loginResult.departs.length < 1){
|
this.$refs.loginSelectDepart.show(loginResult)
|
}else {
|
this.$refs.loginSelect.show(loginResult)
|
}
|
},
|
//登录后台失败
|
requestFailed(err) {
|
let description = ((err.response || {}).data || {}).message || err.message || "请求出现错误，请稍后再试"
|
this.$notification['error']({
|
message: '登录失败',
|
description: description,
|
duration: 4,
|
});
|
//账户密码登录错误后更新验证码
|
if (this.customActiveKey === 'tab1' && description.indexOf('密码错误') > 0) {
|
this.$refs.alogin.handleChangeCheckCode()
|
}
|
this.loginBtn = false;
|
},
|
loginSelectOk() {
|
this.loginSuccess()
|
},
|
loginSelectDepartOk(){
|
this.$refs.alogin.handleLogin(this.rememberMe)
|
},
|
//登录成功
|
loginSuccess() {
|
this.$router.push({
|
path: "/dashboard/analysis"
|
}).catch(() => {
|
console.log('登录跳转首页出错,这个错误从哪里来的')
|
})
|
this.$notification.success({
|
message: '欢迎',
|
description: `${timeFix()}，欢迎回来`,
|
});
|
},
|
|
stepCaptchaSuccess() {
|
this.loginSuccess()
|
},
|
stepCaptchaCancel() {
|
this.Logout().then(() => {
|
this.loginBtn = false
|
this.stepCaptchaVisible = false
|
})
|
},
|
//获取密码加密规则
|
getEncrypte() {
|
var encryptedString = Vue.ls.get(ENCRYPTED_STRING);
|
if (encryptedString == null) {
|
getEncryptedString().then((data) => {
|
this.encryptedString = data
|
});
|
} else {
|
this.encryptedString = encryptedString;
|
}
|
}
|
|
}
|
|
}
|
</script>
|
<style lang="less" scoped>
|
@keyframes enter-x {
|
0% {
|
transform: translateX(0);
|
opacity: 0
|
}
|
|
100% {
|
transform: translateX(50px);
|
opacity: 1
|
|
}
|
}
|
@keyframes enter-x2 {
|
0% {
|
transform: translateX(50px);
|
opacity: 0
|
}
|
|
100% {
|
transform: translateX(0);
|
opacity: 1
|
|
}
|
}
|
.animate-enter-x1 {
|
animation: enter-x 0.4s ease-in-out 0.3s;
|
animation-fill-mode: forwards;
|
animation-delay: 0.1s;
|
}
|
.animate-enter-x4 {
|
animation: enter-x2 0.4s ease-in-out 0.3s;
|
animation-fill-mode: forwards;
|
animation-delay: 0.4s;
|
}
|
.animate-enter-x5 {
|
animation: enter-x2 0.4s ease-in-out 0.3s;
|
animation-fill-mode: forwards;
|
animation-delay: 0.5s;
|
}
|
.animate-enter-x6 {
|
animation: enter-x 0.4s ease-in-out 0.3s;
|
animation-fill-mode: forwards;
|
animation-delay: 0.6s;
|
}
|
|
.trans {
|
transition: all 0.2s ease;
|
}
|
|
.ml-50{
|
margin-left: -50px;
|
opacity: 0;
|
}
|
|
|
.user-layout-login {
|
label {
|
font-size: 14px;
|
}
|
|
.getCaptcha {
|
display: block;
|
width: 100%;
|
height: 40px;
|
}
|
|
.forge-password {
|
font-size: 14px;
|
}
|
|
button.login-button {
|
padding: 0 15px;
|
font-size: 16px;
|
height: 40px;
|
width: 100%;
|
}
|
|
.user-login-other {
|
text-align: left;
|
margin-top: 24px;
|
line-height: 22px;
|
|
.item-icon {
|
font-size: 24px;
|
color: rgba(0, 0, 0, .2);
|
margin-left: 16px;
|
vertical-align: middle;
|
cursor: pointer;
|
transition: color .3s;
|
|
&:hover {
|
color: #1890ff;
|
}
|
}
|
|
.register {
|
float: right;
|
}
|
}
|
}
|
</style>
|
<style>
|
.valid-error .ant-select-selection__placeholder {
|
color: #f5222d;
|
}
|
</style>
|
