<template>
|
<div class="login">
|
|
<a-form-model ref="loginForm" :rules="rules" :model="loginModel" @submit="handleLoginSubmit">
|
<a-tabs defaultActiveKey="1">
|
<a-tab-pane tab="账户密码登录" key="1">
|
<a-alert v-if="error" :type="'error'" :message="error" showIcon class="mb-lg"></a-alert>
|
<a-form-model-item prop="account" >
|
<a-input size="large" placeholder='请输入账号' v-model="loginModel.account" >
|
<a-icon slot="prefix" type='user' style="color:rgba(0,0,0,.25)" />
|
</a-input>
|
</a-form-model-item>
|
<a-form-model-item prop="password">
|
<a-input size="large" type="password" placeholder="请输入密码" v-model="loginModel.password">
|
<a-icon slot="prefix" type='lock' style="color:rgba(0,0,0,.25)" />
|
</a-input>
|
</a-form-model-item>
|
</a-tab-pane>
|
</a-tabs>
|
<a-form-item>
|
<a-button type='primary' htmlType='submit' size="large" :loading="loading" class="ant-btn__block">登录</a-button>
|
</a-form-item>
|
</a-form-model>
|
|
|
</div>
|
</template>
|
|
<style lang="less">
|
@import '../../../assets/theme/styles/index.less';
|
|
.login {
|
display: block;
|
width: 368px;
|
margin: 0 auto;
|
|
.ant-tabs .ant-tabs-bar {
|
border-bottom: 0;
|
margin-bottom: 24px;
|
text-align: center;
|
}
|
|
.ant-tabs-tab {
|
font-size: 16px;
|
line-height: 24px;
|
}
|
|
.ant-input-affix-wrapper .ant-input:not(:first-child) {
|
padding-left: 34px;
|
}
|
|
.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: @primary-color;
|
}
|
}
|
|
.other {
|
text-align: left;
|
margin-top: 24px;
|
line-height: 22px;
|
|
nz-tooltip {
|
vertical-align: middle;
|
}
|
|
.register {
|
float: right;
|
}
|
}
|
}
|
</style>
|
|
<script lang="ts">
|
import {
|
Component,
|
Prop,
|
Vue,
|
} from 'vue-property-decorator';
|
import {
|
State,
|
Mutation,
|
namespace,
|
} from 'vuex-class';
|
|
|
import store from '../../../store/store';
|
|
import { get, post } from "@/util/request";
|
|
import { Encrypt, Decrypt} from '../../../util/AES.js'
|
import getMenus from './successLoginRoutee'
|
import router from "@/route/router";
|
import bus from "@/bus";
|
|
const userModule = namespace('user');
|
|
@Component({
|
components: {},
|
})
|
export default class PassportLayout extends Vue {
|
|
private rules: any = {
|
account: [
|
{required: true, message: '请输入用户名', trigger: ['change', 'blur']},
|
],
|
password: [
|
{required: true, message: '请输入密码', trigger: ['change', 'blur']},
|
]
|
}
|
private loginForm: any = null;
|
|
private loading: boolean = false;
|
|
private error: string = '';
|
|
private loginModel: any = {
|
account: null,
|
password: null,
|
};
|
|
@userModule.Mutation('loginSuccess')
|
private loginSuccess: any;
|
|
constructor() {
|
super();
|
}
|
|
private created() {
|
}
|
|
private mounted() {
|
}
|
|
private getRedirect(): string {
|
|
|
if (!this.$route.query.redirect) {
|
return '/';
|
}
|
const redirect: any = this.$route.query.redirect;
|
return redirect;
|
}
|
|
|
|
private handleLoginSubmit(e: any) {
|
e.preventDefault();
|
this.$refs.loginForm.validate((valid: any) => {
|
if (valid) {
|
this.loading = true;
|
let password = Encrypt(this.loginModel.password);
|
// this.loginModel.account = '404897439'
|
// this.loginModel.password = 'gjcuSvl0Pr83X9XZm70v1w=='
|
this.$store.state.loginUser=this.loginModel.account
|
this.$store.state.loginPsd=password
|
post('login', {
|
account: this.loginModel.account,
|
password: password
|
}).then( (res: any) => {
|
const resData = res.data;
|
if ( resData.code !== 0) {
|
this.error = resData.message;
|
this.loading = false;
|
return;
|
}
|
this.loginSuccess({token: resData.data.token});
|
this.$ss.set('token', resData.data.token);
|
sessionStorage.setItem('token',resData.data.token)
|
|
getMenus(this.$ss.get('token'))
|
|
|
setTimeout(() => {
|
const redirect: string = this.getRedirect();
|
// store.dispatch('acl/login', {username: resData.data.token});
|
if (redirect != null) {
|
this.$router.push(redirect);
|
} else {
|
this.$router.push('/');
|
}
|
},500)
|
|
|
})
|
}
|
})
|
|
}
|
|
}
|
</script>
|
