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