|
|
|
|
@ -1,4 +1,4 @@
|
|
|
|
|
import React, { useEffect, useState } from 'react';
|
|
|
|
|
import React, { useEffect, useState, useMemo } from 'react';
|
|
|
|
|
import styles from './style/index.module.less';
|
|
|
|
|
import {
|
|
|
|
|
Button,
|
|
|
|
|
@ -129,8 +129,27 @@ const HandleModal = ({ visible, onChangeVisible, onRefresh }) => {
|
|
|
|
|
const EventContainer = () => {
|
|
|
|
|
const [eventData, setEventData] = useState<any[]>([]);
|
|
|
|
|
const [visible, setVisible] = useState(false);
|
|
|
|
|
const [searchValue, setSearchValue] = useState('');
|
|
|
|
|
const { info } = useSelector((state: any) => state.ideContainer);
|
|
|
|
|
|
|
|
|
|
// 根据搜索值过滤事件数据
|
|
|
|
|
const filteredEventData = useMemo(() => {
|
|
|
|
|
if (!searchValue) return eventData;
|
|
|
|
|
|
|
|
|
|
return eventData.filter(item => {
|
|
|
|
|
const name = item.name || '';
|
|
|
|
|
const topic = item.topic || '';
|
|
|
|
|
const desc = item.description || '';
|
|
|
|
|
|
|
|
|
|
const searchLower = searchValue.toLowerCase();
|
|
|
|
|
return (
|
|
|
|
|
name.toLowerCase().includes(searchLower) ||
|
|
|
|
|
topic.toLowerCase().includes(searchLower) ||
|
|
|
|
|
desc.toLowerCase().includes(searchLower)
|
|
|
|
|
);
|
|
|
|
|
});
|
|
|
|
|
}, [eventData, searchValue]);
|
|
|
|
|
|
|
|
|
|
const columns: TableColumnProps[] = [
|
|
|
|
|
{
|
|
|
|
|
title: '序号',
|
|
|
|
|
@ -217,6 +236,23 @@ const EventContainer = () => {
|
|
|
|
|
if (res && res.code === 200) setEventData(res.data.filter(item => !item.topic.includes('**empty**')));
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 处理搜索输入变化
|
|
|
|
|
const handleSearchChange = (value: string) => {
|
|
|
|
|
setSearchValue(value);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 处理搜索,这里可以添加防抖等优化
|
|
|
|
|
const handleSearch = () => {
|
|
|
|
|
// 搜索逻辑已经在 useMemo 中实现
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 处理回车键搜索
|
|
|
|
|
const handleKeyPress = (e: React.KeyboardEvent) => {
|
|
|
|
|
if (e.key === 'Enter') {
|
|
|
|
|
handleSearch();
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
if (info.id) {
|
|
|
|
|
fetchEventData();
|
|
|
|
|
@ -234,6 +270,9 @@ const EventContainer = () => {
|
|
|
|
|
prefix={<IconSearch />}
|
|
|
|
|
placeholder={'搜索'}
|
|
|
|
|
style={{ width: 236 }}
|
|
|
|
|
value={searchValue}
|
|
|
|
|
onChange={handleSearchChange}
|
|
|
|
|
onPressEnter={handleSearch}
|
|
|
|
|
/>
|
|
|
|
|
<Button
|
|
|
|
|
type="primary"
|
|
|
|
|
@ -247,7 +286,7 @@ const EventContainer = () => {
|
|
|
|
|
</div>
|
|
|
|
|
{/*数据列表*/}
|
|
|
|
|
<div className={styles['event-list']}>
|
|
|
|
|
<Table columns={columns} data={eventData} pagination={false} />
|
|
|
|
|
<Table columns={columns} data={filteredEventData} pagination={false} />
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{visible &&
|
|
|
|
|
|