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

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

@ -1,4 +1,5 @@
<script lang="tsx">
import { NamePath, ValidateOptions } from 'ant-design-vue/lib/form/interface';
import type { PropType, Ref } from 'vue';
import type { FormActionType, FormProps } from '../types/form';
import type { FormSchema } from '../types/form';
@ -40,6 +41,10 @@
type: Function as PropType<(key: string, value: any) => void>,
default: null,
},
validateFields: {
type: Function as PropType<(nameList?: NamePath[] | undefined, options?: ValidateOptions) => Promise<any>>,
default: null,
},
tableAction: {
type: Object as PropType<TableActionType>,
},
@ -79,10 +84,9 @@
componentProps = componentProps({ schema, tableAction, formModel, formActionType }) ?? {};
}
if (schema.component === 'Divider') {
componentProps = Object.assign({ type: 'horizontal' }, componentProps, {
orientation: 'left',
plain: true,
});
//update-begin---author:wangshuai---date:2023-09-22---for:【QQYUN-6603】分割线标题位置显示不正确---
componentProps = Object.assign({ type: 'horizontal',orientation:'left', plain: true, }, componentProps);
//update-end---author:wangshuai---date:2023-09-22---for:【QQYUN-6603】分割线标题位置显示不正确---
}
return componentProps as Recordable;
});
@ -207,7 +211,7 @@
const isCheck = component && ['Switch', 'Checkbox'].includes(component);
const eventKey = `on${upperFirst(changeEvent)}`;
// update-begin--author:liaozhiyang---date:20230922---for：【issues/752】表单校验dynamicRules 无法 使用失去焦点后校验 trigger: 'blur'
const on = {
[eventKey]: (...args: Nullable<Recordable>[]) => {
const [e] = args;
@ -217,8 +221,13 @@
const target = e ? e.target : null;
const value = target ? (isCheck ? target.checked : target.value) : e;
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 { 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 { 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 { handleRangeValue } from '../utils/formUtils';
import { ref, onUnmounted, unref, nextTick, watch } from 'vue';
@ -10,7 +10,7 @@ import { add } from "/@/components/Form/src/componentMap";
//集成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>>;
@ -149,9 +149,9 @@ export function useForm(props?: Props): UseFormReturnType {
});
return values;
},
validateFields: async (nameList?: NamePath[]): Promise<Recordable> => {
validateFields: async (nameList?: NamePath[], options?: ValidateOptions): Promise<Recordable> => {
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 { 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 { isArray, isFunction, isObject, isString } from '/@/utils/is';
import { deepMerge, getValueType } from '/@/utils';
@ -207,8 +207,8 @@ export function useFormEvents({
});
}
async function validateFields(nameList?: NamePath[] | undefined) {
return unref(formElRef)?.validateFields(nameList);
async function validateFields(nameList?: NamePath[] | undefined, options?: ValidateOptions) {
return unref(formElRef)?.validateFields(nameList, options);
}
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 { ButtonProps as AntdButtonProps } from '/@/components/Button';
import type { FormItem } from './formItem';
@ -37,7 +37,7 @@ export interface FormActionType {
getProps: ComputedRef<Partial<FormProps>>;
removeSchemaByFiled: (field: string | string[]) => 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>;
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',
required: true,
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: '职务',
@ -286,8 +286,8 @@ export const formSchema: FormSchema[] = [
component: 'Input',
dynamicRules: ({ model, schema }) => {
return [
{ ...rules.duplicateCheckRule('sys_user', 'email', model, schema, true)[0] },
{ ...rules.rule('email', false)[0] },
{ ...rules.duplicateCheckRule('sys_user', 'email', model, schema, true)[0], trigger: 'blur' },
{ ...rules.rule('email', false)[0], trigger: 'blur' },
];
},
},
@ -297,8 +297,8 @@ export const formSchema: FormSchema[] = [
component: 'Input',
dynamicRules: ({ model, schema }) => {
return [
{ ...rules.duplicateCheckRule('sys_user', 'phone', model, schema, true)[0] },
{ pattern: /^1[3456789]\d{9}$/, message: '手机号码格式有误' },
{ ...rules.duplicateCheckRule('sys_user', 'phone', model, schema, true)[0], trigger: 'blur' },
{ pattern: /^1[3456789]\d{9}$/, message: '手机号码格式有误', trigger: 'blur' },
];
},
},
@ -386,6 +386,7 @@ export const formAgentSchema: FormSchema[] = [
showTime: true,
valueFormat: 'YYYY-MM-DD HH:mm:ss',
placeholder: '请选择代理开始时间',
getPopupContainer: () => document.body,
},
},
{
@ -397,6 +398,7 @@ export const formAgentSchema: FormSchema[] = [
showTime: true,
valueFormat: 'YYYY-MM-DD HH:mm:ss',
placeholder: '请选择代理结束时间',
getPopupContainer: () => document.body,
},
},
{