|
@@ -1,114 +1,76 @@
|
|
|
<template>
|
|
|
<div class="change-pwd">
|
|
|
- <a-form @submit="handleSubmit" :form="form">
|
|
|
- <!-- 原始密码 -->
|
|
|
- <a-form-item
|
|
|
- label="原始密码"
|
|
|
- prop="oldPwd"
|
|
|
- :label-col="formLayout.labelCol"
|
|
|
- :wrapper-col="formLayout.wrapperCol">
|
|
|
+ <a-form-model
|
|
|
+ id="change-pwd-form"
|
|
|
+ ref="ruleForm"
|
|
|
+ :model="form"
|
|
|
+ :rules="rules"
|
|
|
+ :label-col="formLayout.labelCol"
|
|
|
+ :wrapper-col="formLayout.wrapperCol">
|
|
|
+ <a-form-model-item label="原始密码" prop="oldPwd">
|
|
|
<a-input
|
|
|
type="password"
|
|
|
+ v-model.trim="form.oldPwd"
|
|
|
+ id="change-pwd-oldPwd"
|
|
|
:maxLength="12"
|
|
|
- placeholder="请输入原始密码(6~12位)"
|
|
|
- v-decorator="[
|
|
|
- 'formCustom.oldPwd',
|
|
|
- { initialValue: formCustom.oldPwd,
|
|
|
- rules: [
|
|
|
- { required: true, message: '请输入原始密码' },
|
|
|
- ]
|
|
|
- },
|
|
|
- ]">
|
|
|
- </a-input>
|
|
|
- </a-form-item>
|
|
|
- <!-- 新密码 -->
|
|
|
- <a-form-item
|
|
|
- label="新密码"
|
|
|
- prop="passwd"
|
|
|
- :label-col="formLayout.labelCol"
|
|
|
- :wrapper-col="formLayout.wrapperCol">
|
|
|
+ allowClear
|
|
|
+ placeholder="请输入原始密码(6~12位)" />
|
|
|
+ </a-form-model-item>
|
|
|
+ <a-form-model-item label="新密码" prop="passwd">
|
|
|
<a-input
|
|
|
type="password"
|
|
|
+ v-model.trim="form.passwd"
|
|
|
+ @change="filterEmpty"
|
|
|
+ id="change-pwd-passwd"
|
|
|
:maxLength="12"
|
|
|
- placeholder="请输入新密码(6~12位)"
|
|
|
- v-decorator="[
|
|
|
- 'formCustom.passwd',
|
|
|
- { initialValue: formCustom.passwd,
|
|
|
- rules: [
|
|
|
- { required: true, message: '请输入新密码' },
|
|
|
- { validator: passwordValid }
|
|
|
- ]
|
|
|
- },
|
|
|
- ]">
|
|
|
- </a-input>
|
|
|
- </a-form-item>
|
|
|
- <!-- 再次确认 -->
|
|
|
- <a-form-item
|
|
|
- label="再次确认"
|
|
|
- prop="passwdCheck"
|
|
|
- :label-col="formLayout.labelCol"
|
|
|
- :wrapper-col="formLayout.wrapperCol">
|
|
|
+ allowClear
|
|
|
+ placeholder="请输入新密码(6~12位)" />
|
|
|
+ </a-form-model-item>
|
|
|
+ <a-form-model-item label="再次确认" prop="passwdCheck">
|
|
|
<a-input
|
|
|
type="password"
|
|
|
+ v-model.trim="form.passwdCheck"
|
|
|
+ id="change-pwd-passwdCheck"
|
|
|
:maxLength="12"
|
|
|
- placeholder="请再次输入新密码(6~12位)"
|
|
|
- v-decorator="[
|
|
|
- 'formCustom.passwdCheck',
|
|
|
- { initialValue: formCustom.passwdCheck,
|
|
|
- rules: [
|
|
|
- { required: true, message: '请再次输入密码' },
|
|
|
- { validator: compareToFirstPassword }
|
|
|
- ]
|
|
|
- },
|
|
|
- ]">
|
|
|
- </a-input>
|
|
|
- </a-form-item>
|
|
|
- <!-- <a-col span="16" offset="8"> -->
|
|
|
- <a-form-item>
|
|
|
+ allowClear
|
|
|
+ placeholder="请再次输入新密码(6~12位)" />
|
|
|
+ </a-form-model-item>
|
|
|
+ <a-form-model-item :wrapper-col="{ span: 12, offset: 6 }">
|
|
|
<div style="text-align: center;">
|
|
|
- <a-button type="primary" htmlType="submit" :loading="loading">保存</a-button>
|
|
|
- <a-button @click="handleReset('formCustom')" style="margin-left: 8px">重置</a-button>
|
|
|
+ <a-button type="primary" @click="handleSubmit">保存</a-button>
|
|
|
+ <a-button @click="handleReset" style="margin-left: 8px">重置</a-button>
|
|
|
</div>
|
|
|
- </a-form-item>
|
|
|
- <!-- </a-col> -->
|
|
|
- </a-form>
|
|
|
+ </a-form-model-item>
|
|
|
+ </a-form-model>
|
|
|
</div>
|
|
|
- <!-- <a-row :gutter="24" class="change-pwd">
|
|
|
- <a-col span="16" offset="8">
|
|
|
-
|
|
|
- </a-col>
|
|
|
- </a-row> -->
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { changePwd } from '@/api/login.js'
|
|
|
+import { changePwd } from '@/api/login'
|
|
|
import { mapActions } from 'vuex'
|
|
|
export default {
|
|
|
name: 'ResetPwd',
|
|
|
data () {
|
|
|
return {
|
|
|
- // formLayout: {
|
|
|
- // labelCol: {
|
|
|
- // xs: { span: 24 },
|
|
|
- // sm: { span: 6 },
|
|
|
- // md: { span: 4 }
|
|
|
- // },
|
|
|
- // wrapperCol: {
|
|
|
- // xs: { span: 24 },
|
|
|
- // sm: { span: 18 },
|
|
|
- // md: { span: 20 }
|
|
|
- // }
|
|
|
- // },
|
|
|
formLayout: {
|
|
|
labelCol: { span: 4 },
|
|
|
wrapperCol: { span: 20 }
|
|
|
},
|
|
|
- form: this.$form.createForm(this),
|
|
|
- loading: false,
|
|
|
- formCustom: {
|
|
|
+ form: {
|
|
|
+ oldPwd: '',
|
|
|
passwd: '',
|
|
|
- passwdCheck: '',
|
|
|
- oldPwd: ''
|
|
|
+ passwdCheck: ''
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ oldPwd: [{ required: true, message: '请输入原始密码', trigger: 'blur' }],
|
|
|
+ passwd: [
|
|
|
+ { required: true, message: '请输入新密码', trigger: 'blur' },
|
|
|
+ { validator: this.passwordValid }
|
|
|
+ ],
|
|
|
+ passwdCheck: [
|
|
|
+ { required: true, message: '请再次输入密码', trigger: 'blur' },
|
|
|
+ { validator: this.compareToFirstPassword }
|
|
|
+ ]
|
|
|
}
|
|
|
}
|
|
|
},
|
|
@@ -124,27 +86,37 @@ export default {
|
|
|
},
|
|
|
// 密码校验
|
|
|
compareToFirstPassword (rule, value, callback) {
|
|
|
- const form = this.form
|
|
|
- if (value && value !== form.getFieldValue('formCustom.passwd')) {
|
|
|
+ if (value && (value !== this.form.passwd)) {
|
|
|
callback('两次输入的密码不一致, 请重新输入!')
|
|
|
} else {
|
|
|
callback()
|
|
|
}
|
|
|
},
|
|
|
- handleSubmit (e) {
|
|
|
- e.preventDefault()
|
|
|
+ // 过滤空格
|
|
|
+ filterEmpty () {
|
|
|
+ let str = this.form.passwd
|
|
|
+ str = str.replace(/\ +/g, '')
|
|
|
+ str = str.replace(/[ ]/g, '')
|
|
|
+ str = str.replace(/[\r\n]/g, '')
|
|
|
+ this.form.passwd = str
|
|
|
+ },
|
|
|
+ handleSubmit () {
|
|
|
const _this = this
|
|
|
- this.form.validateFields((err, values) => {
|
|
|
- if (!err) {
|
|
|
- changePwd({
|
|
|
- oldPassword: values.formCustom.oldPwd,
|
|
|
- password: values.formCustom.passwd
|
|
|
- }).then(res => {
|
|
|
+ this.$refs.ruleForm.validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ const form = {
|
|
|
+ oldPassword: _this.form.oldPwd,
|
|
|
+ password: _this.form.passwd
|
|
|
+ }
|
|
|
+ changePwd(form).then(res => {
|
|
|
if (res.status == 200) {
|
|
|
_this.$message.success('修改成功, 请重新登录')
|
|
|
_this.logout()
|
|
|
}
|
|
|
})
|
|
|
+ } else {
|
|
|
+ console.log('error submit!!')
|
|
|
+ return false
|
|
|
}
|
|
|
})
|
|
|
},
|
|
@@ -156,11 +128,8 @@ export default {
|
|
|
})
|
|
|
},
|
|
|
handleReset () {
|
|
|
- this.form.resetFields()
|
|
|
+ this.$refs.ruleForm.resetFields()
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
-
|
|
|
-<style>
|
|
|
-</style>
|