|
@@ -0,0 +1,166 @@
|
|
|
+<template>
|
|
|
+ <div class="change-pwd">
|
|
|
+ <a-form @submit="handleSubmit" :form="form">
|
|
|
+ <!-- 原始密码 -->
|
|
|
+ <a-form-item
|
|
|
+ label="原始密码"
|
|
|
+ prop="oldPwd"
|
|
|
+ :label-col="formLayout.labelCol"
|
|
|
+ :wrapper-col="formLayout.wrapperCol">
|
|
|
+ <a-input
|
|
|
+ type="password"
|
|
|
+ :maxLength="12"
|
|
|
+ placeholder="请输入原始密码(6~12位)"
|
|
|
+ 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"
|
|
|
+ :maxLength="12"
|
|
|
+ placeholder="请输入新密码(6~12位)"
|
|
|
+ v-decorator="[
|
|
|
+ 'formCustom.passwd',
|
|
|
+ { initialValue: formCustom.passwd,
|
|
|
+ rules: [
|
|
|
+ { required: true, message: '请输入新密码' },
|
|
|
+ { validator: passwordValid }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ ]">
|
|
|
+ </a-input>
|
|
|
+ </a-form-item>
|
|
|
+ <!-- 再次确认 -->
|
|
|
+ <a-form-item
|
|
|
+ label="再次确认"
|
|
|
+ prop="passwdCheck"
|
|
|
+ :label-col="formLayout.labelCol"
|
|
|
+ :wrapper-col="formLayout.wrapperCol">
|
|
|
+ <a-input
|
|
|
+ type="password"
|
|
|
+ :maxLength="12"
|
|
|
+ placeholder="请再次输入新密码(6~12位)"
|
|
|
+ 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>
|
|
|
+ <div style="text-align: center;">
|
|
|
+ <a-button type="primary" htmlType="submit" :loading="loading">保存</a-button>
|
|
|
+ <a-button @click="handleReset('formCustom')" style="margin-left: 8px">重置</a-button>
|
|
|
+ </div>
|
|
|
+ </a-form-item>
|
|
|
+ <!-- </a-col> -->
|
|
|
+ </a-form>
|
|
|
+ </div>
|
|
|
+ <!-- <a-row :gutter="24" class="change-pwd">
|
|
|
+ <a-col span="16" offset="8">
|
|
|
+
|
|
|
+ </a-col>
|
|
|
+ </a-row> -->
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { changePwd } from '@/api/login.js'
|
|
|
+import { mapActions } from 'vuex'
|
|
|
+export default {
|
|
|
+ name: 'ResetPwd',
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ // formLayout: {
|
|
|
+ // labelCol: {
|
|
|
+ // xs: { span: 24 },
|
|
|
+ // sm: { span: 6 },
|
|
|
+ // md: { span: 4 }
|
|
|
+ // },
|
|
|
+ // wrapperCol: {
|
|
|
+ // xs: { span: 24 },
|
|
|
+ // sm: { span: 18 },
|
|
|
+ // md: { span: 20 }
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ formLayout: {
|
|
|
+ labelCol: { span: 4 },
|
|
|
+ wrapperCol: { span: 20 }
|
|
|
+ },
|
|
|
+ form: this.$form.createForm(this),
|
|
|
+ loading: false,
|
|
|
+ formCustom: {
|
|
|
+ passwd: '',
|
|
|
+ passwdCheck: '',
|
|
|
+ oldPwd: ''
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ ...mapActions(['Logout']),
|
|
|
+ // 密码位数校验
|
|
|
+ passwordValid (rule, value, callback) {
|
|
|
+ if (value.length < 6 || value.length > 12) {
|
|
|
+ callback('请输入6~12位密码!')
|
|
|
+ } else {
|
|
|
+ callback()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 密码校验
|
|
|
+ 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()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ logout () {
|
|
|
+ this.Logout({}).then(() => {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.$router.push({ path: '/user/login' })
|
|
|
+ }, 16)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleReset () {
|
|
|
+ this.form.resetFields()
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+</style>
|