feat(projects): page manage_role

src/hooks/common/table.ts

@@ -0,0 +1,223 @@
+import { computed, effectScope, onScopeDispose, reactive, ref, watch } from 'vue';
+import type { Ref } from 'vue';
+import type { DataTableBaseColumn, DataTableExpandColumn, DataTableSelectionColumn, PaginationProps } from 'naive-ui';
+import type { TableColumnGroup } from 'naive-ui/es/data-table/src/interface';
+import { useBoolean, useLoading } from '@sa/hooks';
+import { useAppStore } from '@/store/modules/app';
+
+type BaseData = Record<string, unknown>;
+
+type ApiFn = (args: any) => Promise<unknown>;
+
+export type TableColumn<T extends BaseData = BaseData, CustomColumnKey = never> =
+  | (Omit<TableColumnGroup<T>, 'key'> & { key: keyof T | CustomColumnKey })
+  | (Omit<DataTableBaseColumn<T>, 'key'> & { key: keyof T | CustomColumnKey })
+  | DataTableSelectionColumn<T>
+  | DataTableExpandColumn<T>;
+
+export type TransformedData<TableData extends BaseData = BaseData> = {
+  data: TableData[];
+  pageNum: number;
+  pageSize: number;
+  total: number;
+};
+
+/** transform api response to table data */
+type Transformer<TableData extends BaseData = BaseData, Response = NonNullable<unknown>> = (
+  response: Response
+) => TransformedData<TableData>;
+
+/** table config */
+export type TableConfig<TableData extends BaseData = BaseData, Fn extends ApiFn = ApiFn, CustomColumnKey = never> = {
+  /** api function to get table data */
+  apiFn: Fn;
+  /** api params */
+  apiParams: Parameters<Fn>[0];
+  /** transform api response to table data */
+  transformer: Transformer<TableData, Awaited<ReturnType<Fn>>>;
+  /** pagination */
+  pagination?: PaginationProps;
+  /**
+   * callback when pagination changed
+   *
+   * @param pagination
+   */
+  onPaginationChanged?: (pagination: PaginationProps) => void | Promise<void>;
+  /**
+   * whether to get data immediately
+   *
+   * @default true
+   */
+  immediate?: boolean;
+  /** columns factory */
+  columns: () => TableColumn<TableData, CustomColumnKey>[];
+};
+
+/** filter columns */
+export type FilteredColumn = {
+  key: string;
+  title: string;
+  checked: boolean;
+};
+
+export function useTable<TableData extends BaseData, Fn extends ApiFn, CustomColumnKey = never>(
+  config: TableConfig<TableData, Fn, CustomColumnKey>
+) {
+  const scope = effectScope();
+  const appStore = useAppStore();
+
+  const { loading, startLoading, endLoading } = useLoading();
+  const { bool: empty, setBool: setEmpty } = useBoolean();
+
+  const { apiFn, apiParams, transformer, onPaginationChanged, immediate = true } = config;
+
+  const searchParams: NonNullable<Parameters<Fn>[0]> = reactive(apiParams || {});
+
+  const { columns, filteredColumns, reloadColumns } = useTableColumn(config.columns);
+
+  const data: Ref<TableData[]> = ref([]);
+
+  const pagination = reactive({
+    page: 1,
+    pageSize: 10,
+    showSizePicker: true,
+    pageSizes: [10, 15, 20, 25, 30],
+    onChange: async (page: number) => {
+      pagination.page = page;
+
+      await onPaginationChanged?.(pagination);
+    },
+    onUpdatePageSize: async (pageSize: number) => {
+      pagination.pageSize = pageSize;
+      pagination.page = 1;
+
+      await onPaginationChanged?.(pagination);
+    },
+    ...config.pagination
+  }) as PaginationProps;
+
+  function updatePagination(update: Partial<PaginationProps>) {
+    Object.assign(pagination, update);
+  }
+
+  async function getData() {
+    startLoading();
+
+    const response = await apiFn(searchParams);
+
+    const { data: tableData, pageNum, pageSize, total } = transformer(response as Awaited<ReturnType<Fn>>);
+
+    data.value = tableData;
+
+    setEmpty(tableData.length === 0);
+    updatePagination({ page: pageNum, pageSize, itemCount: total });
+    endLoading();
+  }
+
+  /**
+   * update search params
+   *
+   * @param params
+   */
+  function updateSearchParams(params: Partial<Parameters<Fn>[0]>) {
+    Object.assign(searchParams, params);
+  }
+
+  /** reset search params */
+  function resetSearchParams() {
+    Object.keys(searchParams).forEach(key => {
+      searchParams[key as keyof typeof searchParams] = undefined;
+    });
+  }
+
+  if (immediate) {
+    getData();
+  }
+
+  scope.run(() => {
+    watch(
+      () => appStore.locale,
+      () => {
+        reloadColumns();
+      }
+    );
+  });
+
+  onScopeDispose(() => {
+    scope.stop();
+  });
+
+  return {
+    loading,
+    empty,
+    data,
+    columns,
+    filteredColumns,
+    reloadColumns,
+    pagination,
+    updatePagination,
+    getData,
+    searchParams,
+    resetSearchParams,
+    updateSearchParams
+  };
+}
+
+function useTableColumn<TableData extends BaseData, CustomColumnKey = never>(
+  factory: () => TableColumn<TableData, CustomColumnKey>[]
+) {
+  const SELECTION_KEY = '__selection__';
+
+  const allColumns = ref(factory()) as Ref<TableColumn<TableData, CustomColumnKey>[]>;
+
+  const filteredColumns: Ref<FilteredColumn[]> = ref(getFilteredColumns(factory()));
+
+  const columns = computed(() => getColumns());
+
+  function reloadColumns() {
+    allColumns.value = factory();
+  }
+
+  function getFilteredColumns(aColumns: TableColumn<TableData, CustomColumnKey>[]) {
+    const cols: FilteredColumn[] = [];
+
+    aColumns.forEach(column => {
+      if (column.type === undefined) {
+        cols.push({
+          key: column.key as string,
+          title: column.title as string,
+          checked: true
+        });
+      }
+
+      if (column.type === 'selection') {
+        cols.push({
+          key: SELECTION_KEY,
+          title: '勾选',
+          checked: true
+        });
+      }
+    });
+
+    return cols;
+  }
+
+  function getColumns() {
+    const cols = filteredColumns.value
+      .filter(column => column.checked)
+      .map(column => {
+        if (column.key === SELECTION_KEY) {
+          return allColumns.value.find(col => col.type === 'selection');
+        }
+        return allColumns.value.find(col => (col as DataTableBaseColumn).key === column.key);
+      });
+
+    return cols as TableColumn<TableData, CustomColumnKey>[];
+  }
+
+  return {
+    columns,
+    reloadColumns,
+    filteredColumns
+  };
+}