<script setup lang="ts">
|
import type { Recordable } from '@vben/types';
|
|
import { $t } from '@vben/locales';
|
|
import { message } from 'ant-design-vue';
|
|
import { useVbenForm, z } from '#/adapter/form';
|
import { updateUserPassword } from '#/api/system/user/profile';
|
|
const [Form, formApi] = useVbenForm({
|
wrapperClass: 'grid-cols-1',
|
actionPosition: 'left',
|
actionLayout: 'newLine',
|
commonConfig: {
|
labelWidth: 84,
|
},
|
schema: [
|
{
|
component: 'InputPassword',
|
fieldName: 'oldPassword',
|
label: '当前密码',
|
componentProps: { autocomplete: 'current-password', placeholder: '请输入当前登录密码' },
|
rules: z
|
.string({ message: '请输入密码' })
|
.min(5, '密码长度不能少于 5 个字符')
|
.max(20, '密码长度不能超过 20 个字符'),
|
},
|
{
|
component: 'InputPassword',
|
dependencies: {
|
rules(values) {
|
return z
|
.string({ message: '请输入新密码' })
|
.min(5, '密码长度不能少于 5 个字符')
|
.max(20, '密码长度不能超过 20 个字符')
|
.refine(
|
(value) => value !== values.oldPassword,
|
'新旧密码不能相同',
|
);
|
},
|
triggerFields: ['newPassword', 'oldPassword'],
|
},
|
fieldName: 'newPassword',
|
label: '新密码',
|
componentProps: { autocomplete: 'new-password', placeholder: '请输入 5–20 位新密码' },
|
rules: 'required',
|
},
|
{
|
component: 'InputPassword',
|
dependencies: {
|
rules(values) {
|
return z
|
.string({ message: '请输入确认密码' })
|
.min(5, '密码长度不能少于 5 个字符')
|
.max(20, '密码长度不能超过 20 个字符')
|
.refine(
|
(value) => value === values.newPassword,
|
'新密码和确认密码不一致',
|
);
|
},
|
triggerFields: ['newPassword', 'confirmPassword'],
|
},
|
fieldName: 'confirmPassword',
|
label: '确认密码',
|
componentProps: { autocomplete: 'new-password', placeholder: '请再次输入新密码' },
|
rules: 'required',
|
},
|
],
|
resetButtonOptions: {
|
show: false,
|
},
|
submitButtonOptions: {
|
content: '修改密码',
|
},
|
handleSubmit,
|
});
|
|
async function handleSubmit(values: Recordable<any>) {
|
try {
|
formApi.setLoading(true);
|
// 提交表单
|
await updateUserPassword({
|
oldPassword: values.oldPassword,
|
newPassword: values.newPassword,
|
});
|
message.success($t('ui.actionMessage.operationSuccess'));
|
await formApi.resetForm();
|
} catch (error) {
|
console.error(error);
|
} finally {
|
formApi.setLoading(false);
|
}
|
}
|
</script>
|
|
<template>
|
<div class="profile-password-form">
|
<p class="password-note">密码长度为 5–20 个字符，新密码需与当前密码不同。请勿与其他平台使用相同密码。</p>
|
<Form />
|
</div>
|
</template>
|
<style scoped>
|
.profile-password-form { max-width: 560px; }.password-note { margin: 0 0 24px; padding: 13px 16px; color: #365e82; background: #f0f6fc; font-size: 12px; line-height: 1.8; }.profile-password-form :deep(.ant-input-affix-wrapper) { min-height: 38px; }
|
</style>
|
