<template>
|
<div class="aui-wrapper aui-page__login aui-page__login__border">
|
<div class="aui-content__wrapper">
|
<div class="clear"></div>
|
<main class="aui-content">
|
<!-- <img class="login-left-bg" src="../../assets/img/vis-map2.png"/>-->
|
<div class="login-content">
|
<!-- <div class="login-header">-->
|
<!-- <!–<h3 class="login-title">{{ $t('login.title') }}</h3>–>-->
|
<!-- </div>-->
|
<h2 class="login__h2">{{ $t('brand.lg') }}</h2>
|
<div class="login-body">
|
<!-- <h3 class="login-title">{{ $t('login.title') }}</h3>-->
|
<el-form :model="dataForm" ref="dataForm" @keyup.enter.native="formSubmit()" status-icon>
|
<zt-form-item class="login-form-margin" style="margin-top:35px" prop="username" rules="required">
|
<el-input v-model="dataForm.username" :placeholder="$t('login.username')">
|
<span slot="prefix" class="el-input__icon">
|
<svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-user"></use></svg>
|
</span>
|
</el-input>
|
</zt-form-item>
|
<zt-form-item class="login-form-margin" prop="password" rules="required">
|
<el-input v-model="dataForm.password" type="password" :placeholder="$t('login.password')">
|
<span slot="prefix" class="el-input__icon">
|
<svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-lock"></use></svg>
|
</span>
|
</el-input>
|
</zt-form-item>
|
<!-- <zt-form-item class="login-form-margin" prop="password" rules="required">-->
|
<!-- <span slot="prefix" class="el-input__icon">-->
|
<!-- <svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-lock"></use></svg>-->
|
<!-- </span>-->
|
<!-- </zt-form-item>-->
|
<zt-form-item prop="captcha" rules="required" v-if="$config.IS_LOGIN_NEED_CAPTURE">
|
<el-row :gutter="20">
|
<el-col :span="14">
|
<el-input v-model="dataForm.captcha" :placeholder="$t('login.captcha')">
|
<span slot="prefix" class="el-input__icon">
|
<svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-safetycertificate"></use></svg>
|
</span>
|
</el-input>
|
</el-col>
|
<el-col :span="10" class="login-captcha">
|
<img :src="captchaPath" @click="getCaptcha()">
|
</el-col>
|
</el-row>
|
</zt-form-item>
|
<!-- <el-form-item class="login-form-margin">
|
<el-button class="btn" style="margin-bottom:0;float: left" type="primary" @click="changePassword()">修改密码</el-button>
|
<el-button class="btn" style="margin-bottom:0;float: right" @click="register">用户注册
|
</el-button>
|
</el-form-item>-->
|
<el-form-item class="login-form-margin">
|
<el-button class="btn" style="margin-bottom:0;width: 100%" type="primary" @click="formSubmit()">{{
|
$t('login.clickTitle') }}
|
</el-button>
|
</el-form-item>
|
</el-form>
|
<add-or-update ref="register"/>
|
<!-- <UserChangePassword ref="changePassword"/>-->
|
</div>
|
</div>
|
<!-- <div class="login-time">-->
|
<!-- <span v-text="day"></span>-->
|
<!-- <br/>-->
|
<!-- <span v-text="time"></span>-->
|
<!-- </div>-->
|
</main>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import Cookies from 'js-cookie'
|
import debounce from 'lodash/debounce'
|
import {clearLoginInfo, getUUID} from '../../../packages/utils'
|
// import AddOrUpdate from '../modules/sys/user-register'
|
// import UserChangePassword from '../modules/sys/user-change-password'
|
|
export default {
|
data() {
|
return {
|
day: '',
|
time: '',
|
captchaPath: '',
|
client: '',
|
userRoleInfo: {},
|
dataForm: {
|
systemMarker: 'test',
|
username: '',
|
password: '',
|
uuid: '',
|
captcha: '',
|
loginMethod: 'username'
|
}
|
}
|
},
|
computed: {},
|
components: {
|
// AddOrUpdate,
|
// UserChangePassword,
|
},
|
mounted() {
|
this.writeCurrentDate()
|
this.kwReplacement()
|
setInterval(this.writeCurrentDate, 1000)
|
},
|
created() {
|
this.getCaptcha()
|
this.getUserRoleInfo()
|
this.getAdminRoleInfo()
|
},
|
methods: {
|
writeCurrentDate() {
|
var date = new Date()
|
var year = date.getFullYear() // 获取当前年份
|
var mon = date.getMonth() + 1 // 获取当前月份
|
var da = date.getDate() // 获取当前日
|
var h = date.getHours() // 获取小时
|
var m = date.getMinutes() // 获取分钟
|
var s = date.getSeconds() // 获取秒
|
// 判断当数字小于等于9时 显示 01 02 ----- 08 09
|
if (mon >= 1 && mon <= 9) {
|
mon = '0' + mon
|
}
|
if (da >= 0 && da <= 9) {
|
da = '0' + da
|
}
|
if (h >= 0 && h <= 9) {
|
h = '0' + h
|
}
|
if (m >= 0 && m <= 9) {
|
m = '0' + m
|
}
|
if (s >= 0 && s <= 9) {
|
s = '0' + s
|
}
|
this.day = '北京时间:' + ' ' + year + '年' + mon + '月' + da + '日'
|
this.time = h + ':' + m + ':' + s
|
},
|
async register() {
|
this.$refs['register'].$refs['dialog'].init()
|
},
|
async changePassword() {
|
this.$refs['changePassword'].$refs['dialog'].init()
|
},
|
async kwReplacement() {
|
let res = await this.$http.get(`sys/dict/type/getDictMap`,{params:{dictType:"key_word"}})
|
if (res.data != null) {
|
this.$store.state.word = res.data
|
}
|
},
|
// 获取验证码
|
getCaptcha() {
|
this.dataForm.uuid = getUUID()
|
this.captchaPath = `${window.SITE_CONFIG['apiURL']}/captcha?uuid=${this.dataForm.uuid}`
|
},
|
// 获取当前用户登录信息
|
async getUserRoleInfo() {
|
return await this.$http.get('/user/userRoleInfo').then(res => {
|
this.loading = false
|
if (res.code !== 0) {
|
return this.$message.error(res.msg)
|
}
|
this.userRoleInfo = res.data
|
console.log(this.userRoleInfo)
|
}).catch(() => {
|
})
|
},
|
async getAdminRoleInfo() {
|
return await this.$http.get('/user/adminRole').then(res => {
|
console.log(res.data,'res.data')
|
// console.log(res,'getAdminRoleInfo');
|
this.$store.state.user.isAdmin = res.data.isAdmin
|
this.$store.state.user.isAssistant = res.data.isAssistant
|
this.$store.state.user.roles = res.data.roles
|
this.$store.state.debug = res.data.debug
|
this.$store.state.test = res.data.test
|
this.$store.state.menuPos = res.data.menuPos
|
window.SITE_CONFIG['isAdmin'] = res.data.isAdmin // 权限
|
this.loading = false
|
}).catch(() => {
|
console.log('/user/adminRole', 'adminRole')
|
})
|
},
|
// 表单提交
|
formSubmit: debounce(function () {
|
clearLoginInfo()
|
this.$http.get('/loginOut', {params: {username: this.dataForm.username}}).then(ref => {
|
this.$refs.dataForm.validate(async valid => {
|
if (valid) {
|
let res = await this.$http.post('/login', this.dataForm)
|
console.log(this.dataForm,'this.dataForm')
|
console.log(res,'res')
|
this.getCaptcha()
|
if (res.success) {
|
let info = res.data.info
|
console.log(info,'info')
|
if (info !== 'OK') {
|
await this.$alert(info, '提示', {
|
confirmButtonText: '确定'
|
})
|
return
|
} else {
|
console.log('login token:', res.data.token)
|
Cookies.set('token', res.data.token)
|
Cookies.set('loginMethod', 'username')
|
Cookies.set('djxlSystem', '')
|
Cookies.remove('systemId')
|
let isTest = res.data.test
|
this.$store.state.user.roleName=res.data.roleName
|
console.log(res.data.roleName,'res.data.roleName res.data.roleName')
|
if (res.data.roleName != null &&
|
(res.data.roleName.indexOf('系统管理员') >= 0 ||
|
res.data.roleName.indexOf('全部权限') >= 0)
|
) {
|
console.log('TestDjxlHome')
|
// this.$router.push({name: 'TestDjxlHome', params: {roleName: res.data.roleName}})
|
this.$router.push({name: 'home'})
|
} else {
|
console.log('home')
|
this.$router.push({name: 'home'})
|
}
|
}
|
let roleName = res.data.roleName
|
let userSecretClass = res.data.userSecretClass
|
localStorage.setItem('roleName', roleName)
|
localStorage.setItem('userSecretClass', userSecretClass)
|
console.log(localStorage.getItem('roleName'),'localStorage.getItem(\'roleName\')')
|
console.log(localStorage.getItem('userSecretClass'),'localStorage.getItem(\'userSecretClass\')')
|
}
|
}
|
})
|
})
|
}, 1000, {'leading': true, 'trailing': false})
|
}
|
}
|
</script>
|
<style>
|
.login__h2 {
|
margin: 0;
|
width: 600px;
|
position: absolute;
|
left: -11%;
|
top: -10%;
|
letter-spacing: 35px;
|
color: #fff;
|
font-size: 1.5rem;
|
font-weight: 400;
|
}
|
|
.clear {
|
clear: both;
|
}
|
|
|
|
.login-left-bg {
|
position: absolute;
|
width: 50%;
|
top: -6%;
|
left: 0;
|
transform: scale(1.1);
|
/*transition:all 1s ease-out;*/
|
}
|
|
.login-content {
|
position: absolute;
|
border-radius: 20px;
|
top:50%;
|
left:50%;
|
transform: translate(-50%,-50%);
|
width: 25%;
|
background:#ecf0f3;
|
box-shadow: 0 3px 6px 0 rgb(72 119 232 / 14%);
|
//border: 15px solid transparent;
|
//border-image: url(../../assets/img/page-border.png) 20 stretch;
|
}
|
|
.login-h6 {
|
font-size: 10px;
|
margin-left: -7px;
|
margin-top: -6px;
|
margin-bottom: 25px;
|
}
|
.login-body {
|
position: relative;
|
}
|
.login-body .el-input{
|
border-radius: 3px;
|
height: 60px;
|
color: #000;
|
background-color: #fff !important;
|
outline: none; /* 移除聚焦时的外边框样式 */
|
border: none; /* 移除默认的边框样式 */
|
box-shadow: 20px 20px 30px rgba(0,0,0,0.2),
|
-20px -20px 30px rgba(255,255,255,1);
|
transition: all 0.4s ease-out;
|
}
|
.login-title{
|
box-shadow: 20px 20px 30px rgba(0,0,0,0.2),
|
-20px -20px 30px rgba(255,255,255,1);
|
transition: all 0.4s ease-out;
|
}
|
.login-body .el-input:hover{
|
box-shadow:
|
0 0 0 rgba(0,0,0,0.2),
|
0 0 0 rgba(255,255,255,0.8),
|
inset 10px 10px 20px rgba(0,0,0,0.1),
|
inset -10px -10px 20px rgba(255,255,255,1);
|
}
|
.login-body .el-input__inner{
|
font-size: 18px;
|
height: inherit;
|
transition: all 0.4s ease-out;
|
border: none; /* 移除默认的边框样式 */
|
}
|
.login-body .el-input__inner:hover{
|
font-size: 16px;
|
}
|
|
.login-form-margin .btn{
|
border: none !important;
|
box-shadow: 20px 20px 30px rgba(0,0,0,0.2),
|
-20px -20px 30px rgba(255,255,255,1);
|
transition: all 0.4s ease-out;
|
}
|
.login-form-margin .btn:hover{
|
box-shadow:
|
0 0 0 rgba(0,0,0,0.2),
|
0 0 0 rgba(255,255,255,0.8),
|
inset 10px 10px 20px rgba(0,0,0,0.1),
|
inset -10px -10px 20px rgba(255,255,255,1);
|
}
|
input:-webkit-autofill ,
|
textarea:-webkit-autofill,
|
select:-webkit-autofill{
|
-webkit-text-fill-color: #000 !important;
|
-webkit-box-shadow: 0 0 0 1000px transparent inset !important;
|
background-color: transparent;
|
font-size: 18px;
|
background-image: none;
|
transition: all 0.4s ease-out;
|
}
|
.aui-page__login__border .el-form-item {
|
margin-bottom: 35px;
|
}
|
|
.aui-page__login__border .el-form-item__content .el-button {
|
height: 50px;
|
}
|
|
|
.aui-page__login__border .login-body .el-input__prefix .el-input__icon {
|
font-size: 25px;
|
}
|
|
.aui-page__login__border .el-button {
|
font-size: 20px;
|
}
|
|
.login-time {
|
position: absolute;
|
font-family: "Source Han Sans CN", serif;
|
color: rgba(11, 222, 243, 1);
|
z-index: 1;
|
left: 4%;
|
bottom: 7%;
|
}
|
|
.login-time span:nth-child(1) {
|
font-size: 30px;
|
}
|
|
.login-time span:nth-child(3) {
|
font-size: 80px;
|
}
|
|
.aui-page__login__border.el-button--primary:hover,
|
.aui-page__login__border.el-button--primary:focus {
|
color: rgba(0, 153, 255, 1)
|
}
|
|
</style>
|
