tuyeetable v1.0.4

對 umi 的 ProTable 進行了拓展和美化樣式和邏輯，新增 “增”、“刪”、“改”，快速開始 CURD，能夠大幅提高前端開發人員的效率。

📦 Install

npm install tuyeetable

yarn add tuyeetable

🔨 Usage

import * as React from "react";
import { Alert, message } from 'antd';
import TuyeeTable, { TuyeeTableProps, cudProps } from 'tuyeetable';
import { ProFormText } from '@ant-design/pro-form';


//生成mock數據
const valueEnum = {
    0: 'close',
    1: 'running',
    2: 'online',
    3: 'error',
};

export type TableListItem = {
    key: number;
    name: string;
    containers: number;
    creator: string;
    status: string;
    createdAt: number;
    memo: string;
};
const tableListDataSource: TableListItem[] = [];

const creators = ['付小小', '曲丽丽', '林东东', '陈帅帅', '兼某某'];

for (let i = 0; i < 5; i += 1) {
    tableListDataSource.push({
        key: i,
        name: 'AppName',
        containers: Math.floor(Math.random() * 20),
        creator: creators[Math.floor(Math.random() * creators.length)],
        status: valueEnum[Math.floor(Math.random() * 10) % 4],
        createdAt: Date.now() - Math.floor(Math.random() * 100000),
        memo: i % 2 === 1 ? '很长很长很长很长很长很长很长的文字要展示但是要留下尾巴' : '简短备注文案',
    });
}



const page: React.FC = () => {

    const cudProps: cudProps = {
        post: {
            forms: [
                {
                    title: "案例一：JSON表單（SchemaForm，快捷）",
                    type: "json",
                    columns: [{
                        title: "應用名稱",
                        dataIndex: "name",
                        formItemProps: {
                            rules: [
                                {
                                    required: true
                                }
                            ]
                        }
                    }],
                    onFinish: async value => {
                        message.success(JSON.stringify(value))
                        return true;
                    }
                },
                {
                    title: "案例二：高度自定義的表單（推薦）",
                    type: "custom",
                    columns: [
                        {
                            compt: form => <ProFormText label="ProForm 自帶表單元素" name="ProForm" rules={[{ required: true }]} />
                        },
                        {
                            renderFormItem: {
                                label: "自定義組件，並且渲染出FormItem",
                                name: "diyValue",
                                rules: [{
                                    required: true
                                }]
                            },
                            compt: form => <div style={{ background: '#f50', padding: 20, color: "#fff" }} onClick={() => {
                                form.setFieldsValue({ diyValue: "我愛tuyeeTable" });
                                message.success("成功設置了diyValue的值")
                            }}>
                                我是自定義組件，由一個 div 組成，我通過 renderFormItem 渲染了 ProForm.Item 元素，點我可以設置表單的 diyValue 的值
                            </div>
                        },
                        {
                            compt: form => <Alert message="我是一個 antd 組件，我沒有設置 renderFormItem 參數，沒有渲染 ProForm.Item 元素，沒有處理任何東西" closable />
                        }
                    ],
                    onFinish: async value => {
                        message.success(JSON.stringify(value))
                        return true;
                    }
                }
            ],
            title: "案例"
        },
        update: {
            onFinish: async (key, data) => {
                message.success(JSON.stringify(data));
                return true;
            },
            isPatch: { addKey: true }
        },
        delete: {
            onFinish: async (row, action) => {
                message.success(JSON.stringify(row));
                return true;
            }
        }
    };


    const tableProps: TuyeeTableProps = {
        rowKey: "key",
        columns: [
            {
                title: '应用名称',
                dataIndex: 'name',
            },
            {
                title: '创建者',
                dataIndex: 'creator',
                valueType: 'select',
                valueEnum: {
                    all: { text: '全部' },
                    付小小: { text: '付小小' },
                    曲丽丽: { text: '曲丽丽' },
                    林东东: { text: '林东东' },
                    陈帅帅: { text: '陈帅帅' },
                    兼某某: { text: '兼某某' },
                },
            },
            {
                title: "创建时间",
                tooltip: "这是一段描述",
                dataIndex: 'createdAt',
                valueType: "dateTime",
                sorter: (a, b) => a.createdAt - b.createdAt,
            },
            {
                title: "操作",
                valueType: "option",
                render: (_, row) => [<a onClick={() => alert(row.creator)}>操作一</a>]
            },
            {
                title: "操作",
                valueType: "option",
                render: (_, row) => [<a onClick={() => alert(row.createdAt)}>操作二</a>]
            },
        ],
        search: {},
        request: (params, sorter, filter) => Promise.resolve({ data: tableListDataSource, success: true }),
        pagination: {},

        /**
         * new api
         */
        cudProps
    };

    return <TuyeeTable {...tableProps} />;
}

export default page;

⌨️ Development

$ git clone git@github.com:tuyeye/TuyeeTable.git
$ cd TuyeeTable
$ npm install
$ npm start

Open your browser and visit http://127.0.0.1:3333

🏆 Props（ProTableProps & EditableProTableProps & cudProps）

ProTableProps & EditableProTableProps :https://procomponents.ant.design/components/table#api

cudProps

cudProps.post

cudProps.post.formsSingle

cudProps.post.formsSingle.CustomForm

cudProps.delete

cudProps.update