tianq
3 years ago
3 changed files with 424 additions and 420 deletions
@ -1,97 +1,100 @@ |
|||
<template> |
|||
<el-dialog |
|||
:visible.sync="visible" |
|||
:title="$t('updatePassword.title')" |
|||
:close-on-click-modal="false" |
|||
:close-on-press-escape="false" |
|||
:append-to-body="true"> |
|||
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" label-width="120px"> |
|||
<el-form-item :label="$t('updatePassword.username')"> |
|||
<span>{{ $store.state.user.name }}</span> |
|||
</el-form-item> |
|||
<el-form-item prop="password" :label="$t('updatePassword.password')"> |
|||
<el-input v-model="dataForm.password" type="password" :placeholder="$t('updatePassword.password')"></el-input> |
|||
</el-form-item> |
|||
<el-form-item prop="newPassword" :label="$t('updatePassword.newPassword')"> |
|||
<el-input v-model="dataForm.newPassword" type="password" :placeholder="$t('updatePassword.newPassword')"></el-input> |
|||
</el-form-item> |
|||
<el-form-item prop="comfirmPassword" :label="$t('updatePassword.comfirmPassword')"> |
|||
<el-input v-model="dataForm.comfirmPassword" type="password" :placeholder="$t('updatePassword.comfirmPassword')"></el-input> |
|||
</el-form-item> |
|||
</el-form> |
|||
<template slot="footer"> |
|||
<el-button @click="visible = false">{{ $t('cancel') }}</el-button> |
|||
<el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button> |
|||
</template> |
|||
</el-dialog> |
|||
<el-dialog :visible.sync="visible" :title="$t('updatePassword.title')" :close-on-click-modal="false" :close-on-press-escape="false" :append-to-body="true"> |
|||
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" label-width="120px"> |
|||
<el-form-item :label="$t('updatePassword.username')"> |
|||
<span>{{ $store.state.user.name }}</span> |
|||
</el-form-item> |
|||
<el-form-item prop="password" :label="$t('updatePassword.password')"> |
|||
<el-input v-model="dataForm.password" type="password" :placeholder="$t('updatePassword.password')"></el-input> |
|||
</el-form-item> |
|||
<el-form-item prop="newPassword" :label="$t('updatePassword.newPassword')"> |
|||
<el-input v-model="dataForm.newPassword" type="password" :placeholder="$t('updatePassword.newPassword')"></el-input> |
|||
</el-form-item> |
|||
<el-form-item prop="comfirmPassword" :label="$t('updatePassword.comfirmPassword')"> |
|||
<el-input v-model="dataForm.comfirmPassword" type="password" :placeholder="$t('updatePassword.comfirmPassword')"></el-input> |
|||
</el-form-item> |
|||
</el-form> |
|||
<template slot="footer"> |
|||
<el-button @click="visible = false">{{ $t('cancel') }}</el-button> |
|||
<el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button> |
|||
</template> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import debounce from 'lodash/debounce' |
|||
import { clearLoginInfo } from '@/utils' |
|||
import debounce from 'lodash/debounce'; |
|||
import { clearLoginInfo } from '@/utils'; |
|||
export default { |
|||
data () { |
|||
return { |
|||
visible: false, |
|||
dataForm: { |
|||
password: '', |
|||
newPassword: '', |
|||
comfirmPassword: '' |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
dataRule () { |
|||
var validateComfirmPassword = (rule, value, callback) => { |
|||
if (this.dataForm.newPassword !== value) { |
|||
return callback(new Error(this.$t('updatePassword.validate.comfirmPassword'))) |
|||
} |
|||
callback() |
|||
} |
|||
return { |
|||
password: [ |
|||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
|||
], |
|||
newPassword: [ |
|||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
|||
], |
|||
comfirmPassword: [ |
|||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }, |
|||
{ validator: validateComfirmPassword, trigger: 'blur' } |
|||
] |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
init () { |
|||
this.visible = true |
|||
this.$nextTick(() => { |
|||
this.$refs['dataForm'].resetFields() |
|||
}) |
|||
}, |
|||
// 表单提交 |
|||
dataFormSubmitHandle: debounce(function () { |
|||
this.$refs['dataForm'].validate((valid) => { |
|||
if (!valid) { |
|||
return false |
|||
} |
|||
this.$http.put('/sys/user/password', this.dataForm).then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} |
|||
this.$message({ |
|||
message: this.$t('prompt.success'), |
|||
type: 'success', |
|||
duration: 500, |
|||
onClose: () => { |
|||
this.visible = false |
|||
clearLoginInfo() |
|||
this.$router.replace({ name: 'login' }) |
|||
} |
|||
}) |
|||
}).catch(() => {}) |
|||
}) |
|||
}, 1000, { 'leading': true, 'trailing': false }) |
|||
} |
|||
} |
|||
data() { |
|||
return { |
|||
visible: false, |
|||
dataForm: { |
|||
password: '', |
|||
newPassword: '', |
|||
comfirmPassword: '' |
|||
} |
|||
}; |
|||
}, |
|||
|
|||
computed: { |
|||
dataRule() { |
|||
var validateComfirmPassword = (rule, value, callback) => { |
|||
if (this.dataForm.newPassword !== value) { |
|||
return callback(new Error(this.$t('updatePassword.validate.comfirmPassword'))); |
|||
} |
|||
callback(); |
|||
}; |
|||
var validateNewPassword = (rule, value, callback) => { |
|||
const check = /^(?=.{10})(?=.*?[a-z])(?=.*?[A-Z])(?=.*?\d)(?=.*?[*?!&￥$%^#,./@";:><\[\]}{\-=+_\\|》《。，、？’‘“”~ `]).*$/; |
|||
if (!check.test(this.dataForm.newPassword)) { |
|||
return callback(new Error('新密码长度不小于10个字符且必须包含大小写、数字、特殊符号')); |
|||
} |
|||
callback(); |
|||
}; |
|||
return { |
|||
password: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }], |
|||
newPassword: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }, { validator: validateNewPassword, trigger: 'blur' }], |
|||
comfirmPassword: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }, { validator: validateComfirmPassword, trigger: 'blur' }] |
|||
}; |
|||
} |
|||
}, |
|||
methods: { |
|||
init() { |
|||
this.visible = true; |
|||
this.$nextTick(() => { |
|||
this.$refs['dataForm'].resetFields(); |
|||
}); |
|||
}, |
|||
// 表单提交 |
|||
dataFormSubmitHandle: debounce( |
|||
function() { |
|||
this.$refs['dataForm'].validate(valid => { |
|||
if (!valid) { |
|||
return false; |
|||
} |
|||
this.$http |
|||
.put('/sys/user/password', this.dataForm) |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg); |
|||
} |
|||
this.$message({ |
|||
message: this.$t('prompt.success'), |
|||
type: 'success', |
|||
duration: 500, |
|||
onClose: () => { |
|||
this.visible = false; |
|||
clearLoginInfo(); |
|||
this.$router.replace({ name: 'login' }); |
|||
} |
|||
}); |
|||
}) |
|||
.catch(() => {}); |
|||
}); |
|||
}, |
|||
1000, |
|||
{ leading: true, trailing: false } |
|||
) |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
@ -1,206 +1,202 @@ |
|||
<template> |
|||
<div class="aui-wrapper aui-page__login"> |
|||
<div class="aui-content__wrapper"> |
|||
<main class="aui-content"> |
|||
<div class="login-header"> |
|||
<h2 class="login-brand" |
|||
style="text-transform: none;color:red;">{{ $t('brand.lg') }}</h2> |
|||
</div> |
|||
<div class="login-body"> |
|||
<h3 class="login-title">{{ $t('login.title') }}</h3> |
|||
<el-form :model="dataForm" |
|||
:rules="dataRule" |
|||
ref="dataForm" |
|||
@keyup.enter.native="dataFormSubmitHandle()" |
|||
status-icon> |
|||
<!-- <el-form-item> |
|||
<div class="aui-wrapper aui-page__login"> |
|||
<div class="aui-content__wrapper"> |
|||
<main class="aui-content"> |
|||
<div class="login-header"> |
|||
<h2 class="login-brand" style="text-transform: none;color:red;">{{ $t('brand.lg') }}</h2> |
|||
</div> |
|||
<div class="login-body"> |
|||
<h3 class="login-title">{{ $t('login.title') }}</h3> |
|||
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" status-icon> |
|||
<!-- <el-form-item> |
|||
<el-select v-model="$i18n.locale" class="w-percent-100"> |
|||
<el-option v-for="(val, key) in i18nMessages" :key="key" :label="val._lang" :value="key"></el-option> |
|||
</el-select> |
|||
</el-form-item> --> |
|||
<el-form-item prop="username"> |
|||
<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> |
|||
</el-form-item> |
|||
<el-form-item prop="password"> |
|||
<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> |
|||
</el-form-item> |
|||
<el-form-item prop="captcha"> |
|||
<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> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button type="primary" |
|||
@click="dataFormSubmitHandle()" |
|||
class="w-percent-100">{{ $t('login.title') }}</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
</div> |
|||
<div v-if="isHidden"> |
|||
<p><a href="https://dl.google.com/tag/s/appguid%3D%7B8A69D345-D564-463C-AFF1-A69D9E530F96%7D%26iid%3D%7B0EBBEC46-30F5-946B-A54E-5628DFF12914%7D%26lang%3Den%26browser%3D4%26usagestats%3D1%26appname%3DGoogle%2520Chrome%26needsadmin%3Dprefers%26ap%3Dx64-stable-statsdef_1%26installdataindex%3Ddefaultbrowser/update2/installers/ChromeSetup.exe" target="_blank">点击此处下载谷歌浏览器</a></p> |
|||
</div> |
|||
<!-- <div class="login-footer"> |
|||
<el-form-item prop="username"> |
|||
<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> |
|||
</el-form-item> |
|||
<el-form-item prop="password"> |
|||
<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> |
|||
</el-form-item> |
|||
<el-form-item prop="captcha"> |
|||
<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> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button type="primary" @click="dataFormSubmitHandle()" class="w-percent-100">{{ $t('login.title') }}</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
</div> |
|||
<div v-if="isHidden"> |
|||
<p> |
|||
<a |
|||
href="https://dl.google.com/tag/s/appguid%3D%7B8A69D345-D564-463C-AFF1-A69D9E530F96%7D%26iid%3D%7B0EBBEC46-30F5-946B-A54E-5628DFF12914%7D%26lang%3Den%26browser%3D4%26usagestats%3D1%26appname%3DGoogle%2520Chrome%26needsadmin%3Dprefers%26ap%3Dx64-stable-statsdef_1%26installdataindex%3Ddefaultbrowser/update2/installers/ChromeSetup.exe" |
|||
target="_blank" |
|||
> |
|||
点击此处下载谷歌浏览器 |
|||
</a> |
|||
</p> |
|||
</div> |
|||
<!-- <div class="login-footer"> |
|||
<p><a href="http://www.elinkit.com.cn/" |
|||
target="_blank">{{ $t('login.copyright') }}</a>2020 © www.elinkit.com.cn</p> |
|||
</div> --> |
|||
</main> |
|||
</div> |
|||
</div> |
|||
</main> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import Cookies from 'js-cookie' |
|||
import debounce from 'lodash/debounce' |
|||
import { messages } from '@/i18n' |
|||
import { getUUID } from '@/utils' |
|||
import Cookies from 'js-cookie'; |
|||
import debounce from 'lodash/debounce'; |
|||
import { messages } from '@/i18n'; |
|||
import { getUUID } from '@/utils'; |
|||
|
|||
export default { |
|||
data () { |
|||
return { |
|||
i18nMessages: messages, |
|||
captchaPath: '', |
|||
isHidden: false, |
|||
dataForm: { |
|||
username: '', |
|||
password: '', |
|||
uuid: '', |
|||
captcha: '' |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
dataRule () { |
|||
return { |
|||
username: [ |
|||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
|||
], |
|||
password: [ |
|||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
|||
], |
|||
captcha: [ |
|||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
|||
] |
|||
} |
|||
} |
|||
}, |
|||
created () { |
|||
if (this.$route.query.autologin === '1') { |
|||
this.autologin() |
|||
} else { |
|||
this.getCaptcha() |
|||
this.myBrowser() |
|||
} |
|||
}, |
|||
methods: { |
|||
myBrowser () { |
|||
var userAgent = navigator.userAgent |
|||
if (userAgent.indexOf('Chrome') > -1) { |
|||
this.isHidden = false |
|||
} else { |
|||
this.isHidden = true |
|||
} |
|||
}, |
|||
// 获取验证码 |
|||
getCaptcha () { |
|||
this.dataForm.uuid = getUUID() |
|||
this.captchaPath = `${window.SITE_CONFIG['apiURL']}/auth/captcha?uuid=${this.dataForm.uuid}` |
|||
}, |
|||
// 表单提交 |
|||
dataFormSubmitHandle: debounce(function () { |
|||
this.$refs['dataForm'].validate((valid) => { |
|||
if (!valid) { |
|||
return false |
|||
} |
|||
const check = /^(?=.{10})(?=.*?[a-z])(?=.*?[A-Z])(?=.*?\d)(?=.*?[*?!&￥$%^#,./@";:><\[\]}{\-=+_\\|》《。，、？’‘“”~ `]).*$/ |
|||
if (check.test(this.dataForm.password)) { |
|||
this.loginUrl() |
|||
} else { |
|||
this.$alert('长度不小于10个字符且必须包含大小写、数字、特殊符号', '密码复杂度不符合要求，请尽快修改！', { |
|||
confirmButtonText: '确定', |
|||
callback: action => { |
|||
this.loginUrl() |
|||
} |
|||
}) |
|||
} |
|||
}) |
|||
}, 1000, { 'leading': true, 'trailing': false }), |
|||
loginUrl () { |
|||
this.$http.post('/auth/login', this.dataForm).then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
this.getCaptcha() |
|||
return this.$message.error(res.msg) |
|||
} |
|||
Cookies.set('token', res.data.token) |
|||
this.$router.replace({ name: 'home' }) |
|||
// 登陆之后从localStorage获取党委为空则从网络上拉取 |
|||
this.checkLocakStorage() |
|||
}).catch(() => { }) |
|||
}, |
|||
autologin () { |
|||
let dataForm_ = { |
|||
username: 'screen', |
|||
password: '111111' |
|||
} |
|||
this.$http.post('/auth/autologin', dataForm_).then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
this.getCaptcha() |
|||
return this.$message.error(res.msg) |
|||
} |
|||
Cookies.set('token', res.data.token) |
|||
this.$router.replace({ name: 'home' }) |
|||
// 登陆之后从localStorage获取党委为空则从网络上拉取 |
|||
this.checkLocakStorage() |
|||
}).catch(() => { }) |
|||
}, |
|||
checkLocakStorage () { |
|||
var street = localStorage.getItem('street') |
|||
if (street === null) { |
|||
this.getIdByCode('shibei') |
|||
} |
|||
}, |
|||
// 获取党委 |
|||
getIdByCode (partyCode) { |
|||
this.$http.get(`/sys/dept/getIdByCode/` + partyCode).then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} |
|||
localStorage.setItem('street', res.data.id) |
|||
}).catch(() => { }) |
|||
} |
|||
} |
|||
} |
|||
data() { |
|||
return { |
|||
type: 'login', |
|||
updatePassowrdVisible: false, |
|||
i18nMessages: messages, |
|||
captchaPath: '', |
|||
isHidden: false, |
|||
dataForm: { |
|||
username: '', |
|||
password: '', |
|||
uuid: '', |
|||
captcha: '' |
|||
} |
|||
}; |
|||
}, |
|||
|
|||
computed: { |
|||
dataRule() { |
|||
return { |
|||
username: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }], |
|||
password: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }], |
|||
captcha: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }] |
|||
}; |
|||
} |
|||
}, |
|||
created() { |
|||
if (this.$route.query.autologin === '1') { |
|||
this.autologin(); |
|||
} else { |
|||
this.getCaptcha(); |
|||
this.myBrowser(); |
|||
} |
|||
}, |
|||
methods: { |
|||
myBrowser() { |
|||
var userAgent = navigator.userAgent; |
|||
if (userAgent.indexOf('Chrome') > -1) { |
|||
this.isHidden = false; |
|||
} else { |
|||
this.isHidden = true; |
|||
} |
|||
}, |
|||
// 获取验证码 |
|||
getCaptcha() { |
|||
this.dataForm.uuid = getUUID(); |
|||
this.captchaPath = `${window.SITE_CONFIG['apiURL']}/auth/captcha?uuid=${this.dataForm.uuid}`; |
|||
}, |
|||
// 表单提交 |
|||
dataFormSubmitHandle: debounce( |
|||
function() { |
|||
let _this = this; |
|||
this.$refs['dataForm'].validate(valid => { |
|||
if (!valid) { |
|||
return false; |
|||
} |
|||
const check = /^(?=.{10})(?=.*?[a-z])(?=.*?[A-Z])(?=.*?\d)(?=.*?[*?!&￥$%^#,./@";:><\[\]}{\-=+_\\|》《。，、？’‘“”~ `]).*$/; |
|||
if (check.test(this.dataForm.password)) { |
|||
sessionStorage['changPWD'] = '0'; |
|||
this.loginUrl(); |
|||
|
|||
// 登陆之后从localStorage获取党委为空则从网络上拉取 |
|||
// this.checkLocakStorage(); |
|||
} else { |
|||
sessionStorage['changPWD'] = '1'; |
|||
|
|||
this.$alert('长度不小于10个字符且必须包含大小写、数字、特殊符号', '密码复杂度不符合要求，请尽快修改！', { |
|||
confirmButtonText: '确定', |
|||
callback: action => { |
|||
this.loginUrl(); |
|||
// _this.updatePasswordHandle(); |
|||
} |
|||
}); |
|||
} |
|||
}); |
|||
}, |
|||
1000, |
|||
{ leading: true, trailing: false } |
|||
), |
|||
loginUrl() { |
|||
this.$http |
|||
.post('/auth/login', this.dataForm) |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
this.getCaptcha(); |
|||
return this.$message.error(res.msg); |
|||
} |
|||
Cookies.set('token', res.data.token); |
|||
this.$router.replace({ name: 'home' }); |
|||
// // 登陆之后从localStorage获取党委为空则从网络上拉取 |
|||
this.checkLocakStorage(); |
|||
}) |
|||
.catch(() => {}); |
|||
}, |
|||
autologin() { |
|||
let dataForm_ = { |
|||
username: 'screen', |
|||
password: '111111' |
|||
}; |
|||
this.$http |
|||
.post('/auth/autologin', dataForm_) |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
this.getCaptcha(); |
|||
return this.$message.error(res.msg); |
|||
} |
|||
Cookies.set('token', res.data.token); |
|||
}) |
|||
.catch(() => {}); |
|||
}, |
|||
checkLocakStorage() { |
|||
var street = localStorage.getItem('street'); |
|||
if (street === null) { |
|||
this.getIdByCode('shibei'); |
|||
} |
|||
}, |
|||
// 获取党委 |
|||
getIdByCode(partyCode) { |
|||
this.$http |
|||
.get(`/sys/dept/getIdByCode/` + partyCode) |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg); |
|||
} |
|||
localStorage.setItem('street', res.data.id); |
|||
}) |
|||
.catch(() => {}); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
Loading…
Reference in new issue