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
| <script setup lang="ts">
| import type { VbenFormSchema } from '#/adapter/form';
|
| import { computed } from 'vue';
|
| import { ProfilePasswordSetting, z } from '../../../packages/effects/common-ui/src';
|
| import { message } from 'ant-design-vue';
|
| const formSchema = computed((): VbenFormSchema[] => {
| return [
| {
| fieldName: 'oldPassword',
| label: '旧密码',
| component: 'VbenInputPassword',
| componentProps: {
| placeholder: '请输入旧密码',
| },
| },
| {
| fieldName: 'newPassword',
| label: '新密码',
| component: 'VbenInputPassword',
| componentProps: {
| passwordStrength: true,
| placeholder: '请输入新密码',
| },
| },
| {
| fieldName: 'confirmPassword',
| label: '确认密码',
| component: 'VbenInputPassword',
| componentProps: {
| passwordStrength: true,
| placeholder: '请再次输入新密码',
| },
| dependencies: {
| rules(values) {
| const { newPassword } = values;
| return z
| .string({ required_error: '请再次输入新密码' })
| .min(1, { message: '请再次输入新密码' })
| .refine((value) => value === newPassword, {
| message: '两次输入的密码不一致',
| });
| },
| triggerFields: ['newPassword'],
| },
| },
| ];
| });
|
| function handleSubmit() {
| message.success('密码修改成功');
| }
| </script>
| <template>
| <ProfilePasswordSetting
| class="w-1/3"
| :form-schema="formSchema"
| @submit="handleSubmit"
| />
| </template>
|
|
