admin/yunrui_asset
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(设备搜索): 为设备选择器添加防抖搜索功能

Browse Source
This commit is contained in:
zhang1106
2026-03-03 10:51:51 +08:00
parent c36ee75e49
commit ef8f3ab565
4 changed files with 215 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/CableCreateModal.jsx
+54 -23
View File
@@ -5,6 +5,18 @@ import axios from 'axios';
const { Option } = Select;
const debounce = (func, wait) => {
let timeout;
return function executedFunction(...args) {
const later = () => {
clearTimeout(timeout);
func(...args);
};
clearTimeout(timeout);
timeout = setTimeout(later, wait);
};
};
const CableCreateModal = ({ visible, onClose, onSuccess, sourceDevice }) => {
const [form] = Form.useForm();
const [loading, setLoading] = useState(false);
@@ -14,6 +26,30 @@ const CableCreateModal = ({ visible, onClose, onSuccess, sourceDevice }) => {
const [fetchingDevices, setFetchingDevices] = useState(false);
const prevVisibleRef = useRef(false);
const fetchDevices = useCallback(async (keyword = '') => {
try {
setFetchingDevices(true);
const params = { pageSize: 50 };
if (keyword && keyword.trim()) {
params.keyword = keyword.trim();
}
const response = await axios.get('/api/devices', { params });
setDevices(response.data.devices || []);
} catch (error) {
console.error('Failed to fetch devices:', error);
message.error('获取设备列表失败');
} finally {
setFetchingDevices(false);
}
}, []);
const handleDeviceSearch = useCallback(
debounce(value => {
fetchDevices(value);
}, 300),
[fetchDevices]
);
// Initialize when visible changes from false to true
useEffect(() => {
if (visible && !prevVisibleRef.current) {
@@ -27,20 +63,7 @@ const CableCreateModal = ({ visible, onClose, onSuccess, sourceDevice }) => {
fetchDevices();
}
prevVisibleRef.current = visible;
}, [visible, sourceDevice, form]);
const fetchDevices = async () => {
try {
setFetchingDevices(true);
const response = await axios.get('/api/devices', { params: { pageSize: 1000 } });
setDevices(response.data.devices || []);
} catch (error) {
console.error('Failed to fetch devices:', error);
message.error('获取设备列表失败');
} finally {
setFetchingDevices(false);
}
};
}, [visible, sourceDevice, form, fetchDevices]);
const fetchDevicePorts = async (deviceId, type) => {
if (!deviceId) {
@@ -136,14 +159,18 @@ const CableCreateModal = ({ visible, onClose, onSuccess, sourceDevice }) => {
rules={[{ required: true, message: '请选择源设备' }]}
>
<Select
placeholder="选择源设备"
placeholder="输入关键词搜索源设备"
showSearch
filterOption={(input, option) =>
(option?.children ?? '').toLowerCase().includes(input.toLowerCase())
}
filterOption={false}
onSearch={handleDeviceSearch}
onDropdownVisibleChange={open => {
if (open && devices.length === 0) {
fetchDevices();
}
}}
onChange={handleSourceDeviceChange}
loading={fetchingDevices}
disabled={!!sourceDevice} // Lock source device if provided
disabled={!!sourceDevice}
>
{devices.map(d => (
<Option key={d.deviceId} value={d.deviceId}>
@@ -176,11 +203,15 @@ const CableCreateModal = ({ visible, onClose, onSuccess, sourceDevice }) => {
rules={[{ required: true, message: '请选择目标设备' }]}
>
<Select
placeholder="选择目标设备"
placeholder="输入关键词搜索目标设备"
showSearch
filterOption={(input, option) =>
(option?.children ?? '').toLowerCase().includes(input.toLowerCase())
}
filterOption={false}
onSearch={handleDeviceSearch}
onDropdownVisibleChange={open => {
if (open && devices.length === 0) {
fetchDevices();
}
}}
onChange={handleTargetDeviceChange}
loading={fetchingDevices}
>
frontend/src/pages/CableManagement.jsx
+53 -20
View File
@@ -57,6 +57,18 @@ const { Panel } = Collapse;
const { Text, Title } = Typography;
const { TextArea } = Input;
const debounce = (func, wait) => {
let timeout;
return function executedFunction(...args) {
const later = () => {
clearTimeout(timeout);
func(...args);
};
clearTimeout(timeout);
timeout = setTimeout(later, wait);
};
};
// 设计令牌 - 现代化配色方案
const designTokens = {
colors: {
@@ -171,6 +183,7 @@ const animations = {
function CableManagement() {
const [cables, setCables] = useState([]);
const [devices, setDevices] = useState([]);
const [deviceSearching, setDeviceSearching] = useState(false);
const [switchDevices, setSwitchDevices] = useState([]);
const [groupedCables, setGroupedCables] = useState({});
const [devicePorts, setDevicePorts] = useState({});
@@ -262,9 +275,14 @@ function CableManagement() {
}
}, [filters, devicePorts]);
const fetchDevices = useCallback(async () => {
const fetchDevices = useCallback(async (keyword = '') => {
try {
const response = await axios.get('/api/devices', { params: { pageSize: 100 } });
setDeviceSearching(true);
const params = { pageSize: 50 };
if (keyword && keyword.trim()) {
params.keyword = keyword.trim();
}
const response = await axios.get('/api/devices', { params });
const allDevices = response.data.devices || [];
const switches = allDevices.filter(device => device.type === 'switch');
setDevices(allDevices);
@@ -272,9 +290,18 @@ function CableManagement() {
} catch (error) {
message.error('获取设备列表失败');
console.error('获取设备列表失败:', error);
} finally {
setDeviceSearching(false);
}
}, []);
const handleDeviceSearch = useCallback(
debounce(value => {
fetchDevices(value);
}, 300),
[fetchDevices]
);
const fetchDevicePorts = useCallback(async deviceId => {
if (!deviceId) {
setDevicePorts(prev => ({ ...prev, [deviceId]: [] }));
@@ -886,17 +913,19 @@ function CableManagement() {
交换机
</div>
<Select
placeholder="选择交换机"
placeholder="输入关键词搜索交换机"
style={{ width: '100%' }}
value={filters.switchDeviceId || undefined}
onChange={value => setFilters(prev => ({ ...prev, switchDeviceId: value }))}
allowClear
showSearch
filterOption={(input, option) => {
const device = switchDevices.find(d => d.deviceId === option.value);
if (!device) return false;
const searchText = `${device.name} ${device.deviceId}`.toLowerCase();
return searchText.indexOf(input.toLowerCase()) >= 0;
loading={deviceSearching}
filterOption={false}
onSearch={handleDeviceSearch}
onDropdownVisibleChange={open => {
if (open && switchDevices.length === 0) {
fetchDevices();
}
}}
suffixIcon={<AppstoreOutlined />}
>
@@ -1288,13 +1317,15 @@ function CableManagement() {
rules={[{ required: true, message: '请选择源设备' }]}
>
<Select
placeholder="请选择源设备"
placeholder="输入关键词搜索源设备"
showSearch
filterOption={(input, option) => {
const device = switchDevices.find(d => d.deviceId === option.value);
if (!device) return false;
const searchText = `${device.name} ${device.deviceId}`.toLowerCase();
return searchText.indexOf(input.toLowerCase()) >= 0;
loading={deviceSearching}
filterOption={false}
onSearch={handleDeviceSearch}
onDropdownVisibleChange={open => {
if (open && switchDevices.length === 0) {
fetchDevices();
}
}}
onChange={value => {
fetchDevicePorts(value);
@@ -1353,13 +1384,15 @@ function CableManagement() {
rules={[{ required: true, message: '请选择目标设备' }]}
>
<Select
placeholder="请选择目标设备"
placeholder="输入关键词搜索目标设备"
showSearch
filterOption={(input, option) => {
const device = devices.find(d => d.deviceId === option.value);
if (!device) return false;
const searchText = `${device.name} ${device.deviceId}`.toLowerCase();
return searchText.indexOf(input.toLowerCase()) >= 0;
loading={deviceSearching}
filterOption={false}
onSearch={handleDeviceSearch}
onDropdownVisibleChange={open => {
if (open && devices.length === 0) {
fetchDevices();
}
}}
onChange={value => {
fetchDevicePorts(value);
frontend/src/pages/PortManagement.jsx
+45 -14
View File
@@ -59,6 +59,18 @@ const { Panel } = Collapse;
const { Text, Title } = Typography;
const { TextArea } = Input;
const debounce = (func, wait) => {
let timeout;
return function executedFunction(...args) {
const later = () => {
clearTimeout(timeout);
func(...args);
};
clearTimeout(timeout);
timeout = setTimeout(later, wait);
};
};
// 设计令牌 - 与接线管理页面保持一致
const designTokens = {
colors: {
@@ -149,6 +161,7 @@ const animations = {
function PortManagement() {
const [ports, setPorts] = useState([]);
const [devices, setDevices] = useState([]);
const [deviceSearching, setDeviceSearching] = useState(false);
const [cables, setCables] = useState([]);
const [groupedPorts, setGroupedPorts] = useState({});
const [loading, setLoading] = useState(false);
@@ -217,16 +230,30 @@ function PortManagement() {
}
}, [filters]);
const fetchDevices = useCallback(async () => {
const fetchDevices = useCallback(async (keyword = '') => {
try {
const response = await axios.get('/api/devices', { params: { pageSize: 100 } });
setDeviceSearching(true);
const params = { pageSize: 50 };
if (keyword && keyword.trim()) {
params.keyword = keyword.trim();
}
const response = await axios.get('/api/devices', { params });
setDevices(response.data.devices || response.data || []);
} catch (error) {
message.error('获取设备列表失败');
console.error('获取设备列表失败:', error);
} finally {
setDeviceSearching(false);
}
}, []);
const handleDeviceSearch = useCallback(
debounce(value => {
fetchDevices(value);
}, 300),
[fetchDevices]
);
const fetchCables = useCallback(async () => {
try {
const response = await axios.get('/api/cables');
@@ -772,17 +799,19 @@ function PortManagement() {
设备
</div>
<Select
placeholder="选择设备"
placeholder="输入关键词搜索设备"
style={{ width: '100%' }}
value={filters.deviceId || undefined}
onChange={value => setFilters(prev => ({ ...prev, deviceId: value }))}
allowClear
showSearch
filterOption={(input, option) => {
const device = devices.find(d => d.deviceId === option.value);
if (!device) return false;
const searchText = `${device.name} ${device.deviceId}`.toLowerCase();
return searchText.indexOf(input.toLowerCase()) >= 0;
loading={deviceSearching}
filterOption={false}
onSearch={handleDeviceSearch}
onDropdownVisibleChange={open => {
if (open && devices.length === 0) {
fetchDevices();
}
}}
>
{devices.map(device => (
@@ -1222,13 +1251,15 @@ function PortManagement() {
rules={[{ required: true, message: '请选择设备' }]}
>
<Select
placeholder="请选择设备"
placeholder="输入关键词搜索设备"
showSearch
filterOption={(input, option) => {
const device = devices.find(d => d.deviceId === option.value);
if (!device) return false;
const searchText = `${device.name} ${device.deviceId}`.toLowerCase();
return searchText.indexOf(input.toLowerCase()) >= 0;
loading={deviceSearching}
filterOption={false}
onSearch={handleDeviceSearch}
onDropdownVisibleChange={open => {
if (open && devices.length === 0) {
fetchDevices();
}
}}
>
{devices.map(device => (
frontend/src/pages/TicketManagement.jsx
+63 -8
View File
@@ -46,6 +46,18 @@ import axios from 'axios';
import dayjs from 'dayjs';
import { useSearchParams } from 'react-router-dom';
const debounce = (func, wait) => {
let timeout;
return function executedFunction(...args) {
const later = () => {
clearTimeout(timeout);
func(...args);
};
clearTimeout(timeout);
timeout = setTimeout(later, wait);
};
};
// 安全地从 localStorage 获取用户信息
const getUserFromStorage = () => {
try {
@@ -305,15 +317,32 @@ function TicketManagement() {
[searchFilters]
);
const fetchDevices = useCallback(async () => {
const [deviceSearching, setDeviceSearching] = useState(false);
const [deviceSearchValue, setDeviceSearchValue] = useState('');
const fetchDevices = useCallback(async (keyword = '') => {
try {
const response = await axios.get('/api/devices', { params: { pageSize: 100 } });
setDeviceSearching(true);
const params = { pageSize: 50 };
if (keyword && keyword.trim()) {
params.keyword = keyword.trim();
}
const response = await axios.get('/api/devices', { params });
setDevices(response.data.devices || []);
} catch (error) {
console.error('获取设备列表失败:', error);
} finally {
setDeviceSearching(false);
}
}, []);
const handleDeviceSearch = useCallback(
debounce(value => {
fetchDevices(value);
}, 300),
[fetchDevices]
);
const fetchCategories = useCallback(async () => {
try {
const response = await axios.get('/api/ticket-categories');
@@ -448,10 +477,23 @@ function TicketManagement() {
break;
case 'device':
formItem = (
<Select placeholder="选择设备" showSearch optionFilterProp="children">
<Select
placeholder="输入关键词搜索设备（序列号/名称/IP等）"
showSearch
allowClear
loading={deviceSearching}
filterOption={false}
onSearch={handleDeviceSearch}
notFoundContent={deviceSearching ? '搜索中...' : '请输入关键词搜索'}
onDropdownVisibleChange={open => {
if (open && devices.length === 0) {
fetchDevices();
}
}}
>
{devices.map(device => (
<Option key={device.deviceId} value={device.deviceId}>
{device.name} - {device.serialNumber}
{device.name} {device.serialNumber ? `- ${device.serialNumber}` : ''}
</Option>
))}
</Select>
@@ -467,7 +509,7 @@ function TicketManagement() {
</Form.Item>
);
},
[devices]
[devices, deviceSearching, handleDeviceSearch, fetchDevices]
);
const tableColumns = useMemo(() => {
@@ -766,10 +808,23 @@ function TicketManagement() {
if (deviceSource === 'select') {
return (
<Form.Item name="deviceId" label="关联设备" rules={[{ required: false }]}>
<Select placeholder="选择设备" showSearch optionFilterProp="children" allowClear>
<Select
placeholder="输入关键词搜索设备（序列号/名称/IP等）"
showSearch
allowClear
loading={deviceSearching}
filterOption={false}
onSearch={handleDeviceSearch}
notFoundContent={deviceSearching ? '搜索中...' : '请输入关键词搜索'}
onDropdownVisibleChange={open => {
if (open && devices.length === 0) {
fetchDevices();
}
}}
>
{devices.map(device => (
<Option key={device.deviceId} value={device.deviceId}>
{device.name} - {device.serialNumber}
{device.name} {device.serialNumber ? `- ${device.serialNumber}` : ''}
</Option>
))}
</Select>
@@ -794,7 +849,7 @@ function TicketManagement() {
</Form.Item>
</>
);
}, [deviceSource, devices]);
}, [deviceSource, devices, deviceSearching, handleDeviceSearch, fetchDevices]);
const renderFormItems = useCallback(() => {
const items = [];