From f964533701389109d90144cbefff7042cdcedbf6 Mon Sep 17 00:00:00 2001
From: 1sm <31946591+1sm23@users.noreply.github.com>
Date: Tue, 28 Dec 2021 18:47:21 +0800
Subject: [PATCH] feat(BasicForm): add `submitOnChange` option (#1521)

---
 src/components/Form/src/BasicForm.vue | 9 +++++++++
 src/components/Form/src/props.ts      | 1 +
 src/components/Form/src/types/form.ts | 2 ++
 src/layouts/default/feature/index.vue | 4 ++--
 src/settings/projectSetting.ts        | 2 +-
 5 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/components/Form/src/BasicForm.vue b/src/components/Form/src/BasicForm.vue
index ebea6a5b7..247c48743 100644
--- a/src/components/Form/src/BasicForm.vue
+++ b/src/components/Form/src/BasicForm.vue
@@ -58,6 +58,7 @@
   import { createFormContext } from './hooks/useFormContext';
   import { useAutoFocus } from './hooks/useAutoFocus';
   import { useModalContext } from '/@/components/Modal';
+  import { useDebounceFn } from '@vueuse/core';
 
   import { basicProps } from './props';
   import { useDesign } from '/@/hooks/web/useDesign';
@@ -225,6 +226,14 @@
         },
       );
 
+      watch(
+        () => formModel,
+        useDebounceFn(() => {
+          unref(getProps).submitOnChange && handleSubmit();
+        }, 300),
+        { deep: true },
+      );
+
       async function setProps(formProps: Partial<FormProps>): Promise<void> {
         propsRef.value = deepMerge(unref(propsRef) || {}, formProps);
       }
diff --git a/src/components/Form/src/props.ts b/src/components/Form/src/props.ts
index 6adcfa7bf..bfdaee7ef 100644
--- a/src/components/Form/src/props.ts
+++ b/src/components/Form/src/props.ts
@@ -40,6 +40,7 @@ export const basicProps = {
   // 在INPUT组件上单击回车时，是否自动提交
   autoSubmitOnEnter: propTypes.bool.def(false),
   submitOnReset: propTypes.bool,
+  submitOnChange: propTypes.bool,
   size: propTypes.oneOf(['default', 'small', 'large']).def('default'),
   // 禁用表单
   disabled: propTypes.bool,
diff --git a/src/components/Form/src/types/form.ts b/src/components/Form/src/types/form.ts
index 8415b03c6..9dcf33455 100644
--- a/src/components/Form/src/types/form.ts
+++ b/src/components/Form/src/types/form.ts
@@ -60,6 +60,8 @@ export interface FormProps {
   rowProps?: RowProps;
   // Submit form on reset
   submitOnReset?: boolean;
+  // Submit form on form changing
+  submitOnChange?: boolean;
   // Col configuration for the entire form
   labelCol?: Partial<ColEx>;
   // Col configuration for the entire form
diff --git a/src/layouts/default/feature/index.vue b/src/layouts/default/feature/index.vue
index 0787014a1..0db26ef58 100644
--- a/src/layouts/default/feature/index.vue
+++ b/src/layouts/default/feature/index.vue
@@ -23,7 +23,7 @@
       const { getUseOpenBackTop, getShowSettingButton, getSettingButtonPosition, getFullContent } =
         useRootSetting();
       const userStore = useUserStoreWithOut();
-      const { prefixCls } = useDesign('setting-drawer-fearure');
+      const { prefixCls } = useDesign('setting-drawer-feature');
       const { getShowHeader } = useHeaderSetting();
 
       const getIsSessionTimeout = computed(() => userStore.getSessionTimeout);
@@ -59,7 +59,7 @@
 </template>
 
 <style lang="less">
-  @prefix-cls: ~'@{namespace}-setting-drawer-fearure';
+  @prefix-cls: ~'@{namespace}-setting-drawer-feature';
 
   .@{prefix-cls} {
     position: absolute;
diff --git a/src/settings/projectSetting.ts b/src/settings/projectSetting.ts
index 0d4415b89..825b0a281 100644
--- a/src/settings/projectSetting.ts
+++ b/src/settings/projectSetting.ts
@@ -134,7 +134,7 @@ const setting: ProjectConfig = {
   // Transition Setting
   transitionSetting: {
     //  Whether to open the page switching animation
-    // The disabled state will also disable pageLoadinng
+    // The disabled state will also disable pageLoading
     enable: true,
 
     // Route basic switching animation