feat:增加个人中心:40% 支持右侧的密码修改
parent
6bfc1961ce
commit
d030a73beb
|
@ -5,6 +5,7 @@ import { Card, Tabs } from 'ant-design-vue';
|
||||||
import { Page } from '@vben/common-ui';
|
import { Page } from '@vben/common-ui';
|
||||||
import ProfileUser from './modules/profile-user.vue';
|
import ProfileUser from './modules/profile-user.vue';
|
||||||
import BaseInfo from './modules/base-info.vue';
|
import BaseInfo from './modules/base-info.vue';
|
||||||
|
import ResetPwd from './modules/reset-pwd.vue';
|
||||||
|
|
||||||
import { onMounted, ref } from 'vue';
|
import { onMounted, ref } from 'vue';
|
||||||
import { getUserProfile } from '#/api/system/user/profile';
|
import { getUserProfile } from '#/api/system/user/profile';
|
||||||
|
@ -43,13 +44,13 @@ onMounted(loadProfile);
|
||||||
<!-- 右侧 标签页 -->
|
<!-- 右侧 标签页 -->
|
||||||
<Card class="ml-3 w-3/5">
|
<Card class="ml-3 w-3/5">
|
||||||
<Tabs v-model:active-key="activeName" class="-mt-4">
|
<Tabs v-model:active-key="activeName" class="-mt-4">
|
||||||
<Tabs.TabPane key="basicInfo" tab="基本信息">
|
<Tabs.TabPane key="basicInfo" tab="基本设置">
|
||||||
<BaseInfo :profile="profile" @success="refreshProfile" />
|
<BaseInfo :profile="profile" @success="refreshProfile" />
|
||||||
</Tabs.TabPane>
|
</Tabs.TabPane>
|
||||||
<Tabs.TabPane key="resetPwd" tab="修改密码">
|
<Tabs.TabPane key="resetPwd" tab="密码设置">
|
||||||
<!-- <ResetPwd /> -->
|
<ResetPwd />
|
||||||
</Tabs.TabPane>
|
</Tabs.TabPane>
|
||||||
<Tabs.TabPane key="userSocial" tab="社交信息">
|
<Tabs.TabPane key="userSocial" tab="社交绑定">
|
||||||
<!-- <UserSocial :profile="profile" /> -->
|
<!-- <UserSocial :profile="profile" /> -->
|
||||||
</Tabs.TabPane>
|
</Tabs.TabPane>
|
||||||
</Tabs>
|
</Tabs>
|
||||||
|
|
|
@ -0,0 +1,96 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import type { Recordable } from '@vben/types';
|
||||||
|
|
||||||
|
import { message } from 'ant-design-vue';
|
||||||
|
|
||||||
|
import { useVbenForm, z } from '#/adapter/form';
|
||||||
|
import { updateUserPassword } from '#/api/system/user/profile';
|
||||||
|
import { $t } from '@vben/locales';
|
||||||
|
|
||||||
|
const [Form, formApi] = useVbenForm({
|
||||||
|
commonConfig: {
|
||||||
|
labelWidth: 70,
|
||||||
|
},
|
||||||
|
schema: [
|
||||||
|
{
|
||||||
|
component: 'InputPassword',
|
||||||
|
fieldName: 'oldPassword',
|
||||||
|
label: '旧密码',
|
||||||
|
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: '新密码',
|
||||||
|
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: '确认密码',
|
||||||
|
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({
|
||||||
|
content: $t('ui.actionMessage.operationSuccess'),
|
||||||
|
key: 'action_process_msg',
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error);
|
||||||
|
} finally {
|
||||||
|
formApi.setLoading(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="mt-[16px] md:w-full lg:w-1/2 2xl:w-2/5">
|
||||||
|
<Form />
|
||||||
|
</div>
|
||||||
|
</template>
|
|
@ -130,7 +130,7 @@ export function useSendMailFormSchema(): VbenFormSchema[] {
|
||||||
componentProps: {
|
componentProps: {
|
||||||
placeholder: '请输入收件邮箱',
|
placeholder: '请输入收件邮箱',
|
||||||
},
|
},
|
||||||
rules: z.string().email('请输入正确的邮箱地址'),
|
rules: z.string().email('请输入正确的邮箱'),
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue