55 lines
1.0 KiB
JavaScript
55 lines
1.0 KiB
JavaScript
import React from 'react';
|
|
import { Card, Descriptions } from 'antd';
|
|
import { getFieldLabel } from '../../../utils';
|
|
|
|
const InfoCard = ({
|
|
title,
|
|
data,
|
|
keyPrefix = 'item',
|
|
size = 'small',
|
|
column = 1,
|
|
bordered = true,
|
|
type = 'inner'
|
|
}) => {
|
|
|
|
if (!data ||
|
|
typeof data !== 'object' ||
|
|
Object.keys(data).length === 0) {
|
|
return null;
|
|
}
|
|
|
|
const items = Object.entries(data).map(([key, value]) => ({
|
|
key: `${keyPrefix}-${key}`,
|
|
label: getFieldLabel(key),
|
|
children: (() => {
|
|
if (value === null || value === undefined || value === '') {
|
|
return '-';
|
|
}
|
|
if (typeof value === 'object' && value !== null) {
|
|
if (Array.isArray(value)) {
|
|
return value.join(', ');
|
|
}
|
|
return JSON.stringify(value, null, 2);
|
|
}
|
|
return String(value);
|
|
})()
|
|
}));
|
|
|
|
return (
|
|
<Card
|
|
size={size}
|
|
title={title}
|
|
type={type}
|
|
style={{ marginBottom: 16 }}
|
|
>
|
|
<Descriptions
|
|
bordered={bordered}
|
|
column={column}
|
|
size={size}
|
|
items={items}
|
|
/>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export default InfoCard; |