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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
| <script lang="ts" setup>
| import type { VbenFormSchema } from '@vben/common-ui';
| import type { BasicOption } from '@vben/types';
|
| import { computed, markRaw } from 'vue';
|
| import { AuthenticationLogin, SliderCaptcha, z } from '@vben/common-ui';
| import { $t } from '@vben/locales';
|
| import { useAuthStore } from '#/store';
|
| defineOptions({ name: 'Login' });
|
| const authStore = useAuthStore();
|
| const MOCK_USER_OPTIONS: BasicOption[] = [
| {
| label: 'Super',
| value: 'vben',
| },
| {
| label: 'Admin',
| value: 'admin',
| },
| {
| label: 'User',
| value: 'jack',
| },
| ];
|
| const formSchema = computed((): VbenFormSchema[] => {
| return [
| {
| component: 'VbenSelect',
| // componentProps(_values, form) {
| // return {
| // 'onUpdate:modelValue': (value: string) => {
| // const findItem = MOCK_USER_OPTIONS.find(
| // (item) => item.value === value,
| // );
| // if (findItem) {
| // form.setValues({
| // password: '123456',
| // username: findItem.label,
| // });
| // }
| // },
| // options: MOCK_USER_OPTIONS,
| // placeholder: $t('authentication.selectAccount'),
| // };
| // },
| componentProps: {
| options: MOCK_USER_OPTIONS,
| placeholder: $t('authentication.selectAccount'),
| },
| fieldName: 'selectAccount',
| label: $t('authentication.selectAccount'),
| rules: z
| .string()
| .min(1, { message: $t('authentication.selectAccount') })
| .optional()
| .default('vben'),
| },
| {
| component: 'VbenInput',
| componentProps: {
| placeholder: $t('authentication.usernameTip'),
| },
| dependencies: {
| trigger(values, form) {
| if (values.selectAccount) {
| const findUser = MOCK_USER_OPTIONS.find(
| (item) => item.value === values.selectAccount,
| );
| if (findUser) {
| form.setValues({
| password: '123456',
| username: findUser.value,
| });
| }
| }
| },
| triggerFields: ['selectAccount'],
| },
| fieldName: 'username',
| label: $t('authentication.username'),
| rules: z.string().min(1, { message: $t('authentication.usernameTip') }),
| },
| {
| component: 'VbenInputPassword',
| componentProps: {
| placeholder: $t('authentication.password'),
| },
| fieldName: 'password',
| label: $t('authentication.password'),
| rules: z.string().min(1, { message: $t('authentication.passwordTip') }),
| },
| {
| component: markRaw(SliderCaptcha),
| fieldName: 'captcha',
| rules: z.boolean().refine((value) => value, {
| message: $t('authentication.verifyRequiredTip'),
| }),
| },
| ];
| });
| </script>
|
| <template>
| <AuthenticationLogin
| :form-schema="formSchema"
| :loading="authStore.loginLoading"
| @submit="authStore.authLogin"
| />
| </template>
|
|
