antd-easy-listview

Easy ListView based on Ant Design

Usage

import '@wangdahoo/antd-easy-form/dist/index.css'
import { FormItemType } from '@wangdahoo/antd-easy-form'
import '@wangdahoo/antd-easy-listview/dist/index.css'
import { createListView, ListViewOptions, SelectFilter } from '@wangdahoo/antd-easy-listview'
import { getAllUsers, createUser, updateUser, deleteUsers, batchDeleteUsers, User } from './api'
import { Button, message } from 'antd'

const createFormItems = (props: any) => [
    {
        name: 'name',
        labelText: '姓名',
        itemType: FormItemType.INPUT,
        required: true,
        defaultValue: ''
    },
    {
        name: 'gender',
        labelText: '性别',
        itemType: FormItemType.RADIO,
        options: [
            {
                value: 1,
                text: '男'
            },
            {
                value: 0,
                text: '女'
            }
        ],
        defaultValue: 1,
        buttonStyle: 'solid'
    },
    {
        name: 'age',
        labelText: '年龄',
        itemType: FormItemType.NUMBER,
        min: 1,
        max: 200,
        step: 0.1,
        unit: '岁',
        defaultValue: 18
    },
    {
        name: 'city',
        labelText: '城市',
        itemType: FormItemType.SELECT,
        options: [
            {
                value: '上海',
                text: '上海'
            },
            {
                value: '北京',
                text: '北京'
            },
        ],
        defaultValue: '上海'
    }
]

const tableColumns = [
    {
        title: '#',
        key: '#',
        dataIndex: 'index',
        width: 50,
        align: 'center'
    },
    {
        title: '姓名',
        dataIndex: 'name',
        key: 'name',
        width: 100
    },
    {
        title: '性别',
        dataIndex: 'gender',
        key: 'gender',
        render: (value: number) => {
            return value === 1 ? '男' : '女'
        },
        width: 100,
        align: 'center'
    },
    {
        title: '年龄',
        dataIndex: 'age',
        key: 'age',
        render: (age: number) => `${age}岁`,
        width: 100,
        align: 'center'
    },
    {
        title: '城市',
        dataIndex: 'city',
        key: 'city',
        width: 100,
        align: 'center'
    },
    {
        key: 'dummy'
    }
]

const options = {
    itemName: '人员',
    createFormItems,
    updateFormItems: (record: User, props: any) => {
        return [
            {
                name: 'id',
                labelText: '人员 id',
                itemType: FormItemType.INPUT,
                required: true,
                defaultValue: record.id,
                hidden: true
            },

            ...createFormItems(props).map(item => ({
                ...item,
                ...(record[item.name] ? {
                    defaultValue: record[item.name]
                } : {})
            }))
        ]
    },
    tableWrapper: 'none' as 'card'|'none',
    tableColumns,
    filters: [
        'name',
        {
            name: 'gender',
            options: [
                {
                    value: 1,
                    text: '男'
                },
                {
                    value: 0,
                    text: '女'
                }
            ],
            labelText: '性别：',
            selectStyle: {
                width: 60
            }
        },
        {
            name: 'city',
            options: [
                {
                    value: '',
                    text: '请选择'
                },
            ],
            getOptions: function () {
                return new Promise((resolve, reject) => {
                    setTimeout(() => resolve([
                        {
                            value: '',
                            text: '请选择'
                        },
                        {
                            value: '上海',
                            text: '上海'
                        },
                        {
                            value: '北京',
                            text: '北京'
                        }
                    ]), 500)
                })
            },
            labelText: '城市：',
            selectStyle: {
                width: 100
            }
        },
    ] as (string | SelectFilter)[],
    fetchItems: getAllUsers,
    createItem: createUser,
    updateItem: updateUser,
    deleteItem: deleteUsers,
    batchDeleteEnabled: true,
    batchDeleteItems: batchDeleteUsers,
    exportEnabled: true,
    exportItems: console.log
} as Partial<ListViewOptions<User>>

export default createListView(options)

ListViewOptions Reference

here