63 lines
1.8 KiB
TypeScript
63 lines
1.8 KiB
TypeScript
|
import { useState } from 'react';
|
||
|
|
import { Device } from './InventoryManagement';
|
||
|
|
|
||
|
|
interface DeviceFormProps {
|
||
|
|
onAddDevice: (device: Device) => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function DeviceForm({ onAddDevice }: DeviceFormProps) {
|
||
|
|
const [name, setName] = useState('');
|
||
|
|
const [quantity, setQuantity] = useState('');
|
||
|
|
const [serialNumber, setSerialNumber] = useState('');
|
||
|
|
|
||
|
|
const handleSubmit = (e: React.FormEvent) => {
|
||
|
|
e.preventDefault();
|
||
|
|
const newDevice: Device = {
|
||
|
|
id: Date.now().toString(),
|
||
|
|
name,
|
||
|
|
quantity: parseInt(quantity),
|
||
|
|
serialNumber,
|
||
|
|
};
|
||
|
|
onAddDevice(newDevice);
|
||
|
|
setName('');
|
||
|
|
setQuantity('');
|
||
|
|
setSerialNumber('');
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<form onSubmit={handleSubmit} className="bg-white rounded-lg shadow p-6 mb-8">
|
||
|
|
<h2 className="text-2xl font-bold mb-4 text-indigo-700">添加新设备</h2>
|
||
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
value={name}
|
||
|
|
onChange={e => setName(e.target.value)}
|
||
|
|
placeholder="设备名称"
|
||
|
|
required
|
||
|
|
className="border rounded p-2 w-full"
|
||
|
|
/>
|
||
|
|
<input
|
||
|
|
type="number"
|
||
|
|
value={quantity}
|
||
|
|
onChange={e => setQuantity(e.target.value)}
|
||
|
|
placeholder="数量"
|
||
|
|
required
|
||
|
|
className="border rounded p-2 w-full"
|
||
|
|
/>
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
value={serialNumber}
|
||
|
|
onChange={e => setSerialNumber(e.target.value)}
|
||
|
|
placeholder="序列号"
|
||
|
|
required
|
||
|
|
className="border rounded p-2 w-full"
|
||
|
|
/>
|
||
|
|
<button type="submit" className="bg-indigo-500 text-white px-4 py-2 rounded-full hover:bg-indigo-600 transition duration-300">
|
||
|
|
添加设备
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|