324023892d8fab50a73501295b17aeb37a3fcd30.svn-base 3.8 KB

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