diff --git a/src/pages/AftersalesDetail.tsx b/src/pages/AftersalesDetail.tsx index ebde283..e4234a9 100644 --- a/src/pages/AftersalesDetail.tsx +++ b/src/pages/AftersalesDetail.tsx @@ -17,6 +17,8 @@ import { } from 'antd'; import { ArrowLeftOutlined, + FileTextOutlined, + PrinterOutlined, QrcodeOutlined, SaveOutlined, SendOutlined, @@ -24,6 +26,7 @@ import { UserSwitchOutlined, } from '@ant-design/icons'; import { aftersalesApi, authApi, usersApi } from '@/services/api'; +import logo from '@/assets/img/logo.png?url'; import type { AftersalesOrder, AftersalesServiceType, @@ -31,6 +34,7 @@ import type { UpdateAftersalesRequest, User, } from '@/types'; +import './styles/AftersalesDetail.css'; const SERVICE_TYPE_LABEL: Record = { software: '软件故障', @@ -52,6 +56,12 @@ const WORK_ORDER_STATUS_COLOR: Record = { rejected: 'warning', }; +const AUTHORIZATION_STATUS_LABEL = { + pending: '待确认', + authorized: '已授权', + unauthorized: '未授权', +} as const; + function statusStepIndex(status: AftersalesWorkOrderStatus): number { switch (status) { case 'created': @@ -64,6 +74,11 @@ function statusStepIndex(status: AftersalesWorkOrderStatus): number { } } +function formatDateTime(value?: string) { + if (!value) return '-'; + return new Date(value).toLocaleString('zh-CN'); +} + function AftersalesDetailPage() { const { serialNumber = '' } = useParams<{ serialNumber: string }>(); const navigate = useNavigate(); @@ -79,6 +94,7 @@ function AftersalesDetailPage() { const [qrModalVisible, setQrModalVisible] = useState(false); const [qrCodeDataUrl, setQrCodeDataUrl] = useState(''); const [qrUrl, setQrUrl] = useState(''); + const [electronicFormVisible, setElectronicFormVisible] = useState(false); const [reassignModalVisible, setReassignModalVisible] = useState(false); const [reassignTechnicianId, setReassignTechnicianId] = useState(); @@ -185,6 +201,44 @@ function AftersalesDetailPage() { link.click(); }; + const handlePrintElectronicForm = () => { + const formNode = document.querySelector('.aftersales-electronic-form'); + if (!formNode) return; + + const printWindow = window.open('', '_blank', 'width=960,height=720'); + if (!printWindow) { + message.error('无法打开打印窗口，请检查浏览器弹窗设置'); + return; + } + + printWindow.document.write(` + + + + ${order?.serialNumber || '售后电子表单'} + + + ${formNode.outerHTML} + + `); + printWindow.document.close(); + printWindow.focus(); + setTimeout(() => printWindow.print(), 300); + }; + const handleForceClose = () => { if (!order) return; Modal.confirm({ @@ -269,6 +323,9 @@ function AftersalesDetailPage() { } extra={ + @@ -462,6 +519,93 @@ function AftersalesDetailPage() { + setElectronicFormVisible(false)} + width={960} + footer={[ + , + , + ]} + > +
+
+ 浙江贝凡 +
浙江贝凡售后服务电子表单
+
售后码：{order.serialNumber}
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
售后码{order.serialNumber}工单状态{WORK_ORDER_STATUS_LABEL[order.workOrderStatus]}
授权状态{AUTHORIZATION_STATUS_LABEL[order.authorizationStatus]}服务类型{SERVICE_TYPE_LABEL[order.serviceType]}
客户公司{order.companyName}公司位置{order.companyAddress}
联系人{order.contactName}联系电话{order.contactPhone}
负责技术员{order.technician?.name || '-'}创建人{order.creator?.name || '-'}
创建时间{formatDateTime(order.createdAt)}更新时间{formatDateTime(order.updatedAt)}
客户扫码时间{formatDateTime(order.scannedAt)}客户确认时间{formatDateTime(order.confirmedAt)}
退回次数{order.rejectCount}表单生成时间{formatDateTime(new Date().toISOString())}
问题描述反馈 + {order.issueDescription || '-'} +
处理结果 + {order.resolutionNote || '-'} +
+
+ +