<template>
|
<div class="container">
|
<div class="row">
|
<el-row class="row-centered">
|
<div>
|
<h1 style="color:#2d2d2d;margin-bottom:10px;font-weight:500">DNC系统</h1>
|
<!-- <img src="/static/images/LMlogin.png" alt="DNC系统"/>-->
|
<div class="g-center login-page loginBox" @keyup.enter="login">
|
<el-tabs v-model="activeName" class="login_wrap">
|
<el-tab-pane label="用户登陆" style="color:#1e42a2" name="login">
|
<el-form :model="loginForm" label-width="80px" :rules="loginRules" ref="loginForm" class="login-form">
|
<el-form-item label="账号" prop="username">
|
<el-input placeholder="请输入账号" v-model="loginForm.username" auto-complete="off" clearable></el-input>
|
</el-form-item>
|
<el-form-item label="密码" prop="password">
|
<el-input type="password" placeholder="请输入密码" v-model="loginForm.password" auto-complete="off"
|
show-password></el-input>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click.native="login" :loading="editLoading">登陆</el-button>
|
<el-button type="primary" @click="resetForm('loginForm')">重置</el-button>
|
</el-form-item>
|
</el-form>
|
</el-tab-pane>
|
<!--<el-tab-pane label="用户注册" name="register">
|
建设中..
|
</el-tab-pane>-->
|
</el-tabs>
|
</div>
|
<p style="color:red;margin-top:10px;font-size:16px">密级：内部 警告：本系统禁止存储、处理、传输涉密信息</p>
|
</div>
|
|
</el-row>
|
</div>
|
|
<init_password ref="dialogRef" @reLogin="reLogin"
|
:username="loginForm.username"></init_password>
|
</div>
|
</template>
|
|
<script>
|
import * as loginApi from '../api/login';
|
import Init_password from "../components/init_password";
|
|
export default {
|
components: {Init_password},
|
data() {
|
return {
|
LoginFormVisible: false,
|
activeName: 'login',
|
editLoading: false,
|
loginForm: {
|
username: '',
|
password: ''
|
},
|
loginRules: {
|
username: [
|
{required: true, message: '请输入账号', trigger: 'blur'}
|
],
|
password: [
|
{required: true, message: '请输入密码', trigger: 'blur'}
|
]
|
},
|
user: {
|
userid: '',
|
username: '',
|
userimg: ''
|
},
|
logined: false,
|
returnUrl: '',
|
}
|
},
|
created() {
|
},
|
computed: {
|
btnText() {
|
if (this.isBtnLoading) return '登录中...';
|
return '登录';
|
}
|
},
|
methods: {
|
login() {
|
this.$refs.loginForm.validate((valid) => {
|
if (valid) {
|
|
this.editLoading = true;
|
|
let para = Object.assign({}, this.loginForm);
|
|
loginApi.user_login(para).then((res) => {
|
this.editLoading = false;
|
if (res.success) {
|
this.$router.replace('/home');
|
} else {
|
if (res.message) {
|
this.$message({
|
type: 'error',
|
message: res.message,
|
duration: 1000,
|
onClose: () => {
|
if (res.code == 9999901) {
|
this.$refs.dialogRef.initDialogData()
|
this.$refs.dialogRef.dialogVisible = true
|
}
|
}
|
})
|
} else {
|
this.$message.error('登陆失败');
|
}
|
}
|
},
|
(res) => {
|
this.editLoading = false;
|
});
|
}
|
});
|
},
|
resetForm: function (formName) {
|
this.$refs[formName].resetFields();
|
},
|
|
reLogin() {
|
this.loginForm = {
|
username: '',
|
password: ''
|
}
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.container {
|
position: absolute;
|
display: table;
|
height: 100%;
|
width: 100%;
|
text-align: center;
|
margin: auto;
|
background: url("/static/images/background.png") no-repeat;
|
background-size: 100% 100%;
|
}
|
|
.row {
|
display: table-cell;
|
vertical-align: middle;
|
}
|
|
/* centered columns styles */
|
.row-centered {
|
margin: auto;
|
width: 470px;
|
}
|
|
.loginBox {
|
padding: 20px;
|
border-radius: 20px;
|
-moz-border-radius: 20px;
|
-webkit-border-radius: 20px;
|
background-color: rgba(250, 250, 250, 0.2);
|
}
|
|
.login-form {
|
width: 400px;
|
margin: 5% auto 0;
|
}
|
</style>
|
<style>
|
.login_wrap .el-tabs__item.is-active {
|
color: #1e42a2;
|
}
|
|
.login_wrap .el-tabs__active-bar {
|
background-color: #1e42a2;
|
}
|
</style>
|
