273 lines
11 KiB
TypeScript
273 lines
11 KiB
TypeScript
import { Info, Download, Upload, Link as LinkIcon } from "lucide-react";
|
||
|
||
interface ScrapDevice {
|
||
sn: string;
|
||
model: string;
|
||
scrapDate: string;
|
||
status: "待审批" | "已审批" | "已回收";
|
||
sourceOrder: string;
|
||
reason: string;
|
||
}
|
||
|
||
export default function ScrapManagement() {
|
||
const scrapDevices: ScrapDevice[] = [
|
||
{
|
||
sn: "GD30-2023-001234",
|
||
model: "GD30 地质探测仪",
|
||
scrapDate: "2024-03-01",
|
||
status: "已回收",
|
||
sourceOrder: "WO-2024-0001",
|
||
reason: "主板损坏无法修复",
|
||
},
|
||
{
|
||
sn: "GT20-2023-000567",
|
||
model: "GT20 物探仪",
|
||
scrapDate: "2024-03-05",
|
||
status: "已审批",
|
||
sourceOrder: "WO-2024-0025",
|
||
reason: "多个核心部件损坏",
|
||
},
|
||
{
|
||
sn: "GTXD-2023-000890",
|
||
model: "GTXD 探测仪",
|
||
scrapDate: "2024-03-08",
|
||
status: "待审批",
|
||
sourceOrder: "WO-2024-0048",
|
||
reason: "维修成本超过设备价值",
|
||
},
|
||
];
|
||
|
||
const getStatusStyle = (status: ScrapDevice["status"]) => {
|
||
switch (status) {
|
||
case "已回收":
|
||
return {
|
||
backgroundColor: '#F6FFED',
|
||
color: '#52C41A',
|
||
border: '1px solid #B7EB8F'
|
||
};
|
||
case "已审批":
|
||
return {
|
||
backgroundColor: '#E6F7FF',
|
||
color: '#1890FF',
|
||
border: '1px solid #91D5FF'
|
||
};
|
||
case "待审批":
|
||
return {
|
||
backgroundColor: '#FFFBE6',
|
||
color: '#FAAD14',
|
||
border: '1px solid #FFE58F'
|
||
};
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div className="p-6">
|
||
{/* Page Header */}
|
||
<div className="mb-6">
|
||
<div className="flex items-center justify-between mb-2">
|
||
<h2 className="text-2xl font-semibold">报废管理</h2>
|
||
<div className="flex items-center gap-3">
|
||
<button
|
||
className="px-4 py-2 rounded flex items-center gap-2"
|
||
style={{ border: '1px solid #D9D9D9', color: 'rgba(0, 0, 0, 0.85)' }}
|
||
>
|
||
<Upload size={16} />
|
||
批量导入
|
||
</button>
|
||
<button
|
||
className="px-4 py-2 rounded flex items-center gap-2"
|
||
style={{ border: '1px solid #D9D9D9', color: 'rgba(0, 0, 0, 0.85)' }}
|
||
>
|
||
<Download size={16} />
|
||
导出
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<p className="text-sm" style={{ color: 'rgba(0, 0, 0, 0.45)' }}>管理报废设备与物料回收</p>
|
||
</div>
|
||
|
||
{/* Info Banner */}
|
||
<div
|
||
className="mb-6 p-4 rounded-lg flex items-start gap-3"
|
||
style={{ backgroundColor: '#E6F7FF', border: '1px solid #91D5FF' }}
|
||
>
|
||
<Info size={20} style={{ color: '#1890FF', flexShrink: 0, marginTop: 2 }} />
|
||
<div style={{ color: '#0050B3' }}>
|
||
<div className="font-medium mb-1">报废流程说明</div>
|
||
<div className="text-sm">
|
||
报废单由维修工单中申请报废创建，关联来源维修工单。报废设备需经过审批流程，审批通过后进行物料回收和入库。
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Stat Cards */}
|
||
<div className="grid grid-cols-4 gap-6 mb-6">
|
||
<div className="bg-white p-6 rounded-lg" style={{ boxShadow: '0 1px 2px rgba(0, 0, 0, 0.05)' }}>
|
||
<div className="text-sm mb-2" style={{ color: 'rgba(0, 0, 0, 0.45)' }}>报废设备总数</div>
|
||
<div className="text-3xl font-semibold" style={{ color: 'rgba(0, 0, 0, 0.85)' }}>156</div>
|
||
</div>
|
||
<div className="bg-white p-6 rounded-lg" style={{ boxShadow: '0 1px 2px rgba(0, 0, 0, 0.05)' }}>
|
||
<div className="text-sm mb-2" style={{ color: 'rgba(0, 0, 0, 0.45)' }}>待审批</div>
|
||
<div className="text-3xl font-semibold" style={{ color: '#FAAD14' }}>12</div>
|
||
</div>
|
||
<div className="bg-white p-6 rounded-lg" style={{ boxShadow: '0 1px 2px rgba(0, 0, 0, 0.05)' }}>
|
||
<div className="text-sm mb-2" style={{ color: 'rgba(0, 0, 0, 0.45)' }}>已审批待回收</div>
|
||
<div className="text-3xl font-semibold" style={{ color: '#1890FF' }}>8</div>
|
||
</div>
|
||
<div className="bg-white p-6 rounded-lg" style={{ boxShadow: '0 1px 2px rgba(0, 0, 0, 0.05)' }}>
|
||
<div className="text-sm mb-2" style={{ color: 'rgba(0, 0, 0, 0.45)' }}>已回收入库</div>
|
||
<div className="text-3xl font-semibold" style={{ color: '#52C41A' }}>136</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Filter Card */}
|
||
<div className="bg-white p-6 rounded-lg mb-6" style={{ boxShadow: '0 1px 2px rgba(0, 0, 0, 0.05)' }}>
|
||
<div className="grid grid-cols-4 gap-4">
|
||
<div>
|
||
<label className="block text-sm mb-2" style={{ color: 'rgba(0, 0, 0, 0.65)' }}>
|
||
设备SN号
|
||
</label>
|
||
<input
|
||
type="text"
|
||
className="w-full px-3 py-2 border rounded"
|
||
style={{ borderColor: '#D9D9D9' }}
|
||
placeholder="输入设备SN号搜索"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label className="block text-sm mb-2" style={{ color: 'rgba(0, 0, 0, 0.65)' }}>
|
||
报废状态
|
||
</label>
|
||
<select
|
||
className="w-full px-3 py-2 border rounded"
|
||
style={{ borderColor: '#D9D9D9', backgroundColor: '#fff' }}
|
||
>
|
||
<option>全部</option>
|
||
<option>待审批</option>
|
||
<option>已审批</option>
|
||
<option>已回收</option>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label className="block text-sm mb-2" style={{ color: 'rgba(0, 0, 0, 0.65)' }}>
|
||
报废日期
|
||
</label>
|
||
<input
|
||
type="date"
|
||
className="w-full px-3 py-2 border rounded"
|
||
style={{ borderColor: '#D9D9D9' }}
|
||
/>
|
||
</div>
|
||
<div className="flex items-end">
|
||
<button
|
||
className="w-full px-4 py-2 rounded text-white"
|
||
style={{ backgroundColor: '#1890FF' }}
|
||
>
|
||
查询
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Scrap Device List */}
|
||
<div className="bg-white rounded-lg mb-6" style={{ boxShadow: '0 1px 2px rgba(0, 0, 0, 0.05)' }}>
|
||
<div className="p-6 border-b" style={{ borderColor: '#F0F0F0' }}>
|
||
<h3 className="text-lg font-semibold">报废设备列表</h3>
|
||
</div>
|
||
<div className="overflow-x-auto">
|
||
<table className="w-full">
|
||
<thead style={{ backgroundColor: '#FAFAFA' }}>
|
||
<tr>
|
||
<th className="px-6 py-3 text-left text-sm font-medium" style={{ color: 'rgba(0, 0, 0, 0.85)' }}>设备SN号</th>
|
||
<th className="px-6 py-3 text-left text-sm font-medium" style={{ color: 'rgba(0, 0, 0, 0.85)' }}>型号</th>
|
||
<th className="px-6 py-3 text-left text-sm font-medium" style={{ color: 'rgba(0, 0, 0, 0.85)' }}>报废日期</th>
|
||
<th className="px-6 py-3 text-left text-sm font-medium" style={{ color: 'rgba(0, 0, 0, 0.85)' }}>报废原因</th>
|
||
<th className="px-6 py-3 text-left text-sm font-medium" style={{ color: 'rgba(0, 0, 0, 0.85)' }}>状态</th>
|
||
<th className="px-6 py-3 text-left text-sm font-medium" style={{ color: 'rgba(0, 0, 0, 0.85)' }}>来源工单</th>
|
||
<th className="px-6 py-3 text-left text-sm font-medium" style={{ color: 'rgba(0, 0, 0, 0.85)' }}>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{scrapDevices.map((device, index) => (
|
||
<tr
|
||
key={index}
|
||
className="border-b"
|
||
style={{ borderColor: '#F0F0F0' }}
|
||
>
|
||
<td className="px-6 py-4">{device.sn}</td>
|
||
<td className="px-6 py-4" style={{ color: 'rgba(0, 0, 0, 0.65)' }}>{device.model}</td>
|
||
<td className="px-6 py-4" style={{ color: 'rgba(0, 0, 0, 0.65)' }}>{device.scrapDate}</td>
|
||
<td className="px-6 py-4" style={{ color: 'rgba(0, 0, 0, 0.65)' }}>{device.reason}</td>
|
||
<td className="px-6 py-4">
|
||
<span
|
||
className="px-2 py-1 rounded text-xs"
|
||
style={getStatusStyle(device.status)}
|
||
>
|
||
{device.status}
|
||
</span>
|
||
</td>
|
||
<td className="px-6 py-4">
|
||
<button className="text-sm flex items-center gap-1" style={{ color: '#1890FF' }}>
|
||
<LinkIcon size={14} />
|
||
{device.sourceOrder}
|
||
</button>
|
||
</td>
|
||
<td className="px-6 py-4">
|
||
<div className="flex items-center gap-3">
|
||
<button className="text-sm" style={{ color: '#1890FF' }}>查看详情</button>
|
||
<button className="text-sm" style={{ color: '#1890FF' }}>物料检测</button>
|
||
{device.status === "已审批" && (
|
||
<button className="text-sm" style={{ color: '#52C41A' }}>回收入库</button>
|
||
)}
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Pagination */}
|
||
<div className="bg-white p-4 rounded-lg flex items-center justify-between" style={{ boxShadow: '0 1px 2px rgba(0, 0, 0, 0.05)' }}>
|
||
<div className="text-sm" style={{ color: 'rgba(0, 0, 0, 0.65)' }}>
|
||
显示 1-10 / 共 156 条
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<button
|
||
className="px-3 py-1 rounded border"
|
||
style={{ borderColor: '#D9D9D9', color: 'rgba(0, 0, 0, 0.45)' }}
|
||
disabled
|
||
>
|
||
上一页
|
||
</button>
|
||
<button
|
||
className="px-3 py-1 rounded"
|
||
style={{ backgroundColor: '#1890FF', color: '#fff' }}
|
||
>
|
||
1
|
||
</button>
|
||
<button
|
||
className="px-3 py-1 rounded border"
|
||
style={{ borderColor: '#D9D9D9', color: 'rgba(0, 0, 0, 0.85)' }}
|
||
>
|
||
2
|
||
</button>
|
||
<button
|
||
className="px-3 py-1 rounded border"
|
||
style={{ borderColor: '#D9D9D9', color: 'rgba(0, 0, 0, 0.85)' }}
|
||
>
|
||
3
|
||
</button>
|
||
<button
|
||
className="px-3 py-1 rounded border"
|
||
style={{ borderColor: '#D9D9D9', color: 'rgba(0, 0, 0, 0.85)' }}
|
||
>
|
||
下一页
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|