UpdateUserPwd.vue

<template>
  <!--修改密码对话框-->
  <el-dialog v-dialogDrag
             style="font-size: 10px;"
             width='500px'
             :title="$t('Security.modifyPassword')"
             @close="close"
             :visible.sync="dialogUpdatePwd">
    <el-main style="padding-bottom: 10px;">
      <el-form ref="form" :model="form" :inline="true" :label-position="localPosition">
        <el-form-item prop="password" style="margin-bottom: -10px;" :label="'*'+$t('login.oldPass') + '：'" :label-width="formLabelWidth">
          <el-input type="password" size='mini' :placeholder="$t('common.placeholder')"
                    v-model="userPwdForm.originalPassword"
                    v-on:blur="passwordCheck"
                    autocomplete="off"
                    style="width:200px"></el-input>
        </el-form-item>
        <el-form-item prop="newPassword" style="margin-bottom: -10px;" :label="'*'+$t('login.newPass') + '：'" :label-width="formLabelWidth">
          <el-input type="password" size='mini' :placeholder="$t('common.placeholder')"
                    v-model="userPwdForm.newPassword"
                    v-on:blur="newPasswordCheck"
                    autocomplete="off"
                    style="width:200px"></el-input>
        </el-form-item>
        <el-form-item prop="renewPassword" style="margin-bottom: -10px;" :label="'*'+$t('login.checkPass') + '：'" :label-width="formLabelWidth">
          <el-input type="password" size='mini' :placeholder="$t('common.placeholder')"
                    v-model="userPwdForm.renewPassword"
                    v-on:blur="renewPasswordCheck"
                    autocomplete="off"
                    style="width:200px"></el-input>
        </el-form-item>
      </el-form>
    </el-main>
    <div slot="footer" class="dialog-footer">
      <el-button size='mini' icon='el-icon-circle-check' type="primary" @click="updateUserPwd">
        {{$t("common.ok")}}
      </el-button>
      <el-button size='mini' icon='el-icon-circle-close' @click="close">{{$t("common.cancel")}}</el-button>
    </div>
  </el-dialog>
</template>

<script>
import UserService from '../../../domain/services/UserService.js'
import legitimacyCheck from '../../../utils/legitimacyCheck'
import HelperUtil from '../../../utils/HelperUtil'
import md5 from 'js-md5'

export default {
  props: ['command'],

  mounted () {
    this.dialogUpdatePwd = true
  },

  data () {
    return {
      user: this.command.target,
      dialogUpdatePwd: false,

      // form参数
      formLabelWidth: '140px',
      localPosition: 'right',

      // 密码表单
      userPwdForm: {
        originalPassword: '',
        newPassword: '',
        renewPassword: ''
      }
    }
  },

  methods: {
    // 结束对话框
    close: function () {
      this.command.done()
    },

    /* ---------------------------修改密码--------------------------- */

    /***
       * @Description  : 保存修改密码
       * @author       : zf
       * @date         : 2019/04/12 10:38
       */
    updateUserPwd: function () {
      let _this = this
      if (this.passwordCheck() && this.newPasswordCheck() && this.renewPasswordCheck()) {
        let loadingInstance = _this.Loading.openLoading()
        var arr = []
        arr.push(md5(this.userPwdForm.originalPassword).toUpperCase(), md5(this.userPwdForm.renewPassword).toUpperCase())
        UserService.modifyUserPwd(arr).then(result => {
          // 成功
          _this.Loading.closeLoading(loadingInstance)
          _this.InfoTip.successTip(_this, HelperUtil.getStatusCodeObjectByCode(_this.successCode.MODIFY_CODE))
          HelperUtil.toLoginPage()
          _this.close()
        }).catch(err => {
          // 失败
          _this.Loading.closeLoading(loadingInstance)
          _this.InfoTip.errorTip(_this, err)
        })
      }
    },

    /* ---------------------------修改表单检查合法性--------------------------- */

    /***
       * @Description  : 原始密码检测
       * @author       : zf
       * @date         : 2019/03/18 17:54
       */
    passwordCheck: function () {
      let userCheck = legitimacyCheck()
      if (!userCheck.passwordCheck(this.userPwdForm.originalPassword)) {
        this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.OLD_PWD_CODE))
        return false
      } else {
        return true
      }
    },

    /***
       * @Description  : 新密码检测
       * @author       : zf
       * @date         : 2019/03/18 17:54
       */
    newPasswordCheck: function () {
      let userCheck = legitimacyCheck()
      if (!userCheck.passwordCheck(this.userPwdForm.newPassword)) {
        this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.NEW_PWD_CODE))
        return false
      } else {
        if (this.userPwdForm.renewPassword === '' || this.userPwdForm.renewPassword === null) {
          return true
        } else {
          if (!userCheck.passwordIsEqual(this.userPwdForm.newPassword, this.userPwdForm.renewPassword)) {
            this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.DIFFERENT_PWD_CODE))
            return false
          } else {
            return true
          }
        }
      }
    },

    /***
       * @Description  : 再次密码检测
       * @author       : zf
       * @date         : 2019/03/18 17:54
       */
    renewPasswordCheck: function () {
      let userCheck = legitimacyCheck()
      if (!userCheck.passwordCheck(this.userPwdForm.renewPassword)) {
        this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.RENEW_PWD_CODE))
        return false
      } else {
        if (!userCheck.passwordIsEqual(this.userPwdForm.newPassword, this.userPwdForm.renewPassword)) {
          this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.DIFFERENT_PWD_CODE))
          return false
        } else {
          return true
        }
      }
    }
  }
}
</script>

<style scoped>

</style>