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;
}