<template>
|
<div class="main" style="width: 100%;height: 100%;display: flex;padding: 50px;">
|
|
<div style="flex: 1.2;display: flex;align-items: center;justify-content: center;position: relative">
|
<div class="top">
|
<div class="header">
|
<a href="/">
|
<img src="~@/assets/logo-yt.png" class="logo" alt="logo">
|
<span class="title">中国一拖管理系统</span>
|
</a>
|
</div>
|
</div>
|
<img src="@/assets/login.jpeg" width="65%" height="44%">
|
</div>
|
|
<div style="flex: 1;padding: 30px 50px;">
|
<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="账号密码登录"
|
>
|
<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>
|
<!--<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">
|
<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-item style="color: red;font-size: 0.8vw">
|
密级：内部 警告：本系统禁止存储、处理、传输涉密信息
|
</a-form-model-item>
|
|
</a-form-model>
|
</div>
|
|
<!--<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>
|
<!--<third-login ref="thirdLogin"></third-login>-->
|
<user-password ref="userPassword"/>
|
</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 store from '@/store'
|
import { getAction } from '../../api/manage'
|
import UserPassword from '../../components/tools/UserPassword'
|
|
export default {
|
components: {
|
UserPassword,
|
LoginSelectTenant,
|
TwoStepCaptcha,
|
// ThirdLogin,
|
LoginAccount,
|
LoginPhone,
|
store
|
},
|
data() {
|
return {
|
customActiveKey: 'tab1',
|
rememberMe: true,
|
loginBtn: false,
|
requiredTwoStepCaptcha: false,
|
stepCaptchaVisible: false,
|
encryptedString: {
|
key: '',
|
iv: ''
|
},
|
url: {
|
getPrimaryInfo: '/sys/sysAnnouncementSend/getPrimaryInfo'
|
}
|
}
|
},
|
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) {
|
// this.$router.push({ path: "/isps/userAnnouncement" }).catch(() => {
|
// console.log('登录跳转首页出错,这个错误从哪里来的')
|
// })
|
this.$router.push({ path: '/mdc/base/DeviceBaseInfo' }).catch(() => {
|
console.log('登录跳转首页出错,这个错误从哪里来的')
|
})
|
this.$notification.success({
|
message: '欢迎',
|
description: `${timeFix()}，欢迎回来`
|
})
|
var userId = store.getters.userInfo.id
|
let that = this
|
getAction(this.url.getPrimaryInfo, { userId: userId }).then(res => {
|
if (res.success) {
|
for (var i = 0; i < res.result.length; i++) {
|
that.$notification.success({
|
message: '最新未读消息【' + res.result[i].msgCategory + '】',
|
description: res.result[i].msgContent,
|
duration: 60,
|
icon: <a-icon type = 'exclamation-circle'style = 'color:red' / >,
|
})
|
|
}
|
}
|
})
|
// this.$refs.loginSelect.show(loginResult)
|
},
|
//登录后台失败
|
requestFailed(err, username) {
|
let description = ((err.response || {}).data || {}).message || err.message || '请求出现错误，请稍后再试'
|
if (err.code !== 5001 && err.code !== 5002) {
|
this.$notification['error']({
|
message: '登录失败',
|
description: description,
|
duration: 4
|
})
|
} else {
|
this.$notification['warning']({
|
message: '提示',
|
description: description,
|
duration: 1,
|
onClose: () => {
|
console.log('err', err)
|
this.$refs.userPassword.show(username)
|
}
|
})
|
}
|
//账户密码登录错误后更新验证码
|
// if (this.customActiveKey === 'tab1' && description.indexOf('密码错误') > 0) {
|
// this.$refs.alogin.handleChangeCheckCode()
|
// }
|
this.loginBtn = false
|
},
|
loginSelectOk() {
|
this.loginSuccess()
|
},
|
//登录成功
|
loginSuccess() {
|
this.$router.push({ path: '/isps/userAnnouncement' }).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>
|
.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, 0.2);
|
margin-left: 16px;
|
vertical-align: middle;
|
cursor: pointer;
|
transition: color 0.3s;
|
|
&:hover {
|
color: #1890ff;
|
}
|
}
|
|
.register {
|
float: right;
|
}
|
}
|
}
|
|
/deep/ .ant-tabs-tab-active.ant-tabs-tab {
|
font-size: 25px;
|
}
|
|
.top {
|
text-align: center;
|
position: absolute;
|
top: 10%;
|
|
.header {
|
height: 44px;
|
line-height: 44px;
|
|
.badge {
|
position: absolute;
|
display: inline-block;
|
line-height: 1;
|
vertical-align: middle;
|
margin-left: -12px;
|
margin-top: -10px;
|
opacity: 0.8;
|
}
|
|
.logo {
|
height: 44px;
|
vertical-align: top;
|
margin-right: 10px;
|
border-style: none;
|
}
|
|
.title {
|
font-size: 2vw;
|
color: #000;
|
font-family: "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
font-weight: 600;
|
position: relative;
|
top: 2px;
|
}
|
}
|
.desc {
|
font-size: 14px;
|
color: rgba(0, 0, 0, 0.45);
|
margin-top: 12px;
|
margin-bottom: 40px;
|
}
|
}
|
|
</style>
|
<style>
|
.valid-error .ant-select-selection__placeholder {
|
color: #f5222d;
|
}
|
</style>
|
