288 lines
8.4 KiB
Vue
288 lines
8.4 KiB
Vue
<template>
|
||
<div style="display: flex; justify-content: center">
|
||
<div
|
||
style="
|
||
width: 600px;
|
||
text-align: center;
|
||
border: 1px solid #e6e6e6;
|
||
margin-top: 40px;
|
||
padding: 10px;
|
||
"
|
||
>
|
||
<div
|
||
class="trial-myinfo-head"
|
||
style="font-size: 30px; line-height: 120px"
|
||
>
|
||
<!-- 首次登录修改密码 -->
|
||
{{ $t('recompose:title:init') }}
|
||
</div>
|
||
<el-form
|
||
ref="passwordForm"
|
||
v-loading="loading"
|
||
label-position="right"
|
||
:model="password"
|
||
:rules="passwordFormRules"
|
||
:label-width="$i18n.locale == 'zh' ? '100px' : '200px'"
|
||
>
|
||
<!-- 邮箱 -->
|
||
<el-form-item :label="$t('recompose:form:email')" prop="Email">
|
||
<el-input v-model="password.Email" disabled />
|
||
</el-form-item>
|
||
<!-- 用户名 -->
|
||
<!-- <el-form-item :label="$t('recompose:form:role')" prop="UserType">
|
||
<el-input v-model="password.UserType" disabled />
|
||
</el-form-item> -->
|
||
<!-- 用户名 -->
|
||
<el-form-item :label="$t('recompose:form:userName')" prop="NewUserName">
|
||
<el-input v-model="password.NewUserName" />
|
||
</el-form-item>
|
||
<!-- 新密码 -->
|
||
<el-form-item
|
||
class="my_new_pwd"
|
||
:label="$t('recompose:form:newPassword')"
|
||
prop="NewPassWord"
|
||
>
|
||
<el-input
|
||
v-model="password.NewPassWord"
|
||
type="password"
|
||
show-password
|
||
auto-complete="new-password"
|
||
/>
|
||
</el-form-item>
|
||
<!-- 确认密码 -->
|
||
<el-form-item
|
||
:label="$t('recompose:form:confirmPassword')"
|
||
prop="ConfirmPassWord"
|
||
>
|
||
<el-input
|
||
v-model="password.ConfirmPassWord"
|
||
type="password"
|
||
show-password
|
||
auto-complete="new-password"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item style="text-align: right">
|
||
<!-- 取消 -->
|
||
<el-button size="small" @click="cancel">
|
||
{{ $t('recompose:button:cancel') }}
|
||
</el-button>
|
||
<!-- 保存 -->
|
||
<el-button type="primary" size="small" @click="save">
|
||
{{ $t('recompose:button:save') }}
|
||
</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import { initSetUserNameAndPwd } from '@/api/admin.js'
|
||
import md5 from 'js-md5'
|
||
import { mapGetters, mapMutations } from 'vuex'
|
||
export default {
|
||
data() {
|
||
return {
|
||
password: {
|
||
NewUserName: null,
|
||
UserId: null,
|
||
ConfirmPassWord: null,
|
||
NewPassWord: null,
|
||
Email: null,
|
||
UserType: null,
|
||
access_token: null,
|
||
},
|
||
passwordFormRules: {
|
||
NewUserName: [
|
||
{
|
||
required: true,
|
||
validator: (rule, value, callback) => {
|
||
var lang = zzSessionStorage.getItem('lang')
|
||
? zzSessionStorage.getItem('lang')
|
||
: 'zh'
|
||
/* eslint-disable */
|
||
var reg1 = /^[a-zA-Z0-9_]{4,16}$/ //密码必须是8位以上、必须含有字母、数字、特殊符号
|
||
if (!reg1.test(value)) {
|
||
callback(
|
||
lang === 'zh'
|
||
? new Error(
|
||
'1）新建账号，用户名字符长度最小为4个字符，最大为16个字符，只可使用字母、数字、下划线；'
|
||
)
|
||
: new Error(
|
||
'For a new account, the username must have:1) At least 4 characters;2) At most 16 characters;3)Only letters, numbers, and underscores are allowed.'
|
||
)
|
||
)
|
||
} else {
|
||
callback()
|
||
}
|
||
},
|
||
trigger: 'blur',
|
||
},
|
||
],
|
||
NewPassWord: [
|
||
{
|
||
required: true,
|
||
validator: (rule, value, callback) => {
|
||
!value
|
||
? callback(
|
||
new Error(this.$t('trials:researchForm:formRule:specify'))
|
||
)
|
||
: callback()
|
||
},
|
||
trigger: 'blur',
|
||
},
|
||
{
|
||
required: true,
|
||
trigger: 'blur',
|
||
validator: this.$validatePassword,
|
||
},
|
||
],
|
||
ConfirmPassWord: [
|
||
{
|
||
required: true,
|
||
validator: (rule, value, callback) => {
|
||
!value
|
||
? callback(
|
||
new Error(this.$t('trials:researchForm:formRule:specify'))
|
||
)
|
||
: callback()
|
||
},
|
||
trigger: 'blur',
|
||
},
|
||
{
|
||
required: true,
|
||
trigger: 'blur',
|
||
validator: (rule, value, callback) => {
|
||
value !== this.password.NewPassWord
|
||
? callback(
|
||
new Error(
|
||
this.$t(
|
||
'trials:researchForm:formRule:NewPassWordAndConfirmPassWord'
|
||
)
|
||
)
|
||
)
|
||
: callback()
|
||
},
|
||
},
|
||
],
|
||
Email: [
|
||
{
|
||
// type: 'email',
|
||
pattern: new RegExp(this.$reg().EmailRegexStr),
|
||
message: this.$t('rules:email'),
|
||
trigger: 'blur,change',
|
||
},
|
||
]
|
||
},
|
||
userId: null,
|
||
loading: false,
|
||
}
|
||
},
|
||
computed: {
|
||
...mapGetters(['asyncRoutes', 'routes', 'language']),
|
||
},
|
||
mounted() {
|
||
this.password.UserId = this.$route.query.UserId
|
||
this.password.NewUserName = this.$route.query.UserName
|
||
this.password.Email = this.$route.query.Email
|
||
this.password.UserType = this.$route.query.UserType
|
||
this.password.access_token = this.$route.query.access_token
|
||
this.$i18n.locale = this.$route.query.lang
|
||
this.setLanguage(this.$route.query.lang)
|
||
this.$updateDictionary()
|
||
// if (!this.password.NewUserName) {
|
||
// this.$alert(this.$t('recompose:message:warning'))
|
||
// }
|
||
},
|
||
methods: {
|
||
...mapMutations({ setLanguage: 'lang/setLanguage' }),
|
||
async logout() {
|
||
var loginType = zzSessionStorage.getItem('loginType')
|
||
await this.$store.dispatch('user/logout')
|
||
if (loginType) {
|
||
this.$router.push(`/login?loginType=${loginType}`)
|
||
} else {
|
||
this.$router.push(`/login`)
|
||
}
|
||
if (!this.$i18n.locale) {
|
||
//this.$i18n.locale = 'zh'
|
||
//this.setLanguage('zh')
|
||
}
|
||
this.$updateDictionary()
|
||
},
|
||
save() {
|
||
this.$refs.passwordForm.validate((valid) => {
|
||
if (valid) {
|
||
if (this.password.NewPassWord !== this.password.ConfirmPassWord) {
|
||
// 两次密码输入不一致
|
||
this.$alert(this.$t('recompose:message:passwordDiffer'))
|
||
return
|
||
}
|
||
const param = {
|
||
NewUserName: this.password.NewUserName,
|
||
UserId: this.password.UserId,
|
||
NewPwd: md5(this.password.NewPassWord),
|
||
access_token: this.password.access_token,
|
||
}
|
||
this.loading = true
|
||
initSetUserNameAndPwd(param)
|
||
.then((res) => {
|
||
this.loading = false
|
||
if (res.IsSuccess) {
|
||
// 修改成功,请重新登录账号
|
||
this.$message.success(
|
||
this.$t('recompose:message:updatedSuccessfully')
|
||
)
|
||
setTimeout(() => {
|
||
this.logout()
|
||
}, 500)
|
||
}
|
||
})
|
||
.catch(() => {
|
||
this.loading = false
|
||
})
|
||
}
|
||
})
|
||
},
|
||
cancel() {
|
||
// this.$refs['passwordForm'].resetFields()
|
||
this.password.NewPassWord = null
|
||
this.password.NewUserName = null
|
||
this.password.ConfirmPassWord = null
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
<style>
|
||
.reset-wrapper {
|
||
padding: 20px;
|
||
}
|
||
.reset-wrapper .el-page-header {
|
||
line-height: 50px;
|
||
border: 1px solid #ebeef5;
|
||
border-radius: 4px;
|
||
background-color: #fff;
|
||
}
|
||
.reset-wrapper .box-wrapper {
|
||
width: 60%;
|
||
margin: 20px auto;
|
||
padding: 10px;
|
||
color: #303133;
|
||
}
|
||
</style>
|
||
<style scoped>
|
||
input:-webkit-autofill {
|
||
-webkit-text-fill-color: #ededed !important;
|
||
box-shadow: 0 0 0px 1000px transparent inset !important;
|
||
background-color: transparent;
|
||
background-image: none;
|
||
transition: background-color 50000s ease-in-out 0s;
|
||
}
|
||
input {
|
||
background-color: transparent;
|
||
caret-color: #fff;
|
||
}
|
||
::v-deep .is-error.my_new_pwd {
|
||
margin-bottom: 45px;
|
||
}
|
||
</style>
|