diff --git a/src/components/pages/WorkOrderArchivePage.tsx b/src/components/pages/WorkOrderArchivePage.tsx index a194827..b5a6ce7 100644 --- a/src/components/pages/WorkOrderArchivePage.tsx +++ b/src/components/pages/WorkOrderArchivePage.tsx @@ -1,4 +1,4 @@ -import { useState } from "react"; +import { useState, useEffect } from "react"; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../ui/card"; import { Button } from "../ui/button"; import { Input } from "../ui/input"; @@ -6,134 +6,79 @@ import { Badge } from "../ui/badge"; import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "../ui/dialog"; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../ui/table"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select"; -import { Search, Eye, Download, FileText, CheckCircle, User, Building } from "lucide-react"; +import { Search, Eye, Download, FileText, CheckCircle, User, Building, ChevronLeft, ChevronRight } from "lucide-react"; +import { apiGet } from "../../lib/services/api"; interface ArchivedWorkOrder { id: string; - title: string; - merchant: string; - equipment: string; - worker: string; - dealer: string; - completedDate: string; - archiveDate: string; - status: "completed"; - priority: "high" | "medium" | "low"; - signatures: { - worker: { - name: string; - signature: string; - timestamp: string; - photos: string[]; - }; - merchant: { - name: string; - signature: string; - timestamp: string; - }; - dealerAdmin: { - name: string; - signature: string; - timestamp: string; - }; - }; - workDetails: { - description: string; - beforePhotos: string[]; - afterPhotos: string[]; - materials: string[]; - notes: string; - }; + workOrderNumber: string; + workOrderType: string; + merchantName: string; + equipmentName: string; + workerName: string; + priority: string; + completedDate: string | null; + createdDate: string; + status: string; + createdAt: string; + updatedAt: string; + merchantAddress: string; + responsiblePerson: string; + responsibleVirtualPhone: string; + workerVirtualPhone: string; + frontImg: string; + openImg: string; + ropeReImg: string; + hostReImg: string; + otherImg: string; + repairImg: string; + repairVideo: string; + needRepair: boolean; + equNormal: boolean; } export default function WorkOrderArchivePage() { - const [archivedOrders, setArchivedOrders] = useState([ - { - id: "WO-2024-001", - title: "干粉灭火器年检", - merchant: "星巴克咖啡店", - equipment: "干粉灭火器-001", - worker: "张师傅", - dealer: "华东经销商", - completedDate: "2024-01-15", - archiveDate: "2024-01-16", - status: "completed", - priority: "medium", - signatures: { - worker: { - name: "张师傅", - signature: "/placeholder.svg?height=100&width=200", - timestamp: "2024-01-15 14:30:00", - photos: ["/placeholder.svg?height=300&width=400", "/placeholder.svg?height=300&width=400"], - }, - merchant: { - name: "李经理", - signature: "/placeholder.svg?height=100&width=200", - timestamp: "2024-01-15 15:00:00", - }, - dealerAdmin: { - name: "王主管", - signature: "/placeholder.svg?height=100&width=200", - timestamp: "2024-01-15 16:00:00", - }, - }, - workDetails: { - description: "对干粉灭火器进行年度检测，检查压力表、安全销、喷嘴等部件", - beforePhotos: ["/placeholder.svg?height=300&width=400", "/placeholder.svg?height=300&width=400"], - afterPhotos: ["/placeholder.svg?height=300&width=400", "/placeholder.svg?height=300&width=400"], - materials: ["压力表", "安全销", "检测标签"], - notes: "设备状态良好，已更换压力表，贴上检测合格标签", - }, - }, - { - id: "WO-2024-002", - title: "烟感器故障维修", - merchant: "麦当劳餐厅", - equipment: "烟感器-025", - worker: "李师傅", - dealer: "华南经销商", - completedDate: "2024-01-12", - archiveDate: "2024-01-13", - status: "completed", - priority: "high", - signatures: { - worker: { - name: "李师傅", - signature: "/placeholder.svg?height=100&width=200", - timestamp: "2024-01-12 11:45:00", - photos: ["/placeholder.svg?height=300&width=400", "/placeholder.svg?height=300&width=400"], - }, - merchant: { - name: "陈店长", - signature: "/placeholder.svg?height=100&width=200", - timestamp: "2024-01-12 12:15:00", - }, - dealerAdmin: { - name: "赵经理", - signature: "/placeholder.svg?height=100&width=200", - timestamp: "2024-01-12 13:00:00", - }, - }, - workDetails: { - description: "烟感器报警异常，需要更换传感器模块", - beforePhotos: ["/placeholder.svg?height=300&width=400", "/placeholder.svg?height=300&width=400"], - afterPhotos: ["/placeholder.svg?height=300&width=400", "/placeholder.svg?height=300&width=400"], - materials: ["传感器模块", "电池", "固定螺丝"], - notes: "已更换传感器模块，测试正常，设备恢复正常工作", - }, - }, - ]); - + const [archivedOrders, setArchivedOrders] = useState([]); const [searchTerm, setSearchTerm] = useState(""); const [statusFilter, setStatusFilter] = useState("all"); const [selectedOrder, setSelectedOrder] = useState(null); const [isDetailDialogOpen, setIsDetailDialogOpen] = useState(false); + const [loading, setLoading] = useState(false); + const [pagination, setPagination] = useState({ + pageNum: 1, + pageSize: 10, + total: 0 + }); + + // 获取归档工单列表 + const fetchArchivedOrders = async (pageNum = 1, pageSize = 10) => { + setLoading(true); + try { + const response = await apiGet(`/client/work/list?queryStaus=6&pageNum=${pageNum}&pageSize=${pageSize}`); + if (response.code === 200) { + setArchivedOrders(response.data || []); + setPagination({ + pageNum, + pageSize, + total: parseInt(response.total) || 0 + }); + } + } catch (error) { + console.error('获取归档工单列表失败:', error); + } finally { + setLoading(false); + } + }; + + useEffect(() => { + fetchArchivedOrders(); + }, []); const filteredOrders = archivedOrders.filter((order) => { const matchesSearch = - order.title.toLowerCase().includes(searchTerm.toLowerCase()) || - order.merchant.toLowerCase().includes(searchTerm.toLowerCase()) || - order.id.toLowerCase().includes(searchTerm.toLowerCase()); + order.workOrderType.toLowerCase().includes(searchTerm.toLowerCase()) || + order.merchantName.toLowerCase().includes(searchTerm.toLowerCase()) || + order.workOrderNumber.toLowerCase().includes(searchTerm.toLowerCase()); const matchesStatus = statusFilter === "all" || order.status === statusFilter; return matchesSearch && matchesStatus; }); @@ -145,11 +90,11 @@ export default function WorkOrderArchivePage() { const getPriorityColor = (priority: string) => { switch (priority) { - case "high": + case "1": return "bg-red-100 text-red-800"; - case "medium": + case "2": return "bg-yellow-100 text-yellow-800"; - case "low": + case "3": return "bg-green-100 text-green-800"; default: return "bg-gray-100 text-gray-800"; @@ -158,11 +103,11 @@ export default function WorkOrderArchivePage() { const getPriorityText = (priority: string) => { switch (priority) { - case "high": + case "1": return "高"; - case "medium": + case "2": return "中"; - case "low": + case "3": return "低"; default: return "未知"; @@ -190,7 +135,7 @@ export default function WorkOrderArchivePage() {

归档总数

-

1,248

+

{pagination.total}

@@ -201,8 +146,8 @@ export default function WorkOrderArchivePage() {
-

本月归档

-

156

+

当前页

+

{archivedOrders.length}

@@ -213,8 +158,8 @@ export default function WorkOrderArchivePage() {
-

完整签字

-

98.5%

+

页码

+

{pagination.pageNum}/{Math.ceil(pagination.total / pagination.pageSize)}

@@ -225,8 +170,8 @@ export default function WorkOrderArchivePage() {
-

存储容量

-

2.4GB

+

每页数量

+

{pagination.pageSize}

@@ -279,37 +224,78 @@ export default function WorkOrderArchivePage() { - {filteredOrders.map((order) => ( - - {order.id} - {order.title} - {order.merchant} - {order.equipment} - {order.worker} - - {getPriorityText(order.priority)} - - {order.completedDate} - {order.archiveDate} - - + {loading ? ( + + +
加载中...
 - ))} + ) : filteredOrders.length === 0 ? ( + + +
暂无数据
+ + + ) : ( + filteredOrders.map((order) => ( + + {order.workOrderNumber} + {order.workOrderType} + {order.merchantName} + {order.equipmentName} + {order.workerName} + + {getPriorityText(order.priority)} + + {order.updatedAt} + {order.updatedAt} + + + + + )) + )} + + {/* Pagination */} +
+
+ 共 {pagination.total} 条记录，当前第 {pagination.pageNum} 页，共 {Math.ceil(pagination.total / pagination.pageSize)} 页 +
+
+ + +
+
{/* Detail Dialog */} - + - 工单归档详情 - {selectedOrder?.id} - 查看完整的工单执行记录和签字确认 + 工单归档详情 - {selectedOrder?.workOrderNumber} + 查看完整的工单执行记录 {selectedOrder && ( @@ -322,49 +308,40 @@ export default function WorkOrderArchivePage() {
-

工单标题

-

{selectedOrder.title}

+

工单编号

+

{selectedOrder.workOrderNumber}

+
+
+

工单类型

+

{selectedOrder.workOrderType}

商户名称

-

{selectedOrder.merchant}

+

{selectedOrder.merchantName}

设备信息

-

{selectedOrder.equipment}

+

{selectedOrder.equipmentName}

-

经销商

-

{selectedOrder.dealer}

-
-
- - - - {/* Work Details */} - - - 作业详情 - - -
-
-

作业描述

-

{selectedOrder.workDetails.description}

+

维修工人

+

{selectedOrder.workerName}

-

使用材料

-
- {selectedOrder.workDetails.materials.map((material, index) => ( - - {material} - - ))} -
+

优先级

+ {getPriorityText(selectedOrder.priority)}
-

作业备注

-

{selectedOrder.workDetails.notes}

+

负责人

+

{selectedOrder.responsiblePerson}

+
+
+

联系电话

+

{selectedOrder.responsibleVirtualPhone}

+
+
+

地址

+

{selectedOrder.merchantAddress}

 @@ -376,90 +353,127 @@ export default function WorkOrderArchivePage() { 作业照片 -
-
-

作业前照片

-
- {selectedOrder.workDetails.beforePhotos.map((photo, index) => ( - {`作业前照片 - ))} +
+ {selectedOrder.frontImg && ( +
+

正面照

+
+ {selectedOrder.frontImg.split(',').filter(url => url.trim()).map((photo, index) => ( + {`正面照 + ))} +
-
-
-

作业后照片

-
- {selectedOrder.workDetails.afterPhotos.map((photo, index) => ( - {`作业后照片 - ))} + )} + {selectedOrder.openImg && ( +
+

开箱照

+
+ {selectedOrder.openImg.split(',').filter(url => url.trim()).map((photo, index) => ( + {`开箱照 + ))} +
-
+ )} + {selectedOrder.ropeReImg && ( +
+

绳索恢复照

+
+ {selectedOrder.ropeReImg.split(',').filter(url => url.trim()).map((photo, index) => ( + {`绳索恢复 + ))} +
+
+ )} + {selectedOrder.hostReImg && ( +
+

主机恢复照

+
+ {selectedOrder.hostReImg.split(',').filter(url => url.trim()).map((photo, index) => ( + {`主机恢复 + ))} +
+
+ )} + {selectedOrder.otherImg && ( +
+

其他照片

+
+ {selectedOrder.otherImg.split(',').filter(url => url.trim()).map((photo, index) => ( + {`其他照片 + ))} +
+
+ )} + {selectedOrder.repairImg && ( +
+

维修照片

+
+ {selectedOrder.repairImg.split(',').filter(url => url.trim()).map((photo, index) => ( + {`维修照片 + ))} +
+
+ )}
- {/* Signatures */} + {/* Status Info */} - 签字确认 + 状态信息 -
- {/* Worker Signature */} -
-

维修工人确认

-
-

签字人：{selectedOrder.signatures.worker.name}

-

时间：{selectedOrder.signatures.worker.timestamp}

-
- 工人签字 -
-
+
+
+

是否需要维修

+ + {selectedOrder.needRepair ? "需要维修" : "无需维修"} +
- - {/* Merchant Signature */} -
-

商户负责人验收

-
-

签字人：{selectedOrder.signatures.merchant.name}

-

时间：{selectedOrder.signatures.merchant.timestamp}

-
- 商户签字 -
-
+
+

设备是否正常

+ + {selectedOrder.equNormal ? "正常" : "异常"} +
- - {/* Dealer Admin Signature */} -
-

经销商管理员确认

-
-

签字人：{selectedOrder.signatures.dealerAdmin.name}

-

时间：{selectedOrder.signatures.dealerAdmin.timestamp}

-
- 经销商管理员签字 -
-
+
+

创建时间

+

{selectedOrder.createdAt}

+
+
+

更新时间

+

{selectedOrder.updatedAt}