ChangePwd.vue 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156
  1. <template>
  2. <a-card :bordered="false" class="change-pwd-card">
  3. <a-row :gutter="24" class="change-pwd">
  4. <a-col span="8" offset="8">
  5. <a-form @submit="handleSubmit" :form="form">
  6. <!-- 原始密码 -->
  7. <a-form-item
  8. label="原始密码"
  9. prop="oldPwd"
  10. :label-col="formLayout.labelCol"
  11. :wrapper-col="formLayout.wrapperCol">
  12. <a-input
  13. type="password"
  14. v-decorator="[
  15. 'formCustom.oldPwd',
  16. { initialValue: formCustom.oldPwd,
  17. rules: [
  18. { required: true, message: '请输入原始密码' },
  19. ]
  20. },
  21. ]">
  22. </a-input>
  23. </a-form-item>
  24. <!-- 新密码 -->
  25. <a-form-item
  26. label="新密码"
  27. prop="passwd"
  28. :label-col="formLayout.labelCol"
  29. :wrapper-col="formLayout.wrapperCol">
  30. <a-input
  31. type="password"
  32. v-decorator="[
  33. 'formCustom.passwd',
  34. { initialValue: formCustom.passwd,
  35. rules: [
  36. { required: true, message: '请输入新密码' }
  37. ]
  38. },
  39. ]">
  40. </a-input>
  41. </a-form-item>
  42. <!-- 再次确认 -->
  43. <a-form-item
  44. label="再次确认"
  45. prop="passwdCheck"
  46. :label-col="formLayout.labelCol"
  47. :wrapper-col="formLayout.wrapperCol">
  48. <a-input
  49. type="password"
  50. v-decorator="[
  51. 'formCustom.passwdCheck',
  52. { initialValue: formCustom.passwdCheck,
  53. rules: [
  54. { required: true, message: '请再次输入密码' },
  55. { validator: compareToFirstPassword }
  56. ]
  57. },
  58. ]">
  59. </a-input>
  60. </a-form-item>
  61. <a-col span="16" offset="8">
  62. <a-form-item>
  63. <a-button type="primary" htmlType="submit" :loading="loading">保存</a-button>
  64. <a-button @click="handleReset('formCustom')" style="margin-left: 8px">重置</a-button>
  65. </a-form-item>
  66. </a-col>
  67. </a-form>
  68. </a-col>
  69. </a-row>
  70. </a-card>
  71. </template>
  72. <script>
  73. import { changePwd } from '@/api/login.js'
  74. import { mapActions, mapGetters } from 'vuex'
  75. export default {
  76. name: 'ChangePwd',
  77. data () {
  78. return {
  79. formLayout: {
  80. labelCol: {
  81. xs: { span: 24 },
  82. sm: { span: 6 }
  83. },
  84. wrapperCol: {
  85. xs: { span: 24 },
  86. sm: { span: 18 }
  87. }
  88. },
  89. form: this.$form.createForm(this),
  90. loading: false,
  91. formCustom: {
  92. passwd: '',
  93. passwdCheck: '',
  94. oldPwd: ''
  95. }
  96. }
  97. },
  98. methods: {
  99. ...mapActions(['Logout']),
  100. // 密码校验
  101. compareToFirstPassword (rule, value, callback) {
  102. const form = this.form
  103. if (value && value !== form.getFieldValue('formCustom.passwd')) {
  104. callback('两次输入的密码不一致, 请重新输入!')
  105. } else {
  106. callback()
  107. }
  108. },
  109. handleSubmit (e) {
  110. e.preventDefault()
  111. const _this = this
  112. this.form.validateFields((err, values) => {
  113. if (!err) {
  114. changePwd({
  115. oldPassword: values.formCustom.oldPwd,
  116. password: values.formCustom.passwd
  117. }).then(res => {
  118. if (res.status === '200') {
  119. _this.$message.success('修改成功, 请重新登录')
  120. _this.logout()
  121. } else {
  122. _this.$message.error(res.message)
  123. }
  124. })
  125. }
  126. })
  127. },
  128. logout () {
  129. this.Logout({}).then(() => {
  130. setTimeout(() => {
  131. this.$router.push({ path: '/user/login' })
  132. }, 16)
  133. })
  134. },
  135. handleReset () {
  136. this.form.resetFields()
  137. }
  138. }
  139. }
  140. </script>
  141. <style scoped>
  142. .change-pwd {
  143. margin-top: 15vh;
  144. }
  145. .change-pwd-card {
  146. height: 70vh;
  147. /* border-top: 2px solid #FFB01B; */
  148. }
  149. </style>