feat: 表格跨页选择

frontend/src/components/pure/ms-checkbox/MsCheckbox.vue

@@ -0,0 +1,21 @@
+<template>
+  <a-checkbox :model-value="checked" @change="handleChange"></a-checkbox>
+</template>
+
+<script setup lang="ts">
+  import { ref, watchEffect } from 'vue';
+
+  const props = defineProps<{
+    value: boolean;
+  }>();
+  const emit = defineEmits<{
+    (e: 'change', value: boolean): void;
+  }>();
+  const checked = ref(false);
+  const handleChange = (v: boolean | (string | number | boolean)[]) => {
+    emit('change', v as boolean);
+  };
+  watchEffect(() => {
+    checked.value = props.value;
+  });
+</script>

frontend/src/components/pure/ms-table/base-table.vue

@@ -1,25 +1,32 @@
 <template>
   <div class="ms-base-table">
-    <select-all
-      v-if="attrs.selectable && attrs.showSelectAll"
-      class="custom-action"
-      :total="selectTotal"
-      :current="selectCurrent"
-      @change="handleChange"
-    />
     <a-table
       v-bind="$attrs"
       :row-class="getRowClass"
-      :selected-keys="props.selectedKeys"
       :span-method="spanMethod"
       :columns="currentColumns"
-      @selection-change="(e) => selectionChange(e, true)"
       @sorter-change="(dataIndex: string,direction: string) => handleSortChange(dataIndex, direction)"
     >
       <template #optional="{ rowIndex, record }">
         <slot name="optional" v-bind="{ rowIndex, record }" />
       </template>
       <template #columns>
+        <a-table-column v-if="attrs.selectable && props.selectedKeys" :width="60">
+          <template #title>
+            <select-all
+              :total="selectTotal"
+              :current="selectCurrent"
+              :type="attrs.selectorType as ('checkbox' | 'radio')"
+              @change="handleSelectAllChange"
+            />
+          </template>
+          <template #cell="{ record }">
+            <MsCheckbox
+              :value="props.selectedKeys.has(record[rowKey || 'id'])"
+              @change="rowSelectChange(record[rowKey || 'id'])"
+            />
+          </template>
+        </a-table-column>
         <a-table-column
           v-for="(item, idx) in currentColumns"
           :key="idx"
@@ -57,16 +64,16 @@
             <div class="flex flex-row flex-nowrap items-center">
               <template v-if="item.dataIndex === SpecialColumnEnum.ENABLE">
                 <slot name="enable" v-bind="{ record }">
-                  <template v-if="record.enable">
+                  <div v-if="record.enable" class="flex flex-row flex-nowrap items-center gap-[2px]">
-                    <icon-check-circle-fill class="mr-[2px] text-[rgb(var(--success-6))]" />
+                    <icon-check-circle-fill class="text-[rgb(var(--success-6))]" />
-                    {{ item.enableTitle ? t(item.enableTitle) : t('msTable.enable') }}
+                    <div>{{ item.enableTitle ? t(item.enableTitle) : t('msTable.enable') }}</div>
-                  </template>
+                  </div>
-                  <template v-else>
+                  <div v-else class="flex flex-row flex-nowrap items-center gap-[2px]">
-                    <MsIcon type="icon-icon_disable" class="mr-[2px] text-[var(--color-text-4)]" />
+                    <MsIcon type="icon-icon_disable" class="text-[var(--color-text-4)]" />
-                    <span class="text-[var(--color-text-1)]">
+                    <div class="text-[var(--color-text-1)]">
                       {{ item.disableTitle ? t(item.disableTitle) : t('msTable.disable') }}
-                    </span>
+                    </div>
-                  </template>
+                  </div>
                 </slot>
               </template>
               <template v-else-if="item.isTag">
@@ -146,10 +153,10 @@
         :select-row-count="selectCurrent"
         :action-config="props.actionConfig"
         @batch-action="(item: BatchActionParams) => emit('batchAction', item)"
-        @clear="selectionChange([], true)"
+        @clear="emit('clearSelector')"
       />
       <ms-pagination
-        v-else-if="attrs.showPagination"
+        v-if="attrs.showPagination"
         size="small"
         v-bind="attrs.msPagination"
         hide-on-single-page
@@ -171,17 +178,20 @@
   import ColumnSelector from './columnSelector.vue';
   import MsIcon from '@/components/pure/ms-icon-font/index.vue';
 
-  import type { MsTableProps, MsPaginationI, BatchActionParams, BatchActionConfig, MsTableColumn } from './type';
+  import type { MsTableProps, BatchActionParams, BatchActionConfig, MsTableColumn, MsPaginationI } from './type';
   import type { TableData } from '@arco-design/web-vue';
+  import MsCheckbox from '../ms-checkbox/MsCheckbox.vue';
 
   const batchleft = ref('10px');
   const { t } = useI18n();
   const tableStore = useTableStore();
-  const appStore = useAppStore();
   const currentColumns = ref<MsTableColumn>([]);
+  const appStore = useAppStore();
 
   const props = defineProps<{
-    selectedKeys?: (string | number)[];
+    selectedKeys: Set<string>;
+    excludeKeys: Set<string>;
+    selectorStatus: SelectAllEnum;
     actionConfig?: BatchActionConfig;
     noDisable?: boolean;
     showSetting?: boolean;
@@ -189,19 +199,35 @@
     spanMethod?: (params: { record: TableData; rowIndex: number; columnIndex: number }) => void;
   }>();
   const emit = defineEmits<{
-    (e: 'selectedChange', value: (string | number)[]): void;
     (e: 'batchAction', value: BatchActionParams): void;
     (e: 'pageChange', value: number): void;
     (e: 'pageSizeChange', value: number): void;
     (e: 'rowNameChange', value: TableData): void;
+    (e: 'rowSelectChange', key: string): void;
+    (e: 'selectAllChange', value: SelectAllEnum): void;
     (e: 'sorterChange', value: { [key: string]: string }): void;
+    (e: 'clearSelector'): void;
   }>();
-  const isSelectAll = ref(false);
   const attrs = useAttrs();
-  // 全选按钮-当前的条数
+
-  const selectCurrent = ref(0);
   // 全选按钮-总条数
-  const selectTotal = ref(0);
+  const selectTotal = computed(() => {
+    const { selectorStatus } = props;
+    if (selectorStatus === SelectAllEnum.ALL) {
+      return (attrs.msPagination as MsPaginationI)?.total || appStore.pageSize;
+    }
+    return (attrs.msPagination as MsPaginationI).pageSize || appStore.pageSize;
+  });
+
+  // 全选按钮-当前的条数
+  const selectCurrent = computed(() => {
+    const { selectorStatus, excludeKeys, selectedKeys } = props;
+    if (selectorStatus === SelectAllEnum.ALL) {
+      return selectTotal.value - excludeKeys.size;
+    }
+    return selectedKeys.size;
+  });
+
   // 编辑按钮的Active状态
   const editActiveKey = ref<string>('');
   // 编辑input的Ref
@@ -233,15 +259,6 @@
     return undefined;
   });
 
-  const setSelectAllTotal = (isAll: boolean) => {
-    const { data, msPagination }: Partial<MsTableProps<any>> = attrs;
-    if (isAll) {
-      selectTotal.value = msPagination?.total || data?.length || appStore.pageSize;
-    } else {
-      selectTotal.value = data ? data.length : appStore.pageSize;
-    }
-  };
-
   const initColumn = () => {
     let tmpArr: MsTableColumn = [];
     if (props.showSetting) {
@@ -252,41 +269,13 @@
     currentColumns.value = tmpArr;
   };
 
-  // 选择公共执行方法
-  const selectionChange = (arr: (string | number)[], setCurrentSelect: boolean, isAll = false) => {
-    setSelectAllTotal(isAll);
-    emit('selectedChange', arr);
-    if (setCurrentSelect) {
-      selectCurrent.value = arr.length;
-    }
-  };
-
   // 全选change事件
-  const handleChange = (v: string) => {
+  const handleSelectAllChange = (v: SelectAllEnum) => {
-    const { data, msPagination }: Partial<MsTableProps<any>> = attrs;
+    emit('selectAllChange', v);
-    isSelectAll.value = v === SelectAllEnum.ALL;
+  };
-    if (v === SelectAllEnum.NONE) {
+  // 行选择器change事件
-      selectionChange([], true);
+  const rowSelectChange = (key: string) => {
-    }
+    emit('rowSelectChange', key);
-    if (v === SelectAllEnum.CURRENT) {
-      if (data && data.length > 0) {
-        selectionChange(
-          data.map((item: any) => item[rowKey || 'id']),
-          true
-        );
-      }
-    }
-    if (v === SelectAllEnum.ALL) {
-      const { total } = msPagination as MsPaginationI;
-      if (data && data.length > 0) {
-        selectionChange(
-          data.map((item: any) => item[rowKey || 'id']),
-          false,
-          true
-        );
-        selectCurrent.value = total;
-      }
-    }
   };
 
   // 分页change事件
@@ -376,15 +365,6 @@
 <style lang="less" scoped>
   .ms-base-table {
     position: relative;
-    .custom-action {
-      position: absolute;
-      top: 13px;
-      left: v-bind(batchleft);
-      z-index: 99;
-      border-radius: 2px;
-      line-height: 40px;
-      cursor: pointer;
-    }
     .batch-action {
       justify-content: flex-start;
     }
@@ -425,11 +405,6 @@
       background: none;
     }
   }
-  :deep(.ms-table-select-all) {
-    .arco-checkbox {
-      margin-left: 0.5rem;
-    }
-  }
   :deep(.arco-checkbox-icon) {
     width: 16px;
     height: 16px;

frontend/src/components/pure/ms-table/select-all.vue

@@ -20,18 +20,12 @@
   const { t } = useI18n();
 
   const emit = defineEmits<{
-    (e: 'change', value: string): void;
+    (e: 'change', value: SelectAllEnum): void;
   }>();
 
-  const props = defineProps({
+  const props = withDefaults(defineProps<{ current: number; total: number; type: 'checkbox' | 'radio' }>(), {
-    current: {
+    current: 0,
-      type: Number,
+    total: 0,
-      default: 0,
-    },
-    total: {
-      type: Number,
-      default: 0,
-    },
   });
 
   const checked = ref(false);
@@ -44,14 +38,14 @@
     } else if (props.current < props.total) {
       checked.value = false;
       indeterminate.value = true;
-    } else if (props.current >= props.total) {
+    } else if (props.current === props.total) {
       checked.value = true;
       indeterminate.value = false;
     }
   });
 
   const handleSelect = (v: string | number | Record<string, any> | undefined) => {
-    emit('change', v as string);
+    emit('change', v as SelectAllEnum);
   };
 
   const handleCheckChange = () => {

frontend/src/components/pure/ms-table/type.ts

@@ -1,4 +1,4 @@
-import { ColumnEditTypeEnum } from '@/enums/tableEnum';
+import { ColumnEditTypeEnum, SelectAllEnum } from '@/enums/tableEnum';
 import { TableColumnData, TableData, TableDraggable, TableChangeExtra } from '@arco-design/web-vue';
 
 export interface MsPaginationI {
@@ -42,56 +42,37 @@ export type MsTableDataItem<T> = T & {
 export interface MsTableProps<T> {
   // 表格数据 - 详见 TableData  https://arco.design/web-vue/components/table-data;
   data: MsTableDataItem<T>[];
-  // 表格key, 用于存储表格列配置
+  tableKey: string; // 表格key, 用于存储表格列配置,pageSize等
-  tableKey: string;
+  rowKey: string; // 表格行的key rowId
   // 表格列 - 详见 TableColumn  https://arco.design/web-vue/components/table-column;
   columns: MsTableColumnData[];
-  // 表格尺寸
+  size?: 'mini' | 'small' | 'default' | 'large'; // 表格尺寸
-  size?: 'mini' | 'small' | 'default' | 'large';
-  // 表格是否可滚动
   scroll?: {
     x?: number | string;
     y?: number | string;
     maxHeight?: number | string;
     minWidth?: number | string;
-  };
+  }; // 表格是否可滚动
-  // 表格是否可拖拽
+  heightUsed?: number; // 已经使用的高度
-  enableDrag?: boolean;
+  enableDrag?: boolean; // 表格是否可拖拽
   draggable?: TableDraggable;
-  // 表格是否可编辑
+  /** 选择器相关 */
-  editable?: boolean;
+  selectable?: boolean; // 是否显示选择器
-  // 表格是否可筛选
+  selectorType: 'none' | 'checkbox' | 'radio'; // 选择器类型
-  filterable?: boolean;
+  selectedKeys: Set<string>; // 选中的key
-  // 表格是否可排序
+  excludeKeys: Set<string>; // 排除的key
-  sortable?: boolean;
+  selectorStatus: SelectAllEnum; // 选择器状态
-  // 表格是否可选中
+  /** end */
-  selectable?: boolean;
+  loading?: boolean; // 加载效果
-  // 展示自定义全选
+  bordered?: boolean; // 是否显示边框
-  showSelectAll?: boolean;
-  // 表格是否可固定表头
-  fixedHeader?: boolean;
-  // 表格是否可固定列
-  fixedColumns?: boolean;
-  // rowKey
-  rowKey?: string;
-  // loading
-  loading?: boolean;
-  bordered?: boolean;
   msPagination?: MsPaginationI;
-  // 展示列表选择按钮
+  showSetting?: boolean; // 展示列表选择按钮
-  showSetting?: boolean;
+  pageSimple?: boolean; // 分页是否是简单模式
-  // 分页是否是简单模式
+  noDisable?: boolean; // 是否展示禁用的行
-  pageSimple?: boolean;
+  tableErrorStatus?: MsTableErrorStatus; // 表格的错误状态，默认为false
-  // 是否展示禁用的行
+  debug?: boolean; // debug模式，开启后会打印表格所有state
-  noDisable?: boolean;
+  showFirstOperation?: boolean; // 是否展示第一行的操作
-  // 表格的错误状态，默认为false
+
-  tableErrorStatus?: MsTableErrorStatus;
-  // debug模式，开启后会打印表格所有state
-  debug?: boolean;
-  // 是否展示第一行的操作
-  showFirstOperation?: boolean;
-  // 已经使用的高度
-  heightUsed?: number;
   [key: string]: any;
 }
 
@@ -124,3 +105,8 @@ export interface BatchActionConfig {
 export interface renamePopconfirmVisibleType {
   [key: string]: boolean;
 }
+
+export interface SetPaginationPrams {
+  current: number;
+  total?: number;
+}

frontend/src/components/pure/ms-table/useTable.ts

@@ -6,7 +6,8 @@ import dayjs from 'dayjs';
 import { useAppStore, useTableStore } from '@/store';
 import type { TableData } from '@arco-design/web-vue';
 import type { TableQueryParams, CommonList } from '@/models/common';
-import type { MsTableProps, MsTableDataItem, MsTableColumn, MsTableErrorStatus } from './type';
+import { SelectAllEnum } from '@/enums/tableEnum';
+import type { MsTableProps, MsTableDataItem, MsTableColumn, MsTableErrorStatus, SetPaginationPrams } from './type';
 
 export interface Pagination {
   current: number;
@@ -24,39 +25,38 @@ export default function useTableProps<T>(
   // 编辑操作的保存回调函数
   saveCallBack?: (item: T) => Promise<any>
 ) {
-  // 行选择
-  const rowSelection = {
-    type: 'checkbox',
-    showCheckedAll: false,
-  };
-
   const defaultProps: MsTableProps<T> = {
-    tableKey: '',
+    tableKey: '', // 缓存pageSize 或 column 的 key
-    bordered: true,
+    bordered: true, // 是否显示边框
-    showPagination: true,
+    showPagination: true, // 是否显示分页
-    size: 'default',
+    size: 'default', // 表格大小
-    heightUsed: 294,
+    heightUsed: 294, // 表格所在的页面已经使用的高度
-    scroll: { x: 1400, y: appStore.innerHeight - 294 },
+    scroll: { x: 1400, y: appStore.innerHeight - 294 }, // 表格滚动配置
-    checkable: true,
+    loading: false, // 加载效果
-    loading: false,
+    data: [], // 表格数据
-    data: [],
+    /**
+     * 表格列配置
+     * 当showSetting为true时，此配置无效,通过TableStore.initColumnsk(tableKey: string, column: MsTableColumn)初始化。
+     * 当showSetting为false时，此配置生效
+     */
     columns: [] as MsTableColumn,
-    rowKey: 'id',
+    rowKey: 'id', // 表格行的key
-    selectedKeys: [],
+    /** 选择器相关 */
-    selectedAll: false,
+    rowSelection: null, // 禁用表格默认的选择器
-    enableDrag: false,
+    selectable: false, // 是否显示选择器
-    showSelectAll: true,
+    selectorType: 'checkbox', // 选择器类型
-    showSetting: false,
+    selectedKeys: new Set<string>(), // 选中的key
+    excludeKeys: new Set<string>(), // 排除的key
+    selectorStatus: SelectAllEnum.NONE, // 选择器状态
+    /** end */
+    enableDrag: false, // 是否可拖拽
+    showSetting: false, // 是否展示列选择器
     columnResizable: true,
-    // 禁用 arco-table 的分页
+    pagination: false, // 禁用 arco-table 的分页
-    pagination: false,
+    pageSimple: false, // 简易分页模式
-    // 简易分页模式
+    tableErrorStatus: false, // 表格的错误状态
-    pageSimple: false,
+    debug: false, // debug 模式
-    // 表格的错误状态
+    showFirstOperation: false, // 展示第一行的操作
-    tableErrorStatus: false,
-    debug: false,
-    // 展示第一行的操作
-    showFirstOperation: false,
     ...props,
   };
 
@@ -96,11 +96,6 @@ export default function useTableProps<T>(
     };
   }
 
-  // 是否可选中
-  if (propsRes.value.selectable) {
-    propsRes.value.rowSelection = rowSelection;
-  }
-
   // 是否可拖拽
   if (propsRes.value.enableDrag) {
     propsRes.value.draggable = { type: 'handle' };
@@ -126,13 +121,7 @@ export default function useTableProps<T>(
    * 分页设置
    * @param current //当前页数
    * @param total //总页数默认是0条，可选
-   * @param fetchData 获取列表数据,可选
    */
-  interface SetPaginationPrams {
-    current: number;
-    total?: number;
-  }
-
   const setPagination = ({ current, total }: SetPaginationPrams) => {
     if (propsRes.value.msPagination && typeof propsRes.value.msPagination === 'object') {
       propsRes.value.msPagination.current = current;
@@ -161,9 +150,19 @@ export default function useTableProps<T>(
     keyword.value = v;
   };
 
+  // 给表格设置选中项 - add rowKey to selectedKeys
+  const setTableSelected = (key: string) => {
+    const { selectedKeys } = propsRes.value;
+    if (!selectedKeys.has(key)) {
+      selectedKeys.add(key);
+    }
+    propsRes.value.selectedKeys = selectedKeys;
+  };
+
   // 加载分页列表数据
   const loadList = async () => {
     const { current, pageSize } = propsRes.value.msPagination as Pagination;
+    const { rowKey, selectorStatus, excludeKeys } = propsRes.value;
     setLoading(true);
     try {
       const data = await loadListFunc({
@@ -185,6 +184,12 @@ export default function useTableProps<T>(
         if (dataTransform) {
           item = dataTransform(item);
         }
+        if (selectorStatus === SelectAllEnum.ALL) {
+          if (!excludeKeys.has(item[rowKey])) {
+            setTableSelected(item[rowKey]);
+          }
+        }
+
         return item;
       });
       if (data.total === 0) {
@@ -201,7 +206,7 @@ export default function useTableProps<T>(
       // debug 模式下打印属性
       if (propsRes.value.debug && import.meta.env.DEV) {
         // eslint-disable-next-line no-console
-        console.log('Table propsRes: ', propsRes.value);
+        // console.log('Table propsRes: ', propsRes.value);
       }
     }
   };
@@ -214,6 +219,13 @@ export default function useTableProps<T>(
     }
   };
 
+  // 重置选择器
+  const resetSelector = () => {
+    propsRes.value.selectedKeys.clear();
+    propsRes.value.excludeKeys.clear();
+    propsRes.value.selectorStatus = SelectAllEnum.NONE;
+  };
+
   // 事件触发组
   const propsEvent = ref({
     // 排序触发
@@ -243,17 +255,6 @@ export default function useTableProps<T>(
       }
       loadList();
     },
-    // 选择触发
-    selectedChange: (arr: (string | number)[]) => {
-      if (arr.length === 0) {
-        propsRes.value.showPagination = true;
-        propsRes.value.msPagination = oldPagination.value;
-      } else {
-        oldPagination.value = propsRes.value.msPagination as Pagination;
-        propsRes.value.showPagination = false;
-      }
-      propsRes.value.selectedKeys = arr;
-    },
     change: (_data: MsTableDataItem<T>[]) => {
       if (propsRes.value.draggable && _data instanceof Array) {
         (propsRes.value.data as MsTableDataItem<T>[]) = _data;
@@ -269,6 +270,45 @@ export default function useTableProps<T>(
     resetSort: () => {
       sortItem.value = {};
     },
+    // 重置筛选
+    clearSelector: () => {
+      resetSelector();
+    },
+
+    // 表格SelectAll change
+    selectAllChange: (v: SelectAllEnum) => {
+      propsRes.value.selectorStatus = v;
+      const { data, rowKey, selectedKeys } = propsRes.value;
+      if (v === SelectAllEnum.NONE) {
+        // 清空选中项
+        resetSelector();
+      } else {
+        data.forEach((item) => {
+          if (item[rowKey] && !selectedKeys.has(item[rowKey])) {
+            selectedKeys.add(item[rowKey]);
+          }
+        });
+        propsRes.value.selectedKeys = selectedKeys;
+      }
+    },
+
+    // 表格行的选中/取消事件
+    rowSelectChange: (key: string) => {
+      const { selectedKeys, excludeKeys } = propsRes.value;
+      if (selectedKeys.has(key)) {
+        // 当前已选中，取消选中
+        selectedKeys.delete(key);
+        excludeKeys.add(key);
+      } else {
+        // 当前未选中，选中
+        selectedKeys.add(key);
+        if (excludeKeys.has(key)) {
+          excludeKeys.delete(key);
+        }
+      }
+      propsRes.value.selectedKeys = selectedKeys;
+      propsRes.value.excludeKeys = excludeKeys;
+    },
   });
 
   watchEffect(() => {