117 lines
3.1 KiB
TypeScript
117 lines
3.1 KiB
TypeScript
// components/EnhancedProTable/EnhancedProTable.tsx
|
|
|
|
import { PlusOutlined } from '@ant-design/icons';
|
|
import {
|
|
type ActionType,
|
|
type ParamsType,
|
|
ProTable,
|
|
} from '@ant-design/pro-components';
|
|
import { Button, Space, Table } from 'antd';
|
|
import React, { forwardRef, useCallback, useMemo, useState } from 'react';
|
|
import { formatPaginationTotal } from '@/utils/antd/tableHelpers';
|
|
import type { BaseRecord, EnhancedProTableProps } from './types';
|
|
|
|
function EnhancedProTable<T extends BaseRecord, U extends ParamsType = any>(
|
|
props: EnhancedProTableProps<T, U>,
|
|
ref: React.Ref<ActionType | undefined> | undefined,
|
|
) {
|
|
const {
|
|
columns,
|
|
request,
|
|
// actions = [],
|
|
// permissions = [],
|
|
checkPermission = () => true,
|
|
toolbarActions,
|
|
showIndex = true,
|
|
showSelection = true,
|
|
// showActions = true,
|
|
// maxActionCount = 2,
|
|
// onAdd,
|
|
// onEdit,
|
|
// onDelete,
|
|
// onView,
|
|
// onExport,
|
|
// customToolbarRender,
|
|
customActionRender,
|
|
rowKey = 'id',
|
|
...restProps
|
|
} = props;
|
|
|
|
const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
|
|
const [selectedRows, setSelectedRows] = useState<T[]>([]);
|
|
// 行选择配置
|
|
const rowSelection = useMemo(() => {
|
|
if (!showSelection) return undefined;
|
|
return {
|
|
selectedRowKeys,
|
|
selections: [Table.SELECTION_ALL, Table.SELECTION_INVERT],
|
|
onChange: (keys: React.Key[], rows: T[]) => {
|
|
setSelectedRowKeys(keys);
|
|
setSelectedRows(rows);
|
|
},
|
|
getCheckboxProps: (record: T) => ({
|
|
name: record[rowKey]?.toString(),
|
|
}),
|
|
};
|
|
}, [showSelection, selectedRowKeys]);
|
|
|
|
const toolBarRender = useCallback(() => {
|
|
const toolbarElements =
|
|
toolbarActions?.map((action) => {
|
|
return (
|
|
<Button
|
|
key={action.key}
|
|
type={action.type}
|
|
danger={action.danger}
|
|
disabled={action.disabled}
|
|
icon={<PlusOutlined />}
|
|
onClick={() => action.onClick(selectedRowKeys, selectedRows)}
|
|
>
|
|
{action.label}
|
|
</Button>
|
|
);
|
|
}) || [];
|
|
return toolbarElements;
|
|
}, [toolbarActions]);
|
|
return (
|
|
<ProTable<T, U>
|
|
{...restProps}
|
|
columns={columns}
|
|
actionRef={ref}
|
|
request={request}
|
|
rowKey={rowKey}
|
|
rowSelection={rowSelection}
|
|
toolBarRender={toolBarRender}
|
|
manualRequest={false}
|
|
showSorterTooltip
|
|
scroll={{ x: 'max-content' }}
|
|
search={{
|
|
labelWidth: 'auto',
|
|
defaultCollapsed: false,
|
|
...restProps.search,
|
|
}}
|
|
options={{
|
|
fullScreen: true,
|
|
reload: true,
|
|
setting: true,
|
|
density: true,
|
|
...restProps.options,
|
|
}}
|
|
pagination={{
|
|
showSizeChanger: true,
|
|
showQuickJumper: true,
|
|
pageSize: 10,
|
|
showTotal: formatPaginationTotal,
|
|
...restProps.pagination,
|
|
}}
|
|
/>
|
|
);
|
|
}
|
|
|
|
export default forwardRef(EnhancedProTable) as <
|
|
T extends BaseRecord,
|
|
U extends ParamsType = any,
|
|
>(
|
|
props: EnhancedProTableProps<T, U> & { ref?: React.Ref<ActionType> },
|
|
) => React.ReactElement;
|