feat: 增加table 帮助信息help通过表单values动态展示内容 (#7712)

packages/@core/ui-kit/form-ui/src/form-render/form-field.vue

@@ -48,6 +48,7 @@ const {
   modelPropName,
   renderComponentContent,
   rules,
+  help,
 } = defineProps<
   Props & {
     commonComponentProps: MaybeComponentProps;
@@ -174,6 +175,18 @@ const computedProps = computed(() => {
   };
 });
 
+// 自定义帮助信息
+const computedHelp = computed(() => {
+  return help ? onHelpFunc : undefined;
+});
+
+const onHelpFunc = () => {
+  if (!help) {
+    return undefined;
+  }
+  return isFunction(help) ? help(values.value, formApi!) : help;
+};
+
 watch(
   () => computedProps.value?.autofocus,
   (value) => {
@@ -322,7 +335,7 @@ onUnmounted(() => {
             labelClass,
           )
         "
-        :help="help"
+        :help="computedHelp"
         :colon="colon"
         :label="label"
         :required="shouldRequired && !hideRequiredMark"

packages/@core/ui-kit/form-ui/src/types.ts

@@ -67,6 +67,14 @@ export type FormActions = FormContext<GenericObject>;
 
 export type CustomRenderType = (() => Component | string) | string;
 
+// 动态渲染参数
+export type CustomParamsRenderType =
+  | ((
+      value: Partial<Record<string, any>>,
+      actions: FormActions,
+    ) => Component | string)
+  | string;
+
 export type FormSchemaRuleType =
   | 'required'
   | 'selectRequired'
@@ -254,7 +262,7 @@ export interface FormSchema<
   /** 字段名 */
   fieldName: string;
   /** 帮助信息 */
-  help?: CustomRenderType;
+  help?: CustomParamsRenderType;
   /** 是否隐藏表单项 */
   hide?: boolean;
   /** 表单项 */

playground/src/views/examples/form/basic.vue

@@ -281,6 +281,8 @@ const [BaseForm, baseFormApi] = useVbenForm({
     {
       component: 'DatePicker',
       fieldName: 'datePicker',
+      help: (values) =>
+        [`这是一个可输出其他字段值的帮助信息${values?.rate}`].map((v) => h('p', v)),
       label: '日期选择框',
     },
     {