@magicbe/antd-crud 0.0.54 → 0.0.56

package/README.md

@@ -7,7 +7,10 @@
 - 快速构建完整的 CRUD 表格界面
 - 支持多种表单字段类型
 - 内置筛选、新增、编辑、删除功能
-- 可自定义操作按钮
+- 支持主操作按钮和行操作按钮
+- 支持操作钩子函数（before/handle/after）
+- 支持字段动态显示/隐藏
+- 支持错误弹窗配置
 - 基于 Ant Design，样式统一
 
 ## 安装
@@ -50,7 +53,6 @@ const columns: ColumnType<User>['columns'] = [
         field: {
             type: 'Input',
             rules: [{ required: true }],
-            ...({})
         },
         add: true,
         edit: true,
@@ -76,14 +78,8 @@ const columns: ColumnType<User>['columns'] = [
             type: "Select",
             option: {
                 options: [
-                    {
-                        label: "区域1",
-                        value: "1",
-                    },
-                    {
-                        label: "区域2",
-                        value: "2",
-                    },
+                    { label: "区域1", value: "1" },
+                    { label: "区域2", value: "2" },
                 ]
             },
             rules: [{ required: true }]
@@ -99,8 +95,6 @@ const App: React.FC = () => {
             pageSize: size = 10,
         } = params;
 
-        // 模拟API请求
-        
         return {
             sources: [
                 { id: 1, name: '张三', age: 28, address: '北京市海淀区' },
@@ -113,19 +107,16 @@ const App: React.FC = () => {
     };
 
     const add: addHandle = async (value) => {
-        // 模拟新增操作
         console.log('add:', value);
         return Promise.resolve();
     };
 
     const edit: editHandle = async (value) => {
-        // 模拟编辑操作
         console.log('edit:', value);
         return Promise.resolve();
     };
 
     const del: delHandle = async (value) => {      
-        // 模拟删除操作
         console.log('delete:', value);
         return Promise.resolve();
     };
@@ -137,7 +128,7 @@ const App: React.FC = () => {
             add={add}
             edit={edit}
             del={del}
-            rowKey={"uuid"}
+            rowKey="id"
         />
     );
 };
@@ -156,16 +147,17 @@ export default App;
 | 属性名 | 类型 | 说明 |
 |--------|------|------|
 | columns | ColumnType[] | 表格列配置 |
-| getSources | (params?: GetSourceFunctionParams) => Promise<Source> | 获取数据的方法 |
-| add | addHandle \| addHandleMap | 新增操作方法 |
-| edit | editHandle \| editHandleMap | 编辑操作方法 |
-| del | delHandle \| Partial<HandleMap<delHandle>> | 删除操作方法 |
+| getSources | (params?: GetSourceFunctionParams) => Promise\<Source\> | 获取数据的方法 |
+| add | add \| addHandleMap | 新增操作方法 |
+| edit | edit \| editHandleMap | 编辑操作方法 |
+| del | delHandle \| Partial\<HandleMap\<delHandle\>\> | 删除操作方法 |
 | action | Action | 自定义操作按钮 |
-| rowSelection | RowSelectionType | 行选择类型 |
+| rowSelection | RowSelectionType \| AntdTableProps['rowSelection'] | 行选择配置 |
 | pagination | false | 是否显示分页（暂仅支持false） |
 | drawer | number \| DrawerProps | 抽屉配置 |
 | pageSizeOptions | PaginationProps['pageSizeOptions'] | 每页条数选项 |
-| actionColumn | ColumnType<any> | 操作列配置 |
+| actionColumn | ColumnType\<any\> | 操作列配置 |
+| rowKey | string \| ((record: any) => string) | 行数据的唯一标识 |
 
 ### ColumnType
 
@@ -181,112 +173,325 @@ export default App;
 ### ColumnField 类型
 
 支持的表单字段类型：
-- Input
-- Input.Password
-- TextArea
-- InputNumber
-- Select
-- Cascader
-- TreeSelect
-- Checkbox
-- Checkbox.Group
-- DatePicker
-- DatePicker.YearPicker
-- DatePicker.MonthPicker
-- DatePicker.WeekPicker
-- DatePicker.TimePicker
-- DatePicker.RangePicker
-- DatePicker.QuarterPicker
-- TimePicker
-- TimePicker.RangePicker
-- Radio
-- Radio.Group
-- Switch
-
-### TableContextProvider 和 useTableContext
+
+| 类型 | 说明 |
+|------|------|
+| Hidden | 隐藏字段 |
+| Input | 输入框 |
+| Input.Password | 密码输入框 |
+| TextArea | 长文本输入框 |
+| InputNumber | 数字输入框 |
+| Select | 选择器 |
+| Cascader | 级联选择 |
+| TreeSelect | 树选择 |
+| Checkbox | 多选框 |
+| Checkbox.Group | 多选框组 |
+| DatePicker | 日期选择框 |
+| DatePicker.YearPicker | 年选择框 |
+| DatePicker.MonthPicker | 月选择框 |
+| DatePicker.WeekPicker | 周选择框 |
+| DatePicker.TimePicker | 时间选择框 |
+| DatePicker.RangePicker | 时间范围选择框 |
+| DatePicker.QuarterPicker | 季度选择框 |
+| TimePicker | 时间选择框 |
+| TimePicker.RangePicker | 时间范围选择框 |
+| Radio | 单选框 |
+| Radio.Group | 单选框组 |
+| Switch | 开关 |
+
+### ColumnField 配置
+
+```tsx
+interface BaseColumnField<T extends string, O = any> {
+    type: T;
+    option?: O;
+    rules?: Rule[];
+    order?: number;
+    filter?: (values: AnyObject, form: FormInstance) => boolean;
+}
+```
+
+| 属性名 | 类型 | 说明 |
+|--------|------|------|
+| type | string | 字段类型 |
+| option | object | 传递给组件的属性 |
+| rules | Rule[] | 表单验证规则 |
+| order | number | 字段排序 |
+| filter | (values, form) => boolean | 动态显示/隐藏字段 |
+
+### Source 类型
+
+```tsx
+type Source<RecordType = AnyObject> = {
+    sources: RecordType[];
+    total?: number;
+    page?: number;
+    size?: number;
+}
+```
+
+### 操作方法
+
+#### add / edit 方法
+
+支持两种形式：
+
+```tsx
+type addHandle = (value: any, selection: Selection) => Promise<any>;
+
+type addHandleMap = Partial<HandleMap<addHandle>> & {
+    init?: addHandleInit
+};
+
+type add = addHandle | addHandleMap;
+```
+
+**简单形式：**
+
+```tsx
+const add: addHandle = async (value, selection) => {
+    console.log(value, selection);
+};
+```
+
+**钩子形式：**
+
+```tsx
+const add: addHandleMap = {
+    init: async (selection) => {
+        return { name: '默认值' };
+    },
+    before: async (value, selection) => {},
+    handle: async (value, selection) => {},
+    after: async (value, selection) => {},
+};
+```
+
+#### del 方法
+
+```tsx
+type delHandle = (selection: Selection) => Promise<any>;
+
+type del = delHandle | Partial<HandleMap<delHandle>>;
+```
+
+### Selection 类型
+
+```tsx
+interface Selection<RecordType = AnyObject> {
+    keys?: React.Key[];
+    rows?: RecordType[];
+}
+```
+
+### Action 配置
+
+操作按钮支持多种配置方式：
+
+```tsx
+type Action = boolean | React.FC | React.FC[] | CustomAction;
+
+interface CustomAction {
+    master?: boolean | React.FC | React.FC[] | MasterCustomActionGroup;
+    record?: boolean | React.FC | React.FC[] | RecordCustomActionGroup;
+}
+
+interface MasterCustomActionGroup {
+    add?: boolean | React.FC;
+    del?: boolean | React.FC;
+    edit?: boolean | React.FC;
+}
+
+interface RecordCustomActionGroup {
+    add?: boolean | React.FC;
+    del?: boolean | React.FC;
+    edit?: boolean | React.FC;
+}
+```
+
+### 导出组件
+
+#### TableContextProvider 和 useTableContext
 
 提供表格上下文，可用于自定义组件中获取表格状态和方法。
 
-### Filter
+```tsx
+import { TableContextProvider, useTableContext } from '@magicbe/antd-crud';
+
+const CustomComponent: React.FC = () => {
+    const { table_ref, filter_ref, form_ref, add, edit, del } = useTableContext();
+    
+    const handleRefresh = () => {
+        table_ref?.current?.loadRecords();
+    };
+    
+    return <button onClick={handleRefresh}>刷新数据</button>;
+};
+```
+
+#### Filter
 
 筛选组件，可单独使用。
 
-### Action
+#### Action
+
+主操作按钮组件，提供了新增、编辑、删除等默认操作。
 
-操作按钮组件，提供了新增、编辑、删除等默认操作。
+导出的子组件：
+- `AppendAction` (别名: `MastAppend`) - 新增按钮
+- `DeleteAction` (别名: `MastDelete`) - 删除按钮
+- `EditAction` (别名: `MastEdit`) - 编辑按钮
 
-### Table
+#### Table
 
 表格组件，继承自 Ant Design 的 Table。
 
-### CrudConfigProvider
+导出的子组件：
+- `AppendAction` (别名: `RowAppend`) - 行新增按钮
+- `DeleteAction` (别名: `RowDelete`) - 行删除按钮
+- `EditAction` (别名: `RowEdit`) - 行编辑按钮
+
+#### DrawerContentContextProvider 和 useDrawerContentContext
+
+抽屉内容上下文，用于控制抽屉的渲染位置。
+
+```tsx
+import { DrawerContentContextProvider, useDrawerContentContext } from '@magicbe/antd-crud';
+```
+
+#### CrudConfigProvider
 
 配置提供者，继承自 Ant Design 的 ConfigProvider。
 
+```tsx
+import { CrudConfigProvider, CrudConfigContextProvider, useCrudConfigContext } from '@magicbe/antd-crud';
+
+interface CustomConfigProviderProps {
+    showErrorModal?: boolean;
+}
+
+const App: React.FC = () => {
+    return (
+        <CrudConfigProvider 
+            theme={{ token: { colorPrimary: '#1890ff' } }}
+            showErrorModal={false}
+        >
+            <CrudTable {...props} />
+        </CrudConfigProvider>
+    );
+};
+```
+
+### ContentRef
+
+通过 ref 暴露的方法：
+
+```tsx
+interface ContentRef<RecordType = AnyObject> {
+    filter_ref: React.RefObject<FilterRef>;
+    action_ref: React.RefObject<ActionRef>;
+    table_ref: React.RefObject<TableRef<RecordType>>;
+    form_ref: React.RefObject<FormRef>;
+}
+
+interface TableRef<RecordType = AnyObject> {
+    getPageData: () => { current?: number; pageSize?: number };
+    getRecords: () => RecordType[];
+    loadRecords: (params?: any) => void;
+    selected_keys: React.Key[];
+    selected_rows: RecordType[];
+    setSelected_keys: React.Dispatch<React.SetStateAction<React.Key[]>>;
+    setSelected_rows: React.Dispatch<React.SetStateAction<RecordType[]>>;
+}
+```
+
 ## 高级用法
 
 ### 自定义操作按钮
 
 ```tsx
 <CrudTable
-  columns={columns}
-  getSources={getSources}
-  action={{
-    master: {
-      add: true,
-      del: true,
-      // 自定义主操作按钮
-    },
-    record: {
-      edit: true,
-      del: true,
-      // 自定义行操作按钮
-    },
-  }}
+    columns={columns}
+    getSources={getSources}
+    action={{
+        master: {
+            add: true,
+            del: true,
+        },
+        record: {
+            edit: true,
+            del: true,
+        },
+    }}
 />
 ```
 
-### 使用 Context
+### 使用自定义组件
 
 ```tsx
-import { TableContextProvider, useTableContext } from '@magicbe/antd-crud';
-
-const CustomComponent: React.FC = () => {
-  const { table_ref } = useTableContext();
-  
-  const handleRefresh = () => {
-    table_ref.current?.loadRecords();
-  };
-  
-  return (
-    <button onClick={handleRefresh}>刷新数据</button>
-  );
+const CustomAddButton: React.FC = () => {
+    return <Button type="primary">自定义新增</Button>;
 };
 
-const App: React.FC = () => {
-  return (
-    <TableContextProvider {...props}>
-      <CustomComponent />
-    </TableContextProvider>
-  );
-};
+<CrudTable
+    action={{
+        master: {
+            add: CustomAddButton,
+        },
+    }}
+/>
 ```
 
-### 配置主题
+### 字段动态显示
 
 ```tsx
-import { CrudConfigProvider } from '@magicbe/antd-crud';
+const columns: ColumnType[] = [
+    {
+        title: '类型',
+        dataIndex: 'type',
+        field: {
+            type: 'Select',
+            option: {
+                options: [
+                    { label: '类型A', value: 'A' },
+                    { label: '类型B', value: 'B' },
+                ]
+            }
+        },
+    },
+    {
+        title: '类型A专属字段',
+        dataIndex: 'fieldA',
+        field: {
+            type: 'Input',
+            filter: (values, form) => values.type === 'A',
+        },
+    },
+];
+```
+
+### 使用 ref 控制表格
+
+```tsx
+import { CrudTable, type ContentRef } from '@magicbe/antd-crud';
 
 const App: React.FC = () => {
-  return (
-    <CrudConfigProvider theme={{
-      token: {
-        colorPrimary: '#1890ff',
-      },
-    }}>
-      <CrudTable {...props} />
-    </CrudConfigProvider>
-  );
+    const crudRef = React.useRef<ContentRef>(null);
+
+    const handleRefresh = () => {
+        crudRef.current?.table_ref.current?.loadRecords();
+    };
+
+    const getSelectedRows = () => {
+        return crudRef.current?.table_ref.current?.selected_rows;
+    };
+
+    return (
+        <>
+            <Button onClick={handleRefresh}>刷新</Button>
+            <CrudTable ref={crudRef} {...props} />
+        </>
+    );
 };
 ```
 
@@ -295,7 +500,8 @@ const App: React.FC = () => {
 1. 组件依赖 antd 5.22.5 及以上版本，请确保项目中 antd 版本符合要求。
 2. 目前 pagination 仅支持设置为 false，分页功能内置实现。
 3. 自定义组件时，请使用 TableContextProvider 包裹以确保能正确获取上下文。
+4. 使用 `showErrorModal` 配置可以控制是否在操作失败时显示错误弹窗。
 
 ## License
 
-MIT
+MIT

package/dist/components/Table.js

@@ -155,7 +155,7 @@ var Table = React.forwardRef(function (_a, ref) {
             }
         }
         return nexts;
-    }, [props.columns]);
+    }, [props.columns, action]);
     var pagination = useMemo(function () {
         if (_pagination_ === false)
             return false;
@@ -206,8 +206,10 @@ var Table = React.forwardRef(function (_a, ref) {
         }).finally(function () { return setLoading(false); });
     };
     var getPageData = function () { return ({ current: page, pageSize: size }); };
+    var getRecords = function () { return sources; };
     useImperativeHandle(ref, function () { return ({
         getPageData: getPageData,
+        getRecords: getRecords,
         loadRecords: loadRecords,
         selected_keys: selected_keys,
         selected_rows: selected_rows,

package/dist/interface.d.ts

@@ -101,11 +101,11 @@ export interface ColumnType<RecordType = AnyObject> extends Omit<AntdColumnType<
 export type Source<RecordType = AnyObject> = {
     sources: RecordType[];
     /**数据总数 */
-    total: number;
+    total?: number;
     /**当前页 */
-    page: number;
+    page?: number;
     /**每页几条 */
-    size: number;
+    size?: number;
 };
 export interface GetSourceFunctionParams extends Record<string, any> {
     current?: number;
@@ -179,10 +179,10 @@ export interface ContentProps<RecordType = AnyObject> extends Omit<AntdTableProp
     actionColumn?: ColumnType<any>;
 }
 /**主体暴露 */
-export interface ContentRef {
+export interface ContentRef<RecordType = AnyObject> {
     filter_ref: React.RefObject<FilterRef>;
     action_ref: React.RefObject<ActionRef>;
-    table_ref: React.RefObject<TableRef>;
+    table_ref: React.RefObject<TableRef<RecordType>>;
     form_ref: React.RefObject<FormRef>;
 }
 /**表单REF */
@@ -209,12 +209,14 @@ export type getPageData = () => ({
     pageSize?: number;
 });
 export type loadRecords = (params?: any) => void;
-export interface TableRef {
+export type getRecords<T = AnyObject> = () => T[];
+export interface TableRef<RecordType = AnyObject> {
     getPageData: getPageData;
+    getRecords: getRecords<RecordType>;
     loadRecords: loadRecords;
     selected_keys: React.Key[];
-    selected_rows: AnyObject[];
+    selected_rows: RecordType[];
     setSelected_keys: React.Dispatch<React.SetStateAction<React.Key[]>>;
-    setSelected_rows: React.Dispatch<React.SetStateAction<AnyObject[]>>;
+    setSelected_rows: React.Dispatch<React.SetStateAction<RecordType[]>>;
 }
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magicbe/antd-crud",
-  "version": "0.0.54",
+  "version": "0.0.56",
   "description": "antd crud table",
   "author": "wang quan",
   "private": false,