<template>
|
<div class="loginMain">
|
<div class="sys_name" v-if="localInfo">{{ localInfo.systemName }}</div>
|
<!-- <div class="sys_name"><span style="color: #577aee">智慧</span>加油站</div> -->
|
<a-form :form="form" class="user-layout-login" ref="formLogin" id="formLogin">
|
<div class="top">
|
<div class="header">
|
<a href="/">
|
<img v-if="localInfo && localInfo.logoPath" :src="localInfo.logoPath" class="logo" alt="logo"/>
|
<img v-else class="logo-img" src="@/assets/img/menuLogo.png" alt="logo"/>
|
<span class="title">系统登录</span>
|
</a>
|
</div>
|
<div class="desc">
|
<!-- 智慧加油站 -->
|
</div>
|
</div>
|
<div
|
:activeKey="customActiveKey"
|
:tabBarStyle="{ textAlign: 'center', borderBottom: 'unset' }"
|
@change="handleTabClick"
|
>
|
<a-form-item>
|
<a-input
|
size="large"
|
v-decorator="['username', validatorRules.username, { validator: this.handleUsernameOrEmail }]"
|
type="text"
|
placeholder="请输入帐户名"
|
>
|
<a-icon slot="prefix" type="user"/>
|
</a-input>
|
</a-form-item>
|
|
<a-form-item>
|
<a-input
|
v-decorator="['password', validatorRules.password]"
|
size="large"
|
type="password"
|
autocomplete="false"
|
placeholder="密码"
|
>
|
<a-icon slot="prefix" type="lock"/>
|
</a-input>
|
</a-form-item>
|
|
<a-row :gutter="0">
|
<a-col :span="16">
|
<a-form-item>
|
<a-input
|
v-decorator="['inputCode', validatorRules.inputCode]"
|
size="large"
|
type="text"
|
@change="inputCodeChange"
|
placeholder="请输入验证码"
|
>
|
<a-icon slot="prefix" type="smile"/>
|
</a-input>
|
</a-form-item>
|
</a-col>
|
<a-col :span="8" style="text-align: right">
|
<img
|
v-if="requestCodeSuccess"
|
style="margin-top: 2px"
|
:src="randCodeImage"
|
@click="handleChangeCheckCode"
|
/>
|
<img v-else style="margin-top: 2px" src="../../assets/img/checkcode.png" @click="handleChangeCheckCode"/>
|
</a-col>
|
</a-row>
|
</div>
|
|
<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"
|
style="width: 350px"
|
>确定
|
</a-button>
|
</a-form-item>
|
</a-form>
|
|
<two-step-captcha
|
v-if="requiredTwoStepCaptcha"
|
:visible="stepCaptchaVisible"
|
@success="stepCaptchaSuccess"
|
@cancel="stepCaptchaCancel"
|
></two-step-captcha>
|
<login-select-modal ref="loginSelect" @success="loginSelectOk"></login-select-modal>
|
</div>
|
</template>
|
|
<script>
|
//import md5 from "md5"
|
import api from '@tievd/cube-block/lib/api'
|
import {mapActions} from 'vuex'
|
import {timeFix} from '@tievd/cube-block/lib/utils/util'
|
import Vue from 'vue'
|
import {ACCESS_TOKEN, ENCRYPTED_STRING} from '@tievd/cube-block/lib/store/mutation-types'
|
import {putAction, postAction, getAction} from '@tievd/cube-block/lib/api/manage'
|
import {encryption, getEncryptedString} from '@tievd/cube-block/lib/utils/encryption/aesEncrypt'
|
import store from '@/store/'
|
import {USER_INFO} from '@tievd/cube-block/lib/store/mutation-types'
|
import LoginSelectModal from './LoginSelectModal.vue'
|
|
export default {
|
components: {
|
LoginSelectModal,
|
},
|
data() {
|
return {
|
localInfo: {},
|
customActiveKey: 'tab1',
|
loginBtn: false,
|
// login type: 0 email, 1 username, 2 telephone
|
loginType: 0,
|
requiredTwoStepCaptcha: false,
|
stepCaptchaVisible: false,
|
form: this.$form.createForm(this),
|
encryptedString: {
|
key: '',
|
iv: '',
|
},
|
state: {
|
time: 60,
|
smsSendBtn: false,
|
},
|
validatorRules: {
|
username: {rules: [{required: true, message: '请输入用户名!'}, {validator: this.handleUsernameOrEmail}]},
|
password: {rules: [{required: true, message: '请输入密码!', validator: 'click'}]},
|
mobile: {rules: [{validator: this.validateMobile}]},
|
captcha: {rule: [{required: true, message: '请输入验证码!'}]},
|
inputCode: {rules: [{required: true, message: '请输入验证码!'}]},
|
},
|
verifiedCode: '',
|
inputCodeContent: '',
|
inputCodeNull: true,
|
currentUsername: '',
|
currdatetime: '',
|
randCodeImage: '',
|
requestCodeSuccess: false,
|
}
|
},
|
created() {
|
console.log(window._CONFIG['staticDomainURL'])
|
this.currdatetime = new Date().getTime()
|
Vue.ls.remove(ACCESS_TOKEN)
|
this.getRouterData()
|
this.handleChangeCheckCode()
|
this.getLocalInfo()
|
// update-begin- --- author:scott ------ date:20190805 ---- for:密码加密逻辑暂时注释掉，有点问题
|
//this.getEncrypte();
|
// update-end- --- author:scott ------ date:20190805 ---- for:密码加密逻辑暂时注释掉，有点问题
|
},
|
methods: {
|
...mapActions(['Login', 'Logout', 'PhoneLogin']),
|
getLocalInfo() {
|
getAction('/jyz/sysInfo/localInfo', {}).then((res) => {
|
this.localInfo = res.result
|
if (this.localInfo.logoPath !== null) {
|
this.localInfo.logoPath = window._CONFIG['staticDomainURL'] + this.localInfo.logoPath
|
}
|
localStorage.setItem('localInfo', JSON.stringify(res.result))
|
})
|
},
|
// handler
|
handleUsernameOrEmail(rule, value, callback) {
|
const regex = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/
|
if (regex.test(value)) {
|
this.loginType = 0
|
} else {
|
this.loginType = 1
|
}
|
callback()
|
},
|
handleTabClick(key) {
|
this.customActiveKey = key
|
// this.form.resetFields()
|
},
|
handleSubmit() {
|
let that = this
|
let loginParams = {}
|
that.loginBtn = true
|
// 使用账户密码登录
|
that.form.validateFields(['username', 'password', 'inputCode', 'rememberMe'], {force: true}, (err, values) => {
|
if (!err) {
|
loginParams.username = values.username
|
// update-begin- --- author:scott ------ date:20190805 ---- for:密码加密逻辑暂时注释掉，有点问题
|
//loginParams.password = md5(values.password)
|
//loginParams.password = encryption(values.password,that.encryptedString.key,that.encryptedString.iv)
|
loginParams.password = values.password
|
loginParams.remember_me = values.rememberMe
|
// update-begin- --- author:scott ------ date:20190805 ---- for:密码加密逻辑暂时注释掉，有点问题
|
loginParams.captcha = that.inputCodeContent
|
loginParams.checkKey = that.currdatetime
|
console.log('登录参数', loginParams)
|
that
|
.Login(loginParams)
|
.then((res) => {
|
localStorage.setItem('userDepartInfo', JSON.stringify(res.result.departs[0]))
|
this.$refs.loginSelect.show(res.result)
|
})
|
.catch((err) => {
|
that.requestFailed(err)
|
})
|
} else {
|
that.loginBtn = false
|
}
|
})
|
// 使用手机号登录
|
},
|
// getOrganType(){
|
// getAction("/",{}).then(res=>{
|
// console.log(res);
|
// })
|
// },
|
getCaptcha(e) {
|
e.preventDefault()
|
let that = this
|
this.form.validateFields(['mobile'], {force: true}, (err, values) => {
|
if (!values.mobile) {
|
that.cmsFailed('请输入手机号')
|
} else if (!err) {
|
this.state.smsSendBtn = true
|
let interval = window.setInterval(() => {
|
if (that.state.time-- <= 0) {
|
that.state.time = 60
|
that.state.smsSendBtn = false
|
window.clearInterval(interval)
|
}
|
}, 1000)
|
|
const hide = this.$message.loading('验证码发送中..', 0)
|
let smsParams = {}
|
smsParams.mobile = values.mobile
|
smsParams.smsmode = '0'
|
postAction('/sys/sms', smsParams)
|
.then((res) => {
|
if (!res.success) {
|
setTimeout(hide, 0)
|
this.cmsFailed(res.message)
|
}
|
console.log(res)
|
setTimeout(hide, 500)
|
})
|
.catch((err) => {
|
setTimeout(hide, 1)
|
clearInterval(interval)
|
that.state.time = 60
|
that.state.smsSendBtn = false
|
this.requestFailed(err)
|
})
|
}
|
})
|
},
|
stepCaptchaSuccess() {
|
this.loginSuccess()
|
},
|
stepCaptchaCancel() {
|
this.Logout().then(() => {
|
this.loginBtn = false
|
this.stepCaptchaVisible = false
|
})
|
},
|
handleChangeCheckCode() {
|
this.currdatetime = new Date().getTime()
|
getAction(`/sys/randomImage/${this.currdatetime}`)
|
.then((res) => {
|
if (res.success) {
|
this.randCodeImage = res.result
|
this.requestCodeSuccess = true
|
} else {
|
this.$message.error(res.message)
|
this.requestCodeSuccess = false
|
}
|
})
|
.catch(() => {
|
this.requestCodeSuccess = false
|
})
|
},
|
loginSuccess() {
|
this.$router.push({path: '/dashboard/analysis'}).catch(() => {
|
console.log('登录跳转首页出错,这个错误从哪里来的')
|
})
|
this.$notification.success({
|
message: '欢迎',
|
description: `${timeFix()}，欢迎回来`,
|
})
|
},
|
cmsFailed(err) {
|
this.$notification['error']({
|
message: '登录失败',
|
description: err,
|
duration: 4,
|
})
|
},
|
requestFailed(err) {
|
this.$notification['error']({
|
message: '登录失败',
|
description: ((err.response || {}).data || {}).message || err.message || '请求出现错误，请稍后再试',
|
duration: 4,
|
})
|
this.loginBtn = false
|
},
|
validateMobile(rule, value, callback) {
|
if (!value || new RegExp(/^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/).test(value)) {
|
callback()
|
} else {
|
callback('您的手机号码格式不正确!')
|
}
|
},
|
validateInputCode(rule, value, callback) {
|
if (!value || this.verifiedCode == this.inputCodeContent) {
|
callback()
|
} else {
|
callback('您输入的验证码不正确!')
|
}
|
},
|
generateCode(value) {
|
this.verifiedCode = value.toLowerCase()
|
},
|
inputCodeChange(e) {
|
this.inputCodeContent = e.target.value
|
},
|
loginSelectOk() {
|
this.loginSuccess()
|
},
|
getRouterData() {
|
this.$nextTick(() => {
|
if (this.$route.params.username) {
|
this.form.setFieldsValue({
|
username: this.$route.params.username,
|
})
|
}
|
})
|
},
|
//获取密码加密规则
|
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>
|
.sys_name {
|
position: fixed;
|
top: 40px;
|
left: 40px;
|
font-size: 36px;
|
color: #6f737a;
|
}
|
|
.user-layout-login {
|
background: linear-gradient(0deg, rgba(32, 37, 47, 0.8), rgba(17, 20, 26, 0.8));
|
border: 2px solid rgba(91, 129, 249, 0.14);
|
box-shadow: 0px 5px 12px 0px rgba(91, 129, 249, 0.07);
|
border-radius: 16px;
|
width: 560px;
|
height: 450px;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
position: fixed;
|
top: 50%;
|
left: 50%;
|
transform: translate(-50%, -50%);
|
|
label {
|
font-size: 14px;
|
}
|
|
.top {
|
text-align: center;
|
|
.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, .logo-img {
|
height: 44px;
|
vertical-align: top;
|
margin-right: 16px;
|
border-style: none;
|
}
|
|
.title {
|
font-size: 33px;
|
color: #577aee;
|
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';
|
position: relative;
|
top: 2px;
|
}
|
}
|
|
.desc {
|
font-size: 14px;
|
color: #ccc;
|
margin-top: 12px;
|
margin-bottom: 40px;
|
}
|
}
|
|
.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;
|
}
|
}
|
}
|
</style>
|
<style>
|
.valid-error .ant-select-selection__placeholder {
|
color: #f5222d;
|
}
|
</style>
|
