437 lines
13 KiB
Vue
437 lines
13 KiB
Vue
<template>
|
||
<div>
|
||
<div class="login-container">
|
||
<i class="login-img"/>
|
||
<el-form
|
||
ref="loginForm"
|
||
:model="loginForm"
|
||
:rules="loginRules"
|
||
auto-complete="on"
|
||
label-position="left"
|
||
label-width="0px"
|
||
class="card-box login-form">
|
||
<h1 class="title">高精机电装备有限公司数字化工厂</h1>
|
||
<div class="line"/>
|
||
<div class="content">
|
||
<el-form-item prop="username">
|
||
<span class="svg-container svg-container_login">
|
||
<svg-icon icon-class="username" />
|
||
</span>
|
||
<el-input v-model="loginForm.username" name="username" type="text" auto-complete="on" placeholder="请输入用户名" @input.native="changeUser" />
|
||
</el-form-item>
|
||
<el-form-item prop="password">
|
||
<span class="svg-container">
|
||
<svg-icon icon-class="password"/>
|
||
</span>
|
||
<el-input
|
||
:type="pwdType"
|
||
v-model="loginForm.password"
|
||
name="password"
|
||
auto-complete="on"
|
||
placeholder="请输入密码"
|
||
@keyup.enter.native="handleLogin"/>
|
||
<span class="show-pwd" @click="showPwd"><svg-icon icon-class="eye" /></span>
|
||
</el-form-item>
|
||
<div>
|
||
<el-checkbox v-model="loginForm.checked" class="remeberPassword">记住账号密码</el-checkbox>
|
||
<el-button type="text" style="margin-left: 224px" @click="handleEdit('form')">修改密码</el-button>
|
||
</div>
|
||
<el-button :loading="loading" class="signIn" type="primary" style="width:100%;" @click.native.prevent="handleLogin">
|
||
登录
|
||
</el-button>
|
||
<div class="tips">
|
||
<span>超级管理员</span>
|
||
<span>账号：1001</span>
|
||
<span>密码：1001</span>
|
||
</div>
|
||
<div class="tips">
|
||
<span>采购管理员</span>
|
||
<span>账号：6201</span>
|
||
<span>密码：6201</span>
|
||
</div>
|
||
<div class="tips">
|
||
<span>外协管理员</span>
|
||
<span>账号：1003</span>
|
||
<span>密码：1003</span>
|
||
</div>
|
||
<div class="tips">
|
||
<span>车间计划管理员</span>
|
||
<span>账号：2002</span>
|
||
<span>密码：2002</span>
|
||
</div>
|
||
<div class="tips">
|
||
<span>技术中心管理员</span>
|
||
<span>账号：3001</span>
|
||
<span>密码：3001</span>
|
||
</div>
|
||
<div class="tips">
|
||
<span>库存管理员</span>
|
||
<span>账号：3002</span>
|
||
<span>密码：3002</span>
|
||
</div>
|
||
<div class="tips">
|
||
<span>营销中心管理员</span>
|
||
<span>账号：4001</span>
|
||
<span>密码：4001</span>
|
||
</div>
|
||
<div class="tips">
|
||
<span>财务总监</span>
|
||
<span>账号：7001</span>
|
||
<span>密码：7001</span>
|
||
</div>
|
||
<div class="tips">
|
||
<span>出纳</span>
|
||
<span>账号：7002</span>
|
||
<span>密码：7002</span>
|
||
</div>
|
||
<div class="tips">
|
||
<span>会计</span>
|
||
<span>账号：7003</span>
|
||
<span>密码：7003</span>
|
||
</div>
|
||
<div class="tips">
|
||
<span>总经理</span>
|
||
<span>账号：1002</span>
|
||
<span>密码：1002</span>
|
||
</div>
|
||
<div class="tips">
|
||
<span>工艺定额员</span>
|
||
<span>账号：6301</span>
|
||
<span>密码：6301</span>
|
||
</div>
|
||
</div>
|
||
</el-form>
|
||
</div>
|
||
|
||
<el-dialog :visible.sync="dialogFormVisible" title="修改密码" center style="min-height: 200px" width="400px">
|
||
<el-form ref="form" :model="form" :rules="rules" label-position="left" label-width="110px">
|
||
<el-form-item label="考勤编号" prop="Account" style="display: inline-block">
|
||
<el-input v-model="form.Account" size="small" style="width:200px"/>
|
||
</el-form-item>
|
||
<el-form-item label="原始密码" prop="beforPassword" style="display: inline-block">
|
||
<el-input v-model="form.beforPassword" size="small" style="width:200px"/>
|
||
</el-form-item>
|
||
<el-form-item label="新密码" prop="newPassword" style="display: inline-block">
|
||
<el-input v-model="form.newPassword" size="small" style="width:200px"/>
|
||
</el-form-item>
|
||
<el-form-item label="确认密码" prop="againPassword" style="display: inline-block">
|
||
<el-input v-model="form.againPassword" size="small" style="width:200px"/>
|
||
</el-form-item>
|
||
</el-form>
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button size="small" @click="callOff()">取消</el-button>
|
||
<el-button type="primary" size="small" @click="EditPassword('form')">确定</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import { isvalidUsername } from '@/utils/validate'
|
||
import { editPassword } from '@/api/login'
|
||
import Cookie from 'js-cookie'
|
||
export default {
|
||
name: 'Login',
|
||
data() {
|
||
const validateValue = (rules, value, callback) => {
|
||
if (this.form.newPassword !== this.form.againPassword) {
|
||
callback(new Error('两次输入密码不同'))
|
||
} else {
|
||
callback()
|
||
}
|
||
}
|
||
const validateUsername = (rule, value, callback) => {
|
||
if (!isvalidUsername(value)) {
|
||
callback(new Error('请输入正确的用户名'))
|
||
} else {
|
||
callback()
|
||
}
|
||
}
|
||
// const validatePass = (rule, value, callback) => {
|
||
// if (value.length < 5) {
|
||
// callback(new Error('密码不能小于5位'))
|
||
// } else {
|
||
// callback()
|
||
// }
|
||
// }
|
||
return {
|
||
rules: {
|
||
againPassword: [
|
||
{ required: true, message: '请输入确认密码', trigger: 'blur' },
|
||
{ required: true, trigger: 'blur', validator: validateValue }],
|
||
Account: [{ required: true, message: '请输入考勤编号', trigger: 'blur' }],
|
||
beforPassword: [{ required: true, message: '请输入原始密码', trigger: 'blur' }],
|
||
newPassword: [{ required: true, message: '请输入新密码', trigger: 'blur' }]
|
||
},
|
||
list: [],
|
||
form: {
|
||
againPassword: '',
|
||
Account: '',
|
||
beforPassword: '',
|
||
newPassword: ''
|
||
},
|
||
dialogFormVisible: false,
|
||
loginForm: {
|
||
username: '',
|
||
password: '',
|
||
checked: false
|
||
},
|
||
loginRules: {
|
||
username: [{ required: true, trigger: 'blur', validator: validateUsername }]
|
||
// password: [{ required: true, trigger: 'blur', validator: validatePass }]
|
||
},
|
||
loading: false,
|
||
pwdType: 'password'
|
||
}
|
||
},
|
||
// 页面加载调用获取cookie值
|
||
mounted() {
|
||
this.getCookie()
|
||
},
|
||
methods: {
|
||
showPwd() {
|
||
if (this.pwdType === 'password') {
|
||
this.pwdType = ''
|
||
} else {
|
||
this.pwdType = 'password'
|
||
}
|
||
},
|
||
changeUser() {
|
||
this.loginForm.password = ''
|
||
},
|
||
handleLogin() {
|
||
this.$refs.loginForm.validate(valid => {
|
||
if (valid) {
|
||
this.loading = true
|
||
this.$store.dispatch('Login', this.loginForm).then(() => {
|
||
this.loading = false
|
||
this.$router.push({ path: '/' })
|
||
}).catch(() => {
|
||
this.loading = false
|
||
})
|
||
} else {
|
||
console.log('error submit!!')
|
||
return false
|
||
}
|
||
if (this.loginForm.checked === true) { // 传入账号名，密码，和保存天数3个参数
|
||
this.setCookie(this.loginForm.username, this.loginForm.password, this.loginForm.checked)
|
||
} else {
|
||
this.clearCookie()
|
||
}
|
||
})
|
||
},
|
||
// 设置cookie
|
||
setCookie(username, password, checked) {
|
||
Cookie.set('username', username, { expires: 7 })
|
||
Cookie.set('password', password, { expires: 7 })
|
||
Cookie.set('checked', checked, { expires: 7 })
|
||
},
|
||
// 读取 cookie
|
||
getCookie() {
|
||
this.loginForm.username = Cookie.get('username')
|
||
this.loginForm.password = Cookie.get('password')
|
||
this.loginForm.checked = Boolean(Cookie.get('checked'))
|
||
},
|
||
// 清除cookie
|
||
clearCookie() {
|
||
Cookie.remove('username')
|
||
Cookie.remove('password')
|
||
Cookie.remove('checked')
|
||
},
|
||
handleEdit() {
|
||
this.addForm('form', [this.dialogFormVisible = true])
|
||
},
|
||
callOff() {
|
||
this.dialogFormVisible = false
|
||
},
|
||
EditPassword(formName) {
|
||
this.$refs[formName].validate((valid) => {
|
||
if (valid) {
|
||
editPassword(this.form.Account, this.form.beforPassword, this.form.newPassword, 5).then(response => {
|
||
if (response.data.result[0].result === '1') {
|
||
if (response.data.output[0].返回 === '1') {
|
||
this.$message.success('修改成功')
|
||
this.dialogFormVisible = false
|
||
} else {
|
||
this.$message.error('用户名或密码不正确')
|
||
}
|
||
} else {
|
||
this.$message.error('编辑失败')
|
||
this.dialogFormVisible = false
|
||
}
|
||
})
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style rel="stylesheet/scss" lang="scss">
|
||
$bg:#2d3a4b;
|
||
$dark_gray:#889aa4;
|
||
$light_gray:#eee;
|
||
|
||
.login-container {
|
||
position: fixed;
|
||
height: 100%;
|
||
width:100%;
|
||
background-color: #192045;
|
||
input:-webkit-autofill {
|
||
-webkit-box-shadow: 0 0 0 1000px #293444 inset !important;
|
||
-webkit-text-fill-color: #fff !important;
|
||
}
|
||
.login-img{
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: url("../../../static/login.png") no-repeat;
|
||
}
|
||
input {
|
||
background: transparent;
|
||
border: 0;
|
||
-webkit-appearance: none;
|
||
border-radius: 0;
|
||
padding: 12px 5px 12px 15px;
|
||
color: $light_gray;
|
||
height: 47px;
|
||
}
|
||
.el-input {
|
||
display: inline-block;
|
||
height: 47px;
|
||
width: 85%;
|
||
}
|
||
.svg-container {
|
||
padding: 6px 5px 6px 15px;
|
||
color: #f3b82d;
|
||
font-size: 20px!important;
|
||
vertical-align: middle;
|
||
width: 30px;
|
||
display: inline-block;
|
||
&_login {
|
||
font-size: 20px;
|
||
}
|
||
}
|
||
.title {
|
||
font-size: 22px;
|
||
line-height: 30px;
|
||
color: #ffffff;
|
||
margin: 0 auto 20px auto;
|
||
text-align: center;
|
||
font-weight: bold;
|
||
font-family: 微软雅黑Regular＆Bold;
|
||
}
|
||
.content{
|
||
width: 330px;
|
||
margin: 60px auto 0 auto;
|
||
}
|
||
.line{
|
||
width: 70%;
|
||
margin: 0 auto 25px auto;
|
||
background-color: #ffffff;
|
||
height: 1px;
|
||
}
|
||
.login-form {
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
width: 400px;
|
||
padding: 35px 35px 15px 35px;
|
||
margin: 120px auto;
|
||
}
|
||
.tips {
|
||
font-size: 14px;
|
||
color: #fff;
|
||
margin-bottom: 10px;
|
||
span {
|
||
&:first-of-type {
|
||
margin-right: 16px;
|
||
}
|
||
}
|
||
}
|
||
.el-input__inner{
|
||
border: none!important;
|
||
font-size: 18px!important;
|
||
color: #29335b!important;
|
||
}
|
||
.el-form-item {
|
||
border: 1px solid #f3b82d;
|
||
background: #ffffff;
|
||
border-radius: 5px;
|
||
color: #454545;
|
||
}
|
||
/*登录button*/
|
||
.signIn{
|
||
width: 100%;
|
||
border: none;
|
||
margin-top: 20px;
|
||
border-radius: 5px;
|
||
font-size: 18px;
|
||
color:#29335b;
|
||
background: -webkit-linear-gradient(left, #f5c44f , #9fd2ab); /* Safari 5.1 - 6.0 */
|
||
background: -o-linear-gradient(right, #f5c44f, #9fd2ab); /* Opera 11.1 - 12.0 */
|
||
background: -moz-linear-gradient(right, #f5c44f, #9fd2ab); /* Firefox 3.6 - 15 */
|
||
background: linear-gradient(to right, #f5c44f , #9fd2ab); /* 标准的语法（必须放在最后） */
|
||
}
|
||
.remeberPassword{
|
||
color: $dark_gray;
|
||
}
|
||
.show-pwd {
|
||
position: absolute;
|
||
right: 10px;
|
||
top: 7px;
|
||
font-size: 16px;
|
||
color: $dark_gray;
|
||
cursor: pointer;
|
||
user-select:none;
|
||
}
|
||
@media (min-width: 1024px) {
|
||
/*根据屏幕大小确定显示的位置*/
|
||
.login-form{
|
||
position: absolute;
|
||
left: 40%;
|
||
top: 0;
|
||
width: 600px;
|
||
}
|
||
.title{
|
||
font-size: 32px!important;
|
||
line-height: 32px;
|
||
}
|
||
.el-form-item{
|
||
width: 400px;
|
||
height: 48px;
|
||
}
|
||
.content{
|
||
width: 400px;
|
||
}
|
||
}
|
||
@media (min-width: 1281px) {
|
||
.login-form{
|
||
position: absolute;
|
||
left: 30%;
|
||
top: 6%;
|
||
width: 600px;
|
||
}
|
||
}
|
||
}
|
||
</style>
|
||
<style>
|
||
.remeberPassword .el-checkbox__inner:hover{
|
||
border: 1px solid #f3b82d;
|
||
}
|
||
.remeberPassword .el-checkbox__input.is-checked .el-checkbox__inner{
|
||
background-color: #f3b82d;
|
||
border-color: #f3b82d;
|
||
}
|
||
.remeberPassword .el-checkbox__input.is-checked+.el-checkbox__label{
|
||
color: #fff;
|
||
}
|
||
.remeberPassword .el-checkbox__input.is-focus .el-checkbox__inner{
|
||
border-color: #f3b82d;
|
||
}
|
||
.login-container input:-webkit-autofill{
|
||
-webkit-box-shadow:0 0 0 1000px #fff inset !important;
|
||
-webkit-text-fill-color: #29335b !important;
|
||
}
|
||
</style>
|