feat: add submitOnChange props to vben form (#5032)

vbenjs · Dec 5, 2024 · fe236ea · fe236ea
1 parent 05b4b61
commit fe236ea
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 1 deletion.
diff --git a/docs/src/components/common-ui/vben-form.md b/docs/src/components/common-ui/vben-form.md
@@ -316,6 +316,7 @@ useVbenForm 返回的第二个参数，是一个对象，包含了一些表单
 | commonConfig | 表单项的通用配置，每个配置都会传递到每个表单项，表单项可覆盖 | `FormCommonConfig` | - |
 | schema | 表单项的每一项配置 | `FormSchema` | - |
 | submitOnEnter | 按下回车健时提交表单 | `boolean` | false |
+| submitOnChange | 字段值改变时提交表单 | `boolean` | false |
 
 ### TS 类型说明
 

diff --git a/docs/src/demos/vben-vxe-table/form/index.vue b/docs/src/demos/vben-vxe-table/form/index.vue
@@ -76,6 +76,8 @@ const formOptions: VbenFormProps = {
   submitButtonOptions: {
     content: '查询',
   },
+  // 是否在字段值改变时提交表单
+  submitOnChange: false,
   // 按下回车时是否提交表单
   submitOnEnter: false,
 };

diff --git a/packages/@core/ui-kit/form-ui/src/form-api.ts b/packages/@core/ui-kit/form-ui/src/form-api.ts
@@ -36,6 +36,7 @@ function getDefaultState(): VbenFormProps {
     showCollapseButton: false,
     showDefaultActions: true,
     submitButtonOptions: {},
+    submitOnChange: false,
     submitOnEnter: false,
     wrapperClass: 'grid-cols-1',
   };

diff --git a/packages/@core/ui-kit/form-ui/src/types.ts b/packages/@core/ui-kit/form-ui/src/types.ts
@@ -342,6 +342,12 @@ export interface VbenFormProps<
    */
   submitButtonOptions?: ActionButtonOptions;
 
+  /**
+   * 是否在字段值改变时提交表单
+   * @default false
+   */
+  submitOnChange?: boolean;
+
   /**
    * 是否在回车时提交表单
    * @default false

diff --git a/packages/@core/ui-kit/form-ui/src/vben-use-form.vue b/packages/@core/ui-kit/form-ui/src/vben-use-form.vue
@@ -6,7 +6,9 @@ import type { ExtendedFormApi, VbenFormProps } from './types';
 import { useForwardPriorityValues } from '@vben-core/composables';
 // import { isFunction } from '@vben-core/shared/utils';
 
-import { useTemplateRef } from 'vue';
+import { useTemplateRef, watch } from 'vue';
+
+import { useDebounceFn } from '@vueuse/core';
 
 import FormActions from './components/form-actions.vue';
 import {
@@ -56,6 +58,14 @@ function handleKeyDownEnter(event: KeyboardEvent) {
 
   formActionsRef.value?.handleSubmit?.();
 }
+
+watch(
+  () => form.values,
+  useDebounceFn(() => {
+    state.value.submitOnChange && props.formApi?.submitForm();
+  }, 300),
+  { deep: true },
+);
 </script>
 
 <template>

diff --git a/playground/src/views/examples/vxe-table/form.vue b/playground/src/views/examples/vxe-table/form.vue
@@ -65,6 +65,8 @@ const formOptions: VbenFormProps = {
   ],
   // 控制表单是否显示折叠按钮
   showCollapseButton: true,
+  // 是否在字段值改变时提交表单
+  submitOnChange: true,
   // 按下回车时是否提交表单
   submitOnEnter: false,
 };