From b043ed02dc8dd81a75f9c99ed2b276e03c71955b Mon Sep 17 00:00:00 2001 From: cp3hnu Date: Sat, 19 Oct 2024 09:51:38 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20Table=20cell=20render=20=E6=B7=BB?= =?UTF-8?q?=E5=8A=A0=E8=87=AA=E5=AE=9A=E4=B9=89=E8=BD=AC=E6=8D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/pages/ModelDeployment/List/index.tsx | 2 +- .../ModelDeployment/ServiceInfo/index.tsx | 15 ++----- react-ui/src/pages/Pipeline/index.jsx | 4 +- react-ui/src/utils/date.ts | 2 +- react-ui/src/utils/table.tsx | 44 ++++++++++--------- 5 files changed, 32 insertions(+), 35 deletions(-) diff --git a/react-ui/src/pages/ModelDeployment/List/index.tsx b/react-ui/src/pages/ModelDeployment/List/index.tsx index e6c77b18..7f73322d 100644 --- a/react-ui/src/pages/ModelDeployment/List/index.tsx +++ b/react-ui/src/pages/ModelDeployment/List/index.tsx @@ -189,7 +189,7 @@ function ModelDeployment() { dataIndex: 'index', key: 'index', width: '20%', - render: tableCellRender(false, TableCellValueType.PageIndex, { + render: tableCellRender(false, TableCellValueType.Index, { page: pagination.current! - 1, pageSize: pagination.pageSize!, }), diff --git a/react-ui/src/pages/ModelDeployment/ServiceInfo/index.tsx b/react-ui/src/pages/ModelDeployment/ServiceInfo/index.tsx index c00b1ea0..42b80e87 100644 --- a/react-ui/src/pages/ModelDeployment/ServiceInfo/index.tsx +++ b/react-ui/src/pages/ModelDeployment/ServiceInfo/index.tsx @@ -30,7 +30,6 @@ import { Input, Select, Table, - Tooltip, type TablePaginationConfig, type TableProps, } from 'antd'; @@ -222,7 +221,7 @@ function ServiceInfo() { dataIndex: 'index', key: 'index', width: '20%', - render: tableCellRender(false, TableCellValueType.PageIndex, { + render: tableCellRender(false, TableCellValueType.Index, { page: pagination.current! - 1, pageSize: pagination.pageSize!, }), @@ -269,15 +268,9 @@ function ServiceInfo() { dataIndex: 'resource', key: 'resource', width: '20%', - render: (resource: string) => ( - - {resource ? getResourceDescription(resource) : '--'} - - ), + render: tableCellRender(true, TableCellValueType.Custom, { + format: getResourceDescription, + }), ellipsis: { showTitle: false }, }, { diff --git a/react-ui/src/pages/Pipeline/index.jsx b/react-ui/src/pages/Pipeline/index.jsx index 4374b24c..0d1faf6c 100644 --- a/react-ui/src/pages/Pipeline/index.jsx +++ b/react-ui/src/pages/Pipeline/index.jsx @@ -112,9 +112,9 @@ const Pipeline = () => { key: 'index', width: 120, align: 'center', - render: tableCellRender(false, TableCellValueType.PageIndex, { + render: tableCellRender(false, TableCellValueType.Index, { page: pageOption.current.page - 1, - size: pageOption.current.size, + pageSize: pageOption.current.size, }), }, { diff --git a/react-ui/src/utils/date.ts b/react-ui/src/utils/date.ts index 50b9e7e7..fbc83e35 100644 --- a/react-ui/src/utils/date.ts +++ b/react-ui/src/utils/date.ts @@ -79,7 +79,7 @@ export const canBeConvertToDate = (date?: Date | string | number | null): boolea * @return {string} The formatted date string. */ export const formatDate = ( - date?: Date | string | number | null, + date: Date | string | number | null | undefined, format: string = 'YYYY-MM-DD HH:mm:ss', ): string => { if (date === undefined || date === null || date === '') { diff --git a/react-ui/src/utils/table.tsx b/react-ui/src/utils/table.tsx index 1353fe09..0d4b1927 100644 --- a/react-ui/src/utils/table.tsx +++ b/react-ui/src/utils/table.tsx @@ -10,32 +10,36 @@ import dayjs from 'dayjs'; export enum TableCellValueType { Index = 'Index', - PageIndex = 'PageIndex', Text = 'Text', Date = 'Date', Array = 'Array', Link = 'Link', + Custom = 'Custom', } export type TableCellValueOptions = { - page?: number; - pageSize?: number; - property?: string; - onClick?: (record: T, e: React.MouseEvent) => void; + page?: number; // 类型为 Index 时有效 + pageSize?: number; // 类型为 Index 时有效 + property?: string; // 类型为 Array 时有效 + dateFormat?: string; // 类型为 Date 时有效 + onClick?: (record: T, e: React.MouseEvent) => void; // 类型为 Link 时有效 + format?: (value: any | undefined | null, record: T, index: number) => string | undefined | null; // 类型为 Custom 时有效 }; type TableCellFormatter = (value: any | undefined | null) => string | undefined | null; // 日期转换函数 -const formatDateText: TableCellFormatter = (value?: any | null) => { - if (value === undefined || value === null || value === '') { - return null; - } - if (!dayjs(value).isValid()) { - return null; - } - return formatDate(value); -}; +function formatDateText(dateFormat?: string): TableCellFormatter { + return (value: any | undefined | null): ReturnType => { + if (value === undefined || value === null || value === '') { + return null; + } + if (!dayjs(value).isValid()) { + return null; + } + return formatDate(value, dateFormat); + }; +} /** * 数组转换函数，将数组元素转换为字符串，用逗号分隔 @@ -43,7 +47,7 @@ const formatDateText: TableCellFormatter = (value?: any | null) => { * @returns {TableCellFormatter} Table cell 渲染函数 */ function formatArray(property?: string): TableCellFormatter { - return (value?: any | null): ReturnType => { + return (value: any | undefined | null): ReturnType => { if ( value === undefined || value === null || @@ -68,21 +72,21 @@ function tableCellRender( let text = value; switch (type) { case TableCellValueType.Index: - text = index + 1; - break; - case TableCellValueType.PageIndex: - text = (options?.page ?? 1) * (options?.pageSize ?? 10) + index + 1; + text = (options?.page ?? 0) * (options?.pageSize ?? 0) + index + 1; break; case TableCellValueType.Text: case TableCellValueType.Link: text = value; break; case TableCellValueType.Date: - text = formatDateText(value); + text = formatDateText(options?.dateFormat)(value); break; case TableCellValueType.Array: text = formatArray(options?.property)(value); break; + case TableCellValueType.Custom: + text = options?.format?.(value, record, index); + break; default: break; }