|
|
1
|
oldPassword<template>
|
|
|
2
3
4
5
6
7
8
|
<a-modal
:title="title"
:width="modalWidth"
:visible="visible"
:confirmLoading="confirmLoading"
@ok="handleOk"
@cancel="handleCancel"
|
|
|
9
|
:cancelText="$t('button.close')"
|
|
|
10
11
12
|
>
<a-spin :spinning="confirmLoading">
<a-form :form="form">
|
|
|
13
14
15
16
17
18
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('system.oldPassword')">
<a-input
type="password"
:placeholder="$t('system.inputOldPassword')"
v-decorator="['oldpassword', validatorRules.oldpassword]"
/>
|
|
|
19
20
|
</a-form-item>
|
|
|
21
22
23
24
25
26
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('system.newPassword')">
<a-input
type="password"
:placeholder="$t('system.inputNewPassword')"
v-decorator="['password', validatorRules.password]"
/>
|
|
|
27
28
|
</a-form-item>
|
|
|
29
30
31
32
33
34
35
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('system.confirmNewPassword')">
<a-input
type="password"
@blur="handleConfirmBlur"
:placeholder="$t('system.inputConfirmNewPassword')"
v-decorator="['confirmpassword', validatorRules.confirmpassword]"
/>
|
|
|
36
37
38
39
40
41
42
|
</a-form-item>
</a-form>
</a-spin>
</a-modal>
</template>
<script>
|
|
|
43
|
import { putAction } from '@/api/manage'
|
|
|
44
|
|
|
|
45
|
export default {
|
|
|
46
|
name: 'UserPassword',
|
|
|
47
48
|
data() {
return {
|
|
|
49
50
|
title: this.$t('system.passwordChange'),
modalWidth: 840,
|
|
|
51
52
53
54
|
visible: false,
confirmLoading: false,
validatorRules: {
oldpassword: {
|
|
|
55
56
57
58
59
60
|
rules: [
{
required: true,
message: this.$t('system.inputOldPassword')
}
]
|
|
|
61
|
},
|
|
|
62
|
password: {
|
|
|
63
64
65
66
67
68
69
70
71
|
rules: [
{
required: true,
message: this.$t('system.inputNewPassword')
},
{
validator: this.validateToNextPassword
}
]
|
|
|
72
|
},
|
|
|
73
|
confirmpassword: {
|
|
|
74
75
76
77
78
79
80
81
82
|
rules: [
{
required: true,
message: this.$t('system.inputConfirmNewPassword')
},
{
validator: this.compareToFirstPassword
}
]
|
|
|
83
84
|
}
},
|
|
|
85
86
|
confirmDirty: false,
labelCol: {
|
|
|
87
88
|
xs: { span: 24 },
sm: { span: 5 }
|
|
|
89
|
},
|
|
|
90
|
wrapperCol: {
|
|
|
91
92
|
xs: { span: 24 },
sm: { span: 16 }
|
|
|
93
|
},
|
|
|
94
95
|
form: this.$form.createForm(this),
|
|
|
96
97
|
url: 'sys/user/updatePassword',
username: ''
|
|
|
98
99
100
101
102
|
}
},
methods: {
show(uname) {
if (!uname) {
|
|
|
103
|
this.$message.warning('当前系统无登录用户!')
|
|
|
104
105
106
|
return
} else {
this.username = uname
|
|
|
107
108
|
this.form.resetFields()
this.visible = true
|
|
|
109
110
111
112
113
114
|
}
},
handleCancel() {
this.close()
},
close() {
|
|
|
115
116
117
118
|
this.$emit('close')
this.visible = false
this.disableSubmit = false
this.selectedRole = []
|
|
|
119
120
|
},
handleOk() {
|
|
|
121
|
const that = this
|
|
|
122
123
124
|
// 触发表单验证
this.form.validateFields((err, values) => {
if (!err) {
|
|
|
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
|
that.confirmLoading = true
let params = Object.assign({ username: this.username }, values)
putAction(this.url, params)
.then(res => {
if (res.success) {
console.log(res)
that.$message.success(res.message)
that.close()
} else {
that.$message.warning(res.message)
}
})
.finally(() => {
that.confirmLoading = false
})
|
|
|
140
|
}
|
|
|
141
142
143
|
})
},
validateToNextPassword(rule, value, callback) {
|
|
|
144
|
const form = this.form
|
|
|
145
|
if (value && this.confirmDirty) {
|
|
|
146
|
form.validateFields(['confirm'], { force: true })
|
|
|
147
|
}
|
|
|
148
|
callback()
|
|
|
149
150
|
},
compareToFirstPassword(rule, value, callback) {
|
|
|
151
|
const form = this.form
|
|
|
152
|
if (value && value !== form.getFieldValue('password')) {
|
|
|
153
|
callback(this.$t('system.passwordsDoNotMatch'))
|
|
|
154
155
156
157
158
159
160
|
} else {
callback()
}
},
handleConfirmBlur(e) {
const value = e.target.value
this.confirmDirty = this.confirmDirty || !!value
|
|
|
161
162
|
}
}
|
|
|
163
|
}
|
|
|
164
165
166
167
|
</script>
<style scoped>
</style>
|
