一、概述
一个列表页面一般包括:页面的标题、面包屑(即页面路径)、页面的tab标签(可选)、工具栏按纽、表格(带高级搜索,排序等功能)、底部悬浮操作栏等。
这就需要用到:
(1)页面容器组件PageContainer: 自带标题、面包屑、tab标签栏、右上角公用操作按纽栏、底部按纽操作栏。
(2)高级表格组件ProTable: 自带搜索查询(高级查询)、表格分页、排序、列设置、刷新、全屏等功能及与服务端交互的能力。
三、代码重点分析:
(1)页面容器组件PageContainer :
<PageContainer
content="欢迎使用 ProLayout 组件"
tabList={[
{
tab: '基本信息',
key: 'base',
},
{
tab: '详细信息',
key: 'info',
},
]}
extra={[
<Button key="3">操作</Button>,
<Button key="2">操作</Button>,
<Button key="1" type="primary">
主操作
</Button>,
]}
footer={[
<Button key="rest">重置</Button>,
<Button key="submit" type="primary">
提交
</Button>,
]}
>
{children}
</PageContainer>
(2)高级表格组件ProTable:
import React, { useRef } from 'react';
import { PlusOutlined, EllipsisOutlined } from '@ant-design/icons';
import { Button, Tag, Space, Menu, Dropdown } from 'antd';
import type { ProColumns, ActionType } from '@ant-design/pro-table';
import ProTable, { TableDropdown } from '@ant-design/pro-table';
import request from 'umi-request';
type GithubIssueItem = {
url: string;
id: number;
number: number;
title: string;
labels: {
name: string;
color: string;
}[];
state: string;
comments: number;
created_at: string;
updated_at: string;
closed_at?: string;
};
const columns: ProColumns<GithubIssueItem>[] = [
{
dataIndex: 'index',
valueType: 'indexBorder',
width: 48,
},
{
title: '标题',
dataIndex: 'title',
copyable: true,
ellipsis: true,
tip: '标题过长会自动收缩',
formItemProps: {
rules: [
{
required: true,
message: '此项为必填项',
},
],
},
},
{
title: '状态',
dataIndex: 'state',
filters: true,
onFilter: true,
valueType: 'select',
valueEnum: {
all: { text: '全部', status: 'Default' },
open: {
text: '未解决',
status: 'Error',
},
closed: {
text: '已解决',
status: 'Success',
disabled: true,
},
processing: {
text: '解决中',
status: 'Processing',
},
},
},
{
title: '标签',
dataIndex: 'labels',
search: false,
renderFormItem: (_, { defaultRender }) => {
return defaultRender(_);
},
render: (_, record) => (
<Space>
{record.labels.map(({ name, color }) => (
<Tag color={color} key={name}>
{name}
</Tag>
))}
</Space>
),
},
{
title: '创建时间',
key: 'showTime',
dataIndex: 'created_at',
valueType: 'date',
sorter: true,
hideInSearch: true,
},
{
title: '创建时间',
dataIndex: 'created_at',
valueType: 'dateRange',
hideInTable: true,
search: {
transform: (value) => {
return {
startTime: value[0],
endTime: value[1],
};
},
},
},
{
title: '操作',
valueType: 'option',
render: (text, record, _, action) => [
<a
key="editable"
onClick={() => {
action?.startEditable?.(record.id);
}}
>
编辑
</a>,
<a href={record.url} target="_blank" rel="noopener noreferrer" key="view">
查看
</a>,
<TableDropdown
key="actionGroup"
onSelect={() => action?.reload()}
menus={[
{ key: 'copy', name: '复制' },
{ key: 'delete', name: '删除' },
]}
/>,
],
},
];
const menu = (
<Menu>
<Menu.Item key="1">1st item</Menu.Item>
<Menu.Item key="2">2nd item</Menu.Item>
<Menu.Item key="3">3rd item</Menu.Item>
</Menu>
);
export default () => {
const actionRef = useRef<ActionType>();
return (
<ProTable<GithubIssueItem>
columns={columns}
actionRef={actionRef}
request={async (params = {}, sort, filter) => {
console.log(sort, filter);
return request<{
data: GithubIssueItem[];
}>('https://proapi.azurewebsites.net/github/issues', {
params,
});
}}
editable={{
type: 'multiple',
}}
rowKey="id"
search={{
labelWidth: 'auto',
}}
form={{
// 由于配置了 transform,提交的参与与定义的不同这里需要转化一下
syncToUrl: (values, type) => {
if (type === 'get') {
return {
...values,
created_at: [values.startTime, values.endTime],
};
}
return values;
},
}}
pagination={{
pageSize: 5,
}}
dateFormatter="string"
headerTitle="高级表格"
toolBarRender={() => [
<Button key="button" icon={<PlusOutlined />} type="primary">
新建
</Button>,
<Dropdown key="menu" overlay={menu}>
<Button>
<EllipsisOutlined />
</Button>
</Dropdown>,
]}
/>
);
};