canrd-outside / order-erp-front · Commits

Commit 9b2d41ea44ed0da4dde22856bf23b52748244642

Authored by Netfan
Committed by GitHub
1 parent 3bb6d11e

feat(form): add prop autoSubmitOnEnter (#620) 

为Form添加autoSubmitOnEnter属性，当设置为true时，可以在input组件上按下回车时自动提交表单
Inline Side-by-side
Showing 3 changed files with 34 additions and 13 deletions
src/components/Form/src/BasicForm.vue
  View file @9b2d41e
1 1 <template>
2   - <Form v-bind="{ ...$attrs, ...$props }" :class="getFormClass" ref="formElRef" :model="formModel">
  2 + <Form
  3 + v-bind="{ ...$attrs, ...$props }"
  4 + :class="getFormClass"
  5 + ref="formElRef"
  6 + :model="formModel"
  7 + @keypress.enter="handleEnterPress"
  8 + >
3 9 <Row :style="getRowWrapStyle">
4 10 <slot name="formHeader"></slot>
5 11 <template v-for="schema in getSchema" :key="schema.field">
... ... @@ -81,11 +87,9 @@
81 87 const { prefixCls } = useDesign('basic-form');
82 88  
83 89 // Get the basic configuration of the form
84   - const getProps = computed(
85   - (): FormProps => {
86   - return { ...props, ...unref(propsRef) } as FormProps;
87   - }
88   - );
  90 + const getProps = computed((): FormProps => {
  91 + return { ...props, ...unref(propsRef) } as FormProps;
  92 + });
89 93  
90 94 const getFormClass = computed(() => {
91 95 return [
... ... @@ -97,12 +101,10 @@
97 101 });
98 102  
99 103 // Get uniform row style
100   - const getRowWrapStyle = computed(
101   - (): CSSProperties => {
102   - const { baseRowStyle = {} } = unref(getProps);
103   - return baseRowStyle;
104   - }
105   - );
  104 + const getRowWrapStyle = computed((): CSSProperties => {
  105 + const { baseRowStyle = {} } = unref(getProps);
  106 + return baseRowStyle;
  107 + });
106 108  
107 109 const getSchema = computed((): FormSchema[] => {
108 110 const schemas: FormSchema[] = unref(schemaRef) || (unref(getProps).schemas as any);
... ... @@ -213,6 +215,17 @@
213 215 formModel[key] = value;
214 216 }
215 217  
  218 + function handleEnterPress(e: KeyboardEvent) {
  219 + const { autoSubmitOnEnter } = unref(getProps);
  220 + if (!autoSubmitOnEnter) return;
  221 + if (e.key === 'Enter' && e.target && e.target instanceof HTMLElement) {
  222 + const target: HTMLElement = e.target as HTMLElement;
  223 + if (target && target.tagName && target.tagName.toUpperCase() == 'INPUT') {
  224 + handleSubmit();
  225 + }
  226 + }
  227 + }
  228 +
216 229 const formActionType: Partial<FormActionType> = {
217 230 getFieldsValue,
218 231 setFieldsValue,
... ... @@ -236,6 +249,7 @@
236 249  
237 250 return {
238 251 handleToggleAdvanced,
  252 + handleEnterPress,
239 253 formModel,
240 254 defaultValueRef,
241 255 advanceState,
... ...
src/components/Form/src/props.ts
  View file @9b2d41e
... ... @@ -37,6 +37,8 @@ export const basicProps = {
37 37 type: Object as PropType<Partial<ColEx>>,
38 38 },
39 39 autoSetPlaceHolder: propTypes.bool.def(true),
  40 + // 在INPUT组件上单击回车时，是否自动提交
  41 + autoSubmitOnEnter: propTypes.bool.def(false),
40 42 submitOnReset: propTypes.bool,
41 43 size: propTypes.oneOf(['default', 'small', 'large']).def('default'),
42 44 // 禁用表单
... ...
src/components/Form/src/types/form.ts
  View file @9b2d41e
... ... @@ -83,6 +83,8 @@ export interface FormProps {
83 83 fieldMapToTime?: FieldMapToTime;
84 84 // Placeholder is set automatically
85 85 autoSetPlaceHolder?: boolean;
  86 + // Auto submit on press enter on input
  87 + autoSubmitOnEnter?: boolean;
86 88 // Check whether the information is added to the label
87 89 rulesMessageJoinLabel?: boolean;
88 90 // Whether to show collapse and expand buttons
... ... @@ -125,7 +127,10 @@ export interface FormSchema {
125 127 // Auxiliary text
126 128 subLabel?: string;
127 129 // Help text on the right side of the text
128   - helpMessage?: string | string[] | ((renderCallbackParams: RenderCallbackParams) => string | string[]);
  130 + helpMessage?:
  131 + | string
  132 + | string[]
  133 + | ((renderCallbackParams: RenderCallbackParams) => string | string[]);
129 134 // BaseHelp component props
130 135 helpComponentProps?: Partial<HelpComponentProps>;
131 136 // Label width, if it is passed, the labelCol and WrapperCol configured by itemProps will be invalid
... ...