瀏覽代碼

fix: 修改form表单校验

tangning 2 年之前
父節點
當前提交
d93b2e0b80

+ 2 - 2
.env.development

@@ -6,8 +6,8 @@ VITE_PUBLIC_PATH = ./
 
 # Cross-domain proxy, you can configure multiple
 # Please note that no line breaks
-VITE_PROXY = [["/basic-api","http://localhost:3000"],["/upload","https://v4-uat.4dkankan.com/service/manage/common/upload/files"],["/service","https://v4-uat.4dkankan.com"]]
-# VITE_PROXY=[["/api","https://vvbin.cn/test"]]
+VITE_PROXY = [["/basic-api","http://localhost:3000"],["/upload","https://testeur.4dkankan.com/service/manage/common/upload/files"],["/service","https://testeur.4dkankan.com"]]
+# VITE_PROXY = [["/basic-api","http://localhost:3000"],["/upload","https://v4-uat.4dkankan.com/service/manage/common/upload/files"],["/service","https://v4-uat.4dkankan.com"]]
 
 # Delete console
 VITE_DROP_CONSOLE = false

+ 1 - 0
src/components/Form/src/BasicForm.vue

@@ -17,6 +17,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>

+ 8 - 3
src/components/Form/src/components/FormItem.vue

@@ -47,7 +47,7 @@
         type: Object as PropType<FormActionType>,
       },
       validateFields: {
-      type: Function as PropType<(nameList?: NamePath[], options?: ValidateOptions) => Promise >,
+      type: Function as PropType<(nameList?: NamePath[], options?: ValidateOptions) => Promise<void> >,
       default: null,
       },
     },
@@ -235,7 +235,7 @@
         const isCheck = component && ['Switch', 'Checkbox'].includes(component);
 
         const eventKey = `on${upperFirst(changeEvent)}`;
-
+        console.log('props',props)
         const on = {
           [eventKey]: (...args: Nullable<Recordable>[]) => {
             const [e] = args;
@@ -245,7 +245,12 @@
             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(() => {});
+            },
         };
         const Comp = componentMap.get(component) as ReturnType<typeof defineComponent>;
 

+ 3 - 3
src/components/Form/src/hooks/useForm.ts

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

+ 7 - 3
src/components/Form/src/hooks/useFormEvents.ts

@@ -1,6 +1,6 @@
 import type { ComputedRef, Ref } from 'vue';
 import type { FormProps, FormSchema, FormActionType } from '../types/form';
-import type { NamePath, ValidateOptions  } 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 } from '/@/utils';
@@ -19,6 +19,10 @@ interface UseFormActionContext {
   schemaRef: Ref<FormSchema[]>;
   handleFormValues: Fn;
 }
+export declare type ValidateFields = (
+  nameList?: NamePath[],
+  options?: ValidateOptions,
+  ) => Promise<void>;
 export function useFormEvents({
   emit,
   getProps,
@@ -210,9 +214,9 @@ export function useFormEvents({
     });
   }
 
-  async function validateFields(nameList?: NamePath[] | undefined,options?: ValidateOptions | undefined) {
+  async function validateFields(nameList?: NamePath[], options?: ValidateOptions | undefined) {
     return unref(formElRef)?.validateFields(nameList, options);
-  }
+    }
 
   async function validate(nameList?: NamePath[] | undefined) {
     return await unref(formElRef)?.validate(nameList);

+ 2 - 1
src/views/equity/InvoiceModal.vue

@@ -72,12 +72,13 @@
                   const res = await checkUserName({userName:value})
                   //await checkUserName({userName:value})
                   // useThrottleFn(,50)()
+                  console.log('validator',res)
                   if(!res){
                     return Promise.reject(t('routes.equity.rules.userName2'));
                   }
                   return Promise.resolve();
                 },
-                trigger: 'change',
+                trigger: 'blur',
               },
             ],
             colProps: {