1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<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="scss">
@import './app-update-password.scss';
</style>