275 lines
8.5 KiB
Vue
275 lines
8.5 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">
|
|
<!-- 首次登录修改密码 -->
|
|
{{ !isUpdate ? $t('recompose:title:init') : $t('recompose:title:update') }}
|
|
</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 class="my_new_pwd" :label="$t('recompose:form:userName')" prop="NewUserName">
|
|
<el-input v-model="password.NewUserName" :disabled="isUpdate" />
|
|
</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(
|
|
'新建账号，用户名字符长度最小为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,
|
|
isUpdate: false
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters(['asyncRoutes', 'routes', 'language']),
|
|
},
|
|
mounted() {
|
|
this.password.UserId = this.$route.query.UserId
|
|
zzSessionStorage.setItem('identityUserId', 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
|
|
if (this.$route.query.isUpdate) {
|
|
this.isUpdate = true
|
|
}
|
|
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) {
|
|
// 修改成功,请重新登录账号
|
|
if (!this.isUpdate) {
|
|
this.$message.success(
|
|
this.$t('recompose:message:updatedSuccessfully')
|
|
)
|
|
} else {
|
|
this.$message.success(
|
|
this.$t('recompose:message:updatedSuccess')
|
|
)
|
|
}
|
|
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>
|