| 提交 | 用户 | age | ||
| a4a5a4 | 1 | import type { ValidationRule, FormInstance } from 'ant-design-vue/lib/form/Form'; |
| L | 2 | import type { RuleObject, NamePath } from 'ant-design-vue/lib/form/interface'; |
| ec9478 | 3 | import { ref, computed, unref, Ref } from 'vue'; |
| V | 4 | import { useI18n } from '/@/hooks/web/useI18n'; |
| 5 | ||
| 6 | export enum LoginStateEnum { | |
| 7 | LOGIN, | |
| 8 | REGISTER, | |
| 9 | RESET_PASSWORD, | |
| 10 | MOBILE, | |
| 11 | QR_CODE, | |
| 12 | } | |
| 13 | ||
| 14 | const currentState = ref(LoginStateEnum.LOGIN); | |
| 15 | ||
| 64d6fe | 16 | // 这里也可以优化 |
| L | 17 | // import { createGlobalState } from '@vueuse/core' |
| 18 | ||
| ec9478 | 19 | export function useLoginState() { |
| V | 20 | function setLoginState(state: LoginStateEnum) { |
| 21 | currentState.value = state; | |
| 22 | } | |
| 23 | ||
| 24 | const getLoginState = computed(() => currentState.value); | |
| 25 | ||
| a09a0e | 26 | function handleBackLogin() { |
| V | 27 | setLoginState(LoginStateEnum.LOGIN); |
| 28 | } | |
| ec9478 | 29 | |
| a09a0e | 30 | return { setLoginState, getLoginState, handleBackLogin }; |
| ec9478 | 31 | } |
| V | 32 | |
| a4a5a4 | 33 | export function useFormValid<T extends Object = any>(formRef: Ref<FormInstance>) { |
| L | 34 | const validate = computed(() => { |
| 35 | const form = unref(formRef); | |
| 36 | return form?.validate ?? ((_nameList?: NamePath) => Promise.resolve()); | |
| 37 | }); | |
| 38 | ||
| ec9478 | 39 | async function validForm() { |
| V | 40 | const form = unref(formRef); |
| 41 | if (!form) return; | |
| 42 | const data = await form.validate(); | |
| 43 | return data as T; | |
| 44 | } | |
| 45 | ||
| a4a5a4 | 46 | return { validate, validForm }; |
| ec9478 | 47 | } |
| V | 48 | |
| 49 | export function useFormRules(formData?: Recordable) { | |
| 50 | const { t } = useI18n(); | |
| 51 | ||
| 52 | const getAccountFormRule = computed(() => createRule(t('sys.login.accountPlaceholder'))); | |
| 53 | const getPasswordFormRule = computed(() => createRule(t('sys.login.passwordPlaceholder'))); | |
| 54 | const getSmsFormRule = computed(() => createRule(t('sys.login.smsPlaceholder'))); | |
| 55 | const getMobileFormRule = computed(() => createRule(t('sys.login.mobilePlaceholder'))); | |
| 56 | ||
| 57 | const validatePolicy = async (_: RuleObject, value: boolean) => { | |
| 58 | return !value ? Promise.reject(t('sys.login.policyPlaceholder')) : Promise.resolve(); | |
| 59 | }; | |
| 60 | ||
| 61 | const validateConfirmPassword = (password: string) => { | |
| 62 | return async (_: RuleObject, value: string) => { | |
| 63 | if (!value) { | |
| 64 | return Promise.reject(t('sys.login.passwordPlaceholder')); | |
| 65 | } | |
| 66 | if (value !== password) { | |
| 67 | return Promise.reject(t('sys.login.diffPwd')); | |
| 68 | } | |
| 69 | return Promise.resolve(); | |
| 70 | }; | |
| 71 | }; | |
| 72 | ||
| 4f20d4 | 73 | const getFormRules = computed((): { [k: string]: ValidationRule | ValidationRule[] } => { |
| ec9478 | 74 | const accountFormRule = unref(getAccountFormRule); |
| V | 75 | const passwordFormRule = unref(getPasswordFormRule); |
| 76 | const smsFormRule = unref(getSmsFormRule); | |
| 77 | const mobileFormRule = unref(getMobileFormRule); | |
| 78 | ||
| 79 | const mobileRule = { | |
| 80 | sms: smsFormRule, | |
| 81 | mobile: mobileFormRule, | |
| 82 | }; | |
| 83 | switch (unref(currentState)) { | |
| a09a0e | 84 | // register form rules |
| ec9478 | 85 | case LoginStateEnum.REGISTER: |
| V | 86 | return { |
| 87 | account: accountFormRule, | |
| 88 | password: passwordFormRule, | |
| 89 | confirmPassword: [ | |
| 90 | { validator: validateConfirmPassword(formData?.password), trigger: 'change' }, | |
| 91 | ], | |
| 92 | policy: [{ validator: validatePolicy, trigger: 'change' }], | |
| 93 | ...mobileRule, | |
| 94 | }; | |
| a09a0e | 95 | |
| V | 96 | // reset password form rules |
| ec9478 | 97 | case LoginStateEnum.RESET_PASSWORD: |
| V | 98 | return { |
| 99 | account: accountFormRule, | |
| 100 | ...mobileRule, | |
| 101 | }; | |
| a09a0e | 102 | |
| V | 103 | // mobile form rules |
| ec9478 | 104 | case LoginStateEnum.MOBILE: |
| V | 105 | return mobileRule; |
| a09a0e | 106 | |
| V | 107 | // login form rules |
| ec9478 | 108 | default: |
| V | 109 | return { |
| 110 | account: accountFormRule, | |
| 111 | password: passwordFormRule, | |
| 112 | }; | |
| 113 | } | |
| 114 | }); | |
| 115 | return { getFormRules }; | |
| 116 | } | |
| 117 | ||
| 118 | function createRule(message: string) { | |
| 119 | return [ | |
| 120 | { | |
| 121 | required: true, | |
| 122 | message, | |
| 123 | trigger: 'change', | |
| 124 | }, | |
| 125 | ]; | |
| 126 | } | |
