import type { FormInstance, Rule } from 'ant-design-vue/lib/form' import type { NamePath, RuleObject } from 'ant-design-vue/lib/form/interface' import type { Ref } from 'vue' import { computed, ref, unref } from 'vue' import { useI18n } from '@/hooks/web/useI18n' export enum LoginStateEnum { LOGIN, REGISTER, RESET_PASSWORD, MOBILE, QR_CODE, } const currentState = ref(LoginStateEnum.LOGIN) // 这里也可以优化 // import { createGlobalState } from '@vueuse/core' export function useLoginState() { function setLoginState(state: LoginStateEnum) { currentState.value = state } const getLoginState = computed(() => currentState.value) function handleBackLogin() { setLoginState(LoginStateEnum.LOGIN) } return { setLoginState, getLoginState, handleBackLogin } } export function useFormValid(formRef: Ref) { const validate = computed(() => { const form = unref(formRef) return form?.validate ?? ((_nameList?: NamePath) => Promise.resolve()) }) async function validForm() { const form = unref(formRef) if (!form) return const data = await form.validate() return data as T } return { validate, validForm } } export function useFormRules(formData?: Recordable) { const { t } = useI18n() const getAccountFormRule = computed(() => createRule(t('sys.login.accountPlaceholder'))) const getPasswordFormRule = computed(() => createRule(t('sys.login.passwordPlaceholder'))) const validatePolicy = async (_: RuleObject, value: boolean) => { return !value ? Promise.reject(t('sys.login.policyPlaceholder')) : Promise.resolve() } const validateConfirmPassword = (password: string) => { return async (_: RuleObject, value: string) => { if (!value) return Promise.reject(t('sys.login.passwordPlaceholder')) if (value !== password) return Promise.reject(t('sys.login.diffPwd')) return Promise.resolve() } } const getFormRules = computed((): { [k: string]: Rule | Rule[] } => { const accountFormRule = unref(getAccountFormRule) const passwordFormRule = unref(getPasswordFormRule) switch (unref(currentState)) { // register form rules case LoginStateEnum.REGISTER: return { account: accountFormRule, password: passwordFormRule, confirmPassword: [{ validator: validateConfirmPassword(formData?.password), trigger: 'change' }], policy: [{ validator: validatePolicy, trigger: 'change' }], } // reset password form rules case LoginStateEnum.RESET_PASSWORD: return { account: accountFormRule, } // login form rules default: return { account: accountFormRule, password: passwordFormRule, } } }) return { getFormRules } } function createRule(message: string): Rule[] { return [ { required: true, message, trigger: 'change', }, ] }