feat: add submitOnEnter configuration to form

vbenjs · Oct 17, 2024 · f387a4c · f387a4c
1 parent f89f4f3
commit f387a4c
Show file tree

Hide file tree

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

diff --git a/packages/@core/ui-kit/form-ui/src/components/form-actions.vue b/packages/@core/ui-kit/form-ui/src/components/form-actions.vue
@@ -75,6 +75,11 @@ watch(
     }
   },
 );
+
+defineExpose({
+  handleReset,
+  handleSubmit,
+});
 </script>
 <template>
   <div

diff --git a/packages/@core/ui-kit/form-ui/src/form-api.ts b/packages/@core/ui-kit/form-ui/src/form-api.ts
@@ -35,6 +35,7 @@ function getDefaultState(): VbenFormProps {
     showCollapseButton: false,
     showDefaultActions: true,
     submitButtonOptions: {},
+    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
@@ -319,7 +319,6 @@ export interface VbenFormProps<
    * 重置按钮参数
    */
   resetButtonOptions?: ActionButtonOptions;
-
   /**
    * 是否显示默认操作按钮
    * @default true
@@ -330,6 +329,12 @@ export interface VbenFormProps<
    * 提交按钮参数
    */
   submitButtonOptions?: ActionButtonOptions;
+
+  /**
+   * 是否在回车时提交表单
+   * @default false
+   */
+  submitOnEnter?: boolean;
 }
 
 export type ExtendedFormApi = {

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,6 +6,8 @@ import type { ExtendedFormApi, VbenFormProps } from './types';
 import { useForwardPriorityValues } from '@vben-core/composables';
 // import { isFunction } from '@vben-core/shared/utils';
 
+import { useTemplateRef } from 'vue';
+
 import FormActions from './components/form-actions.vue';
 import {
   COMPONENT_BIND_EVENT_MAP,
@@ -21,6 +23,8 @@ interface Props extends VbenFormProps {
 
 const props = defineProps<Props>();
 
+const formActionsRef = useTemplateRef<typeof FormActions>('formActionsRef');
+
 const state = props.formApi?.useStore?.();
 
 const forward = useForwardPriorityValues(props, state);
@@ -34,10 +38,18 @@ props.formApi?.mount?.(form);
 const handleUpdateCollapsed = (value: boolean) => {
   props.formApi?.setState({ collapsed: !!value });
 };
+
+function handleKeyDownEnter() {
+  if (!state.value.submitOnEnter || !formActionsRef.value) {
+    return;
+  }
+  formActionsRef.value?.handleSubmit?.();
+}
 </script>
 
 <template>
   <Form
+    @keydown.enter.prevent="handleKeyDownEnter"
     v-bind="forward"
     :collapsed="state.collapsed"
     :component-bind-event-map="COMPONENT_BIND_EVENT_MAP"
@@ -56,6 +68,7 @@ const handleUpdateCollapsed = (value: boolean) => {
       <slot v-bind="slotProps">
         <FormActions
           v-if="forward.showDefaultActions"
+          ref="formActionsRef"
           :model-value="state.collapsed"
           @update:model-value="handleUpdateCollapsed"
         >

diff --git a/playground/src/views/examples/form/basic.vue b/playground/src/views/examples/form/basic.vue
@@ -16,6 +16,7 @@ const [BaseForm, baseFormApi] = useVbenForm({
       class: 'w-full',
     },
   },
+
   // 提交函数
   handleSubmit: onSubmit,
   // 垂直布局，label和input在不同行，值为vertical

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,
+  // 按下回车时是否提交表单
+  submitOnEnter: false,
 };
 
 const gridOptions: VxeGridProps<RowType> = {