ruoyi-plus-soybean/src/hooks/common/form.ts

112 lines
3.1 KiB
TypeScript
Raw Normal View History

2024-03-24 03:02:08 +08:00
import { ref, toValue } from 'vue';
import type { ComputedRef, Ref } from 'vue';
2023-11-17 08:45:00 +08:00
import type { FormInst } from 'naive-ui';
2023-12-14 21:45:29 +08:00
import { REG_CODE_SIX, REG_EMAIL, REG_PHONE, REG_PWD, REG_USER_NAME } from '@/constants/reg';
2023-11-17 08:45:00 +08:00
import { $t } from '@/locales';
export function useFormRules() {
2024-01-28 16:24:43 +08:00
const patternRules = {
userName: {
pattern: REG_USER_NAME,
message: $t('form.userName.invalid'),
2025-04-26 13:07:34 +08:00
trigger: ['change', 'blur']
2024-01-28 16:24:43 +08:00
},
phone: {
pattern: REG_PHONE,
message: $t('form.phone.invalid'),
trigger: 'change'
},
pwd: {
pattern: REG_PWD,
message: $t('form.pwd.invalid'),
2025-04-26 13:07:34 +08:00
trigger: ['change', 'blur']
2024-01-28 16:24:43 +08:00
},
code: {
pattern: REG_CODE_SIX,
message: $t('form.code.invalid'),
trigger: 'change'
},
email: {
pattern: REG_EMAIL,
message: $t('form.email.invalid'),
trigger: 'change'
}
} satisfies Record<string, App.Global.FormRule>;
const formRules = {
userName: [createRequiredRule($t('form.userName.required')), patternRules.userName],
phone: [createRequiredRule($t('form.phone.required')), patternRules.phone],
pwd: [createRequiredRule($t('form.pwd.required')), patternRules.pwd],
code: [createRequiredRule($t('form.code.required')), patternRules.code],
2024-08-16 16:33:11 +08:00
email: [createRequiredRule($t('form.email.required')), patternRules.email],
tenantId: [createRequiredRule('请选择/输入公司名称')]
2023-11-17 08:45:00 +08:00
} satisfies Record<string, App.Global.FormRule[]>;
2024-01-28 00:44:21 +08:00
/** the default required rule */
const defaultRequiredRule = createRequiredRule($t('form.required'));
/** the default number required rule */
2024-01-28 00:44:21 +08:00
function createRequiredRule(message: string): App.Global.FormRule {
2023-11-17 08:45:00 +08:00
return {
required: true,
2025-04-24 18:21:53 +08:00
trigger: ['input', 'blur'],
2025-03-12 15:15:37 +08:00
validator: (_rule: any, value: any) => {
if (value === null || value === undefined || value === '') {
return new Error(message);
}
return true;
}
2023-11-17 08:45:00 +08:00
};
}
2024-11-04 11:16:53 +08:00
function createNumberRequiredRule(message: string): App.Global.FormRule {
return { ...createRequiredRule(message), type: 'number' };
}
2024-03-24 03:02:08 +08:00
/** create a rule for confirming the password */
function createConfirmPwdRule(pwd: string | Ref<string> | ComputedRef<string>) {
const confirmPwdRule: App.Global.FormRule[] = [
{ required: true, message: $t('form.confirmPwd.required') },
{
asyncValidator: (rule, value) => {
if (value.trim() !== '' && value !== toValue(pwd)) {
return Promise.reject(rule.message);
}
return Promise.resolve();
},
message: $t('form.confirmPwd.invalid'),
trigger: 'input'
}
];
return confirmPwdRule;
}
2023-11-17 08:45:00 +08:00
return {
2024-01-28 16:24:43 +08:00
patternRules,
formRules,
2024-01-28 00:44:21 +08:00
defaultRequiredRule,
2024-03-24 03:02:08 +08:00
createRequiredRule,
2024-11-04 11:16:53 +08:00
createConfirmPwdRule,
createNumberRequiredRule
2023-11-17 08:45:00 +08:00
};
}
export function useNaiveForm() {
const formRef = ref<FormInst | null>(null);
async function validate() {
await formRef.value?.validate();
}
async function restoreValidation() {
formRef.value?.restoreValidation();
}
2023-11-17 08:45:00 +08:00
return {
formRef,
validate,
restoreValidation
2023-11-17 08:45:00 +08:00
};
}