2dbf37c6358d483150fff7ed1f05794adbef6922.svn-base 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129
  1. <template>
  2. <div class="app-container common-list-page">
  3. <el-form
  4. ref="temp"
  5. :model="temp"
  6. :rules="rules"
  7. status-icon
  8. label-width="100px"
  9. >
  10. <el-form-item label="旧密码:" prop="oldpassword">
  11. <el-input v-model="temp.oldpassword" type="password" auto-complete="off" />
  12. </el-form-item>
  13. <el-form-item label="新密码:" prop="password">
  14. <el-input v-model="temp.password" type="password" auto-complete="off" />
  15. </el-form-item>
  16. <el-form-item label="确认密码:" prop="password1">
  17. <el-input v-model="temp.password1" type="password" auto-complete="off" />
  18. </el-form-item>
  19. <el-form-item>
  20. <el-button type="primary" @click.native.prevent="toAmend">确认修改</el-button>
  21. </el-form-item>
  22. </el-form>
  23. </div>
  24. </template>
  25. <script>
  26. import { PostDataByName } from '@/api/common'
  27. export default {
  28. data() {
  29. var oldPass = (rule, value, callback) => {
  30. if (!value) {
  31. callback(new Error('请输入旧密码'))
  32. } else if (value.toString().length < 6 || value.toString().length > 18) {
  33. callback(new Error('密码长度为6-18位'))
  34. } else {
  35. callback()
  36. }
  37. }
  38. var validatePass = (rule, value, callback) => {
  39. console.log(value)
  40. if (!value) {
  41. callback(new Error('请输入新密码'))
  42. } else if (value.toString().length < 6 || value.toString().length > 18) {
  43. callback(new Error('密码长度为6-18位'))
  44. } else {
  45. callback()
  46. }
  47. }
  48. var validatePass2 = (rule, value, callback) => {
  49. if (value === '') {
  50. callback(new Error('请再次输入密码'))
  51. } else if (value !== this.temp.password) {
  52. callback(new Error('两次输入密码不一致!'))
  53. } else {
  54. callback()
  55. }
  56. }
  57. return {
  58. resetForm: {
  59. name: 'updatePwd',
  60. returntype: 'Map',
  61. parammaps: {
  62. password: '',
  63. username: this.$store.state.user.name
  64. }
  65. },
  66. temp: {},
  67. rules: {
  68. oldpassword: [
  69. { required: true, validator: oldPass, trigger: 'blur' }
  70. ],
  71. password: [
  72. { required: true, validator: validatePass, trigger: 'blur' }
  73. ],
  74. password1: [
  75. { required: true, validator: validatePass2, trigger: 'blur' }
  76. ]
  77. }
  78. }
  79. },
  80. methods: {
  81. toAmend() {
  82. console.log(111)
  83. this.$refs['temp'].validate(valid => {
  84. if (valid) {
  85. this.resetForm.parammaps.password = this.temp.password
  86. this.resetForm.parammaps.username = this.$store.state.user.name
  87. PostDataByName(this.resetForm).then(response => {
  88. if (response.msg === 'fail') {
  89. this.$notify({
  90. title: '失败',
  91. message: '修改失败',
  92. type: 'danger',
  93. duration: 2000
  94. })
  95. } else {
  96. setTimeout(() => {
  97. this.logout() // 调用跳转到登陆页的方法
  98. }, 1000)
  99. this.$notify({
  100. title: '成功',
  101. message: '修改成功',
  102. type: 'success',
  103. duration: 2000
  104. })
  105. }
  106. console.log(response)
  107. })
  108. }
  109. })
  110. },
  111. // 这是修改成功后重新返回登陆页的方法,看个人需要自行调整
  112. async logout() {
  113. await this.$store.dispatch('user/logout')
  114. this.$router.push(`/login`)
  115. }
  116. }
  117. }
  118. </script>
  119. <style lang="scss" scoped>
  120. .el-form {
  121. width: 60%;
  122. margin: 50px auto 0;
  123. text-align: center;
  124. button {
  125. margin: 20px 0 0;
  126. }
  127. }
  128. </style>