0.1.33 • Published 3 years ago
@wangdahoo/antd-easy-listview v0.1.33
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
0.1.33
3 years ago
0.1.32
4 years ago
0.1.31
4 years ago
0.1.30
4 years ago
0.1.29
4 years ago
0.1.28
4 years ago
0.1.27
4 years ago
0.1.26
4 years ago
0.1.25
4 years ago
0.1.24
4 years ago
0.1.23
4 years ago
0.1.22
4 years ago
0.1.20
4 years ago
0.1.19
4 years ago
0.1.17
4 years ago
0.1.18
4 years ago
0.1.16
4 years ago
0.1.14
4 years ago
0.1.15
4 years ago
0.1.12
4 years ago
0.1.13
4 years ago
0.1.10
4 years ago
0.1.8
4 years ago
0.1.9
4 years ago
0.1.7
4 years ago
0.1.6
4 years ago
0.1.5
4 years ago
0.1.4
4 years ago
0.1.2
4 years ago
0.1.3
4 years ago
0.1.1
4 years ago
0.1.0
4 years ago