info.vue
3.69 KB
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
<script setup lang="ts">
import { reactive, ref, getCurrentInstance } from "vue";
// import * as store from "@/pinia/index";
import { useLoginStore } from '@/pinia/login';
import { userPwdChange } from "@/api/user/user";
import type { ElForm } from "element-plus";
const ruleFormRef = ref<InstanceType<typeof ElForm>>();
let instance: ComponentInternalInstance | null = getCurrentInstance();
let form = reactive({
data: {
// userId: store?.family?.loginStore()?.id,
userId: useLoginStore()?.getId,
oldPassword: "",
newPassword: "",
surePwd: "",
},
loading: false,
});
/**
* 验证两次输入密码一致
* @param {object} rules 验证规则
* @param {string} value 确认密码文本
* @callback checkPwd~checkDoublePwdCallback
*/
const checkPwd = (rules, value, callback) => {
if (value === form.data.newPassword) {
callback();
} else {
callback(new Error("请确认密码和新密码一致"));
}
};
/**
* 表单验证规则
*/
const rules = reactive({
oldPassword: [
{
required: true,
message: "请填写旧密码",
trigger: "blur",
},
],
newPassword: [
{
required: true,
message: "请填写新密码",
trigger: "blur",
},
],
surePwd: [
{
required: true,
message: "请确认密码和新密码一致",
trigger: "blur",
validator: checkPwd,
},
],
});
/**
* 表单重置
*/
const resetForm = (formEl: InstanceType<typeof ElForm> | undefined) => {
if (!formEl) return;
formEl.resetFields();
};
/**
* 表单提交
*/
const submitForm = (formEl: InstanceType<typeof ElForm> | undefined) => {
form.loading = true;
if (!formEl) return;
formEl.validate((valid) => {
if (valid) {
userPwdChange(form.data)
.then((res) => {
if (res) {
instance?.proxy?.$message.success("修改成功,请重新登录");
// store.family.loginStore().removeToken();
useLoginStore()?.removeToken();
}
})
.catch((error) => {
console.log(error);
})
.finally(() => {
form.loading = false;
});
} else {
instance?.proxy?.$message.error("请检查表单内容");
form.loading = false;
return false;
}
});
};
</script>
<template>
<div class="page-container">
<el-card class="form_card" style="max-width: 1303px">
<h1>基本信息</h1>
<el-form
:inline="true"
:model="form.data"
:rules="rules"
ref="ruleFormRef"
label-width="120px"
class="card-form"
>
<el-form-item label="旧密码" prop="oldPassword" style="width: 100%">
<el-input
v-model.trim="form.data.oldPassword"
placeholder="请填写旧密码"
maxlength="15"
/>
</el-form-item>
<el-form-item label="新密码" prop="newPassword" style="width: 100%">
<el-input
v-model.trim="form.data.newPassword"
placeholder="请填写新密码"
maxlength="15"
/>
</el-form-item>
<el-form-item label="确认密码" prop="surePwd" style="width: 100%">
<el-input
v-model.trim="form.data.surePwd"
placeholder="请确认密码"
maxlength="15"
/>
</el-form-item>
<el-form-item style="width: 100%">
<el-button
type="primary"
@click.prevent="submitForm(ruleFormRef)"
:loading="form.loading"
>提交</el-button
>
<el-button type="info" @click="resetForm(ruleFormRef)"
>取消</el-button
>
</el-form-item>
</el-form>
</el-card>
</div>
</template>