feat(BasicForm): add `submitOnChange` option (#1521)

1sm

2021-12-28 f964533701389109d90144cbefff7042cdcedbf6

feat(BasicForm): add `submitOnChange` option (#1521)

 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);
      }

 src/components/Form/src/props.ts

@@ -40,6 +40,7 @@
  // 在INPUT组件上单击回车时，是否自动提交
  autoSubmitOnEnter: propTypes.bool.def(false),
  submitOnReset: propTypes.bool,
  submitOnChange: propTypes.bool,
  size: propTypes.oneOf(['default', 'small', 'large']).def('default'),
  // 禁用表单
  disabled: propTypes.bool,

 src/components/Form/src/types/form.ts

@@ -60,6 +60,8 @@
  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

 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;

 src/settings/projectSetting.ts

@@ -134,7 +134,7 @@
  // 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