ResetPwd.vue 3.7 KB

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