123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135 |
- <template>
- <div class="change-pwd">
- <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"
- 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"
- 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"
- 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" @click="handleSubmit">保存</a-button>
- <a-button @click="handleReset" style="margin-left: 8px">重置</a-button>
- </div>
- </a-form-model-item>
- </a-form-model>
- </div>
- </template>
- <script>
- import { changePwd } from '@/api/login'
- import { mapActions } from 'vuex'
- export default {
- name: 'ResetPwd',
- data () {
- return {
- formLayout: {
- labelCol: { span: 4 },
- wrapperCol: { span: 20 }
- },
- form: {
- oldPwd: '',
- passwd: '',
- 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 }
- ]
- }
- }
- },
- methods: {
- ...mapActions(['Logout']),
- // 密码位数校验
- passwordValid (rule, value, callback) {
- if (value.length < 6 || value.length > 12) {
- callback('请输入6~12位密码!')
- } else {
- callback()
- }
- },
- // 密码校验
- compareToFirstPassword (rule, value, callback) {
- if (value && (value !== this.form.passwd)) {
- callback('两次输入的密码不一致, 请重新输入!')
- } else {
- callback()
- }
- },
- // 过滤空格
- 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.$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
- }
- })
- },
- logout () {
- this.Logout({}).then(() => {
- setTimeout(() => {
- this.$router.push({ path: '/user/login' })
- }, 16)
- })
- },
- handleReset () {
- this.$refs.ruleForm.resetFields()
- }
- }
- }
- </script>
|