@spacego/fe-components 0.1.0 → 0.2.0

package/lib/types/fe-table/type/table.d.ts

@@ -0,0 +1,797 @@
+import { TableProps } from 'antd';
+import { Key } from 'antd/es/table/interface';
+import { DebouncedFunc } from 'lodash-es';
+import { default as React } from 'react';
+import { IFeFormItems } from '../../../form/fe-form/index.d';
+import { TableContext } from '../utils/table-utils';
+
+
+export interface FeTableProps {
+  [key: string]: any;
+  tableKey?: string;
+  columnSetting?: boolean;
+}
+
+export interface FeEditTableProps extends FeTableProps {
+  onTableValueChange?: (values: any) => void;
+  onInternalStateChange?: (params: { values: Record<string, any>; record: Record<string, any> }) => void;
+  formData?: any;
+  editTable?: boolean;
+}
+
+export interface FeFullTableProps extends FeTableProps, FeEditTableProps {
+  edit?: boolean;
+}
+
+interface FeTableTitlePropsType {
+  width: number;
+  onResize: (e: React.SyntheticEvent<Element>, data: ResizeCallbackData) => void;
+}
+
+// 基础分页响应接口
+interface IBasePageRsp<T> {
+  pageNo: number;
+  pageSize: number;
+  totalCount: number;
+  totalPage?: number;
+  records: T[];
+}
+
+// 子表格配置接口
+interface ISubTableConfig extends TableProps {
+  /**
+   * 子表格列配置
+   */
+  columns: ITableColumns[];
+  /**
+   * 默认展开所有行
+   */
+  defaultExpandAllRows?: boolean;
+  /**
+   * 通过点击行来展开子行
+   */
+  expandRowByClick?: boolean;
+  /**
+   * 是否显示序号列
+   */
+  showIndex?: boolean;
+  /**
+   * 子表格行键
+   */
+  rowKey?: string;
+  /**
+   * 子表格操作列配置
+   */
+  columnsHandleConfig?: any[];
+  /**
+   * 按钮权限列表
+   */
+  btnPermissionList?: string[];
+  /**
+   * 子表格初始数据
+   */
+  initDataSource?: any[];
+  /**
+   * 子表格展开行key
+   */
+  expandRowKey?: string;
+  /**
+   * 子表格数据获取函数
+   */
+  fetchModel?: (
+    record: DataType,
+    pageOption: ITablePageOption & Record<string, any>
+  ) => Promise<IBasePageRsp<SubDataType>>;
+  /**
+   * 分页配置
+   */
+  pageOption?: ITablePageOption;
+  /**
+   * 是否启用分页
+   */
+  pagination?: boolean;
+
+  expandableConfig?: TableProps['expandable'];
+
+  columnsHandleAttr?: {
+    fixed?: false | 'left' | 'right';
+    width?: number;
+  };
+}
+
+interface FeSubTableProps<MainData = any, SubData = any> {
+  /**
+   * 子表格列配置
+   */
+  columns: ITableColumns<SubData>[];
+  /**
+   * 父行数据
+   */
+  record: MainData;
+  /**
+   * 子表格配置
+   */
+  config: ISubTableConfig;
+}
+
+interface SubTableState<T> {
+  data: T[];
+  pageInfo: ITablePageOption;
+}
+
+// 请求结果类型
+interface RequestResult<T> {
+  data: T[];
+  pageInfo: ITablePageOption;
+}
+
+type SubData = any;
+
+export interface EditableCellProps extends ITableColumns {
+  /*
+   * 数据索引
+   */
+  dataIndex: string;
+  /*
+   * 标签
+   */
+  label: string;
+  /*
+   * 是否编辑
+   */
+  editing: boolean;
+  /*
+   * 记录
+   */
+  record: any;
+  /*
+   * 行key
+   */
+  rowKey: string;
+  /*
+   * 索引
+   */
+  index: number;
+  /*
+   * 子元素
+   */
+  children: React.ReactNode;
+  /*
+   * 表单引用
+   */
+  formRef: React.RefObject<any>;
+  /*
+   * 表格值变化
+   */
+  onTableValueChange: (values: any) => void;
+  /*
+   * 错误
+   */
+  errorKey: Array<string>;
+  /*
+   * 其他属性
+   */
+  [key: string]: any;
+}
+
+interface IFeTableFormItems extends IFeFormItems {
+  /**
+   * @name 与实体映射的key
+   */
+  dataIndex?: keyof DataType;
+  /**
+   * @name 标题
+   */
+  label?: string;
+}
+
+export interface IEditRenderParams {
+  /**
+   * @name 是否可编辑
+   */
+  editable: boolean;
+  /**
+   * @name 是否需要提示
+   */
+  formProps?: IFeTableFormItems | ((ctx: TableContext) => IFeTableFormItems);
+}
+
+export interface ITableColumns<T = any> {
+  /**
+   * T
+   *
+   * @name 与实体映射的key
+   */
+  dataIndex: keyof T | 'handle';
+  /**
+   * @name 确定这个列的唯一值,一般用于 dataIndex 重复的情况
+   */
+  key?: React.Key;
+  /**
+   * @name 标题
+   */
+  title: string | React.ReactNode;
+  /**
+   * @name 自定义标题渲染
+   */
+  titleRender?: React.ReactNode;
+  /**
+   * @name 是否开启标题hint
+   */
+  showHint?: boolean;
+  /**
+   * @name 标题hint内容
+   */
+  hintText?: string | React.ReactNode;
+  /**
+   * @name 是否开启ellipsis
+   */
+  ellipsis?: boolean | { showTitle: boolean };
+  /**
+   * Render 方法只管理的只读模式，编辑模式需要使用 renderFormItem
+   *
+   * @name 自定义只读模式的dom
+   */
+  render?: (text: any, record: any, index: number) => React.ReactNode;
+  /**
+   * @name 对齐方式 left | center | right
+   * @default center
+   */
+  align?: 'left' | 'center' | 'right';
+  /**
+   * @name 固定列
+   * @default false
+   */
+  fixed?: false | 'left' | 'right';
+  /**
+   * @name 列宽
+   */
+  width?: number;
+  /**
+   * @name 数据类型
+   * @default string
+   */
+  dataType?: 'string' | 'integer' | 'double' | 'dict';
+  /**
+   * @name 渲染类型
+   * @default default
+   * @options default:纯文本静态展示
+   *          tag:枚举tag展示，支持多个tag
+   */
+  renderType?: TRenderType;
+  /**
+   * 默认过滤器猜数
+   */
+  renderParams?: {
+    /**
+     * 是否开启tooltip
+     */
+    tooltip: boolean;
+    /**
+     * 是否开启省略
+     */
+    ellipsis: boolean;
+    /**
+     * 溢出省略时最多展示行数
+     * */
+    maxLines?: number;
+  };
+  /**
+   *  @name 默认渲染器参数
+   */
+  defaultRenderParams?: {
+    /**
+     * @name 过滤器
+     */
+    filter?: any;
+    /**
+     * @name 过滤器参数
+     */
+    dictfilterParams?: {
+      dictList: Array<{ dataIndex: string; label: string }>;
+    };
+  };
+  /**
+   * @name 枚举字典配置
+   */
+  tagRenderParams?: {
+    /**
+     * @name 过滤器
+     */
+    filter?: any;
+    /**
+     * @name 过滤器参数
+     */
+    dictfilterParams?: {
+      dictList: Array<{ dataIndex: string; label: string }>;
+    };
+    /**
+     * @name 分割符
+     * @default |
+     */
+    separator?: string;
+    /**
+     * @name 颜色类型枚举
+     */
+    themeEnums?: Record<string, 'processing' | 'success' | 'error' | 'default' | 'warning'>;
+  };
+  /**
+   * @name 编辑器配置
+   */
+  editRenderParams?: IEditRenderParams;
+  /**
+   * @name 千分位配置
+   */
+  thousandsParams?: {
+    /**
+     * @name 小数位
+     */
+    precision?: number;
+    /**
+     * @name 是否补0
+     * @default false
+     */
+    fillZero?: boolean;
+    /**
+     * @name 千分位分隔符
+     * @default ,
+     */
+    separator?: string;
+  };
+  /**
+   * @name 是否在列配置中隐藏
+   * @description 设置为true时，该列不会出现在列配置面板中
+   * @default false
+   */
+  hideInSetting?: boolean;
+}
+
+/**
+ * @name 渲染类型
+ * @default default
+ * @options default:纯文本静态展示
+ *          tag:枚举tag展示，支持多个tag
+ *
+ */
+export type TRenderType = 'default' | 'tag' | 'thousands';
+
+export interface ITablePageOption {
+  /**
+   * @name 当前页码
+   */
+  pageNo: number;
+  /**
+   * @name 每页条数
+   */
+  pageSize: number;
+  /**
+   * @name 总条数
+   */
+  totalCount?: number;
+}
+
+export interface ITableParams<DataType> {
+  /**
+   * @name 列表加载类型
+   * @default page
+   */
+  loadType?: 'static' | 'page';
+  /**
+   * @name 表格列配置
+   */
+  columns: ITableColumns<DataType>[];
+  /**
+   * @name 表格数据
+   */
+  initDataSource?: DataType[];
+  /**
+   * @name 表格最大宽度，超过此宽度会出现横向滚动条
+   */
+  scrollX?: string;
+  /**
+   * @name 表格最大高度，超过此高度会出现纵向滚动条
+   */
+  scrollY?: string;
+  /**
+   * @name 表格行唯一标识,默认id
+   */
+  rowKey?: string;
+  /**
+   * @name 是否展示分页
+   */
+  pageVisible?: boolean;
+  /**
+   * @name 表格搜索配置
+   */
+  searchOption?: Record<string, any>;
+  /**
+   * @name 分页配置
+   */
+  pageOption?: ITablePageOption;
+  /**
+   * @name 表格标题
+   */
+  headerTitle?: string | React.ReactNode;
+  /**
+   * @name 表格副标题
+   */
+  subTitle?: string;
+  /**
+   * @name 表格功能区按钮配置
+   */
+  toolBarConfig?: IToolBarBtnConfig[];
+  /**
+   * @name 表格操作列配置属性
+   */
+  columnsHandleAttr?: {
+    fixed?: false | 'left' | 'right';
+    width?: number;
+  };
+  /**
+   * @name 表格操作列配置
+   */
+  columnsHandleConfig?: IColumnsHandleConfig[];
+  /**
+   * @name 是否展示索引
+   * @default true
+   */
+  showIndex?: boolean;
+  /**
+   * @name 表格功能区
+   */
+  toolBarRender?: () => React.ReactNode[];
+  /**
+   * @name 获取列表数据
+   */
+  fetchModel?: (pageOption: ITablePageOption & Record<string, any>) => Promise<IBasePageRsp<DataType>>;
+  /**
+   * @name 唯一标识，更改后刷新columns
+   */
+  rawKeyRef?: React.RefObject<string>;
+  /**
+   * @name 按钮权限
+   */
+  btnPermissionList?: string[];
+  /**
+   * @name 行展开配置
+   */
+  rowExpandable?: (record: DataType) => boolean;
+  /**
+   * @name 子表格配置
+   */
+  subTableConfig?: ISubTableConfig;
+  /**
+   * 扩展属性
+   */
+  expandable?: ExpandableConfig;
+  /**
+   * @name 批量操作工具栏渲染函数
+   * @description 自定义批量操作工具栏左侧信息区域，false 时不显示
+   */
+  tableAlertRender?:
+    | ((params: { selectedRowKeys: Key[]; selectedRows: DataType[]; onCleanSelected: () => void }) => React.ReactNode)
+    | false;
+  /**
+   * @name 表格行选择配置
+   * @description 表格行是否可选择，配置项
+   */
+  rowSelection?: TableProps<DataType>['rowSelection'];
+  /**
+   * @name 是否启用列配置功能
+   * @description 是否显示列设置按钮，支持拖拽排序和显示/隐藏列
+   * @default true
+   */
+  columnSetting?: boolean;
+  /**
+   * @name 默认隐藏的列
+   * @description 默认隐藏的列的dataIndex数组
+   */
+}
+
+export interface IColumnsHandleConfig {
+  /**
+   * @name 按钮文字
+   */
+  label: string;
+  /**
+   * @name 按钮点击事件
+   * @param record 表格行数据
+   * @param index 表格行索引
+   * @returns
+   */
+  onClick: (record: any, index: number) => Promise<void>;
+  /**
+   * @name 是否需要二次确认
+   */
+  needConfirm?: boolean;
+  /**
+   * @name 确认文案
+   * @default 确定{$label}吗？
+   */
+  confirmText?: string | ((record?: any) => string);
+  /**
+   * @name 是否隐藏
+   * @param record 表格行数据
+   * @param index 表格行索引
+   * @returns
+   */
+  hidden?: (record: any, index: number) => boolean;
+  /**
+   * @name 按钮权限
+   */
+  btnPermission?: string;
+  /**
+   * @name 是否禁用
+   */
+  disabled?: (record: any, index: number) => boolean;
+  /**
+   * @name 按钮禁用文案
+   */
+  disabledText?: string;
+}
+
+export interface IToolBarBtnConfig {
+  /**
+   * @name 按钮类型
+   * @default primary
+   */
+  type?: 'primary' | 'default';
+  /**
+   * @name 按钮文案
+   */
+  label: string;
+  /**
+   * @name 按钮权限
+   */
+  btnPermission?: string;
+  /**
+   * @name 是否禁用
+   */
+  disabled?: () => boolean;
+  /**
+   * @name 按钮禁用文案
+   */
+  disabledText?: string;
+  /**
+   * @name 按钮点击事件
+   */
+  onClick: () => void;
+  /**
+   * @name 是否需要二次确认
+   */
+  needConfirm?: boolean;
+  /**
+   * @name 确认文案
+   * @default 确定{$label}吗？
+   */
+  confirmText?: string;
+}
+
+export interface IUseTableRsp<DataType = Record<string, any>> {
+  tableProps: {
+    actionRef: React.MutableRefObject<any>;
+    columns: any[];
+    dataSource: any[];
+    scroll: { x: string; y: string };
+    rowKey: string;
+    headerTitle: string;
+    toolBarRender: any;
+    pagination: any;
+    options: any;
+    search: any;
+    cardProps: any;
+    tableLayout: any;
+    subTableConfig: any;
+    expandable: any;
+    tableAlertRender?:
+      | ((params: { selectedRowKeys: Key[]; selectedRows: DataType[]; onCleanSelected: () => void }) => React.ReactNode)
+      | false;
+    rowSelection?: any;
+    columnSetting?: boolean;
+  };
+  fetchPageOption: () => any;
+  search: (searchOption?: Record<string, any>) => void;
+  refresh: () => void;
+  shouldRequestPreviousPage: (record: any[], pageNo: number) => boolean;
+}
+
+export const useTable = <DataType = Record<string, any>>(params: ITableParams<DataType>) => IUseTableRsp<DataType>;
+
+export interface UseTableSelectionProps<T = any> {
+  /**
+   * 表格行选择配置
+   */
+  rowSelection?: TableProps<T>['rowSelection'];
+  /**
+   * 表格数据源，用于根据selectedRowKeys获取selectedRows
+   */
+  dataSource?: T[];
+  /**
+   * 行唯一标识键名，默认为 'id'
+   */
+  rowKey?: string | ((record: T) => string);
+}
+
+export interface UseTableSelectionReturn<T = any> {
+  /**
+   * 当前选中的行keys
+   */
+  selectedRowKeys: Key[];
+  /**
+   * 当前选中的行数据
+   */
+  selectedRows: T[];
+  /**
+   * 处理后的rowSelection配置，传递给Table组件
+   */
+  rowSelection: TableProps<T>['rowSelection'] | undefined;
+  /**
+   * 清空选择
+   */
+  onCleanSelected: () => void;
+  /**
+   * 是否为受控模式
+   */
+  isControlled: boolean;
+}
+
+export interface IEditTableHookProps<DataType = Record<string, any>> {
+  /**
+   * @name 表格属性
+   */
+  tableProps: IUseTableRsp<DataType>['tableProps'];
+  /**
+   * @name 表格变化事件
+   */
+  onTableChange?: (params: {
+    key: string;
+    value: any;
+    record: DataType;
+    form: {
+      setFieldValue: (key: string, value: any) => void;
+      setFieldsValue: (values: Record<string, any>) => void;
+      validate: (key?: string) => Promise<any>;
+      onReload: () => void;
+    };
+  }) => void;
+  /**
+   * @name 是否开启编辑
+   */
+  editTable?: boolean;
+}
+
+export type IUseEditTableRsp<DataType = Record<string, any>> = {
+  /**
+   * @name 表单引用
+   */
+  formRef: React.MutableRefObject<{
+    validate: (key?: string) => Promise<any>;
+    setFieldsValue: (values: Record<string, any>) => void;
+    setFieldValue: (key: string, value: any) => void;
+    onReload: () => void;
+  }>;
+  /**
+   * @name 表格变化事件
+   */
+  onTableValueChange: DebouncedFunc<(params: { values: Record<string, any>; record: DataType }) => void>;
+  /**
+   * @name 更新内部状态（不触发外部回调）
+   */
+  onInternalStateChange: (params: { values: Record<string, any>; record: Record<string, any> }) => void;
+  /**
+   * @name 表单数据
+   */
+  formData: Record<string, any>;
+  /**
+   * @name 表格数据
+   */
+  tableData: Record<string, any>[];
+  /**
+   * @name 读取最新表格数据
+   */
+  getTableData: () => Record<string, any>[];
+  /**
+   * @name 错误key
+   */
+  errorKey: string[];
+  /**
+   * @name 是否全部使用编辑功能
+   */
+  editTable: boolean;
+  /**
+   * @name 是否使用编辑组件
+   */
+  edit: boolean;
+  /**
+   * @name 表格变化事件
+   */
+  onEditingChange: (record: Record<string, any>) => void;
+  /**
+   * @name 取消变化事件
+   */
+  onCancelChange: () => void;
+  /**
+   * @name 验证事件
+   */
+  onValidate: () => Promise<any>;
+  /**
+   * @name 是否开启编辑单行功能
+   */
+  isEditing: (record: Record<string, any>, rowKey: string) => boolean;
+  /**
+   * @name 重置表单数据
+   */
+  onReload: () => void;
+};
+
+// 分页Hook所需类型定义
+export type Data = Record<string, any>;
+
+export interface Params {
+  [key: string]: any;
+}
+
+export interface PaginationOptions<TData extends Data, TParams extends Params> {
+  defaultPageSize?: number;
+  defaultCurrent?: number;
+  onSuccess?: (data: IBasePageRsp<TData>, params: [TParams & Partial<ITablePageOption>]) => void;
+  onError?: (e: Error) => void;
+  refreshDeps?: any[];
+  manual?: boolean;
+  ready?: boolean;
+}
+
+export type Service<TData extends Data, TParams extends Params> = (
+  params: TParams & Partial<ITablePageOption>
+) => Promise<IBasePageRsp<TData>>;
+
+export interface PaginationResult<TData extends Data, TParams extends Params> {
+  data: TData[];
+  pageInfo: ITablePageOption;
+  pagination: {
+    pageNo: number;
+    pageSize: number;
+    totalCount: number;
+    totalPage: number;
+    onChange: (page: number, pageSize: number) => void;
+    changePageNo: (page: number) => void;
+    changePageSize: (pageSize: number) => void;
+  };
+  loading: boolean;
+  run: (params?: TParams & Partial<ITablePageOption>) => void;
+  params: (TParams & Partial<ITablePageOption>)[];
+  refresh: () => void;
+  mutate: (data: IBasePageRsp<TData> | ((oldData: IBasePageRsp<TData>) => IBasePageRsp<TData>)) => void;
+  error?: Error;
+}
+
+/**
+ * 表格校验上下文类型
+ *
+ * 使用方式：
+ * validator: (rule, value, callback, tableContext) => {
+ *   const { currentRecord, allTableData, form } = tableContext;
+ *   // 校验逻辑...
+ * }
+ *
+ * 注意：保持antd原有的callback参数顺序，tableContext作为第4个参数
+ */
+export interface ITableValidatorContext {
+  /**
+   * 当前行的记录数据（已合并最新的表单输入值）
+   * 包含原始record数据和用户当前输入的最新值
+   */
+  currentRecord: any;
+  /**
+   * 所有行的数据，按行ID分组
+   * 每行数据都是最新的表单值
+   * 开发者可以从中过滤出需要的其他行数据
+   */
+  allTableData: Record<string, any>;
+  /**
+   * 表单实例，可用于获取表单数据或执行表单操作
+   */
+  form: any;
+}
+
+declare const FeTable: React.ForwardRefExoticComponent<FeTableProps>;