antd-crud v1.0.1 發布,一個 React 增刪改查高階組件

來源: 投稿
作者: 開源海哥
2023-10-23 11:29:00

Antd-Crud

一個基于 React + Ant.Design 的增刪改查組件。

特征

  • 1、極輕量,只依賴于 Ant.Design 再無其他任何依賴
  • 2、支持基本的【增刪改查】和【批量刪除】功能
  • 3、支持搜索、自定義分頁和自定義排序等功能
  • 4、支持刷新、導出 Excel、數據打印、行高設置等功能
  • 5、更多的 DIY 配置

已完成功能

  •  基本增刪改查
  •  分頁加載
  •  搜索面板
  •  搜索面板自動收縮
  •  批量刪除
  •  數據刷新
  •  EXCEL 導出
  •  行高設置
  •  打印功能
  •  編輯或查看頁面可選 Modal 或者 Drawer
  •  編輯頁面和查看頁面分組設置
  •  編輯頁面自定義布局

v1.0.1 版本更新

  • 新增:添加表單編輯、新增和查看時的分組顯示功能
  • 新增:Drawer 的方式進行編輯、新增和現實的功能
  • 優化:數據查看頁面添加禁止操作的鼠標樣式顯示
  • 優化:修改 formItemDisabled 為 formReadOnly
  • 優化:修改 onFormItemValueInit 為 onSearchValueInit;
  • 優化:優化 demo 展示的一些樣式

開始使用

npm i @codeflex/antd-crud
 
function App() {

    const columns: ColumnsConfig<Account> = [
        {
            title: '姓名',
            dataIndex: 'name',
            key: 'name',
            placeholder:"請輸入姓名",
            supportSearch:true,
            render: (text) => <a>{text}</a>,
        },
        {
            title: '年齡',
            dataIndex: 'age',
            key: 'age',
            supportSearch:true,
        },
        {
            title: '地址',
            dataIndex: 'address',
            key: 'address',
            supportSearch:true,
        },
        {
            title: '標簽',
            key: 'tags',
            dataIndex: 'tags',
            supportSearch:true,
            render: (_, { tags }) => (
                <>
                    {tags.map((tag) => {
                        let color = tag.length > 5 ? 'geekblue' : 'green';
                        if (tag === 'loser') {
                            color = 'volcano';
                        }
                        return (
                            <Tag color={color} key={tag}>
                                {tag.toUpperCase()}
                            </Tag>
                        );
                    })}
                </>
            ),
        }
    ];


    const data: Account[] = [
        {
            key: '1',
            name: 'John Brown',
            age: 32,
            address: 'New York No. 1 Lake Park',
            tags: ['nice', 'developer'],
        },
        {
            key: '2',
            name: 'Jim Green',
            age: 42,
            address: 'London No. 1 Lake Park',
            tags: ['loser'],
        },
        {
            key: '3',
            name: 'Joe Black',
            age: 32,
            address: 'Sydney No. 1 Lake Park',
            tags: ['cool', 'teacher'],
        },
    ];

    const actions:Actions<Account> = {
        onCreate:(account)=>{
            console.log("onCreate", account);
        }
    };


    return (
        <div style={{width:"960px"}}>
            <AntdCrud columns={columns}
                      dataSource={data}
                      actions={actions}
                      pageNumber={1}
                      pageSize={10}
                      totalRow={2342}/>
        </div>
    )
}
 

ColumnConfig 類型說明:

ColumnConfig 繼承了 Antd 的 Table 的 Column 的所有配置,參考:https://ant-design.antgroup.com/components/table-cn#column

在此基礎上,增加了自己的配置:

  • placeholder: 搜索框和編輯頁面的占位內容
  • supportSearch: 是否支持搜素
  • colSpan: 占位長度,默認值為 20
  • colOffset: offset 默認值為 2
  • groupKey: 分組的 key
  • form: 編輯表單的 form 設置,類型為 FormConfig

ColumnGroup 類型說明:

用于在新增、編輯和查看頁面,分組顯示 form 內容。

export type ColumnGroup = {
    key: string,
    title: string,
}

FormConfig 類型說明:

type FormConfig = {
    
    // 表單類型,默認為 Input,
    // 支持:Input、InputNumber、Hidden、Radio、Checkbox、Rate、
    // Switch、DatePicker、Select、Slider、Upload
    type: string,
    
    //自定義屬性,支持 antd 控件的所有屬性配置
    attrs?: any,

    //驗證規則,只在編輯頁面起作用
    rules?: any[],
}

Actions 類型說明:

Actions 是用于定義 AntdCrud 組件的監聽方法

Actions 定義的類型如下:

type Actions<T> = {
    //獲取數據列表
    onFetchList?: (currentPage: number
        , pageSize: number
        , totalPage: number
        , searchParams: any
        , sortKey: string
        , sortType: "asc" | "desc") => void,

    //獲取數據詳情
    onFetchDetail?: (row: T) => T,

    //刪除單條數據
    onDelete?: (row: T) => void,

    //批量刪除數據
    onDeleteBatch?: (rows: T[]) => void,

    //數據更新
    onUpdate?: (row: T) => void,

    //數據創建
    onCreate?: (row: T) => void,

    //初始化搜索框的值
    onSearchValueInit?:(key:string) => any
}

需要用戶在 Actions 定義以上方法,用于對數據進行操作或查詢。

運行演示

git clone https://gitee.com/antdadmin/antd-crud.git
cd antd-crud

npm install
npm run dev

AntdAdmin 簡介

AntdAdmin 是一個致力于 中國信創 產業的前端開源框架,其底層技術棧主要以 React + Ant.design 為主。AntdAdmin 開源(或者計劃開源)的產品主要如下:

  • antd-admin:一個基于 React + Ant.Design 的中(后)臺 UI 框架(準備中...)。
  • antd-crud:一個基于 React + Ant.Design 的增刪改查高級組件(已開源:https://gitee.com/antdadmin/antd-crud )。
  • antd-bpmn:一個基于 React + Ant.Design 的工作流設計組件(已開源:https://gitee.com/antdadmin/antd-bpmn )。
  • antd-builder:一個基于 React + Ant.Design 的表單拖拽設計組件(準備中...)。
展開閱讀全文
點擊引領話題?? 發布并加入討論??
0 評論
1 收藏
分享
返回頂部
頂部
一本久久综合亚洲鲁鲁五月天,无翼乌口工全彩无遮挡H全彩,英语老师解开裙子坐我腿中间