ResetPwd.vue 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
  1. <template>
  2. <div class="change-pwd">
  3. <a-form-model
  4. id="change-pwd-form"
  5. ref="ruleForm"
  6. :model="form"
  7. :rules="rules"
  8. :label-col="formLayout.labelCol"
  9. :wrapper-col="formLayout.wrapperCol">
  10. <a-form-model-item label="原始密码" prop="oldPwd">
  11. <a-input
  12. type="password"
  13. v-model.trim="form.oldPwd"
  14. id="change-pwd-oldPwd"
  15. :maxLength="12"
  16. allowClear
  17. placeholder="请输入原始密码(6~12位)" />
  18. </a-form-model-item>
  19. <a-form-model-item label="新密码" prop="passwd">
  20. <a-input
  21. type="password"
  22. v-model.trim="form.passwd"
  23. @change="filterEmpty"
  24. id="change-pwd-passwd"
  25. :maxLength="12"
  26. allowClear
  27. placeholder="请输入新密码(6~12位)" />
  28. </a-form-model-item>
  29. <a-form-model-item label="再次确认" prop="passwdCheck">
  30. <a-input
  31. type="password"
  32. v-model.trim="form.passwdCheck"
  33. id="change-pwd-passwdCheck"
  34. :maxLength="12"
  35. allowClear
  36. placeholder="请再次输入新密码(6~12位)" />
  37. </a-form-model-item>
  38. <a-form-model-item :wrapper-col="{ span: 12, offset: 6 }">
  39. <div style="text-align: center;">
  40. <a-button type="primary" @click="handleSubmit">保存</a-button>
  41. <a-button @click="handleReset" style="margin-left: 8px">重置</a-button>
  42. </div>
  43. </a-form-model-item>
  44. </a-form-model>
  45. </div>
  46. </template>
  47. <script>
  48. import { changePwd } from '@/api/login'
  49. import { mapActions } from 'vuex'
  50. export default {
  51. name: 'ResetPwd',
  52. data () {
  53. return {
  54. formLayout: {
  55. labelCol: { span: 4 },
  56. wrapperCol: { span: 20 }
  57. },
  58. form: {
  59. oldPwd: '',
  60. passwd: '',
  61. passwdCheck: ''
  62. },
  63. rules: {
  64. oldPwd: [{ required: true, message: '请输入原始密码', trigger: 'blur' }],
  65. passwd: [
  66. { required: true, message: '请输入新密码', trigger: 'blur' },
  67. { validator: this.passwordValid }
  68. ],
  69. passwdCheck: [
  70. { required: true, message: '请再次输入密码', trigger: 'blur' },
  71. { validator: this.compareToFirstPassword }
  72. ]
  73. }
  74. }
  75. },
  76. methods: {
  77. ...mapActions(['Logout']),
  78. // 密码位数校验
  79. passwordValid (rule, value, callback) {
  80. if (value.length < 6 || value.length > 12) {
  81. callback('请输入6~12位密码!')
  82. } else {
  83. callback()
  84. }
  85. },
  86. // 密码校验
  87. compareToFirstPassword (rule, value, callback) {
  88. if (value && (value !== this.form.passwd)) {
  89. callback('两次输入的密码不一致, 请重新输入!')
  90. } else {
  91. callback()
  92. }
  93. },
  94. // 过滤空格
  95. filterEmpty () {
  96. let str = this.form.passwd
  97. str = str.replace(/\ +/g, '')
  98. str = str.replace(/[ ]/g, '')
  99. str = str.replace(/[\r\n]/g, '')
  100. this.form.passwd = str
  101. },
  102. handleSubmit () {
  103. const _this = this
  104. this.$refs.ruleForm.validate(valid => {
  105. if (valid) {
  106. const form = {
  107. oldPassword: _this.form.oldPwd,
  108. password: _this.form.passwd
  109. }
  110. changePwd(form).then(res => {
  111. if (res.status == 200) {
  112. _this.$message.success('修改成功, 请重新登录')
  113. _this.logout()
  114. }
  115. })
  116. } else {
  117. console.log('error submit!!')
  118. return false
  119. }
  120. })
  121. },
  122. logout () {
  123. this.Logout({}).then(() => {
  124. setTimeout(() => {
  125. this.$router.push({ path: '/user/login' })
  126. }, 16)
  127. })
  128. },
  129. handleReset () {
  130. this.$refs.ruleForm.resetFields()
  131. }
  132. }
  133. }
  134. </script>