lims_college/frontend_web/src/views/setuser/passwordset.vue

<template>
  <el-dialog title="修改密码"
             :visible.sync="adddialog"
             width="700px">
    <!-- <div class="page"> -->
    <el-row>
      <el-col :span="20"
              style="text-align:center">
        <el-form :model="pwdform"
                 :rules="pwdrules"
                 ref="pwdform"
                 label-width="200px">
          <el-form-item label="当前登录密码 ："
                        prop="pass"
                        required>
            <el-input type="password"
                      v-model="pwdform.pass"
                      auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="新的登录密码 ："
                        prop="newpass"
                        required>
            <el-input type="password"
                      v-model="pwdform.newpass"
                      auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="确认新的登录密码 ："
                        prop="checknewPass"
                        required>
            <el-input type="password"
                      v-model="pwdform.checknewPass"
                      auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary"
                       @click="submitForm('pwdform')">提交</el-button>
            <el-button @click="resetForm('pwdform')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
import userApi from '@/api/setting/user'
export default {
  name: 'userchangepwd',
  data () {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入新密码'))
      } else {
        if (this.pwdform.checknewPass !== '') {
          this.$refs.pwdform.validateField('checknewPass')
        }
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入新密码'))
      } else if (value !== this.pwdform.newpass) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      pwdform: {
        pass: '',
        newpass: '',
        checknewPass: ''
      },
      pwdrules: {
        pass: [
          { required: true, message: '请输入当前密码', trigger: 'blur' }
        ],
        newpass: [
          { validator: validatePass, trigger: 'blur' }
        ],
        checknewPass: [
          { validator: validatePass2, trigger: 'blur' }
        ]
      },
      adddialog: false

    }
  },
  methods: {
    submitForm (formName) {
      let _this = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(_this.pwdform, 'wang')
          userApi.userchangepwd(_this.pwdform)
            .then(res => {
              // response
              if (res.data.code === 0) {
                _this.$message({
                  type: 'success',
                  message: res.data.message
                })
                let url = '/login'
                this.$router.push(url)
                // this.pwdform.pass = ''
                // this.pwdform.newpass = ''
                // this.pwdform.checknewPass = ''
              } else {
                _this.$message({
                  type: 'warning',
                  message: res.data.message
                })
              }
            })
            .catch(() => { })
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style>
.page {
  margin: 50px;
  padding: 20px 40px;
  background-color: #fff;
  box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}
</style>