From 0c73cf8d3f5ab796cabfe3df1331ac4cf5076971 Mon Sep 17 00:00:00 2001
From: Vben <ann.vben@gmail.com>
Date: Wed, 18 Sep 2024 23:01:40 +0800
Subject: [PATCH] fix: fixed the form component componentProps using the
 function that did not meet expectations (#4426)

---
 .../form-ui/src/form-render/form-field.vue    | 10 +-
 .../ui-kit/form-ui/src/form-render/form.vue   | 96 ++++++++++---------
 2 files changed, 58 insertions(+), 48 deletions(-)

diff --git a/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue b/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue
index 6c0ecbdf..0819ca03 100644
--- a/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue
+++ b/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { ZodType } from 'zod';
 
-import type { FormSchema } from '../types';
+import type { FormSchema, MaybeComponentProps } from '../types';
 
 import { computed } from 'vue';
 
@@ -26,6 +26,7 @@ import { isEventObjectLike } from './helper';
 interface Props extends FormSchema {}
 
 const {
+  commonComponentProps,
   component,
   componentProps,
   dependencies,
@@ -38,7 +39,11 @@ const {
   labelWidth,
   renderComponentContent,
   rules,
-} = defineProps<Props>();
+} = defineProps<
+  {
+    commonComponentProps: MaybeComponentProps;
+  } & Props
+>();
 
 const { componentBindEventMap, componentMap, isVertical } = useFormContext();
 const formRenderProps = injectRenderFormProps();
@@ -133,6 +138,7 @@ const computedProps = computed(() => {
     : componentProps;
 
   return {
+    ...commonComponentProps,
     ...finalComponentProps,
     ...dynamicComponentProps.value,
   };
diff --git a/packages/@core/ui-kit/form-ui/src/form-render/form.vue b/packages/@core/ui-kit/form-ui/src/form-render/form.vue
index 2c7bd17e..25c7a104 100644
--- a/packages/@core/ui-kit/form-ui/src/form-render/form.vue
+++ b/packages/@core/ui-kit/form-ui/src/form-render/form.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import type { GenericObject } from 'vee-validate';
 import type { ZodTypeAny } from 'zod';
 
 import type { FormRenderProps, FormSchema, FormShape } from '../types';
@@ -7,7 +6,9 @@ import type { FormRenderProps, FormSchema, FormShape } from '../types';
 import { computed } from 'vue';
 
 import { Form } from '@vben-core/shadcn-ui';
-import { cn, isString, merge } from '@vben-core/shared/utils';
+import { cn, isString } from '@vben-core/shared/utils';
+
+import { type GenericObject } from 'vee-validate';
 
 import { provideFormRenderProps } from './context';
 import { useExpandable } from './expandable';
@@ -70,51 +71,54 @@ const formCollapsed = computed(() => {
   return props.collapsed && isCalculated.value;
 });
 
-const computedSchema = computed((): FormSchema[] => {
-  const {
-    componentProps = {},
-    controlClass = '',
-    disabled,
-    formFieldProps = {},
-    formItemClass = '',
-    hideLabel = false,
-    hideRequiredMark = false,
-    labelClass = '',
-    labelWidth = 100,
-    wrapperClass = '',
-  } = props.commonConfig;
-  return (props.schema || []).map((schema, index): FormSchema => {
-    const keepIndex = keepFormItemIndex.value;
-
-    const hidden =
-      // 折叠状态 & 显示折叠按钮 & 当前索引大于保留索引
-      props.showCollapseButton && !!formCollapsed.value && keepIndex
-        ? keepIndex <= index
-        : false;
-
-    return {
+const computedSchema = computed(
+  (): ({ commonComponentProps: Record<string, any> } & FormSchema)[] => {
+    const {
+      componentProps = {},
+      controlClass = '',
       disabled,
-      hideLabel,
-      hideRequiredMark,
-      labelWidth,
-      wrapperClass,
-      ...schema,
-      componentProps: merge({}, schema.componentProps, componentProps),
-      controlClass: cn(controlClass, schema.controlClass),
-      formFieldProps: {
-        ...formFieldProps,
-        ...schema.formFieldProps,
-      },
-      formItemClass: cn(
-        'flex-shrink-0',
-        { hidden },
-        formItemClass,
-        schema.formItemClass,
-      ),
-      labelClass: cn(labelClass, schema.labelClass),
-    };
-  });
-});
+      formFieldProps = {},
+      formItemClass = '',
+      hideLabel = false,
+      hideRequiredMark = false,
+      labelClass = '',
+      labelWidth = 100,
+      wrapperClass = '',
+    } = props.commonConfig;
+    return (props.schema || []).map((schema, index) => {
+      const keepIndex = keepFormItemIndex.value;
+
+      const hidden =
+        // 折叠状态 & 显示折叠按钮 & 当前索引大于保留索引
+        props.showCollapseButton && !!formCollapsed.value && keepIndex
+          ? keepIndex <= index
+          : false;
+
+      return {
+        disabled,
+        hideLabel,
+        hideRequiredMark,
+        labelWidth,
+        wrapperClass,
+        ...schema,
+        commonComponentProps: componentProps,
+        componentProps: schema.componentProps,
+        controlClass: cn(controlClass, schema.controlClass),
+        formFieldProps: {
+          ...formFieldProps,
+          ...schema.formFieldProps,
+        },
+        formItemClass: cn(
+          'flex-shrink-0',
+          { hidden },
+          formItemClass,
+          schema.formItemClass,
+        ),
+        labelClass: cn(labelClass, schema.labelClass),
+      };
+    });
+  },
+);
 </script>
 
 <template>