@magicbe/antd-crud

一个基于 Ant Design 的 CRUD 表格组件库，简化开发中的增删改查操作。

特性

• 快速构建完整的 CRUD 表格界面
• 支持多种表单字段类型
• 内置筛选、新增、编辑、删除功能
• 可自定义操作按钮
• 基于 Ant Design，样式统一

安装

# 使用 npm
npm install @magicbe/antd-crud

# 使用 yarn
yarn add @magicbe/antd-crud

# 使用 pnpm
pnpm add @magicbe/antd-crud

依赖

• antd: 5.22.5+
• react: 18.2.0+
• react-dom: 18.2.0+

基本使用

import React from 'react';
import { CrudTable, type ContentProps, type ColumnType, type delHandle, type editHandle, type addHandle } from '@magicbe/antd-crud';

interface User {
    id: number;
    name: string;
    age: number;
    address: string;
}

const columns: ColumnType<User>['columns'] = [
    {
        title: '姓名',
        dataIndex: 'name',
        filter: 'Input',
        field: {
            type: 'Input',
            rules: [{ required: true }],
            ...({})
        },
        add: true,
        edit: true,
    },
    {
        title: '年龄',
        dataIndex: 'age',
        field: 'InputNumber',
        add: true,
        edit: true,
    },
    {
        title: '地址',
        dataIndex: 'address',
        field: 'TextArea',
        add: true,
        edit: true,
    },
    {
        title: "所属区域",
        dataIndex: "region",
        field: {
            type: "Select",
            option: {
                options: [
                    {
                        label: "区域1",
                        value: "1",
                    },
                    {
                        label: "区域2",
                        value: "2",
                    },
                ]
            },
            rules: [{ required: true }]
        },
        edit: true,
    },
];

const App: React.FC = () => {
    const getSources: ContentProps<User>['getSources'] = async (params: any = {}) => {
        const {
            current: page = 1,
            pageSize: size = 10,
        } = params;

        // 模拟API请求
        
        return {
            sources: [
                { id: 1, name: '张三', age: 28, address: '北京市海淀区' },
                { id: 2, name: '李四', age: 32, address: '上海市浦东新区' },
            ],
            total: 2,
            page,
            size,
        };
    };

    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();
    };

    return (
        <CrudTable
            columns={columns}
            getSources={getSources}
            add={add}
            edit={edit}
            del={del}
            rowKey={"uuid"}
        />
    );
};

export default App;

API 文档

CrudTable

主要组件，集成了筛选、操作按钮和表格功能。

属性

| 属性名 | 类型 | 说明 | |--------|------|------| | columns | ColumnType[] | 表格列配置 | | getSources | (params?: GetSourceFunctionParams) => Promise | 获取数据的方法 | | add | addHandle | addHandleMap | 新增操作方法 | | edit | editHandle | editHandleMap | 编辑操作方法 | | del | delHandle | Partial<HandleMap> | 删除操作方法 | | action | Action | 自定义操作按钮 | | rowSelection | RowSelectionType | 行选择类型 | | pagination | false | 是否显示分页（暂仅支持false） | | drawer | number | DrawerProps | 抽屉配置 | | pageSizeOptions | PaginationProps['pageSizeOptions'] | 每页条数选项 | | actionColumn | ColumnType | 操作列配置 |

ColumnType

表格列配置，继承自 Ant Design 的 ColumnType，增加了以下属性：

| 属性名 | 类型 | 说明 | |--------|------|------| | field | ColumnFieldKeys | ColumnField | React.FC | 表单字段类型 | | filter | boolean | ColumnFieldKeys | ColumnField | React.FC | 筛选字段类型 | | add | boolean | ColumnFieldKeys | ColumnField | React.FC | 新增表单字段类型 | | edit | boolean | ColumnFieldKeys | ColumnField | React.FC | 编辑表单字段类型 |

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

提供表格上下文，可用于自定义组件中获取表格状态和方法。

Filter

筛选组件，可单独使用。

Action

操作按钮组件，提供了新增、编辑、删除等默认操作。

Table

表格组件，继承自 Ant Design 的 Table。

CrudConfigProvider

配置提供者，继承自 Ant Design 的 ConfigProvider。

高级用法

自定义操作按钮

<CrudTable
  columns={columns}
  getSources={getSources}
  action={{
    master: {
      add: true,
      del: true,
      // 自定义主操作按钮
    },
    record: {
      edit: true,
      del: true,
      // 自定义行操作按钮
    },
  }}
/>

使用 Context

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 App: React.FC = () => {
  return (
    <TableContextProvider {...props}>
      <CustomComponent />
    </TableContextProvider>
  );
};

配置主题

import { CrudConfigProvider } from '@magicbe/antd-crud';

const App: React.FC = () => {
  return (
    <CrudConfigProvider theme={{
      token: {
        colorPrimary: '#1890ff',
      },
    }}>
      <CrudTable {...props} />
    </CrudConfigProvider>
  );
};

注意事项

1. 组件依赖 antd 5.22.5 及以上版本，请确保项目中 antd 版本符合要求。
2. 目前 pagination 仅支持设置为 false，分页功能内置实现。
3. 自定义组件时，请使用 TableContextProvider 包裹以确保能正确获取上下文。

License

MIT