91 lines
2.1 KiB
Vue
91 lines
2.1 KiB
Vue
<script lang="js" setup>
|
|
import { updatePasswordApi } from "@/request/api";
|
|
import { ElMessage } from "element-plus";
|
|
|
|
const confirmLoading = ref(false);
|
|
const showDialog = defineModel(false);
|
|
|
|
const form = ref({
|
|
oldPassword: "",
|
|
newPassword: "",
|
|
confirmPassword: "",
|
|
});
|
|
|
|
function handleConfirm() {
|
|
if (form.value.newPassword === "") {
|
|
ElMessage.warning("新密码不能为空");
|
|
return;
|
|
}
|
|
if (form.value.confirmPassword !== form.value.newPassword) {
|
|
ElMessage.warning("新密码和确认密码不一致");
|
|
return;
|
|
}
|
|
|
|
confirmLoading.value = true;
|
|
|
|
updatePasswordApi({
|
|
newPassword: form.value.newPassword,
|
|
oldPassword: form.value.oldPassword,
|
|
})
|
|
.then((res) => {
|
|
if (res.success) {
|
|
// 修改成功
|
|
ElMessage.success("修改成功");
|
|
showDialog.value = false;
|
|
}
|
|
})
|
|
.finally(() => {
|
|
confirmLoading.value = false;
|
|
});
|
|
}
|
|
|
|
function resetForm() {
|
|
form.value.newPassword = "";
|
|
form.value.oldPassword = "";
|
|
form.value.confirmPassword = "";
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<el-dialog
|
|
v-model="showDialog"
|
|
@closed="resetForm"
|
|
title="修改密码"
|
|
width="400"
|
|
>
|
|
<G3Grid>
|
|
<G3GridGroup :label-width="80" :column="1" label-align="right">
|
|
<G3GridItem label="旧密码" :span="1">
|
|
<el-input v-model="form.oldPassword" type="password" show-password />
|
|
</G3GridItem>
|
|
<G3GridItem label="新密码" :span="1" required>
|
|
<el-input v-model="form.newPassword" type="password" show-password />
|
|
</G3GridItem>
|
|
<G3GridItem label="确认密码" :span="1" required>
|
|
<el-input
|
|
v-model="form.confirmPassword"
|
|
type="password"
|
|
show-password
|
|
/>
|
|
</G3GridItem>
|
|
</G3GridGroup>
|
|
</G3Grid>
|
|
|
|
<div class="footer">
|
|
<el-button @click="showDialog = false">取消</el-button>
|
|
<el-button type="primary" :loading="confirmLoading" @click="handleConfirm"
|
|
>确认</el-button
|
|
>
|
|
</div>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.footer {
|
|
margin-top: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
}
|
|
</style>
|