Merge pull request baidu#9615 from 2betop/fix-autoFill-in-inputTable

fix: 修复 select 的 autoFill 在 inputTable 中赋值不正确的问题 Close: baidu#9494
lhtuling · Feb 29, 2024 · 8e8a784 · 8e8a784
2 parents 47453da + 9cf4421
commit 8e8a784
Show file tree

Hide file tree

Showing 2 changed files with 153 additions and 0 deletions.
diff --git a/packages/amis/__tests__/renderers/Form/inputTable.test.tsx b/packages/amis/__tests__/renderers/Form/inputTable.test.tsx
@@ -809,3 +809,141 @@ test('Renderer:input-table formula', async () => {
     ]
   });
 });
+
+// 对应 github issue: https://github.com/baidu/amis/issues/9494
+test('Renderer:input-table autoFill', async () => {
+  const onSubmit = jest.fn();
+  const {container} = render(
+    amisRender(
+      {
+        type: 'page',
+        title: 'Hello low code',
+        body: [
+          {
+            type: 'form',
+            api: '/api/mock2/form/saveForm',
+            body: [
+              {
+                type: 'input-table',
+                name: 'table',
+                label: '表格表单',
+                columns: [
+                  {
+                    label: '名称',
+                    name: 'name',
+                    quickEdit: {
+                      type: 'input-text',
+                      name: 'name',
+                      id: 'u:514910e73695'
+                    },
+                    id: 'u:97d119520d7c'
+                  },
+                  {
+                    label: '分数',
+                    name: 'score',
+                    quickEdit: {
+                      type: 'input-number',
+                      name: 'score',
+                      id: 'u:644f5984ff07'
+                    },
+                    id: 'u:60636ff9ed10'
+                  },
+                  {
+                    label: '等级',
+                    name: 'level',
+                    quickEdit: {
+                      type: 'select',
+                      name: 'level',
+                      autoFill: {
+                        id: '$id'
+                      },
+                      id: 'u:38014752298b',
+                      options: [
+                        {
+                          label: 'a',
+                          value: '111',
+                          id: 111
+                        },
+                        {
+                          label: 'a1',
+                          value: '1121',
+                          id: 222
+                        }
+                      ]
+                    },
+                    id: 'u:bc682229ad4f'
+                  }
+                ],
+                addable: true,
+                footerAddBtn: {
+                  label: '新增',
+                  icon: 'fa fa-plus',
+                  id: 'u:a0d2d9eab4f7'
+                },
+                strictMode: true,
+                id: 'u:c296ba75753c',
+                minLength: 0,
+                editable: true,
+                removable: true
+              }
+            ],
+            id: 'u:a2f24ee3ab2d',
+            debug: true
+          }
+        ],
+        id: 'u:09eedced8bb6',
+        asideResizor: false,
+        style: {
+          boxShadow: ' 0px 0px 0px 0px transparent'
+        },
+        pullRefresh: {
+          disabled: true
+        }
+      },
+      {
+        onSubmit: onSubmit
+      },
+      makeEnv({})
+    )
+  );
+
+  await wait(200);
+
+  const add = container.querySelector('.cxd-InputTable-toolbar button');
+  fireEvent.click(add!);
+  await wait(200);
+
+  fireEvent.change(container.querySelector('input[name="name"]')!, {
+    target: {value: 'a1'}
+  });
+  await wait(200);
+
+  fireEvent.change(container.querySelector('input[name="score"]')!, {
+    target: {value: '123'}
+  });
+  await wait(200);
+
+  fireEvent.click(container.querySelector('.cxd-Select')!);
+  await wait(200);
+  fireEvent.click(container.querySelector('.cxd-Select-menu [role="option"]')!);
+  await wait(200);
+
+  fireEvent.click(container.querySelector('.cxd-OperationField button')!);
+  await wait(200);
+
+  const submitBtn = container.querySelector('button[type=submit]');
+  fireEvent.click(submitBtn!);
+  await wait(200);
+
+  expect(onSubmit).toBeCalled();
+  expect(onSubmit.mock.calls[0][0]).toEqual({
+    table: [
+      {
+        id: 111,
+        name: 'a1',
+        score: 123,
+        level: '111'
+      }
+    ]
+  });
+});
diff --git a/packages/amis/src/renderers/QuickEdit.tsx b/packages/amis/src/renderers/QuickEdit.tsx
@@ -140,6 +140,7 @@ export const HocQuickEdit =
         this.handleInit = this.handleInit.bind(this);
         this.handleChange = this.handleChange.bind(this);
         this.handleFormItemChange = this.handleFormItemChange.bind(this);
+        this.handleBulkChange = this.handleBulkChange.bind(this);
 
         this.state = {
           isOpened: false
@@ -379,6 +380,18 @@ export const HocQuickEdit =
         );
       }
 
+      // autoFill 是通过 onBulkChange 触发的
+      // quickEdit 需要拦截这个，否则修改的数据就是错的
+      handleBulkChange(values: any) {
+        const {onQuickChange, quickEdit} = this.props;
+        onQuickChange(
+          values,
+          (quickEdit as QuickEditConfig).saveImmediately,
+          false,
+          quickEdit as QuickEditConfig
+        );
+      }
+
       openQuickEdit() {
         currentOpened = this;
         this.setState({
@@ -595,6 +608,7 @@ export const HocQuickEdit =
             mode: 'normal',
             value: getPropValue(this.props) ?? '',
             onChange: this.handleFormItemChange,
+            onBulkChange: this.handleBulkChange,
             ref: this.formItemRef,
             defaultStatic: false
           });
@@ -608,6 +622,7 @@ export const HocQuickEdit =
           simpleMode: true,
           onInit: this.handleInit,
           onChange: this.handleChange,
+          onBulkChange: this.handleBulkChange,
           formLazyChange: false,
           canAccessSuperData,
           disabled,