94 lines
3.5 KiB
TypeScript
94 lines
3.5 KiB
TypeScript
|
import { useState } from 'react';
|
||
|
|
import { Device } from './InventoryManagement';
|
||
|
|
|
||
|
|
interface DeviceListProps {
|
||
|
|
devices: Device[];
|
||
|
|
onUpdateDevice: (device: Device) => void;
|
||
|
|
onDeleteDevice: (id: string) => void;
|
||
|
|
showAlert: (message: string, type: 'success' | 'error' | 'warning') => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function DeviceList({ devices, onUpdateDevice, onDeleteDevice, showAlert }: DeviceListProps) {
|
||
|
|
const [editingId, setEditingId] = useState<string | null>(null);
|
||
|
|
|
||
|
|
const handleEdit = (device: Device) => {
|
||
|
|
setEditingId(device.id);
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleSave = (device: Device) => {
|
||
|
|
onUpdateDevice(device);
|
||
|
|
setEditingId(null);
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleDelete = (id: string) => {
|
||
|
|
if (window.confirm('确定要删除这个设备吗？')) {
|
||
|
|
onDeleteDevice(id);
|
||
|
|
showAlert('设备已成功删除', 'success');
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="bg-white rounded-lg shadow p-6">
|
||
|
|
<h2 className="text-2xl font-bold mb-4 text-indigo-700">设备列表</h2>
|
||
|
|
<div className="overflow-x-auto">
|
||
|
|
<table className="w-full border-collapse">
|
||
|
|
<thead>
|
||
|
|
<tr className="bg-indigo-100 text-indigo-700">
|
||
|
|
<th className="p-2 text-left rounded-tl-lg">名称</th>
|
||
|
|
<th className="p-2 text-left">数量</th>
|
||
|
|
<th className="p-2 text-left">序列号</th>
|
||
|
|
<th className="p-2 text-left rounded-tr-lg">操作</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
{devices.map(device => (
|
||
|
|
<tr key={device.id} className="border-b border-indigo-100 hover:bg-indigo-50 transition duration-300">
|
||
|
|
<td className="p-2">
|
||
|
|
{editingId === device.id ? (
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
value={device.name}
|
||
|
|
onChange={e => onUpdateDevice({ ...device, name: e.target.value })}
|
||
|
|
className="border rounded p-1 w-full"
|
||
|
|
/>
|
||
|
|
) : (
|
||
|
|
device.name
|
||
|
|
)}
|
||
|
|
</td>
|
||
|
|
<td className="p-2">
|
||
|
|
{editingId === device.id ? (
|
||
|
|
<input
|
||
|
|
type="number"
|
||
|
|
value={device.quantity}
|
||
|
|
onChange={e => onUpdateDevice({ ...device, quantity: parseInt(e.target.value) })}
|
||
|
|
className="border rounded p-1 w-20"
|
||
|
|
/>
|
||
|
|
) : (
|
||
|
|
device.quantity
|
||
|
|
)}
|
||
|
|
</td>
|
||
|
|
<td className="p-2">{device.serialNumber}</td>
|
||
|
|
<td className="p-2">
|
||
|
|
{editingId === device.id ? (
|
||
|
|
<button onClick={() => handleSave(device)} className="bg-green-500 text-white px-3 py-1 rounded-full mr-2 hover:bg-green-600 transition duration-300">
|
||
|
|
保存
|
||
|
|
</button>
|
||
|
|
) : (
|
||
|
|
<button onClick={() => handleEdit(device)} className="bg-blue-500 text-white px-3 py-1 rounded-full mr-2 hover:bg-blue-600 transition duration-300">
|
||
|
|
编辑
|
||
|
|
</button>
|
||
|
|
)}
|
||
|
|
<button onClick={() => handleDelete(device.id)} className="bg-red-500 text-white px-3 py-1 rounded-full hover:bg-red-600 transition duration-300">
|
||
|
|
删除
|
||
|
|
</button>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
))}
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|