Merge pull request baidu#8647 from 2betop/fix-autofilterform

fix: 修复列过滤选择与实际展示不一致问题
hsm-lv · Nov 7, 2023 · a9eafda · a9eafda
2 parents a3089b6 + 1c0415c
commit a9eafda
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 49 deletions.
diff --git a/packages/amis-ui/scss/components/_table.scss b/packages/amis-ui/scss/components/_table.scss
@@ -1108,3 +1108,13 @@
     }
   }
 }
+
+.#{$ns}AutoFilterToolbar {
+  display: block;
+  text-align: right;
+  white-space: nowrap;
+
+  > .#{$ns}Button {
+    margin-top: 0;
+  }
+}
diff --git a/packages/amis/src/renderers/Table/AutoFilterForm.tsx b/packages/amis/src/renderers/Table/AutoFilterForm.tsx
@@ -71,7 +71,7 @@ export function AutoFilterForm({
       })
     );
 
-    let showExpander = searchableColumns.length >= columnsNum;
+    let showExpander = activedSearchableColumns.length >= columnsNum;
 
     // todo 以后做动画
     if (!searchFormExpanded && body.length) {
@@ -100,7 +100,7 @@ export function AutoFilterForm({
     }
     lastGroup.body.push({
       type: 'container',
-      className: 'ButtonToolbar text-right block',
+      className: 'AutoFilterToolbar',
       wrapperBody: false,
       body: [
         {
@@ -114,67 +114,67 @@ export function AutoFilterForm({
           visible: showBtnToolbar,
           buttons: searchableColumns.map(column => {
             return {
-              type: 'checkbox',
-              label: false,
-              className: cx('Table-searchableForm-checkbox'),
-              inputClassName: cx('Table-searchableForm-checkbox-inner'),
-              name: `${
-                column.searchable.strategy === 'jsonql' ? '' : '__search_'
-              }${column.searchable?.name ?? column.name}`,
-              option: column.searchable?.label ?? column.label,
-              /**
-               * syncLocation开启后，参数值会从地址栏Query中二次同步到数据域中，其中布尔(boolean)类型的值被转化为字符串
-               * eg:
-               *     true ==> "true"
-               *     false ==> "false"
-               * 所以这里将真值和假值转化成字符串格式规避
-               */
-              trueValue: '1',
-              falseValue: '0',
-              value: !!column.enableSearch ? '1' : '0',
-              badge: {
-                offset: [-10, 5],
-                visibleOn: `${
-                  column.toggable && !column.toggled && column.enableSearch
-                }`
-              },
-              onChange: (value: '1' | '0') =>
-                onItemToggleExpanded?.(column, value === '1' ? true : false)
+              children: ({render}: any) =>
+                render(
+                  `column-search-toggler-${column.id}`,
+                  {
+                    type: 'checkbox',
+                    label: false,
+                    className: cx('Table-searchableForm-checkbox'),
+                    inputClassName: cx('Table-searchableForm-checkbox-inner'),
+                    name: `__whatever_name`,
+                    option: column.searchable?.label ?? column.label,
+                    badge: {
+                      offset: [-10, 5],
+                      visibleOn: `${
+                        column.toggable &&
+                        !column.toggled &&
+                        column.enableSearch
+                      }`
+                    }
+                  },
+                  {
+                    value: activedSearchableColumns.includes(column),
+                    onChange: (value: any) =>
+                      onItemToggleExpanded?.(column, value)
+                  }
+                )
             };
           })
         },
 
         {
           type: 'submit',
           label: __('search'),
+          size: 'sm',
           level: 'primary',
-          className: 'w-18'
+          className: 'w-18 mr-2'
         },
         {
           type: 'reset',
           label: __('reset'),
+          size: 'sm',
           className: 'w-18'
         },
 
-        showExpander
-          ? {
-              children: () => (
-                <a
-                  className={cx(
-                    'Table-SFToggler',
-                    searchFormExpanded ? 'is-expanded' : ''
-                  )}
-                  onClick={onToggleExpanded}
-                >
-                  {__(searchFormExpanded ? 'collapse' : 'expand')}
-                  <span className={cx('Table-SFToggler-arrow')}>
-                    <Icon icon="right-arrow-bold" className="icon" />
-                  </span>
-                </a>
-              )
-            }
-          : null
-      ].filter(item => item)
+        {
+          children: () =>
+            showExpander ? (
+              <a
+                className={cx(
+                  'Table-SFToggler',
+                  searchFormExpanded ? 'is-expanded' : ''
+                )}
+                onClick={onToggleExpanded}
+              >
+                {__(searchFormExpanded ? 'collapse' : 'expand')}
+                <span className={cx('Table-SFToggler-arrow')}>
+                  <Icon icon="right-arrow-bold" className="icon" />
+                </span>
+              </a>
+            ) : null
+        }
+      ]
     });
 
     return {
@@ -227,7 +227,7 @@ export default observer(
     const onItemToggleExpanded = React.useCallback(
       (column: IColumn, value: boolean) => {
         column.setEnableSearch(value);
-        store.setSearchFormExpanded(true);
+        value && store.setSearchFormExpanded(true);
       },
       []
     );