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

This commit is contained in:
1sm 2021-12-28 18:47:21 +08:00 committed by GitHub
parent dd158a17fe
commit f964533701
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 15 additions and 3 deletions

View File

@ -58,6 +58,7 @@
import { createFormContext } from './hooks/useFormContext'; import { createFormContext } from './hooks/useFormContext';
import { useAutoFocus } from './hooks/useAutoFocus'; import { useAutoFocus } from './hooks/useAutoFocus';
import { useModalContext } from '/@/components/Modal'; import { useModalContext } from '/@/components/Modal';
import { useDebounceFn } from '@vueuse/core';
import { basicProps } from './props'; import { basicProps } from './props';
import { useDesign } from '/@/hooks/web/useDesign'; 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> { async function setProps(formProps: Partial<FormProps>): Promise<void> {
propsRef.value = deepMerge(unref(propsRef) || {}, formProps); propsRef.value = deepMerge(unref(propsRef) || {}, formProps);
} }

View File

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

View File

@ -60,6 +60,8 @@ export interface FormProps {
rowProps?: RowProps; rowProps?: RowProps;
// Submit form on reset // Submit form on reset
submitOnReset?: boolean; submitOnReset?: boolean;
// Submit form on form changing
submitOnChange?: boolean;
// Col configuration for the entire form // Col configuration for the entire form
labelCol?: Partial<ColEx>; labelCol?: Partial<ColEx>;
// Col configuration for the entire form // Col configuration for the entire form

View File

@ -23,7 +23,7 @@
const { getUseOpenBackTop, getShowSettingButton, getSettingButtonPosition, getFullContent } = const { getUseOpenBackTop, getShowSettingButton, getSettingButtonPosition, getFullContent } =
useRootSetting(); useRootSetting();
const userStore = useUserStoreWithOut(); const userStore = useUserStoreWithOut();
const { prefixCls } = useDesign('setting-drawer-fearure'); const { prefixCls } = useDesign('setting-drawer-feature');
const { getShowHeader } = useHeaderSetting(); const { getShowHeader } = useHeaderSetting();
const getIsSessionTimeout = computed(() => userStore.getSessionTimeout); const getIsSessionTimeout = computed(() => userStore.getSessionTimeout);
@ -59,7 +59,7 @@
</template> </template>
<style lang="less"> <style lang="less">
@prefix-cls: ~'@{namespace}-setting-drawer-fearure'; @prefix-cls: ~'@{namespace}-setting-drawer-feature';
.@{prefix-cls} { .@{prefix-cls} {
position: absolute; position: absolute;

View File

@ -134,7 +134,7 @@ const setting: ProjectConfig = {
// Transition Setting // Transition Setting
transitionSetting: { transitionSetting: {
// Whether to open the page switching animation // Whether to open the page switching animation
// The disabled state will also disable pageLoadinng // The disabled state will also disable pageLoading
enable: true, enable: true,
// Route basic switching animation // Route basic switching animation