@zat-design/sisyphus-react 3.11.14 → 3.12.0

package/lib/ProEditTable/propsType.d.ts

@@ -6,276 +6,413 @@ import type { TooltipProps } from 'antd/es/tooltip';
 import type { NamePath } from 'antd/es/form/interface';
 import type { ColumnType, TableProps } from 'antd/es/table';
 import type { FormInstance, FormItemProps } from 'antd/es/form';
-import type { FunctionArgs, ProRule } from '../ProForm/propsType';
-import { ProFormValueType, ColumnPropsMap } from '../ProForm/components/render/propsType';
-import { DiffOriginalParams } from '../ProForm/utils/diffOriginal';
+import type { ProFormValueType, FunctionArgs, ProRule } from '../ProForm/components/render/propsType';
+import type { DiffOriginalParams } from '../ProForm/utils/diffOriginal';
+/**
+ * 操作类型定义
+ */
 export type ActionType = 'edit' | 'delete' | 'save' | 'cancel' | 'add' | 'mulDelete' | 'custom';
-export type ShowFunction<T> = (record?: T, options?: {
+/**
+ * 操作按钮展示控制函数类型
+ * @template T 记录类型
+ */
+export type ShowFunction<T = any> = (record?: T, options?: {
     index: number;
     form: FormInstance;
     name: NamePath;
     namePath: NamePath;
     tableLength: number;
     selectedRows: T[];
-}) => Promise<any> | boolean | void;
+}) => Promise<boolean> | boolean | void;
+/**
+ * 选项属性接口
+ */
 export interface OptionsProps {
+    /** 索引 */
     index: number;
+    /** 表单实例 */
     form: FormInstance;
+    /** 名称路径 */
     namePath: NamePath;
+    /** 名称 */
     name: NamePath;
 }
+/**
+ * 选项属性类型（基于接口）
+ */
+export type OptionsType = OptionsProps;
+/**
+ * 汇总列属性
+ */
 export interface SummaryColumnProps {
+    /** 列唯一标识 */
     key: string;
+    /** 列索引 */
     index: number;
+    /** 列标题 */
     title?: string;
+    /** 跨列数 */
     colSpan?: number;
+    /** 值类型 */
     valueType?: string;
+    /** 精度 */
     precision?: number;
+    /** 前缀 */
     prefix?: ReactNode | string;
 }
+/**
+ * 基础操作按钮属性
+ * @template T 记录类型
+ */
 export interface BaseActionProps<T = any> {
     /**
-     * @description       按钮类型
-     * @default           -
+     * 按钮类型
      */
     type?: ActionType;
     /**
-     * @description       按钮名称
-     * @default           -
+     * 按钮名称
      */
     label?: string | ReactNode;
     /**
-     * @description       是否显示按钮
-     * @default           true
+     * 是否显示按钮
+     * @default true
      */
     show?: boolean | ShowFunction<T>;
     /**
-   * @description       是否持久化（一直显示）操作按钮
-   * @default           true
-   */
+     * 是否持久化（一直显示）操作按钮
+     * @default true
+     */
     persistence?: boolean;
     /**
-     * @description       是否禁止操作
-     * @default           true
+     * 是否禁止操作
+     * @default true
      */
     disabled?: boolean | ShowFunction<T>;
     /**
-     * @description       添加是否自定义打开弹框
-     * @default           false
+     * 添加是否自定义打开弹框
+     * @default false
      */
     isSelectModal?: boolean;
     /**
-     * @description       删除是否开启二次确认
-     * @default           true
+     * 删除是否开启二次确认
+     * @default true
      */
     needConfirm?: boolean;
     /**
-     * @description       按钮是否禁止操作
-     * @default           -
+     * 按钮是否禁止操作
      */
     isEditable?: boolean;
     /**
-     * @description       按钮前置校验事件
-     * @default           -
+     * 按钮前置校验事件
      */
-    onClick?: (record?: any, index?: number) => any;
+    onClick?: (record?: T, index?: number) => any;
     /**
-     * @description       按钮前置校验事件
-     * @default           -
+     * 按钮前置校验事件
      */
-    onHandle?: (record?: any, index?: number) => any;
+    onHandle?: (record?: T, index?: number) => any;
     /**
-     * @description       支持antd的Button属性
-     * @default           -
+     * 支持antd的Button属性
      */
     buttonProps?: Omit<ButtonProps, 'type' | 'onClick'>;
 }
-export type RulesFn<T> = (text?: any, record?: T, options?: OptionsProps) => ProRule[] | void;
-export type RequiredFn<T> = (text?: any, record?: T, options?: OptionsProps) => boolean | void;
-export type viewRenderFn<T> = (text?: any, record?: T, options?: OptionsProps) => string | number | ReactNode | void;
+/**
+ * 规则函数类型
+ * @template T 记录类型
+ */
+export type RulesFn<T = any> = (text?: any, record?: T, options?: OptionsProps) => ProRule[] | void;
+/**
+ * 必填函数类型
+ * @template T 记录类型
+ */
+export type RequiredFn<T = any> = (text?: any, record?: T, options?: OptionsProps) => boolean | void;
+/**
+ * 视图渲染函数类型
+ * @template T 记录类型
+ */
+export type viewRenderFn<T = any> = (text?: any, record?: T, options?: OptionsProps) => string | number | ReactNode | void;
+/**
+ * 表格列属性接口
+ * @template Values 值类型
+ * @template T 记录类型
+ */
 export interface ProColumnsProps<Values = any, T = any> extends Omit<FormItemProps<Values>, 'rules' | 'required'>, ColumnType<Values> {
+    /** 是否必填 */
     required?: boolean | RequiredFn<T>;
+    /** 标签是否必填 */
     labelRequired?: boolean;
+    /** 字段名 */
     name?: NamePath;
+    /** 多字段名 */
     names?: NamePath[];
+    /** 是否可编辑 */
     isEditable?: boolean | RequiredFn<T>;
-    valueType?: ProFormValueType | ((text?: any, record?: any, options?: OptionsProps) => ProFormValueType);
+    /** 值类型 */
+    valueType?: ProFormValueType | ((text?: any, record?: T, options?: OptionsProps) => ProFormValueType);
+    /** 提示信息 */
     tooltip?: string | ({
         icon?: string | ReactNode;
     } & TooltipProps);
+    /** 组件 */
     component?: string | number | ReactNode | viewRenderFn<T>;
+    /** 视图渲染 */
     viewRender?: string | number | ReactNode | viewRenderFn<T>;
+    /** 隐藏的字段名 */
     hiddenNames?: NamePath[] | NamePath[][];
+    /** 校验规则 */
     rules?: ProRule[] | RulesFn<T>;
+    /** 确认操作 */
     confirm?: boolean | ModalFuncProps | FunctionArgs<Values, boolean | ModalFuncProps | void>;
+    /** 依赖项 */
     dependencies?: NamePath[];
+    /** 差异处理 */
     onDiff?: DiffOriginalParams['onDiff'];
     [key: string]: any;
 }
-export type ProEditTableColumnsProps<K = any> = ProColumnsProps & ColumnPropsMap<K, 'ProEditTable'>;
-export interface State {
+/**
+ * 表格列属性类型（基于接口）
+ * @template Values 值类型
+ * @template T 记录类型
+ */
+export type ProColumnsType<Values = any, T = any> = ProColumnsProps<Values, T>;
+/**
+ * 可编辑表格列属性
+ * @template K 键类型
+ */
+export type ProEditTableColumnsProps<K = any> = ProColumnsProps<K, 'ProEditTable'>;
+/**
+ * 状态接口
+ */
+export interface StateProps {
+    /** 单元格名称路径 */
     cellNamePath: NamePath[];
-    forceUpdate: {};
+    /** 表格内部强制刷新开关 */
+    forceUpdate: Record<string, any>;
+    /** 正在编辑行的row-key集合 */
     editingKeys: string[];
+    /** 当前选中行的row-key集合 */
     selectedRowKeys: Key[];
+    /** 当前选中行数据集合 */
     selectedRows: any[];
+    /** 虚拟键 */
     virtualKey: string;
+    /** 分页信息 */
     page: {
         pageNum: number;
         pageSize: number;
     };
 }
+/**
+ * 状态类型（基于接口）
+ */
+export type StateType = StateProps;
+/**
+ * 可编辑表格引用属性
+ */
 export interface ProEditTableRefProps {
-    getInternalState: () => State;
+    /** 获取内部状态 */
+    getInternalState: () => StateProps;
+    /** 设置内部状态 */
+    setInternalState: (state: Partial<StateProps>) => void;
 }
+/**
+ * 可编辑表格引用属性类型（基于接口）
+ */
+export type ProEditTableRefType = ProEditTableRefProps;
+/**
+ * 可编辑表格模式类型
+ */
+export type ProEditTableMode = 'single' | 'multiple' | 'cell';
+export type ProEditTableModeType = ProEditTableMode;
+/**
+ * 表格插入类型
+ */
+export type InsertType = 'before' | 'after';
+/**
+ * 操作按钮方向
+ */
+export type ActionDirection = 'vertical' | 'horizontal';
+export type ActionDirectionType = ActionDirection;
+/**
+ * 汇总信息配置
+ * @template T 记录类型
+ */
+export type SummaryProps<T = any> = {
+    columns: ProEditTableSummaryColumnType[];
+    total?: boolean;
+    fixed?: boolean | 'top' | 'bottom';
+} | TableProps<T>['summary'];
+/**
+ * 可编辑表格属性接口
+ * @template T 记录类型
+ */
 export interface ProEditTableProps<T = any> extends Omit<TableProps<T>, 'onChange' | 'summary'> {
     /**
-     * @description       可编辑表格的 form 实例，使用 Form.useForm 生成后使用
-     * @default           -
+     * 可编辑表格的 form 实例，使用 Form.useForm 生成后使用
      */
     form?: FormInstance;
     /**
-     * @description       原始数据源，设置后可以对比更新后的数值
-     * @default           -
+     * 原始数据源，设置后可以对比更新后的数值
      */
-    originalValues?: any;
+    originalValues?: Record<string, any>;
     /**
-     * @description       原始数据源，是否tooltip显示
-     * @default           -
+     * 可编辑表格的模式
+     * @default multiple
      */
-    mode?: 'single' | 'multiple' | 'cell';
+    mode?: ProEditTableMode;
     /**
-     * @description       可编辑表格的类型，单行编辑或者多行编辑
-     * @deprecated        将于下个版本 4.0.0 被弃用
-     * @default           multiple
+     * 可编辑表格的类型，单行编辑或者多行编辑
+     * @deprecated 将于下个版本 4.0.0 被弃用
+     * @default multiple
      */
-    type?: 'single' | 'multiple' | 'cell';
+    type?: ProEditTableMode;
     /**
-     * @description       必填对齐方式, 默认右对齐
-     * @default           right
+     * 必填对齐方式, 默认右对齐
+     * @default right
      */
     requiredAlign?: 'left' | 'right';
     /**
-     * @description       同 dataSource，传入一个数组,是 table 渲染的元数据
-     * @default           undefined
+     * 同 dataSource，传入一个数组,是 table 渲染的元数据
+     * @default undefined
      */
     value?: T[];
     /**
-     * @description       dataSource 修改时触发，删除和修改都会触发,如果设置了 value，ProEditTable 会成为一个受控组件
-     * @default           -
+     * dataSource 修改时触发，删除和修改都会触发,如果设置了 value，ProEditTable 会成为一个受控组件
      */
     onChange?: (list: T[]) => void;
     /**
-     * @description       表格列的配置描述，扩展了FormItemProps属性
-     * @default           []
+     * 表格列的配置描述，扩展了FormItemProps属性
+     * @default []
      */
-    columns: ProEditTableColumnsProps[];
+    columns: ProEditTableColumnType<T>[];
     /**
-     * @description       是否禁止编辑
-     * @default           false
+     * 是否禁止编辑
+     * @default false
      */
     disabled?: boolean;
     /**
-     * @description       是否开启斑马纹
-     * @default           true
+     * 是否开启斑马纹
+     * @default true
      */
     stripe?: boolean;
     /**
-     * @description       可编辑表格新增时数据插入方式，头部插入或者尾部插入
-     * @default           after
+     * 可编辑表格新增时数据插入方式，头部插入或者尾部插入
+     * @default after
      */
-    insertType?: 'before' | 'after';
+    insertType?: InsertType;
     /**
-     * @description       字段名，支持数组
-     * @default          -
+     * 字段名，支持数组
      */
     name?: string | number | (string | number)[];
     /**
-     * @description       是否可拖拽排序
-     * @default           -
+     * 是否可拖拽排序
      */
     draggable?: boolean;
     /**
-   * @description       是否开启虚拟列表（scroll,x,y必须为固定值）
-   * @default           -
-   */
+     * 是否开启虚拟列表（scroll,x,y必须为固定值）
+     */
     virtual?: boolean;
     /**
-     * @description       空列表状态时，自定义添加按钮
-     * @default          点击添加
+     * 空列表状态时，自定义添加按钮
+     * @default 点击添加
      */
     emptyBtnText?: string;
     /**
-     * @description       只能编辑一行的的提示
-     * @default          请先保存数据
+     * 只能编辑一行的的提示
+     * @default 请先保存数据
      */
     onlyOneLineMsg?: string;
     /**
-     * @description       单行删除时弹出的确认框提示消息
-     * @default          您确定要删除该行数据吗？
+     * 单行删除时弹出的确认框提示消息
+     * @default 您确定要删除该行数据吗？
      */
     deletePoConfirmMsg?: string;
     /**
-     * @description       多行删除时弹出的确认框提示消息
-     * @default          您确定要删除选中的数据吗？
+     * 多行删除时弹出的确认框提示消息
+     * @default 您确定要删除选中的数据吗？
      */
     mulDeletePoConfirmMsg?: string;
     /**
-     * @description       自定义编辑模式的操作栏 单行编辑默认为编辑、删除、保存、取消；多行编辑为删除
-     * @default           -
+     * 自定义编辑模式的操作栏宽度
      */
     actionWidth?: ColumnType<T>['width'];
     /**
-     * @description       自定义编辑模式的操作栏 单行编辑默认为编辑、删除、保存、取消；多行编辑为删除
-     * @default           -
+     * 自定义编辑模式的操作栏 单行编辑默认为编辑、删除、保存、取消；多行编辑为删除
      */
     actionProps?: BaseActionProps<T>[] | boolean;
     /**
-     * @description       自定义 table footer 左侧渲染, 配置后toolbarProps会失效
-     * @default           -
+     * 自定义 table footer 左侧渲染, 配置后toolbarProps会失效
      */
     footerRender?: ReactNode;
     /**
-     * @description       自定义底部操作栏 默认为添加、删除（批量）
-     * @default           -
+     * 自定义底部操作栏 默认为添加、删除（批量）
      */
     toolbarProps?: BaseActionProps<T>[] | boolean;
     /**
-     *  @description      自定义底部操作栏跟随页面滚动
-     *  @default           -
+     * 自定义底部操作栏跟随页面滚动
      */
     toolbarSticky?: boolean | Omit<AffixProps, 'children'>;
     /**
-     * @description       最大可添加数量
-     * @default           -
+     * 最大可添加数量
      */
     max?: number;
     /**
-     * @description       formItem的props
-     * @default           -
+     * formItem的props
      */
-    otherProps?: any;
+    otherProps?: Record<string, any>;
     /**
-     * @description       底部合计配置
-     * @default           -
+     * 底部合计配置
      */
-    summary?: {
-        columns: SummaryColumnProps[];
-        total?: boolean;
-        fixed?: boolean | 'top' | 'bottom';
-    } | TableProps<T>['summary'];
+    summary?: ProEditTableSummaryConfigType<T>;
     /**
-     * @description       底部合计配置
-     * @default           -
+     * 自定义头部渲染
      */
     headerRender?: ReactNode;
+    /**
+     * 行是否禁用
+     */
     rowDisabled?: (record?: T) => string | boolean;
+    /**
+     * 行是否可拖拽
+     */
     rowDraggable?: (record?: T) => string | boolean;
+    /**
+     * 拖拽事件处理
+     */
     onDrag?: (event: DragEndEvent, dataSource: T[]) => T[];
+    /**
+     * 引用对象
+     */
     ref?: any;
-    actionDirection?: 'vertical' | 'horizontal';
+    /**
+     * 操作按钮方向
+     */
+    actionDirection?: ActionDirection;
+    /**
+     * 校验触发方式
+     */
     validateTrigger?: string | string[];
+    /**
+     * 差异配置
+     */
     diffConfig?: {
+        /** 是否跟随父元素滚动 */
         scrollFollowParent?: boolean;
     };
 }
+/**
+ * 基础操作按钮类型（基于接口）
+ * @template T 记录类型
+ */
+export type ProEditTableActionType<T = any> = BaseActionProps<T>;
+export type ProEditTableSummaryConfigType<T = any> = SummaryProps<T>;
+export type ProEditTableSummaryColumnType = SummaryColumnProps;
+/**
+ * 可编辑表格列属性类型（基于类型）
+ * @template K 键类型
+ */
+export type ProEditTableColumnType<K = any> = ProEditTableColumnsProps<K>;
+/**
+ * 可编辑表格属性类型（基于接口）
+ * @template T 记录类型
+ */
+export type ProEditTableType<T = any> = ProEditTableProps<T>;

package/lib/ProEditTable/style/index.less

@@ -83,6 +83,7 @@
 
   .drag-wrapper {
     display: flex;
+    justify-content: flex-end;
     .anticon {
       margin-right: var(--zaui-space-size-md, 16px);
       margin-left: var(--zaui-space-size-xs, 4px);

package/lib/ProEditTable/utils/index.d.ts

@@ -6,4 +6,4 @@
  * @param columns 表格配置数据
  * @param config
  */
-export declare const transformColumns: (columns: any[], config: any) => any;
+export declare const transformColumns: (columns: any[], config: any) => any[];

package/lib/ProEditTable/utils/index.js

@@ -262,11 +262,12 @@ var transformColumns = exports.transformColumns = function transformColumns() {
     var required = (0, _lodash.isBoolean)(item.required) ? item.required : false;
     if (typeof item.required === 'function') {
       var namePath = (0, _tools.getNamePath)(name, virtualKey);
-      var rowData = form.getFieldValue([].concat((0, _toConsumableArray2.default)(namePath), [index])) || {};
+      var namePathArray = Array.isArray(namePath) ? namePath : [namePath];
+      var rowData = form.getFieldValue([].concat((0, _toConsumableArray2.default)(namePathArray), [index])) || {};
       required = item.required(rowData[columnName], rowData, {
         form: form,
         index: index,
-        namePath: [].concat((0, _toConsumableArray2.default)(namePath), [index])
+        namePath: [].concat((0, _toConsumableArray2.default)(namePathArray), [index])
       });
     }
     // 样式处理
@@ -286,17 +287,18 @@ var transformColumns = exports.transformColumns = function transformColumns() {
       if (virtualKey && editingKeys.includes(record.rowKey)) {
         namePath = (0, _tools.getNamePath)(name, virtualKey);
       }
+      var namePathArray = Array.isArray(namePath) ? namePath : [namePath];
       var columnNamePath = (0, _lodash.isArray)(columnName) ? columnName : [columnName];
       index = _utils.tools.calc(firstIndex, '+', index);
       // 设置单元格formItem的namePath
-      var cellName = columnName ? [].concat((0, _toConsumableArray2.default)(namePath), [index], (0, _toConsumableArray2.default)(columnNamePath)) : [].concat((0, _toConsumableArray2.default)(namePath), [index]);
+      var cellName = columnName ? [].concat((0, _toConsumableArray2.default)(namePathArray), [index], (0, _toConsumableArray2.default)(columnNamePath)) : [].concat((0, _toConsumableArray2.default)(namePathArray), [index]);
       var _text = text;
       // 当传入组合组件时，name需要重新组合一下，以防names中key与dataIndex重叠
       if (names === null || names === void 0 ? void 0 : names.length) {
         var nextDataIndex = (0, _tools.splitNames)(names);
         item.dataIndex = nextDataIndex;
         item.key = nextDataIndex;
-        cellName = [].concat((0, _toConsumableArray2.default)(namePath), [index, nextDataIndex]);
+        cellName = [].concat((0, _toConsumableArray2.default)(namePathArray), [index, nextDataIndex]);
         // 给names返回数组值
         _text = names.map(function (item) {
           return record === null || record === void 0 ? void 0 : record[item];

package/lib/ProEditTable/utils/tools.d.ts

@@ -1,32 +1,67 @@
+import { Key } from 'react';
+import { FormInstance } from 'antd/es/form';
+import { NamePath } from 'antd/es/form/interface';
+/**
+ * 生成随机字符串
+ * @returns 随机字符串
+ */
 export declare const getRandom: () => string;
-export declare const difference: (object: any, base: any) => unknown;
-export declare const customValidate: (validateKeys: any, form: any, rowName: any) => any;
+/**
+ * 深层次对比两个对象且取出来差异值
+ * @param object 比较对象
+ * @param base 基准对象
+ * @returns 差异对象
+ */
+export declare const difference: <T extends Record<string, any>, U extends Record<string, any>>(object: T, base: U) => Record<string, any>;
+/**
+ * 数组字段循环校验，解决validateFields无法批量校验的问题
+ * @param validateKeys 校验键数组
+ * @param form 表单实例
+ * @param rowName 行名称路径
+ * @returns 校验结果Promise
+ */
+export declare const customValidate: (validateKeys: string[], form: FormInstance, rowName: NamePath) => Promise<any>;
 /**
  * 拆解数组names
- * @param names [][]
- * @returns string
+ * @param names 名称数组
+ * @returns 拆解后的字符串
  */
-export declare const splitNames: (names: any[]) => any;
-export declare const getNamePath: (name: any, virtualKey: any) => any[];
-export declare const onDelete: ({ name, form, virtualKey, selectedRowKeys }: {
-    name: any;
-    form: any;
-    virtualKey: any;
-    selectedRowKeys: any;
+export declare const splitNames: (names: any[]) => string;
+/**
+ * 获取中间formItem的name
+ * @param name 名称路径
+ * @param virtualKey 虚拟键
+ * @returns 完整名称路径数组
+ */
+export declare const getNamePath: (name: NamePath, virtualKey?: string) => (string | number)[];
+/**
+ * 删除操作
+ * @param params 删除参数
+ */
+export declare const onDelete: ({ name, form, virtualKey, selectedRowKeys, }: {
+    name: NamePath;
+    form: FormInstance;
+    virtualKey?: string;
+    selectedRowKeys: Key[];
 }) => void;
-/** 获取最终的disabled, 两张模式【子级优先，全局优先】
+/**
+ * 获取最终的disabled, 两张模式【子级优先，全局优先
  * 全局优先：globalControl为true时，全局控制
  * 子级优先：globalControl为false时，子级控制
- * @param globalControl 全局控制
- * @param formDisabled 表单的disabled
- * @param column 当前列
- * @param tabledDisabled 表格的disabled
- * @param columnFieldProps 当前列的fieldProps
- * @param params 当前列的参数
- * @param rowDisabled 行禁用参数
+ * @param params 禁用参数
+ * @returns 是否禁用
  */
-export declare const getDisabled: ({ globalControl, formDisabled, column, tabledDisabled, columnFieldProps, params, rowDisabled, }: any) => any;
-/** 表格自动滚动到报错位置
+export declare const getDisabled: ({ globalControl, formDisabled, column, tabledDisabled, columnFieldProps, params, rowDisabled, }: {
+    globalControl: boolean;
+    formDisabled?: boolean | ((record: any) => boolean);
+    column: any;
+    tabledDisabled?: boolean;
+    columnFieldProps?: any;
+    params: any[];
+    rowDisabled?: any;
+}) => boolean;
+/**
+ * 表格自动滚动到报错位置
  */
 export declare const handleScrollToError: () => void;
 /**
@@ -34,7 +69,7 @@ export declare const handleScrollToError: () => void;
  * @param value 需要深拷贝的对象
  * @returns 深拷贝后的对象，其中的React节点会被保留
  */
-export declare function cloneDeepFilterNode(value: any): any;
+export declare function cloneDeepFilterNode<T>(value: T): T;
 /**
  * 分页校验
  */