Merge branch 'fix/form-blur-validate' into 'main_dev'

fix: 修复BasicForm组件进行表单验证时无法触发blur事件

See merge request yunteng/thingskit-front!841

@@ -16,6 +16,7 @@
           :formProps="getProps"
           :formProps="getProps"
           :allDefaultValues="defaultValueRef"
           :allDefaultValues="defaultValueRef"
           :formModel="formModel"
           :formModel="formModel"
+          :validateFields="validateFields"
           :setFormModel="setFormModel"
           :setFormModel="setFormModel"
         >
         >
           <template #[item]="data" v-for="item in Object.keys($slots)">
           <template #[item]="data" v-for="item in Object.keys($slots)">
@@ -229,10 +230,10 @@
 
 
       function setFormModel(key: string, value: any) {
       function setFormModel(key: string, value: any) {
         formModel[key] = value;
         formModel[key] = value;
-        const { validateTrigger } = unref(getBindValue);
-        if (!validateTrigger || validateTrigger === 'change') {
-          validateFields([key]).catch((_) => {});
-        }
+        // const { validateTrigger } = unref(getBindValue);
+        // if (!validateTrigger || validateTrigger === 'change') {
+        //   validateFields([key]).catch((_) => {});
+        // }
       }
       }
 
 
       function handleEnterPress(e: KeyboardEvent) {
       function handleEnterPress(e: KeyboardEvent) {

@@ -14,6 +14,7 @@
   import { upperFirst, cloneDeep } from 'lodash-es';
   import { upperFirst, cloneDeep } from 'lodash-es';
   import { useItemLabelWidth } from '../hooks/useLabelWidth';
   import { useItemLabelWidth } from '../hooks/useLabelWidth';
   import { useI18n } from '/@/hooks/web/useI18n';
   import { useI18n } from '/@/hooks/web/useI18n';
+  import { NamePath, ValidateOptions } from 'ant-design-vue/lib/form/interface';
 
 
   export default defineComponent({
   export default defineComponent({
     name: 'BasicFormItem',
     name: 'BasicFormItem',
@@ -39,6 +40,12 @@
         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[], options?: ValidateOptions) => Promise<any>
+        >,
+        default: null,
+      },
       tableAction: {
       tableAction: {
         type: Object as PropType<TableActionType>,
         type: Object as PropType<TableActionType>,
       },
       },
@@ -208,6 +215,7 @@
             rules[characterInx].message ||
             rules[characterInx].message ||
             t('component.form.maxTip', [rules[characterInx].max] as Recordable);
             t('component.form.maxTip', [rules[characterInx].max] as Recordable);
         }
         }
+        rules.forEach((item) => !item.trigger && (item.trigger = 'change'));
         return rules;
         return rules;
       }
       }
 
 
@@ -234,6 +242,10 @@
             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);
           },
           },
+          onBlur: (...args) => {
+            unref(getComponentsProps)?.onBlur?.(...args);
+            props.validateFields([field], { triggerName: 'blur' }).catch((_) => {});
+          },
         };
         };
         const Comp = componentMap.get(component) as ReturnType<typeof defineComponent>;
         const Comp = componentMap.get(component) as ReturnType<typeof defineComponent>;
 
 

 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 { ref, onUnmounted, unref, nextTick, watch } from 'vue';
 import { ref, onUnmounted, unref, nextTick, watch } from 'vue';
 import { isProdMode } from '/@/utils/env';
 import { isProdMode } from '/@/utils/env';
@@ -112,9 +112,12 @@ export function useForm(props?: Props): UseFormReturnType {
       return form.validate(nameList);
       return form.validate(nameList);
     },
     },
 
 
-    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);
     },
     },
   };
   };
 
 

 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 } from '/@/utils';
 import { deepMerge } from '/@/utils';
@@ -206,8 +206,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) {
   async function validate(nameList?: NamePath[] | undefined) {

-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 } from 'vue';
 import type { VNode } 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';
@@ -39,7 +39,7 @@ export interface FormActionType {
     prefixField: string | undefined,
     prefixField: string | undefined,
     first?: boolean | undefined
     first?: boolean | undefined
   ) => Promise<void>;
   ) => 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>;
 }
 }