From 68955d3a0b720f8d074687a4e19981738d0cab72 Mon Sep 17 00:00:00 2001
From: K <1175047471@qq.com>
Date: Wed, 10 Jan 2024 10:32:10 +0800
Subject: [PATCH] feat: add generic support for Table

---
 src/components/Table/src/BasicTable.vue       |  18 +-
 .../Table/src/hooks/useDataSource.ts          |  19 +-
 src/components/Table/src/props.ts             | 277 +++++++++---------
 src/components/Table/src/types/table.ts       |  10 +-
 4 files changed, 171 insertions(+), 153 deletions(-)

diff --git a/src/components/Table/src/BasicTable.vue b/src/components/Table/src/BasicTable.vue
index 6b9f248..3da30f3 100644
--- a/src/components/Table/src/BasicTable.vue
+++ b/src/components/Table/src/BasicTable.vue
@@ -1,9 +1,9 @@
 <!-- eslint-disable no-useless-call -->
-<script lang="ts" setup>
+<script lang="ts" setup generic="T extends Recordable = Recordable">
 import { computed, inject, ref, toRaw, unref, useAttrs, useSlots, watchEffect } from 'vue'
 import { Table } from 'ant-design-vue'
 import { omit } from 'lodash-es'
-import type { BasicTableProps, ColumnChangeParam, InnerHandlers, SizeType, TableActionType } from './types/table'
+import type { BasicTableProps, ColumnChangeParam, InnerHandlers, SizeType, SlotBodyCellProps, TableActionType } from './types/table'
 import HeaderCell from './components/HeaderCell.vue'
 import { usePagination } from './hooks/usePagination'
 
@@ -20,7 +20,7 @@ import { useTableExpand } from './hooks/useTableExpand'
 import { createTableContext } from './hooks/useTableContext'
 import { useTableFooter } from './hooks/useTableFooter'
 import { useTableForm } from './hooks/useTableForm'
-import { basicProps } from './props'
+import { defineTableProps } from './props'
 import { useDesign } from '@/hooks/web/useDesign'
 
 import { PageWrapperFixedHeightKey } from '@/enums/pageEnum'
@@ -30,7 +30,7 @@ import { warn } from '@/utils/log'
 
 defineOptions({ name: 'BasicTable' })
 
-const props = defineProps(basicProps)
+const props = defineProps(defineTableProps<T>())
 
 const emit = defineEmits([
   'fetch-success',
@@ -109,7 +109,7 @@ const {
   reload,
   getAutoCreateKey,
   updateTableData,
-} = useDataSource(
+} = useDataSource<T>(
   getProps,
   {
     tableData,
@@ -239,7 +239,7 @@ function setProps(props: Partial<BasicTableProps>) {
   innerPropsRef.value = { ...unref(innerPropsRef), ...props }
 }
 
-const tableAction: TableActionType = {
+const tableAction: TableActionType<T> = {
   reload: async params => void reload(params),
   getSelectRows,
   setSelectedRows,
@@ -312,7 +312,8 @@ emit('register', tableAction, formActions)
       @resize-column="setColumnWidth"
     >
       <template v-for="item in Object.keys($slots)" #[item]="data" :key="item">
-        <slot :name="item" v-bind="data || {}" />
+        <!-- eslint-disable-next-line vue/no-extra-parens -->
+        <slot :name="item" v-bind="((data || {}) as SlotBodyCellProps<T>)" />
       </template>
       <template #headerCell="{ column }">
         <slot name="headerCell" v-bind="{ column }">
@@ -321,7 +322,8 @@ emit('register', tableAction, formActions)
       </template>
       <!-- 增加对antdv3.x兼容 -->
       <template #bodyCell="data">
-        <slot name="bodyCell" v-bind="data || {}" />
+        <!-- eslint-disable-next-line vue/no-extra-parens -->
+        <slot name="bodyCell" v-bind="((data || {}) as SlotBodyCellProps<T>)" />
       </template>
       <!--      <template #[`header-${column.dataIndex}`] v-for="(column, index) in columns" :key="index"> -->
       <!--        <HeaderCell :column="column" /> -->
diff --git a/src/components/Table/src/hooks/useDataSource.ts b/src/components/Table/src/hooks/useDataSource.ts
index 2acb54d..d75173d 100644
--- a/src/components/Table/src/hooks/useDataSource.ts
+++ b/src/components/Table/src/hooks/useDataSource.ts
@@ -5,6 +5,7 @@ import { cloneDeep, get, merge } from 'lodash-es'
 import type { PaginationProps } from '../types/pagination'
 import type { BasicTableProps, FetchParams, SorterResult } from '../types/table'
 import { FETCH_SETTING, PAGE_SIZE, ROW_KEY } from '../const'
+import type { EditRecordRow } from '../components/editable'
 import { isBoolean, isFunction, isObject } from '@/utils/is'
 import { buildUUID } from '@/utils/uuid'
 
@@ -21,7 +22,7 @@ interface SearchState {
   sortInfo: Recordable
   filterInfo: Record<string, string[]>
 }
-export function useDataSource(
+export function useDataSource<T extends Recordable = Recordable>(
   propsRef: ComputedRef<BasicTableProps>,
   {
     getPaginationInfo,
@@ -128,18 +129,18 @@ export function useDataSource(
     return unref(dataSourceRef)
   })
 
-  async function updateTableData(index: number, key: string, value: any) {
+  async function updateTableData<K extends keyof T>(index: number, key: K, value: T[K]): Promise<EditRecordRow<T>> {
     const record = dataSourceRef.value[index]
     if (record)
-      dataSourceRef.value[index][key] = value
+      (dataSourceRef as any).value[index][key] = value
 
-    return dataSourceRef.value[index]
+    return dataSourceRef.value[index] as any
   }
 
   function updateTableDataRecord(
     rowKey: string | number,
-    record: Recordable,
-  ): Recordable | undefined {
+    record: T,
+  ): EditRecordRow<T> | undefined {
     const row = findTableDataRecord(rowKey)
 
     if (row) {
@@ -200,14 +201,14 @@ export function useDataSource(
   }
 
   function insertTableDataRecord(
-    record: Recordable | Recordable[],
+    record: T | T[],
     index?: number,
-  ): Recordable[] | undefined {
+  ): EditRecordRow<T>[] | undefined {
     // if (!dataSourceRef.value || dataSourceRef.value.length == 0) return;
     index = index ?? dataSourceRef.value?.length
     const _record = isObject(record) ? [record as Recordable] : (record as Recordable[])
     unref(dataSourceRef).splice(index, 0, ..._record)
-    return unref(dataSourceRef)
+    return unref(dataSourceRef) as any
   }
 
   function findTableDataRecord(rowKey: string | number) {
diff --git a/src/components/Table/src/props.ts b/src/components/Table/src/props.ts
index 5d25fb3..d214c94 100644
--- a/src/components/Table/src/props.ts
+++ b/src/components/Table/src/props.ts
@@ -10,142 +10,151 @@ import type {
   TableSetting,
 } from './types/table'
 import { DEFAULT_FILTER_FN, DEFAULT_SIZE, DEFAULT_SORT_FN, FETCH_SETTING } from './const'
+import type { EditRecordRow } from './components/editable'
 import type { FormProps } from '@/components/Form'
 
 import { propTypes } from '@/utils/propTypes'
 
-export const basicProps = {
-  clickToRowSelect: { type: Boolean, default: true },
-  isTreeTable: Boolean,
-  tableSetting: propTypes.shape<TableSetting>({}),
-  inset: Boolean,
-  sortFn: {
-    type: Function as PropType<(sortInfo: SorterResult) => any>,
-    default: DEFAULT_SORT_FN,
-  },
-  filterFn: {
-    type: Function as PropType<(data: Partial<Recordable<string[]>>) => any>,
-    default: DEFAULT_FILTER_FN,
-  },
-  showTableSetting: Boolean,
-  autoCreateKey: { type: Boolean, default: true },
-  striped: { type: Boolean, default: true },
-  showSummary: Boolean,
-  summaryFunc: {
-    type: [Function, Array] as PropType<(...arg: any[]) => any[]>,
-    default: null,
-  },
-  summaryData: {
-    type: Array as PropType<Recordable[]>,
-    default: null,
-  },
-  indentSize: propTypes.number.def(24),
-  canColDrag: { type: Boolean, default: true },
-  api: {
-    type: Function as PropType<(...arg: any[]) => Promise<any>>,
-    default: null,
-  },
-  beforeFetch: {
-    type: Function as PropType<Fn>,
-    default: null,
-  },
-  afterFetch: {
-    type: Function as PropType<Fn>,
-    default: null,
-  },
-  handleSearchInfoFn: {
-    type: Function as PropType<Fn>,
-    default: null,
-  },
-  fetchSetting: {
-    type: Object as PropType<FetchSetting>,
-    default: () => {
-      return FETCH_SETTING
-    },
-  },
-  // 立即请求接口
-  immediate: { type: Boolean, default: true },
-  emptyDataIsShowTable: { type: Boolean, default: true },
-  // 额外的请求参数
-  searchInfo: {
-    type: Object as PropType<Recordable>,
-    default: null,
-  },
-  // 默认的排序参数
-  defSort: {
-    type: Object as PropType<Recordable>,
-    default: null,
-  },
-  // 使用搜索表单
-  useSearchForm: propTypes.bool,
-  // 表单配置
-  formConfig: {
-    type: Object as PropType<Partial<FormProps>>,
-    default: null,
-  },
-  columns: {
-    type: Array as PropType<BasicColumn[]>,
-    default: () => [],
-  },
-  showIndexColumn: { type: Boolean, default: true },
-  indexColumnProps: {
-    type: Object as PropType<BasicColumn>,
-    default: null,
-  },
-  actionColumn: {
-    type: Object as PropType<BasicColumn>,
-    default: null,
-  },
-  ellipsis: { type: Boolean, default: true },
-  isCanResizeParent: { type: Boolean, default: false },
-  canResize: { type: Boolean, default: true },
-  clearSelectOnPageChange: propTypes.bool,
-  resizeHeightOffset: propTypes.number.def(0),
-  rowSelection: {
-    type: Object as PropType<TableRowSelection | null>,
-    default: null,
-  },
-  title: {
-    type: [String, Function] as PropType<string | ((data: Recordable) => string)>,
-    default: null,
-  },
-  titleHelpMessage: {
-    type: [String, Array] as PropType<string | string[]>,
-  },
-  maxHeight: propTypes.number,
-  dataSource: {
-    type: Array as PropType<Recordable[]>,
-    default: null,
-  },
-  rowKey: {
-    type: [String, Function] as PropType<string | ((record: Recordable) => string)>,
-    default: '',
-  },
-  bordered: propTypes.bool,
-  pagination: {
-    type: [Object, Boolean] as PropType<PaginationProps | boolean>,
-    default: null,
-  },
-  loading: propTypes.bool,
-  rowClassName: {
-    type: Function as PropType<(record: TableCustomRecord<any>, index: number) => string>,
-  },
-  scroll: {
-    type: Object as PropType<{ x: number | string | true, y: number | string }>,
-    default: null,
-  },
-  beforeEditSubmit: {
-    type: Function as PropType<
-      (data: {
-        record: Recordable
-        index: number
-        key: string | number
-        value: any
-      }) => Promise<any>
-    >,
-  },
-  size: {
-    type: String as PropType<SizeType>,
-    default: DEFAULT_SIZE,
-  },
+export function defineTableProps<T>() {
+  return {
+    clickToRowSelect: { type: Boolean, default: true },
+    isTreeTable: Boolean,
+    tableSetting: propTypes.shape<TableSetting>({}),
+    inset: Boolean,
+    sortFn: {
+      type: Function as PropType<(sortInfo: SorterResult) => any>,
+      default: DEFAULT_SORT_FN,
+    },
+    filterFn: {
+      type: Function as PropType<(data: Partial<Recordable<string[]>>) => any>,
+      default: DEFAULT_FILTER_FN,
+    },
+    showTableSetting: Boolean,
+    autoCreateKey: { type: Boolean, default: true },
+    striped: { type: Boolean, default: true },
+    showSummary: Boolean,
+    summaryFunc: {
+      type: [Function, Array] as PropType<(...arg: any[]) => any[]>,
+      default: null,
+    },
+    summaryData: {
+      type: Array as PropType<Recordable[]>,
+      default: null,
+    },
+    indentSize: propTypes.number.def(24),
+    canColDrag: { type: Boolean, default: true },
+    api: {
+      type: Function as PropType<
+        (...arg: any[]) => Promise<
+          | T[]
+          | { list: T[], pageNo?: number, pageSize?: number, total?: number }
+        >
+      >,
+      default: null,
+    },
+    beforeFetch: {
+      type: Function as PropType<Fn>,
+      default: null,
+    },
+    afterFetch: {
+      type: Function as PropType<Fn>,
+      default: null,
+    },
+    handleSearchInfoFn: {
+      type: Function as PropType<Fn>,
+      default: null,
+    },
+    fetchSetting: {
+      type: Object as PropType<FetchSetting>,
+      default: () => {
+        return FETCH_SETTING
+      },
+    },
+    // 立即请求接口
+    immediate: { type: Boolean, default: true },
+    emptyDataIsShowTable: { type: Boolean, default: true },
+    // 额外的请求参数
+    searchInfo: {
+      type: Object as PropType<Recordable>,
+      default: null,
+    },
+    // 默认的排序参数
+    defSort: {
+      type: Object as PropType<Recordable>,
+      default: null,
+    },
+    // 使用搜索表单
+    useSearchForm: propTypes.bool,
+    // 表单配置
+    formConfig: {
+      type: Object as PropType<Partial<FormProps>>,
+      default: null,
+    },
+    columns: {
+      type: Array as PropType<BasicColumn[]>,
+      default: () => [],
+    },
+    showIndexColumn: { type: Boolean, default: true },
+    indexColumnProps: {
+      type: Object as PropType<BasicColumn>,
+      default: null,
+    },
+    actionColumn: {
+      type: Object as PropType<BasicColumn>,
+      default: null,
+    },
+    ellipsis: { type: Boolean, default: true },
+    isCanResizeParent: { type: Boolean, default: false },
+    canResize: { type: Boolean, default: true },
+    clearSelectOnPageChange: propTypes.bool,
+    resizeHeightOffset: propTypes.number.def(0),
+    rowSelection: {
+      type: Object as PropType<TableRowSelection<EditRecordRow<T>> | null>,
+      default: null,
+    },
+    title: {
+      type: [String, Function] as PropType<string | ((data: Recordable) => string)>,
+      default: null,
+    },
+    titleHelpMessage: {
+      type: [String, Array] as PropType<string | string[]>,
+    },
+    maxHeight: propTypes.number,
+    dataSource: {
+      type: Array as PropType<T[]>,
+      default: null,
+    },
+    rowKey: {
+      // eslint-disable-next-line ts/ban-types
+      type: [String, Function] as PropType<keyof T | ((record: T) => keyof T) | (string & {})>,
+      default: '',
+    },
+    bordered: propTypes.bool,
+    pagination: {
+      type: [Object, Boolean] as PropType<PaginationProps | boolean>,
+      default: null,
+    },
+    loading: propTypes.bool,
+    rowClassName: {
+      type: Function as PropType<(record: TableCustomRecord<any>, index: number) => string>,
+    },
+    scroll: {
+      type: Object as PropType<{ x: number | string | true, y: number | string }>,
+      default: null,
+    },
+    beforeEditSubmit: {
+      type: Function as PropType<
+        (data: {
+          record: T
+          index: number
+          key: string | number
+          value: any
+        }) => Promise<any>
+      >,
+    },
+    size: {
+      type: String as PropType<SizeType>,
+      default: DEFAULT_SIZE,
+    },
+  }
 }
diff --git a/src/components/Table/src/types/table.ts b/src/components/Table/src/types/table.ts
index 3d91b9d..7ec292c 100644
--- a/src/components/Table/src/types/table.ts
+++ b/src/components/Table/src/types/table.ts
@@ -1,6 +1,7 @@
 import type { VNodeChild } from 'vue'
 import type { TableRowSelection as ITableRowSelection, Key } from 'ant-design-vue/lib/table/interface'
 import type { ColumnProps } from 'ant-design-vue/lib/table'
+import type { Table } from 'ant-design-vue'
 import type { EditRecordRow } from '../components/editable'
 import type { PaginationProps } from './pagination'
 
@@ -210,7 +211,8 @@ export interface BasicTableProps<T = Recordable<any>> {
   // 在分页改变的时候清空选项
   clearSelectOnPageChange?: boolean
   //
-  rowKey?: keyof T | ((record: T) => keyof T)
+  // eslint-disable-next-line ts/ban-types
+  rowKey?: keyof T | ((record: T) => keyof T) | (string & {})
   // 数据
   dataSource?: T[]
   // 标题右侧提示
@@ -382,7 +384,7 @@ export interface BasicTableProps<T = Recordable<any>> {
    * The cell will not submit data while callback return false
    */
   beforeEditSubmit?: (data: {
-    record: Recordable
+    record: T
     index: number
     key: string | number
     value: any
@@ -500,3 +502,7 @@ export interface ColumnChangeParam {
 export interface InnerHandlers {
   onColumnsChange: (data: ColumnChangeParam[]) => void
 }
+
+export type SlotBodyCellProps<T> =
+  & Omit<Parameters<Required<InstanceType<typeof Table>['$slots']>['bodyCell']>[0], 'record'>
+  & { record: EditRecordRow<T> }