fix(form): form validate error

src/components/Form/src/BasicForm.vue

@@ -31,14 +31,24 @@
   import type { AdvanceState } from './types/hooks';
   import type { CSSProperties, Ref, WatchStopHandle } from 'vue';
 
-  import { defineComponent, reactive, ref, computed, unref, onMounted, watch, toRefs } from 'vue';
+  import {
+    defineComponent,
+    reactive,
+    ref,
+    computed,
+    unref,
+    onMounted,
+    watch,
+    toRefs,
+    toRaw,
+  } from 'vue';
   import { Form, Row } from 'ant-design-vue';
   import FormItem from './components/FormItem';
   import FormAction from './components/FormAction.vue';
 
   import { dateItemType } from './helper';
   import moment from 'moment';
-  import { cloneDeep } from 'lodash-es';
+  // import { cloneDeep } from 'lodash-es';
   import { deepMerge } from '/@/utils';
 
   import { useFormValues } from './hooks/useFormValues';
@@ -76,7 +86,7 @@
       // Get the basic configuration of the form
       const getProps = computed(
         (): FormProps => {
-          return deepMerge(cloneDeep(props), unref(propsRef));
+          return { ...props, ...unref(propsRef) } as FormProps;
         }
       );
 

src/components/Form/src/components/ApiSelect.vue

@@ -38,7 +38,7 @@
         type: String as PropType<string>,
       },
       api: {
-        type: Function as PropType<(arg: Recordable) => Promise<OptionsItem[]>>,
+        type: Function as PropType<(arg?: Recordable) => Promise<OptionsItem[]>>,
         default: null,
       },
       params: {

src/components/Form/src/hooks/useForm.ts

@@ -1,15 +1,19 @@
-import { ref, onUnmounted, unref, nextTick } from 'vue';
+import { ref, onUnmounted, unref, nextTick, watchEffect } from 'vue';
 
 import { isInSetup } from '/@/utils/helper/vueHelper';
 import { isProdMode } from '/@/utils/env';
 import { error } from '/@/utils/log';
+import { getDynamicProps } from '/@/utils';
 
 import type { FormProps, FormActionType, UseFormReturnType, FormSchema } from '../types/form';
 import type { NamePath } from 'ant-design-vue/lib/form/interface';
+import type { DynamicProps } from '/@/types/utils';
 
 export declare type ValidateFields = (nameList?: NamePath[]) => Promise<Recordable>;
 
-export function useForm(props?: Partial<FormProps>): UseFormReturnType {
+type Props = Partial<DynamicProps<FormProps>>;
+
+export function useForm(props?: Props): UseFormReturnType {
   isInSetup();
 
   const formRef = ref<Nullable<FormActionType>>(null);
@@ -25,6 +29,7 @@ export function useForm(props?: Partial<FormProps>): UseFormReturnType {
     await nextTick();
     return form as FormActionType;
   }
+
   function register(instance: FormActionType) {
     isProdMode() &&
       onUnmounted(() => {
@@ -34,8 +39,12 @@ export function useForm(props?: Partial<FormProps>): UseFormReturnType {
     if (unref(loadedRef) && isProdMode() && instance === unref(formRef)) return;
 
     formRef.value = instance;
-    props && instance.setProps(props);
+
     loadedRef.value = true;
+
+    watchEffect(() => {
+      props && instance.setProps(getDynamicProps(props));
+    });
   }
 
   const methods: FormActionType = {

src/components/Form/src/hooks/useFormEvents.ts

@@ -178,12 +178,10 @@ export function useFormEvents({
   }
 
   async function validateFields(nameList?: NamePath[] | undefined) {
-    const res = await unref(formElRef)?.validateFields(nameList || []);
-    return res;
+    return unref(formElRef)?.validateFields(nameList);
   }
-
   async function validate(nameList?: NamePath[] | undefined) {
-    return await unref(formElRef)?.validate(nameList || []);
+    return await unref(formElRef)?.validate(nameList);
   }
 
   async function clearValidate(name?: string | string[]) {

src/components/Form/src/hooks/useLabelWidth.ts

@@ -18,6 +18,9 @@ export function useItemLabelWidth(schemaItemRef: Ref<FormSchema>, propsRef: Ref<
 
     // If labelWidth is set globally, all items setting
     if ((!globalLabelWidth && !labelWidth && !globalLabelCol) || disabledLabelWidth) {
+      labelCol.style = {
+        textAlign: 'left',
+      };
       return { labelCol, wrapperCol };
     }
     let width = labelWidth || globalLabelWidth;
@@ -27,6 +30,7 @@ export function useItemLabelWidth(schemaItemRef: Ref<FormSchema>, propsRef: Ref<
     if (width) {
       width = isNumber(width) ? `${width}px` : width;
     }
+
     return {
       labelCol: { style: { width }, ...col },
       wrapperCol: { style: { width: `calc(100% - ${width})` }, ...wrapCol },

src/components/Table/src/BasicTable.vue

@@ -68,8 +68,9 @@
   import { useEventListener } from '/@/hooks/event/useEventListener';
   import { basicProps } from './props';
   import { ROW_KEY } from './const';
-  import './style/index.less';
   import { useExpose } from '/@/hooks/core/useExpose';
+
+  import './style/index.less';
   export default defineComponent({
     props: basicProps,
     components: { Table, BasicForm },
@@ -87,6 +88,12 @@
         } as BasicTableProps;
       });
 
+      //  const getProps = computed(
+      //   (): FormProps => {
+      //     return deepMerge(toRaw(props), unref(innerPropsRef));
+      //   }
+      // );
+
       const { loadingRef } = useLoading(getMergeProps);
       const { getPaginationRef, setPagination } = usePagination(getMergeProps);
       const { getColumnsRef, setColumns } = useColumns(getMergeProps, getPaginationRef);
@@ -299,8 +306,8 @@
           loadingRef.value = loading;
         },
         setProps,
-        getSize: (): SizeType => {
-          return unref(getBindValues).size;
+        getSize: () => {
+          return unref(getBindValues).size as SizeType;
         },
       };
 

src/components/Table/src/components/EditTableHeaderIcon.vue

@@ -16,6 +16,5 @@
         default: '',
       },
     },
-    setup() {},
   });
 </script>

src/components/Table/src/components/TableSetting.vue

@@ -90,7 +90,6 @@
     SettingOutlined,
   } from '@ant-design/icons-vue';
   import { useFullscreen } from '/@/hooks/web/useFullScreen';
-
   import type { SizeType, TableSetting } from '../types/table';
   import { useI18n } from '/@/hooks/web/useI18n';
 
@@ -150,6 +149,7 @@
           init();
         }
       });
+
       function init() {
         let ret: Options[] = [];
         table.getColumns({ ignoreIndex: true, ignoreAction: true }).forEach((item) => {

src/components/Table/src/components/TableTitle.vue

@@ -13,10 +13,10 @@
     components: { BasicTitle },
     props: {
       title: {
-        type: [Function, String] as PropType<string | ((data: any) => string)>,
+        type: [Function, String] as PropType<string | ((data: Recordable) => string)>,
       },
       getSelectRows: {
-        type: Function as PropType<() => any[]>,
+        type: Function as PropType<() => Recordable[]>,
       },
       helpMessage: {
         type: [String, Array] as PropType<string | string[]>,

src/components/Table/src/components/renderExpandIcon.tsx

@@ -1,7 +1,7 @@
 import { BasicArrow } from '/@/components/Basic';
 
 export default () => {
-  return (props: any) => {
+  return (props: Recordable) => {
     return (
       <BasicArrow
         onClick={(e: Event) => {

src/components/Table/src/hooks/useTable.ts

@@ -1,24 +1,24 @@
 import type { BasicTableProps, TableActionType, FetchParams, BasicColumn } from '../types/table';
 import type { PaginationProps } from '../types/pagination';
 
-import { ref, getCurrentInstance, onUnmounted, unref } from 'vue';
+import { ref, onUnmounted, unref } from 'vue';
 import { isProdMode } from '/@/utils/env';
+import { isInSetup } from '/@/utils/helper/vueHelper';
 
 export function useTable(
   tableProps?: Partial<BasicTableProps>
 ): [(instance: TableActionType) => void, TableActionType] {
-  if (!getCurrentInstance()) {
-    throw new Error('Please put useTable function in the setup function!');
-  }
+  isInSetup();
 
-  const tableRef = ref<TableActionType | null>(null);
-  const loadedRef = ref<boolean | null>(false);
+  const tableRef = ref<Nullable<TableActionType>>(null);
+  const loadedRef = ref<Nullable<boolean>>(false);
 
   function register(instance: TableActionType) {
     onUnmounted(() => {
       tableRef.value = null;
       loadedRef.value = null;
     });
+
     if (unref(loadedRef) && isProdMode() && instance === unref(tableRef)) {
       return;
     }