Merge pull request #4766 from VisActor/feature/optimize-filter-plugin

Feature/optimize filter plugin

Author: fangsmile

packages/vtable-plugins/demo/filter/value-filter.ts

@@ -0,0 +1,168 @@
+import * as VTable from '@visactor/vtable';
+import { bindDebugTool } from '@visactor/vtable/es/scenegraph/debug-tool';
+import { FilterPlugin } from '../../src/filter';
+const CONTAINER_ID = 'vTable';
+
+export function createTable() {
+  const records = [
+    {
+      id: 1,
+      class: 1,
+      phone: 30,
+      computer: 30,
+      tv: 30,
+      pad: 30
+    },
+    {
+      id: 2,
+      class: 1,
+      phone: 30,
+      computer: 10,
+      tv: 15,
+      pad: 0
+    },
+    {
+      id: 3,
+      class: 4,
+      phone: 360,
+      computer: 360,
+      tv: 240,
+      pad: 240
+    },
+    {
+      id: 4,
+      class: 2,
+      phone: 20,
+      computer: 0,
+      tv: 20,
+      pad: 10
+    },
+    {
+      id: 5,
+      class: 4,
+      phone: 20,
+      computer: 15,
+      tv: 10,
+      pad: 0
+    },
+    {
+      id: 6,
+      class: 5,
+      phone: 30,
+      computer: 30,
+      tv: 30,
+      pad: 30
+    },
+    {
+      id: 7,
+      class: 3,
+      phone: 2,
+      computer: 1,
+      tv: 1,
+      pad: 1
+    },
+    {
+      id: 8,
+      class: 3,
+      phone: 20,
+      computer: 0,
+      tv: 0,
+      pad: 0
+    },
+    {
+      id: 9,
+      class: 3,
+      phone: 10,
+      computer: 20,
+      tv: 10,
+      pad: 10
+    },
+    {
+      id: 10,
+      class: 2,
+      phone: 60,
+      computer: 0,
+      tv: 90,
+      pad: 0
+    },
+    {
+      id: 11,
+      class: 1,
+      phone: 30,
+      computer: 20,
+      tv: 10,
+      pad: 0
+    },
+    {
+      id: 12,
+      class: 1,
+      phone: 0,
+      computer: 0,
+      tv: 0,
+      pad: 0
+    }
+  ];
+  const columns: VTable.ColumnsDefine = [
+    {
+      field: 'id',
+      title: 'ID',
+      width: 120,
+      sort: true
+    },
+    {
+      field: 'class',
+      title: ' 班级',
+      width: 120,
+      sort: true,
+      headerIcon: {
+        type: 'svg',
+        svg: '<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44Z" fill="#ff5a5f" stroke="#333" stroke-width="1"/></svg>',
+        width: 20,
+        height: 20,
+        name: 'name-icon',
+        positionType: VTable.TYPES.IconPosition.absoluteRight,
+        marginRight: 30
+      }
+    },
+    {
+      field: 'phone',
+      title: '手机',
+      width: 100
+    },
+    {
+      field: 'computer',
+      title: '计算机',
+      width: 120,
+      sort: true
+    },
+    {
+      field: 'tv',
+      title: '电视机',
+      width: 150,
+      sort: true
+    },
+    {
+      field: 'pad',
+      title: '平板电脑',
+      width: 100,
+      sort: true
+    }
+  ];
+
+  const filterPlugin = new FilterPlugin({});
+  (window as any).filterPlugin = filterPlugin;
+
+  const option: VTable.ListTableConstructorOptions = {
+    container: document.getElementById(CONTAINER_ID),
+    records,
+    columns,
+    padding: 10,
+    plugins: [filterPlugin]
+  };
+  const tableInstance = new VTable.ListTable(option);
+  (window as any).tableInstance = tableInstance;
+
+  bindDebugTool(tableInstance.scenegraph.stage, {
+    customGrapicKeys: ['col', 'row']
+  });
+}

packages/vtable-plugins/demo/menu.ts

@@ -19,6 +19,10 @@ export const menus = [
     path: 'filter',
     name: 'bug'
   },
+  {
+    path: 'filter',
+    name: 'value-filter'
+  },
   {
     path: 'header-highlight',
     name: '(deprecated)header-highlight'

packages/vtable-plugins/src/filter/filter-state-manager.ts

@@ -117,6 +117,6 @@ export class FilterStateManager {
       FilterActionType.CLEAR_ALL_FILTERS,
       FilterActionType.APPLY_FILTERS
     ];
-    return shouldApplyActions.includes(action.type) || action.payload.enable;
+    return shouldApplyActions.includes(action.type);
   }
 }

packages/vtable-plugins/src/filter/filter-toolbar.ts

@@ -35,6 +35,13 @@ export class FilterToolbar {
     this.conditionFilter = new ConditionFilter(this.table, this.filterStateManager);
 
     this.filterMenuWidth = 300; // 待优化，可能需要自适应内容的宽度
+
+    // 监听筛选状态变化，更新清除筛选按钮状态
+    this.filterStateManager.subscribe(state => {
+      if (this.isVisible && this.selectedField !== null) {
+        this.updateClearFilterButtonState(this.selectedField);
+      }
+    });
   }
 
   private onTabSwitch(tab: 'byValue' | 'byCondition'): void {
@@ -82,6 +89,19 @@ export class FilterToolbar {
     this.hide();
   }
 
+  /**
+   * 更新清除筛选按钮的状态
+   */
+  private updateClearFilterButtonState(field: string | number): void {
+    const currentFilter = this.filterStateManager.getFilterState(field);
+    const hasActiveFilter = currentFilter && currentFilter.enable;
+
+    this.clearFilterOptionLink.style.display = 'inline';
+    this.clearFilterOptionLink.style.opacity = hasActiveFilter ? '1' : '0.5';
+    this.clearFilterOptionLink.style.pointerEvents = hasActiveFilter ? 'auto' : 'none';
+    this.clearFilterOptionLink.style.cursor = hasActiveFilter ? 'pointer' : 'not-allowed';
+  }
+
   render(container: HTMLElement): void {
     // === 主容器 ===
     this.filterMenu = document.createElement('div');
@@ -240,6 +260,9 @@ export class FilterToolbar {
       this.onTabSwitch('byValue');
     }
 
+    // 更新清除筛选按钮状态
+    this.updateClearFilterButtonState(field);
+
     // 确保在事件冒泡完成后才设置 isVisible 为 true
     setTimeout(() => {
       this.isVisible = true;

packages/vtable-plugins/src/filter/filter.ts

@@ -316,6 +316,7 @@ export class FilterPlugin implements pluginsDefinition.IVTablePlugin {
     this.table = null;
     this.filterEngine = null;
     this.filterStateManager = null;
+    this.filterToolbar.valueFilter.destroy();
     this.filterToolbar = null;
   }
 }

packages/vtable-plugins/src/filter/types.ts

@@ -48,7 +48,7 @@ export interface FilterAction {
 
 export interface ValueFilterOptionDom {
   id: string;
-  originalValue: any;
+  originalValue: any[];
   itemContainer: HTMLDivElement;
   checkbox: HTMLInputElement;
   countSpan: HTMLSpanElement;