rainbowfast/chefsafe-admin-react
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

工单归档

Browse Source
This commit is contained in:
menxipeng
2025-11-03 22:45:22 +08:00
parent fe99a6f15e
commit bdc61b6285
1 changed files with 444 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

531
src/components/pages/WorkOrderArchivePage.tsx
View File

@@ -35,8 +35,14 @@ interface ArchivedWorkOrder {
otherImg: string;
repairImg: string;
repairVideo: string;
sVideo: string;
needRepair: boolean;
equNormal: boolean;
equId: string;
equipmentModel: string;
brand: string;
reformType: string;
remark: string;
}
export default function WorkOrderArchivePage() {
@@ -298,7 +304,7 @@ export default function WorkOrderArchivePage() {
<Eye className="h-4 w-4 mr-1" />
查看详情
</Button>
{(order.workOrderType === "厨房自动灭火设备" || order.workOrderType === "设备安装" || order.workOrderType === "设备检测") && (
{((order.equipmentName?.includes("厨房自动灭火") || order.equipmentName === "厨房自动灭火设备") && (order.workOrderType === "设备安装" || order.workOrderType === "设备检测" || order.workOrderType === "设备改造" || order.workOrderType === "设备维修" || order.workOrderType === "故障维修" || order.workOrderType === "设备拆除" || order.workOrderType === "更换药剂")) && (
<Button variant="outline" size="sm" onClick={() => handleDownloadReport(order.workOrderNumber)}>
<FileDown className="h-4 w-4 mr-1" />
下载报告
@@ -394,106 +400,457 @@ export default function WorkOrderArchivePage() {
<p className="text-sm text-gray-600">地址</p>
<p className="font-medium">{selectedOrder.merchantAddress}</p>
</div>
{/* 厨房自动灭火设备特有字段 - 在原有字段基础上增加 */}
{(selectedOrder.equipmentName?.includes("厨房自动灭火") || selectedOrder.equipmentName === "厨房自动灭火设备") &&
(selectedOrder.workOrderType === "设备安装" || selectedOrder.workOrderType === "设备检测" || selectedOrder.workOrderType === "设备改造" || selectedOrder.workOrderType === "设备维修" || selectedOrder.workOrderType === "故障维修" || selectedOrder.workOrderType === "设备拆除" || selectedOrder.workOrderType === "更换药剂") && (
<>
{selectedOrder.equId && (
<div>
<p className="text-sm text-gray-600">设备编码</p>
<p className="font-medium">{selectedOrder.equId}</p>
</div>
)}
{selectedOrder.equipmentModel && (
<div>
<p className="text-sm text-gray-600">设备型号</p>
<p className="font-medium">{selectedOrder.equipmentModel}</p>
</div>
)}
{selectedOrder.brand && (
<div>
<p className="text-sm text-gray-600">品牌</p>
<p className="font-medium">{selectedOrder.brand}</p>
</div>
)}
{selectedOrder.reformType && (
<div>
<p className="text-sm text-gray-600">改造类型</p>
<p className="font-medium">{selectedOrder.reformType}</p>
</div>
)}
{selectedOrder.remark && (
<div className="col-span-2">
<p className="text-sm text-gray-600">备注</p>
<p className="font-medium">{selectedOrder.remark}</p>
</div>
)}
</>
)}
{/* 动火离人设备特有字段 */}
{(selectedOrder.equipmentName?.includes("动火离人") || selectedOrder.equipmentType === "fire_extinguisher") && selectedOrder.remark && (
<div className="col-span-2">
<p className="text-sm text-gray-600">备注</p>
<p className="font-medium">{selectedOrder.remark}</p>
</div>
)}
</div>
</CardContent>
</Card>
{/* Photos */}
{/* Photos and Videos */}
<Card>
<CardHeader>
<CardTitle className="text-lg">作业照片</CardTitle>
<CardTitle className="text-lg">作业照片与视频</CardTitle>
</CardHeader>
<CardContent>
<div className="space-y-4">
{selectedOrder.frontImg && (
<div>
<p className="text-sm text-gray-600 mb-2">正面照</p>
<div className="grid grid-cols-4 gap-2">
{selectedOrder.frontImg.split(',').filter(url => url.trim()).map((photo, index) => (
<img
key={index}
src={photo || "/placeholder.svg"}
alt={`正面照 ${index + 1}`}
className="w-full h-32 object-cover rounded border"
/>
))}
{/* 厨房自动灭火设备 + 设备维修/设备改造/故障维修/设备拆除 的特殊显示 */}
{(selectedOrder.equipmentName?.includes("厨房自动灭火") || selectedOrder.equipmentName === "厨房自动灭火设备") &&
(selectedOrder.workOrderType === "设备维修" || selectedOrder.workOrderType === "设备改造" || selectedOrder.workOrderType === "故障维修" || selectedOrder.workOrderType === "设备拆除") ? (
<>
{/* 显示模式提示 */}
<div className="bg-blue-50 border border-blue-200 rounded p-3 mb-2">
<p className="text-sm text-blue-700">
📌 当前为设备维修/改造/故障维修/拆除模式，仅显示视频和其他照片
</p>
</div>
</div>
)}
{selectedOrder.openImg && (
<div>
<p className="text-sm text-gray-600 mb-2">开箱照</p>
<div className="grid grid-cols-4 gap-2">
{selectedOrder.openImg.split(',').filter(url => url.trim()).map((photo, index) => (
<img
key={index}
src={photo || "/placeholder.svg"}
alt={`开箱照 ${index + 1}`}
className="w-full h-32 object-cover rounded border"
/>
))}
{/* 视频 */}
<div>
<p className="text-sm text-gray-600 mb-2">视频</p>
{(selectedOrder.sVideo || selectedOrder.repairVideo) ? (
<div className="grid grid-cols-3 gap-2">
{selectedOrder.sVideo && selectedOrder.sVideo.split(',').filter(url => url.trim()).map((video, index) => (
<video
key={`s-${index}`}
src={`${API_BASE_URL}${video}`}
controls
className="w-full h-48 rounded border"
>
您的浏览器不支持视频播放
</video>
))}
{selectedOrder.repairVideo && selectedOrder.repairVideo.split(',').filter(url => url.trim()).map((video, index) => (
<video
key={`r-${index}`}
src={`${API_BASE_URL}${video}`}
controls
className="w-full h-48 rounded border"
>
您的浏览器不支持视频播放
</video>
))}
</div>
) : (
<p className="text-sm text-gray-500">暂无视频</p>
)}
</div>
</div>
)}
{selectedOrder.ropeReImg && (
<div>
<p className="text-sm text-gray-600 mb-2">绳索恢复照</p>
<div className="grid grid-cols-4 gap-2">
{selectedOrder.ropeReImg.split(',').filter(url => url.trim()).map((photo, index) => (
<img
key={index}
src={photo || "/placeholder.svg"}
alt={`绳索恢复 ${index + 1}`}
className="w-full h-32 object-cover rounded border"
/>
))}
{/* 其他照片 */}
<div>
<p className="text-sm text-gray-600 mb-2">其他照片</p>
{selectedOrder.otherImg ? (
<div className="grid grid-cols-4 gap-2">
{selectedOrder.otherImg.split(',').filter(url => url.trim()).map((photo, index) => (
<img
key={index}
src={`${API_BASE_URL}${photo}` || "/placeholder.svg"}
alt={`其他照片 ${index + 1}`}
className="w-full h-32 object-cover rounded border"
/>
))}
</div>
) : (
<p className="text-sm text-gray-500">暂无其他照片</p>
)}
</div>
</div>
)}
{selectedOrder.hostReImg && (
<div>
<p className="text-sm text-gray-600 mb-2">主机恢复照</p>
<div className="grid grid-cols-4 gap-2">
{selectedOrder.hostReImg.split(',').filter(url => url.trim()).map((photo, index) => (
<img
key={index}
src={photo || "/placeholder.svg"}
alt={`主机恢复 ${index + 1}`}
className="w-full h-32 object-cover rounded border"
/>
))}
</>
) : (selectedOrder.equipmentName?.includes("厨房自动灭火") || selectedOrder.equipmentName === "厨房自动灭火设备") &&
selectedOrder.workOrderType === "更换药剂" ? (
<>
{/* 显示模式提示 */}
<div className="bg-green-50 border border-green-200 rounded p-3 mb-2">
<p className="text-sm text-green-700">
📌 当前为更换药剂模式，显示正面照、开箱照、灌药剂照片、主机恢复照、其他照片
</p>
</div>
</div>
)}
{selectedOrder.otherImg && (
<div>
<p className="text-sm text-gray-600 mb-2">其他照片</p>
<div className="grid grid-cols-4 gap-2">
{selectedOrder.otherImg.split(',').filter(url => url.trim()).map((photo, index) => (
<img
key={index}
src={photo || "/placeholder.svg"}
alt={`其他照片 ${index + 1}`}
className="w-full h-32 object-cover rounded border"
/>
))}
{/* 正面照 */}
{selectedOrder.frontImg && (
<div>
<p className="text-sm text-gray-600 mb-2">正面照</p>
<div className="grid grid-cols-4 gap-2">
{selectedOrder.frontImg.split(',').filter(url => url.trim()).map((photo, index) => (
<img
key={index}
src={`${API_BASE_URL}${photo}` || "/placeholder.svg"}
alt={`正面照 ${index + 1}`}
className="w-full h-32 object-cover rounded border"
/>
))}
</div>
</div>
)}
{/* 开箱照 */}
{selectedOrder.openImg && (
<div>
<p className="text-sm text-gray-600 mb-2">开箱照</p>
<div className="grid grid-cols-4 gap-2">
{selectedOrder.openImg.split(',').filter(url => url.trim()).map((photo, index) => (
<img
key={index}
src={`${API_BASE_URL}${photo}` || "/placeholder.svg"}
alt={`开箱照 ${index + 1}`}
className="w-full h-32 object-cover rounded border"
/>
))}
</div>
</div>
)}
{/* 灌药剂照片 */}
{selectedOrder.ropeReImg && (
<div>
<p className="text-sm text-gray-600 mb-2">灌药剂照片</p>
<div className="grid grid-cols-4 gap-2">
{selectedOrder.ropeReImg.split(',').filter(url => url.trim()).map((photo, index) => (
<img
key={index}
src={`${API_BASE_URL}${photo}` || "/placeholder.svg"}
alt={`灌药剂照片 ${index + 1}`}
className="w-full h-32 object-cover rounded border"
/>
))}
</div>
</div>
)}
{/* 主机恢复照 */}
{selectedOrder.hostReImg && (
<div>
<p className="text-sm text-gray-600 mb-2">主机恢复照</p>
<div className="grid grid-cols-4 gap-2">
{selectedOrder.hostReImg.split(',').filter(url => url.trim()).map((photo, index) => (
<img
key={index}
src={`${API_BASE_URL}${photo}` || "/placeholder.svg"}
alt={`主机恢复照 ${index + 1}`}
className="w-full h-32 object-cover rounded border"
/>
))}
</div>
</div>
)}
{/* 其他照片 */}
{selectedOrder.otherImg && (
<div>
<p className="text-sm text-gray-600 mb-2">其他照片</p>
<div className="grid grid-cols-4 gap-2">
{selectedOrder.otherImg.split(',').filter(url => url.trim()).map((photo, index) => (
<img
key={index}
src={`${API_BASE_URL}${photo}` || "/placeholder.svg"}
alt={`其他照片 ${index + 1}`}
className="w-full h-32 object-cover rounded border"
/>
))}
</div>
</div>
)}
</>
) : (selectedOrder.equipmentName?.includes("动火离人") || selectedOrder.equipmentType === "fire_extinguisher") ? (
<>
{/* 显示模式提示 */}
<div className="bg-purple-50 border border-purple-200 rounded p-3 mb-2">
<p className="text-sm text-purple-700">
📌 当前为动火离人设备模式，显示主机照片、配电箱照片、测试视频、探头安装位置照片、其他照片
</p>
</div>
</div>
)}
{selectedOrder.repairImg && (
<div>
<p className="text-sm text-gray-600 mb-2">维修照片</p>
<div className="grid grid-cols-4 gap-2">
{selectedOrder.repairImg.split(',').filter(url => url.trim()).map((photo, index) => (
<img
key={index}
src={photo || "/placeholder.svg"}
alt={`维修照片 ${index + 1}`}
className="w-full h-32 object-cover rounded border"
/>
))}
</div>
</div>
{/* 主机照片 */}
{selectedOrder.frontImg && (
<div>
<p className="text-sm text-gray-600 mb-2">主机照片</p>
<div className="grid grid-cols-4 gap-2">
{selectedOrder.frontImg.split(',').filter(url => url.trim()).map((photo, index) => (
<img
key={index}
src={`${API_BASE_URL}${photo}` || "/placeholder.svg"}
alt={`主机照片 ${index + 1}`}
className="w-full h-32 object-cover rounded border"
/>
))}
</div>
</div>
)}
{/* 配电箱照片 */}
{selectedOrder.openImg && (
<div>
<p className="text-sm text-gray-600 mb-2">配电箱照片</p>
<div className="grid grid-cols-4 gap-2">
{selectedOrder.openImg.split(',').filter(url => url.trim()).map((photo, index) => (
<img
key={index}
src={`${API_BASE_URL}${photo}` || "/placeholder.svg"}
alt={`配电箱照片 ${index + 1}`}
className="w-full h-32 object-cover rounded border"
/>
))}
</div>
</div>
)}
{/* 测试视频 */}
{selectedOrder.sVideo && (
<div>
<p className="text-sm text-gray-600 mb-2">测试视频</p>
<div className="grid grid-cols-3 gap-2">
{selectedOrder.sVideo.split(',').filter(url => url.trim()).map((video, index) => (
<video
key={index}
src={`${API_BASE_URL}${video}`}
controls
className="w-full h-48 rounded border"
>
您的浏览器不支持视频播放
</video>
))}
</div>
</div>
)}
{/* 探头安装位置照片 */}
{selectedOrder.ropeReImg && (
<div>
<p className="text-sm text-gray-600 mb-2">探头安装位置照片</p>
<div className="grid grid-cols-4 gap-2">
{selectedOrder.ropeReImg.split(',').filter(url => url.trim()).map((photo, index) => (
<img
key={index}
src={`${API_BASE_URL}${photo}` || "/placeholder.svg"}
alt={`探头安装位置照片 ${index + 1}`}
className="w-full h-32 object-cover rounded border"
/>
))}
</div>
</div>
)}
{/* 其他照片 */}
{selectedOrder.otherImg && (
<div>
<p className="text-sm text-gray-600 mb-2">其他照片</p>
<div className="grid grid-cols-4 gap-2">
{selectedOrder.otherImg.split(',').filter(url => url.trim()).map((photo, index) => (
<img
key={index}
src={`${API_BASE_URL}${photo}` || "/placeholder.svg"}
alt={`其他照片 ${index + 1}`}
className="w-full h-32 object-cover rounded border"
/>
))}
</div>
</div>
)}
</>
) : (
<>
{/* 常规显示 */}
{selectedOrder.frontImg && (
<div>
<p className="text-sm text-gray-600 mb-2">正面照</p>
<div className="grid grid-cols-4 gap-2">
{selectedOrder.frontImg.split(',').filter(url => url.trim()).map((photo, index) => (
<img
key={index}
src={`${API_BASE_URL}${photo}` || "/placeholder.svg"}
alt={`正面照 ${index + 1}`}
className="w-full h-32 object-cover rounded border"
/>
))}
</div>
</div>
)}
{selectedOrder.openImg && (
<div>
<p className="text-sm text-gray-600 mb-2">开箱照</p>
<div className="grid grid-cols-4 gap-2">
{selectedOrder.openImg.split(',').filter(url => url.trim()).map((photo, index) => (
<img
key={index}
src={`${API_BASE_URL}${photo}` || "/placeholder.svg"}
alt={`开箱照 ${index + 1}`}
className="w-full h-32 object-cover rounded border"
/>
))}
</div>
</div>
)}
{/* 厨房自动灭火设备特有的剪断视频 */}
{selectedOrder.equipmentName === "厨房自动灭火设备" &&
(selectedOrder.workOrderType === "设备安装" || selectedOrder.workOrderType === "设备检测") && (
<div>
<p className="text-sm text-gray-600 mb-2">剪断视频</p>
{selectedOrder.sVideo ? (
<div className="grid grid-cols-3 gap-2">
{selectedOrder.sVideo.split(',').filter(url => url.trim()).map((video, index) => (
<video
key={index}
src={`${API_BASE_URL}${video}`}
controls
className="w-full h-48 rounded border"
>
您的浏览器不支持视频播放
</video>
))}
</div>
) : (
<p className="text-sm text-gray-500">暂无剪断视频</p>
)}
</div>
)}
{selectedOrder.ropeReImg && (
<div>
<p className="text-sm text-gray-600 mb-2">绳索恢复照</p>
<div className="grid grid-cols-4 gap-2">
{selectedOrder.ropeReImg.split(',').filter(url => url.trim()).map((photo, index) => (
<img
key={index}
src={`${API_BASE_URL}${photo}` || "/placeholder.svg"}
alt={`绳索恢复 ${index + 1}`}
className="w-full h-32 object-cover rounded border"
/>
))}
</div>
</div>
)}
{selectedOrder.hostReImg && (
<div>
<p className="text-sm text-gray-600 mb-2">主机恢复照/恢复开箱照片</p>
<div className="grid grid-cols-4 gap-2">
{selectedOrder.hostReImg.split(',').filter(url => url.trim()).map((photo, index) => (
<img
key={index}
src={`${API_BASE_URL}${photo}` || "/placeholder.svg"}
alt={`主机恢复 ${index + 1}`}
className="w-full h-32 object-cover rounded border"
/>
))}
</div>
</div>
)}
{selectedOrder.otherImg && (
<div>
<p className="text-sm text-gray-600 mb-2">其他照片</p>
<div className="grid grid-cols-4 gap-2">
{selectedOrder.otherImg.split(',').filter(url => url.trim()).map((photo, index) => (
<img
key={index}
src={`${API_BASE_URL}${photo}` || "/placeholder.svg"}
alt={`其他照片 ${index + 1}`}
className="w-full h-32 object-cover rounded border"
/>
))}
</div>
</div>
)}
{selectedOrder.repairImg && (
<div>
<p className="text-sm text-gray-600 mb-2">维修照片</p>
<div className="grid grid-cols-4 gap-2">
{selectedOrder.repairImg.split(',').filter(url => url.trim()).map((photo, index) => (
<img
key={index}
src={`${API_BASE_URL}${photo}` || "/placeholder.svg"}
alt={`维修照片 ${index + 1}`}
className="w-full h-32 object-cover rounded border"
/>
))}
</div>
</div>
)}
{/* 厨房自动灭火设备特有的维修视频 */}
{selectedOrder.equipmentName === "厨房自动灭火设备" &&
(selectedOrder.workOrderType === "设备安装" || selectedOrder.workOrderType === "设备检测") && (
<div>
<p className="text-sm text-gray-600 mb-2">维修视频</p>
{selectedOrder.repairVideo ? (
<div className="grid grid-cols-3 gap-2">
{selectedOrder.repairVideo.split(',').filter(url => url.trim()).map((video, index) => (
<video
key={index}
src={`${API_BASE_URL}${video}`}
controls
className="w-full h-48 rounded border"
>
您的浏览器不支持视频播放
</video>
))}
</div>
) : (
<p className="text-sm text-gray-500">暂无维修视频</p>
)}
</div>
)}
</>
)}
</div>
</CardContent>