import type { ValidationRule } from 'ant-design-vue/lib/form/Form'; import type { RuleObject } from 'ant-design-vue/lib/form/interface'; import { ref, computed, unref, Ref } from 'vue'; import { useI18n } from '/@/hooks/web/useI18n'; export enum LoginStateEnum { LOGIN, REGISTER, RESET_PASSWORD, MOBILE, QR_CODE, LOGIN_WITH_CAPTCHA, } const currentState = ref(LoginStateEnum.LOGIN); 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) { async function validForm() { const form = unref(formRef); if (!form) return; const data = await form.validate(); return data as T; } return { validForm }; } export function useFormRules(formData?: Recordable) { const { t } = useI18n(); const getAccountFormRule = computed(() => createRule(t('请输入账号'))); const getPasswordFormRule = computed(() => createRule(t('请输入密码'))); const getCaptchaCodeFormRule = computed(() => createRule(t('请输入图形验证码'))); const getSmsFormRule = computed(() => createRule(t('请输入验证码'))); const getMobileFormRule = computed(() => createRule(t('请输入手机号码'))); const validatePolicy = async (_: RuleObject, value: boolean) => { return !value ? Promise.reject(t('勾选后才能注册')) : Promise.resolve(); }; const validateConfirmPassword = (password: string) => { return async (_: RuleObject, value: string) => { if (!value) { return Promise.reject(t('请输入密码')); } if (value !== password) { return Promise.reject(t('两次输入密码不一致')); } return Promise.resolve(); }; }; const getFormRules = computed((): { [k: string]: ValidationRule | ValidationRule[] } => { const accountFormRule = unref(getAccountFormRule); const passwordFormRule = unref(getPasswordFormRule); const captchaCodeFormRule = unref(getCaptchaCodeFormRule); const smsFormRule = unref(getSmsFormRule); const mobileFormRule = unref(getMobileFormRule); const mobileRule = { sms: smsFormRule, mobile: mobileFormRule, }; 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' }], ...mobileRule, }; // reset password form rules case LoginStateEnum.RESET_PASSWORD: return { account: accountFormRule, ...mobileRule, }; // mobile form rules case LoginStateEnum.MOBILE: return mobileRule; // 枚举没实现,暂不适用 case LoginStateEnum.LOGIN_WITH_CAPTCHA: return { account: accountFormRule, password: passwordFormRule, captchaCode: captchaCodeFormRule, }; // login form rules default: return { account: accountFormRule, password: passwordFormRule, }; } }); return { getFormRules }; } function createRule(message: string) { return [ { required: true, message, trigger: 'change', }, ]; }