From 25acb2b89417866e5c1c0364adb9fb931404e77e Mon Sep 17 00:00:00 2001
From: RubyLiu <liulubingjava@163.com>
Date: Wed, 22 Nov 2023 19:36:42 +0800
Subject: [PATCH] feat: overwrite table column filter

---
 .../components/pure/ms-table/base-table.vue   | 20 ++++-
 .../components/pure/ms-table/batchAction.vue  |  2 +-
 .../pure/ms-table/comp/defaultFilter.vue      | 73 +++++++++++++++++++
 .../components/pure/ms-table/select-all.vue   | 23 ++++--
 frontend/src/components/pure/ms-table/type.ts | 12 +++
 .../src/components/pure/ms-table/useTable.ts  |  7 +-
 6 files changed, 124 insertions(+), 13 deletions(-)
 create mode 100644 frontend/src/components/pure/ms-table/comp/defaultFilter.vue

diff --git a/frontend/src/components/pure/ms-table/base-table.vue b/frontend/src/components/pure/ms-table/base-table.vue
index 8202ca0124..44e6b135d5 100644
--- a/frontend/src/components/pure/ms-table/base-table.vue
+++ b/frontend/src/components/pure/ms-table/base-table.vue
@@ -19,10 +19,11 @@
       <template #columns>
         <a-table-column v-if="attrs.selectable && props.selectedKeys" :width="60">
           <template #title>
-            <select-all
+            <SelectALL
               :total="selectTotal"
               :current="selectCurrent"
-              :type="attrs.selectorType as ('checkbox' | 'radio')"
+              :show-select-all="(attrs.showPagination as boolean)"
+              :disabled="(attrs.data as []).length === 0"
               @change="handleSelectAllChange"
             />
           </template>
@@ -65,6 +66,13 @@
                 class="setting-icon"
                 @click="handleShowSetting"
               />
+              <slot v-else-if="item.filterConfig" :name="item.filterConfig.filterSlotName">
+                <DefaultFilter
+                  :options="item.filterConfig.options"
+                  :multiple="(item.filterConfig.multiple as boolean)"
+                  @handle-confirm="(v: (string | number)[]) => handleFilterConfirm(v, item.dataIndex as string)"
+                />
+              </slot>
             </div>
           </template>
           <template #cell="{ column, record, rowIndex }">
@@ -209,7 +217,8 @@
   import MsCheckbox from '../ms-checkbox/MsCheckbox.vue';
   import BatchAction from './batchAction.vue';
   import ColumnSelector from './columnSelector.vue';
-  import selectAll from './select-all.vue';
+  import DefaultFilter from './comp/defaultFilter.vue';
+  import SelectALL from './select-all.vue';
 
   import { useI18n } from '@/hooks/useI18n';
   import { useAppStore, useTableStore } from '@/store';
@@ -256,6 +265,7 @@
     (e: 'sorterChange', value: { [key: string]: string }): void;
     (e: 'expand', record: TableData): void | Promise<any>;
     (e: 'clearSelector'): void;
+    (e: 'filterChange', dataIndex: string, value: (string | number)[]): void;
   }>();
   const attrs = useAttrs();
   // 全选按钮-总条数
@@ -453,6 +463,10 @@
     columnSelectorVisible.value = true;
   };
 
+  const handleFilterConfirm = (value: (string | number)[], dataIndex: string) => {
+    emit('filterChange', dataIndex, value);
+  };
+
   onMounted(async () => {
     await initColumn();
     batchLeft.value = getBatchLeft();
diff --git a/frontend/src/components/pure/ms-table/batchAction.vue b/frontend/src/components/pure/ms-table/batchAction.vue
index 043fe82667..90791dedc6 100644
--- a/frontend/src/components/pure/ms-table/batchAction.vue
+++ b/frontend/src/components/pure/ms-table/batchAction.vue
@@ -15,7 +15,7 @@
         >{{ t(element.label as string) }}</a-button
       >
     </template>
-    <div v-if="props.actionConfig.moreAction" class="drop-down relative ml-[16px] inline-block">
+    <div v-if="moreAction?.length" class="drop-down relative ml-[16px] inline-block">
       <a-dropdown position="tr" @select="handleSelect">
         <a-button type="outline"><MsIcon type="icon-icon_more_outlined" /></a-button>
         <template #content>
diff --git a/frontend/src/components/pure/ms-table/comp/defaultFilter.vue b/frontend/src/components/pure/ms-table/comp/defaultFilter.vue
new file mode 100644
index 0000000000..854cdeddfe
--- /dev/null
+++ b/frontend/src/components/pure/ms-table/comp/defaultFilter.vue
@@ -0,0 +1,73 @@
+<template>
+  <a-trigger v-model:popup-visible="visible" trigger="click">
+    <a-button type="text" @click="visible = true">
+      <template #icon>
+        <icon-filter />
+      </template>
+    </a-button>
+    <template #content>
+      <div class="arco-table-filters-content">
+        <div class="max-h-[300px] overflow-y-auto px-[12px] py-[4px]">
+          <a-checkbox-group v-if="props.multiple" v-model="checkedList" size="mini" direction="vertical">
+            <a-checkbox v-for="item in props.options" :key="item.value" :value="item.value">
+              {{ item.label }}
+            </a-checkbox>
+          </a-checkbox-group>
+          <a-radio-group v-else v-model="checkedValue" size="mini" direction="vertical">
+            <a-radio v-for="item in props.options" :key="item.value" :value="item.value">
+              {{ item.label }}
+            </a-radio>
+          </a-radio-group>
+        </div>
+        <div class="arco-table-filters-bottom">
+          <a-button size="mini" type="secondary" @click="handleFilterReset">
+            {{ t('common.reset') }}
+          </a-button>
+          <a-button size="mini" type="primary" @click="handleFilterSubmit(false)">
+            {{ t('common.confirm') }}
+          </a-button>
+        </div>
+      </div>
+    </template>
+  </a-trigger>
+</template>
+
+<script lang="ts" setup>
+  import { useI18n } from '@/hooks/useI18n';
+
+  const { t } = useI18n();
+  const props = defineProps<{
+    multiple: boolean;
+    options?: { label: string; value: string | number }[];
+  }>();
+  const emit = defineEmits<{
+    (e: 'handleConfirm', value: (string | number)[]): void;
+  }>();
+
+  const visible = ref(false);
+
+  const checkedList = ref<(string | number)[]>([]);
+  const checkedValue = ref<string | number>('');
+
+  const handleFilterSubmit = (isReset = false) => {
+    if (props.multiple) {
+      emit('handleConfirm', checkedList.value);
+    } else {
+      emit('handleConfirm', [checkedValue.value]);
+    }
+    if (!isReset) {
+      checkedList.value = [];
+      checkedValue.value = '';
+    }
+    visible.value = false;
+  };
+
+  const handleFilterReset = () => {
+    if (props.multiple) {
+      checkedList.value = [];
+    } else {
+      checkedValue.value = '';
+    }
+    handleFilterSubmit(true);
+  };
+</script>
diff --git a/frontend/src/components/pure/ms-table/select-all.vue b/frontend/src/components/pure/ms-table/select-all.vue
index a228b23ba4..ee6275c802 100644
--- a/frontend/src/components/pure/ms-table/select-all.vue
+++ b/frontend/src/components/pure/ms-table/select-all.vue
@@ -1,7 +1,13 @@
 <template>
   <div class="ms-table-select-all">
-    <a-checkbox v-model="checked" class="text-base" :indeterminate="indeterminate" @change="handleCheckChange" />
-    <a-dropdown position="bl" @select="handleSelect">
+    <a-checkbox
+      v-model="checked"
+      :disabled="props.disabled"
+      class="text-base"
+      :indeterminate="indeterminate"
+      @change="handleCheckChange"
+    />
+    <a-dropdown v-if="showSelectAll" :disable="props.disabled" position="bl" @select="handleSelect">
       <MsIcon type="icon-icon_down_outlined" class="dropdown-icon" />
       <template #content>
         <a-doption :value="SelectAllEnum.CURRENT">{{ t('msTable.current') }}</a-doption>
@@ -26,10 +32,15 @@
     (e: 'change', value: SelectAllEnum): void;
   }>();
 
-  const props = withDefaults(defineProps<{ current: number; total: number; type: 'checkbox' | 'radio' }>(), {
-    current: 0,
-    total: 0,
-  });
+  const props = withDefaults(
+    defineProps<{ current: number; total: number; showSelectAll: boolean; disabled: boolean }>(),
+    {
+      current: 0,
+      total: 0,
+      showSelectAll: true,
+      disabled: false,
+    }
+  );
 
   const checked = ref(false);
   const indeterminate = ref(false);
diff --git a/frontend/src/components/pure/ms-table/type.ts b/frontend/src/components/pure/ms-table/type.ts
index e52d03ac7d..37cf3f3e68 100644
--- a/frontend/src/components/pure/ms-table/type.ts
+++ b/frontend/src/components/pure/ms-table/type.ts
@@ -14,6 +14,16 @@ export interface MsPaginationI {
   simple?: boolean;
 }
 
+export interface MsTableColumnFilterConfig {
+  filterSlotName?: string; // 筛选组件的slotName
+  multiple?: boolean; // 是否多选
+  // 筛选数据
+  options?: {
+    label: string;
+    value: string;
+  }[];
+}
+
 export interface MsTableColumnData extends TableColumnData {
   // 是否可排序
   showDrag?: boolean;
@@ -35,6 +45,8 @@ export interface MsTableColumnData extends TableColumnData {
   revokeDeletedSlot?: string;
   // 表格列排序字段
   sortIndex?: number;
+  // 筛选配置
+  filterConfig?: MsTableColumnFilterConfig;
 }
 
 export type MsTableErrorStatus = boolean | 'error' | 'empty';
diff --git a/frontend/src/components/pure/ms-table/useTable.ts b/frontend/src/components/pure/ms-table/useTable.ts
index cee13ce47e..58ccf05801 100644
--- a/frontend/src/components/pure/ms-table/useTable.ts
+++ b/frontend/src/components/pure/ms-table/useTable.ts
@@ -301,7 +301,8 @@ export default function useTableProps<T>(
     },
 
     // 筛选触发
-    filterChange: (dataIndex: string, filteredValues: string[]) => {
+    filterChange: (dataIndex: string, filteredValues: (string | number)[]) => {
+      console.log('filterChange', dataIndex, filteredValues);
       filterItem.value = { [dataIndex]: filteredValues };
       loadList();
     },
@@ -311,12 +312,12 @@ export default function useTableProps<T>(
       await loadList();
     },
     // 修改每页显示条数
-    pageSizeChange: (pageSize: number) => {
+    pageSizeChange: async (pageSize: number) => {
       if (propsRes.value.msPagination && typeof propsRes.value.msPagination === 'object') {
         propsRes.value.msPagination.pageSize = pageSize;
         if (propsRes.value.tableKey) {
           // 如果表格设置了tableKey，缓存分页大小
-          tableStore.setPageSize(propsRes.value.tableKey, pageSize);
+          await tableStore.setPageSize(propsRes.value.tableKey, pageSize);
         }
       }
       loadList();