123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156 |
- <template>
- <a-card :bordered="false" class="change-pwd-card">
- <a-row :gutter="24" class="change-pwd">
- <a-col span="8" offset="8">
- <a-form @submit="handleSubmit" :form="form">
-
- <a-form-item
- label="原始密码"
- prop="oldPwd"
- :label-col="formLayout.labelCol"
- :wrapper-col="formLayout.wrapperCol">
- <a-input
- type="password"
- v-decorator="[
- 'formCustom.oldPwd',
- { initialValue: formCustom.oldPwd,
- rules: [
- { required: true, message: '请输入原始密码' },
- ]
- },
- ]">
- </a-input>
- </a-form-item>
-
- <a-form-item
- label="新密码"
- prop="passwd"
- :label-col="formLayout.labelCol"
- :wrapper-col="formLayout.wrapperCol">
- <a-input
- type="password"
- v-decorator="[
- 'formCustom.passwd',
- { initialValue: formCustom.passwd,
- rules: [
- { required: true, message: '请输入新密码' }
- ]
- },
- ]">
- </a-input>
- </a-form-item>
-
- <a-form-item
- label="再次确认"
- prop="passwdCheck"
- :label-col="formLayout.labelCol"
- :wrapper-col="formLayout.wrapperCol">
- <a-input
- type="password"
- v-decorator="[
- 'formCustom.passwdCheck',
- { initialValue: formCustom.passwdCheck,
- rules: [
- { required: true, message: '请再次输入密码' },
- { validator: compareToFirstPassword }
- ]
- },
- ]">
- </a-input>
- </a-form-item>
- <a-col span="16" offset="8">
- <a-form-item>
- <a-button type="primary" htmlType="submit" :loading="loading">保存</a-button>
- <a-button @click="handleReset('formCustom')" style="margin-left: 8px">重置</a-button>
- </a-form-item>
- </a-col>
- </a-form>
- </a-col>
- </a-row>
- </a-card>
- </template>
- <script>
- import { changePwd } from '@/api/login.js'
- import { mapActions, mapGetters } from 'vuex'
- export default {
- name: 'ChangePwd',
- data () {
- return {
- formLayout: {
- labelCol: {
- xs: { span: 24 },
- sm: { span: 6 }
- },
- wrapperCol: {
- xs: { span: 24 },
- sm: { span: 18 }
- }
- },
- form: this.$form.createForm(this),
- loading: false,
- formCustom: {
- passwd: '',
- passwdCheck: '',
- oldPwd: ''
- }
- }
- },
- methods: {
- ...mapActions(['Logout']),
-
- compareToFirstPassword (rule, value, callback) {
- const form = this.form
- if (value && value !== form.getFieldValue('formCustom.passwd')) {
- callback('两次输入的密码不一致, 请重新输入!')
- } else {
- callback()
- }
- },
- handleSubmit (e) {
- e.preventDefault()
- const _this = this
- this.form.validateFields((err, values) => {
- if (!err) {
- changePwd({
- oldPassword: values.formCustom.oldPwd,
- password: values.formCustom.passwd
- }).then(res => {
- if (res.status === '200') {
- _this.$message.success('修改成功, 请重新登录')
- _this.logout()
- } else {
- _this.$message.error(res.message)
- }
- })
- }
- })
- },
- logout () {
- this.Logout({}).then(() => {
- setTimeout(() => {
- this.$router.push({ path: '/user/login' })
- }, 16)
- })
- },
- handleReset () {
- this.form.resetFields()
- }
- }
- }
- </script>
- <style scoped>
- .change-pwd {
- margin-top: 15vh;
- }
- .change-pwd-card {
- height: 70vh;
-
- }
- </style>
|