126 lines
3.2 KiB
Vue
126 lines
3.2 KiB
Vue
<template>
|
|
<el-dialog
|
|
v-model="visible"
|
|
title="修改密码"
|
|
width="450px"
|
|
@close="handleDialogClose"
|
|
>
|
|
<el-form
|
|
ref="passwordFormRef"
|
|
:model="passwordForm"
|
|
:rules="passwordFormRules"
|
|
label-width="100px"
|
|
>
|
|
<el-form-item label="旧密码" prop="oldPassword">
|
|
<el-input
|
|
v-model="passwordForm.oldPassword"
|
|
type="password"
|
|
placeholder="请输入旧密码"
|
|
show-password
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="新密码" prop="newPassword">
|
|
<el-input
|
|
v-model="passwordForm.newPassword"
|
|
type="password"
|
|
placeholder="请输入新密码"
|
|
show-password
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="确认密码" prop="confirmPassword">
|
|
<el-input
|
|
v-model="passwordForm.confirmPassword"
|
|
type="password"
|
|
placeholder="请再次输入新密码"
|
|
show-password
|
|
/>
|
|
</el-form-item>
|
|
</el-form>
|
|
<template #footer>
|
|
<el-button @click="visible = false">取消</el-button>
|
|
<el-button type="primary" :loading="loading" @click="handleSavePassword">
|
|
确认修改
|
|
</el-button>
|
|
</template>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed, reactive, ref } from "vue";
|
|
import { ElMessage } from "element-plus";
|
|
import { changePassword } from "@/api/user";
|
|
|
|
const props = defineProps({
|
|
modelValue: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
userId: {
|
|
type: [Number, String],
|
|
default: ""
|
|
}
|
|
});
|
|
|
|
const emit = defineEmits(["update:modelValue", "saved"]);
|
|
|
|
const visible = computed({
|
|
get: () => props.modelValue,
|
|
set: (value) => emit("update:modelValue", value)
|
|
});
|
|
|
|
const loading = ref(false);
|
|
const passwordFormRef = ref(null);
|
|
|
|
const passwordForm = reactive({
|
|
oldPassword: "",
|
|
newPassword: "",
|
|
confirmPassword: ""
|
|
});
|
|
|
|
const validateConfirmPassword = (rule, value, callback) => {
|
|
if (value !== passwordForm.newPassword) {
|
|
callback(new Error("两次输入的密码不一致"));
|
|
} else {
|
|
callback();
|
|
}
|
|
};
|
|
|
|
const passwordFormRules = {
|
|
oldPassword: [{ required: true, message: "请输入旧密码", trigger: "blur" }],
|
|
newPassword: [
|
|
{ required: true, message: "请输入新密码", trigger: "blur" },
|
|
{ min: 6, max: 20, message: "密码长度为 6 到 20 个字符", trigger: "blur" }
|
|
],
|
|
confirmPassword: [
|
|
{ required: true, message: "请再次输入新密码", trigger: "blur" },
|
|
{ validator: validateConfirmPassword, trigger: "blur" }
|
|
]
|
|
};
|
|
|
|
const handleSavePassword = async () => {
|
|
try {
|
|
await passwordFormRef.value.validate();
|
|
loading.value = true;
|
|
const res = await changePassword(props.userId, passwordForm);
|
|
if (res.code !== 200) {
|
|
ElMessage.error(res.msg || "修改密码失败");
|
|
return;
|
|
}
|
|
ElMessage.success(res.msg || "密码修改成功");
|
|
visible.value = false;
|
|
emit("saved");
|
|
} catch (error) {
|
|
console.error("修改密码失败", error);
|
|
if (error !== false) {
|
|
ElMessage.error("修改密码失败");
|
|
}
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
};
|
|
|
|
const handleDialogClose = () => {
|
|
passwordFormRef.value?.resetFields();
|
|
};
|
|
</script>
|