github
/
jeecg-boot-vue3
mirror of https://github.com/jeecgboot/jeecgboot-vue3
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

【issues/752】表单校验dynamicRules 无法 使用失去焦点后校验 trigger: 'blur'

pull/755/merge
zhangdaiscott 2023-09-22 22:02:19 +08:00
parent f824d30ef7
commit e7e495d99e
6 changed files with 37 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/Form/src/BasicForm.vue
View File

@ -11,6 +11,7 @@
:allDefaultValues="defaultValueRef" :allDefaultValues="defaultValueRef"
:formModel="formModel" :formModel="formModel"
:setFormModel="setFormModel" :setFormModel="setFormModel"
:validateFields="validateFields"
> >
<template #[item]="data" v-for="item in Object.keys($slots)"> <template #[item]="data" v-for="item in Object.keys($slots)">
<slot :name="item" v-bind="data || {}"></slot> <slot :name="item" v-bind="data || {}"></slot>
@ -252,10 +253,12 @@
const onFormSubmitWhenChange = useDebounceFn(handleSubmit, 300); const onFormSubmitWhenChange = useDebounceFn(handleSubmit, 300);
function setFormModel(key: string, value: any) { function setFormModel(key: string, value: any) {
formModel[key] = value; formModel[key] = value;
const { validateTrigger } = unref(getBindValue); // update-begin--author:liaozhiyang---date:20230922---for：【issues/752】表单校验dynamicRules 无法 使用失去焦点后校验 trigger: 'blur'
if (!validateTrigger || validateTrigger === 'change') { // const { validateTrigger } = unref(getBindValue);
validateFields([key]).catch((_) => {}); // if (!validateTrigger || validateTrigger === 'change') {
} // validateFields([key]).catch((_) => {});
// }
// update-end--author:liaozhiyang---date:20230922---for：【issues/752】表单校验dynamicRules 无法 使用失去焦点后校验 trigger: 'blur'
if(props.autoSearch === true){ if(props.autoSearch === true){
onFormSubmitWhenChange(); onFormSubmitWhenChange();
} }

19
src/components/Form/src/components/FormItem.vue
View File

@ -1,4 +1,5 @@
<script lang="tsx"> <script lang="tsx">
import { NamePath, ValidateOptions } from 'ant-design-vue/lib/form/interface';
import type { PropType, Ref } from 'vue'; import type { PropType, Ref } from 'vue';
import type { FormActionType, FormProps } from '../types/form'; import type { FormActionType, FormProps } from '../types/form';
import type { FormSchema } from '../types/form'; import type { FormSchema } from '../types/form';
@ -40,6 +41,10 @@
type: Function as PropType<(key: string, value: any) => void>, type: Function as PropType<(key: string, value: any) => void>,
default: null, default: null,
}, },
validateFields: {
type: Function as PropType<(nameList?: NamePath[] | undefined, options?: ValidateOptions) => Promise<any>>,
default: null,
},
tableAction: { tableAction: {
type: Object as PropType<TableActionType>, type: Object as PropType<TableActionType>,
}, },
@ -79,10 +84,9 @@
componentProps = componentProps({ schema, tableAction, formModel, formActionType }) ?? {}; componentProps = componentProps({ schema, tableAction, formModel, formActionType }) ?? {};
} }
if (schema.component === 'Divider') { if (schema.component === 'Divider') {
componentProps = Object.assign({ type: 'horizontal' }, componentProps, { //update-begin---author:wangshuai---date:2023-09-22---for:【QQYUN-6603】分割线标题位置显示不正确---
orientation: 'left', componentProps = Object.assign({ type: 'horizontal',orientation:'left', plain: true, }, componentProps);
plain: true, //update-end---author:wangshuai---date:2023-09-22---for:【QQYUN-6603】分割线标题位置显示不正确---
});
} }
return componentProps as Recordable; return componentProps as Recordable;
}); });
@ -207,7 +211,7 @@
const isCheck = component && ['Switch', 'Checkbox'].includes(component); const isCheck = component && ['Switch', 'Checkbox'].includes(component);
const eventKey = `on${upperFirst(changeEvent)}`; const eventKey = `on${upperFirst(changeEvent)}`;
// update-begin--author:liaozhiyang---date:20230922---for：【issues/752】表单校验dynamicRules 无法 使用失去焦点后校验 trigger: 'blur'
const on = { const on = {
[eventKey]: (...args: Nullable<Recordable>[]) => { [eventKey]: (...args: Nullable<Recordable>[]) => {
const [e] = args; const [e] = args;
@ -217,8 +221,13 @@
const target = e ? e.target : null; const target = e ? e.target : null;
const value = target ? (isCheck ? target.checked : target.value) : e; const value = target ? (isCheck ? target.checked : target.value) : e;
props.setFormModel(field, value); props.setFormModel(field, value);
//props.validateFields([field], { triggerName: 'change' }).catch((_) => {});
}, },
// onBlur: () => {
// props.validateFields([field], { triggerName: 'blur' }).catch((_) => {});
// },
}; };
// update-end--author:liaozhiyang---date:20230922---for：【issues/752】表单校验dynamicRules 无法 使用失去焦点后校验 trigger: 'blur'
const Comp = componentMap.get(component) as ReturnType<typeof defineComponent>; const Comp = componentMap.get(component) as ReturnType<typeof defineComponent>;
const { autoSetPlaceHolder, size } = props.formProps; const { autoSetPlaceHolder, size } = props.formProps;

8
src/components/Form/src/hooks/useForm.ts
View File

@ -1,5 +1,5 @@
import type { FormProps, FormActionType, UseFormReturnType, FormSchema } from '../types/form'; import type { FormProps, FormActionType, UseFormReturnType, FormSchema } from '../types/form';
import type { NamePath } from 'ant-design-vue/lib/form/interface'; import type { NamePath, ValidateOptions } from 'ant-design-vue/lib/form/interface';
import type { DynamicProps } from '/#/utils'; import type { DynamicProps } from '/#/utils';
import { handleRangeValue } from '../utils/formUtils'; import { handleRangeValue } from '../utils/formUtils';
import { ref, onUnmounted, unref, nextTick, watch } from 'vue'; import { ref, onUnmounted, unref, nextTick, watch } from 'vue';
@ -10,7 +10,7 @@ import { add } from "/@/components/Form/src/componentMap";
//集成online专用控件 //集成online专用控件
import { OnlineSelectCascade, LinkTableCard, LinkTableSelect } from '@jeecg/online'; import { OnlineSelectCascade, LinkTableCard, LinkTableSelect } from '@jeecg/online';
export declare type ValidateFields = (nameList?: NamePath[]) => Promise<Recordable>; export declare type ValidateFields = (nameList?: NamePath[], options?: ValidateOptions) => Promise<Recordable>;
type Props = Partial<DynamicProps<FormProps>>; type Props = Partial<DynamicProps<FormProps>>;
@ -149,9 +149,9 @@ export function useForm(props?: Props): UseFormReturnType {
}); });
return values; return values;
}, },
validateFields: async (nameList?: NamePath[]): Promise<Recordable> => { validateFields: async (nameList?: NamePath[], options?: ValidateOptions): Promise<Recordable> => {
const form = await getForm(); const form = await getForm();
return form.validateFields(nameList); return form.validateFields(nameList, options);
}, },
}; };

6
src/components/Form/src/hooks/useFormEvents.ts
View File

@ -1,6 +1,6 @@
import type { ComputedRef, Ref } from 'vue'; import type { ComputedRef, Ref } from 'vue';
import type { FormProps, FormSchema, FormActionType } from '../types/form'; import type { FormProps, FormSchema, FormActionType } from '../types/form';
import type { NamePath } from 'ant-design-vue/lib/form/interface'; import type { NamePath, ValidateOptions } from 'ant-design-vue/lib/form/interface';
import { unref, toRaw } from 'vue'; import { unref, toRaw } from 'vue';
import { isArray, isFunction, isObject, isString } from '/@/utils/is'; import { isArray, isFunction, isObject, isString } from '/@/utils/is';
import { deepMerge, getValueType } from '/@/utils'; import { deepMerge, getValueType } from '/@/utils';
@ -207,8 +207,8 @@ export function useFormEvents({
}); });
} }
async function validateFields(nameList?: NamePath[] | undefined) { async function validateFields(nameList?: NamePath[] | undefined, options?: ValidateOptions) {
return unref(formElRef)?.validateFields(nameList); return unref(formElRef)?.validateFields(nameList, options);
} }
async function validate(nameList?: NamePath[] | undefined) { async function validate(nameList?: NamePath[] | undefined) {

4
src/components/Form/src/types/form.ts
View File

@ -1,4 +1,4 @@
import type { NamePath, RuleObject } from 'ant-design-vue/lib/form/interface'; import type { NamePath, RuleObject, ValidateOptions } from 'ant-design-vue/lib/form/interface';
import type { VNode, ComputedRef } from 'vue'; import type { VNode, ComputedRef } from 'vue';
import type { ButtonProps as AntdButtonProps } from '/@/components/Button'; import type { ButtonProps as AntdButtonProps } from '/@/components/Button';
import type { FormItem } from './formItem'; import type { FormItem } from './formItem';
@ -37,7 +37,7 @@ export interface FormActionType {
getProps: ComputedRef<Partial<FormProps>>; getProps: ComputedRef<Partial<FormProps>>;
removeSchemaByFiled: (field: string | string[]) => Promise<void>; removeSchemaByFiled: (field: string | string[]) => Promise<void>;
appendSchemaByField: (schema: FormSchema, prefixField: string | undefined, first?: boolean | undefined) => Promise<void>; appendSchemaByField: (schema: FormSchema, prefixField: string | undefined, first?: boolean | undefined) => Promise<void>;
validateFields: (nameList?: NamePath[]) => Promise<any>; validateFields: (nameList?: NamePath[], options?: ValidateOptions) => Promise<any>;
validate: (nameList?: NamePath[]) => Promise<any>; validate: (nameList?: NamePath[]) => Promise<any>;
scrollToField: (name: NamePath, options?: ScrollOptions) => Promise<void>; scrollToField: (name: NamePath, options?: ScrollOptions) => Promise<void>;
} }

12
src/views/system/user/user.data.ts
View File

@ -171,7 +171,7 @@ export const formSchema: FormSchema[] = [
field: 'workNo', field: 'workNo',
required: true, required: true,
component: 'Input', component: 'Input',
dynamicRules: ({ model, schema }) => rules.duplicateCheckRule('sys_user', 'work_no', model, schema, true), dynamicRules: ({ model, schema }) => ({ ...rules.duplicateCheckRule('sys_user', 'work_no', model, schema, true), trigger: 'blur' }),
}, },
{ {
label: '职务', label: '职务',
@ -286,8 +286,8 @@ export const formSchema: FormSchema[] = [
component: 'Input', component: 'Input',
dynamicRules: ({ model, schema }) => { dynamicRules: ({ model, schema }) => {
return [ return [
{ ...rules.duplicateCheckRule('sys_user', 'email', model, schema, true)[0] }, { ...rules.duplicateCheckRule('sys_user', 'email', model, schema, true)[0], trigger: 'blur' },
{ ...rules.rule('email', false)[0] }, { ...rules.rule('email', false)[0], trigger: 'blur' },
]; ];
}, },
}, },
@ -297,8 +297,8 @@ export const formSchema: FormSchema[] = [
component: 'Input', component: 'Input',
dynamicRules: ({ model, schema }) => { dynamicRules: ({ model, schema }) => {
return [ return [
{ ...rules.duplicateCheckRule('sys_user', 'phone', model, schema, true)[0] }, { ...rules.duplicateCheckRule('sys_user', 'phone', model, schema, true)[0], trigger: 'blur' },
{ pattern: /^1[3456789]\d{9}$/, message: '手机号码格式有误' }, { pattern: /^1[3456789]\d{9}$/, message: '手机号码格式有误', trigger: 'blur' },
]; ];
}, },
}, },
@ -386,6 +386,7 @@ export const formAgentSchema: FormSchema[] = [
showTime: true, showTime: true,
valueFormat: 'YYYY-MM-DD HH:mm:ss', valueFormat: 'YYYY-MM-DD HH:mm:ss',
placeholder: '请选择代理开始时间', placeholder: '请选择代理开始时间',
getPopupContainer: () => document.body,
}, },
}, },
{ {
@ -397,6 +398,7 @@ export const formAgentSchema: FormSchema[] = [
showTime: true, showTime: true,
valueFormat: 'YYYY-MM-DD HH:mm:ss', valueFormat: 'YYYY-MM-DD HH:mm:ss',
placeholder: '请选择代理结束时间', placeholder: '请选择代理结束时间',
getPopupContainer: () => document.body,
}, },
}, },
{ {