app-update-password.vue

<template>
  <div class="update-password">
    <div class="password-item">
      <label for>
        {{$t('components.appUpdatePassword.oldPwd')}}
        <Input type="password" v-model="oldPwd" @on-blur="oldPwdVaild"/>
      </label>
    </div>
    <div class="password-item">
      <label for>
        {{$t('components.appUpdatePassword.newPwd')}}
        <Input type="password" v-model="newPwd"  @on-blur="newPwdVaild"/>
      </label>
    </div>
    <div class="password-item">
      <label for>
        {{$t('components.appUpdatePassword.confirmPwd')}}
        <Input type="password" v-model="confirmPwd" :disabled="!this.newPwd" @on-blur="confirmVaild" />
      </label>
    </div>
    <div class="password-item password-btn">
        <Button type="primary" long :disabled="!oldPwd || !newPwd || !confirmPwd || disUpdate" @click="updatePwd">{{$t('components.appUpdatePassword.sure')}}</Button>
    </div>
  </div>
</template>

<script lang = 'ts'>
import { Component, Vue, Prop, Model, Watch } from "vue-property-decorator";
import { Subject } from "rxjs";
import { AppModal } from "@/utils";
import EntityService from '@/service/entity-service';
@Component({})
export default class AppUpdatePassword extends Vue {

 /**
     * 原密码
     * 
     * @public
     * @memberof AppUpdatePassword
     */
    public oldPwd: string = "";

    /**
     * 新密码
     * 
     * @public
     * @memberof AppUpdatePassword
     */
    public newPwd: string = "";

    /**
     * 确认密码
     * 
     * @public
     * @memberof AppUpdatePassword
     */
    public confirmPwd: string = "";

    /**
     * 是否能禁用确认修改
     * 
     * @public
     * @memberof AppUpdatePassword
     */
    public disUpdate:boolean = true;

    /**
     * 校验输入的原密码是否为空
     * 
     * @public
     * @memberof AppUpdatePassword
     */
    public oldPwdVaild(){
        if(!this.oldPwd){
            this.$Notice.error({
                title: (this.$t('components.appUpdatePassword.oldPwdErr') as string),
                duration: 3
            });
        }
    }

    /**
     * 校验输入的新密码是否为空
     * 
     * @public
     * @memberof AppUpdatePassword
     */
    public newPwdVaild(){
        if(!this.newPwd){
            this.$Notice.error({
                title: (this.$t('components.appUpdatePassword.newPwdErr') as string),
                duration: 3
            });
        }
    }

    /**
     * 校验确认密码与新密码是否一致
     * 
     * @public
     * @memberof AppUpdatePassword
     */
    public confirmVaild() {
        if (this.newPwd && this.confirmPwd) {
            if (this.confirmPwd !== this.newPwd) {
                this.$Notice.error({
                    title: (this.$t('components.appUpdatePassword.confirmPwdErr') as string),
                    duration: 3
                });
            }else{
                this.disUpdate=false;
            }
        }
    }

    /**
     * 实体服务对象
     *
     * @protected
     * @type {EntityService}
     * @memberof AppUpdatePassword
     */
    protected entityService: EntityService = new EntityService();

    /**
     * 修改密码
     *
     * @public
     * @memberof AppUpdatePassword
     */
    public updatePwd(){
      const post: Promise<any> = this.entityService.changPassword(null,{oldPwd:this.oldPwd,newPwd:this.newPwd});
      post.then((response:any) =>{
            if (response && response.status === 200) {
                this.$emit("close");
            }
        }).catch((error: any) =>{
            this.$Notice.error({
                title: (this.$t('app.codeNotExist.sysException') as string),
                duration: 3
            });
            console.error(error);
        })
    }
}
</script>

<style lang="less">
@import './app-update-password.less';
</style>