// src/components/SearchResultList.tsx
import React, { useState, useEffect } from 'react';
import { List, Card, Typography, Tag, Space } from 'antd';
import { message } from 'antd';
import CustomPagination from './CustomPagination'; // 自定义分页组件
const { Title, Text, Paragraph } = Typography;
interface AssetsItem {
id: string;
dsName: string;
dsTableName: string;
dsType: string;
areaId: string;
areaName: string;
sysId: string;
sysName: string;
bussinessObjName: string;
bussinessObjId: string;
processPointName: string;
dsOwnerName: string;
dsOwnerNum: string;
isConfirm: string;
dsMemo: string;
dsRange: string;
tags: string;
demoFileName: string;
demoOssFilePath: string;
createUser: string;
}
interface ApiResponse {
list: AssetsItem[];
total: number;
}
interface SearchResultListProps {
keyword: string | null;
}
// 高亮函数
const highlightKeyword = (text: string, keyword: string | null): React.ReactNode => {
if (!keyword || !text || typeof text !== 'string') return text;
const regex = new RegExp(`(${keyword})`, 'gi');
const parts = text.split(regex);
return parts.map((part, index) =>
part.toLowerCase() === keyword.toLowerCase() ? (
<span key={index} style={{ color: 'red', fontWeight: 'bold' }}>
{part}
</span>
) : (
part
)
);
};
// 预览函数
const handlePreview = (url: string) => {
if (url) {
const base64Url = btoa(unescape(encodeURIComponent(url)));
window.open('http://10.255.96.51:8012/onlinePreview?url=' + encodeURIComponent(base64Url));
} else {
message.error('无法预览文件');
}
};
const SearchResultList: React.FC<SearchResultListProps> = ({ keyword }) => {
const [currentPage, setCurrentPage] = useState(1);
const [pageSize] = useState(10); // 固定每页条数
const [results, setResults] = useState<AssetsItem[]>([]);
const [total, setTotal] = useState(0);
const [loading, setLoading] = useState(false);
// 请求数据
useEffect(() => {
if (!keyword) return;
setLoading(true);
fetch(`/ds/dsbaseinfo/globalSearchAssets`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
keywords: keyword,
pageNum: currentPage,
pageSize,
}),
})
.then((res) => res.json())
.then((data: ApiResponse) => {
setResults(data.list || []);
setTotal(data.total || 0);
})
.catch((err) => {
console.error('请求失败:', err);
message.error('请求失败');
})
.finally(() => {
setLoading(false);
});
}, [keyword, currentPage]);
const handlePageChange = (page: number) => {
setCurrentPage(page);
};
const isEmpty = !results || results.length === 0;
return (
<div>
{loading && <div>加载中...</div>}
{isEmpty && !loading && (
<div style={{
textAlign: 'left',
padding: '50px 20px',
color: '#999',
fontSize: '16px',
}}>
您搜索的关键词暂无相关数据资产
</div>
)}
{!isEmpty && (
<>
<List
dataSource={results}
renderItem={(item) => (
<List.Item style={{ marginBottom: -5 }} key={item.id}>
<Card style={{ width: '100%', padding: 10 }} bodyStyle={{ padding: 5 }}>
<Title level={4}>
<a href="#">{highlightKeyword(item.dsName, keyword)}</a>&
nbsp;&
nbsp;&
nbsp;
{item.isConfirm === 'true' ? (
<Tag color="red" key={item.id}>
数据已确认
</Tag>
) : null}
</Title>
<Text type="secondary">{highlightKeyword(item.dsTableName, keyword)}</Text>
<div style={{ margin: '8px 0' }}>
{item.tags.split('，').map((tag, index) => (
<Tag color="blue" key={index}>
{highlightKeyword(tag, keyword)}
</Tag>
))}
</div>
<Paragraph>{highlightKeyword(item.dsMemo, keyword)}</Paragraph>
<Space direction="vertical" size="small">
{/*新增资产详情页 所以里面要缩减*/}
{/*<Text>*/}
{/* 范围：<Text strong>{highlightKeyword(item.dsRange, keyword)}</Text>*/}
{/*</Text>*/}
{/*<Text>*/}
{/* 领域：<Text strong>{highlightKeyword(item.areaName, keyword)}</Text> &
nbsp;&
nbsp;&
nbsp;*/}
{/* 系统：<Text strong>{highlightKeyword(item.sysName, keyword)}</Text> &
nbsp;&
nbsp;&
nbsp;*/}
{/* 对象：<Text strong>{highlightKeyword(item.bussinessObjName, keyword)}</Text> &
nbsp;&
nbsp;&
nbsp;*/}
{/* 流程：<Text strong>{highlightKeyword(item.processPointName, keyword)}</Text>*/}
{/*</Text>*/}
{/*<Text>*/}
{/* 创建人：<Text strong>{highlightKeyword(item.createUser, keyword)}</Text>*/}
{/*</Text>*/}
{/*<Text>*/}
{/* 数据Owner：<Text strong>{highlightKeyword(item.dsOwnerName, keyword)}</Text>*/}
{/*</Text>*/}
{/*<Text>*/}
{/* 类型：<Text strong>{highlightKeyword(item.dsType, keyword)}</Text>*/}
{/*</Text>*/}
{/* 如果有样例文件则显示 */}
{item.demoFileName && item.demoFileName !== '' ? (
<Text>
样例数据：{' '}
<a href="#">{highlightKeyword(item.demoFileName, keyword)}</a>
&
nbsp;&
nbsp;&
nbsp;&
nbsp;&
nbsp;
<span
onClick={() => handlePreview(item.demoOssFilePath)}
style={{ color: 'blue', cursor: 'pointer', marginRight: 10 }}
>
预览
</span>
&
nbsp;&
nbsp;&
nbsp;
<span>
<a href={item.demoOssFilePath}>下载</a>
</span>
</Text>
) : null}
</Space>
</Card>
</List.Item>
)}
/>
<CustomPagination
current={currentPage}
total={total}
pageSize={pageSize}
onPageChange={handlePageChange}
/>
</>
)}
</div>
);
};
export default SearchResultList;
以上代码打开页面时 不能滚动，刷新一下就好了 ant design pro
介绍IE5.5新增的滚动条样式属性，包括显示控制与颜色自定义，适用于浏览器窗口及多行文本框。
扫一扫
436
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
