Update aftersales electronic form layout

This commit is contained in:
Frudrax Cheng
2026-06-02 10:24:40 +08:00
parent 31df505735
commit cb88f18166
2 changed files with 35 additions and 34 deletions
+21 -34
View File
@@ -57,12 +57,6 @@ const WORK_ORDER_STATUS_COLOR: Record<AftersalesWorkOrderStatus, string> = {
rejected: 'warning',
};
const AUTHORIZATION_STATUS_LABEL = {
pending: '待确认',
authorized: '已授权',
unauthorized: '未授权',
} as const;
function statusStepIndex(status: AftersalesWorkOrderStatus): number {
switch (status) {
case 'created':
@@ -75,11 +69,6 @@ function statusStepIndex(status: AftersalesWorkOrderStatus): number {
}
}
function formatDateTime(value?: string) {
if (!value) return '-';
return new Date(value).toLocaleString('zh-CN');
}
function getAftersalesPublicUrl(serialNumber: string) {
return `${window.location.origin}/aftersales/${serialNumber}`;
}
@@ -243,11 +232,13 @@ function AftersalesDetailPage() {
.electronic-form-brand { justify-self: start; }
.electronic-form-logo { height: 34px; object-fit: contain; }
.electronic-form-title { justify-self: center; text-align: center; font-size: 20px; font-weight: 700; }
.electronic-form-meta { justify-self: end; }
.electronic-form-meta { justify-self: end; text-align: center; }
.electronic-form-qr { width: 82px; height: 82px; object-fit: contain; }
.electronic-form-hotline { margin: 6px 0 0; font-size: 12px; font-weight: 600; white-space: nowrap; }
.electronic-form-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 13px; }
.electronic-form-table th, .electronic-form-table td { border: 1px solid #1f2937; padding: 9px 10px; vertical-align: top; word-break: break-word; }
.electronic-form-table th { width: 120px; background: #f3f4f6; text-align: left; font-weight: 600; }
.electronic-form-section { background: #e5e7eb; font-weight: 700; text-align: center; }
.electronic-form-table td { min-height: 24px; }
.electronic-form-table .electronic-form-code { color: #165dff; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 16px; font-weight: 700; }
.electronic-form-text { min-height: 72px; white-space: pre-wrap; }
@@ -569,22 +560,27 @@ function AftersalesDetailPage() {
className="electronic-form-qr"
/>
)}
<p className="electronic-form-hotline">线400-998-5710</p>
</div>
</div>
<table className="electronic-form-table">
<tbody>
<tr>
<th></th>
<td className="electronic-form-code">{order.serialNumber}</td>
<th></th>
<td>{WORK_ORDER_STATUS_LABEL[order.workOrderStatus]}</td>
<td colSpan={4} className="electronic-form-section">
</td>
</tr>
<tr>
<th></th>
<td>{AUTHORIZATION_STATUS_LABEL[order.authorizationStatus]}</td>
<th></th>
<td className="electronic-form-code">{order.serialNumber}</td>
<th></th>
<td>{SERVICE_TYPE_LABEL[order.serviceType]}</td>
</tr>
<tr>
<td colSpan={4} className="electronic-form-section">
</td>
</tr>
<tr>
<th></th>
<td>{order.companyName}</td>
@@ -597,6 +593,11 @@ function AftersalesDetailPage() {
<th></th>
<td>{order.contactPhone}</td>
</tr>
<tr>
<td colSpan={4} className="electronic-form-section">
</td>
</tr>
<tr>
<th></th>
<td>{order.technician?.name || '-'}</td>
@@ -604,22 +605,8 @@ function AftersalesDetailPage() {
<td>{order.creator?.name || '-'}</td>
</tr>
<tr>
<th></th>
<td>{formatDateTime(order.createdAt)}</td>
<th></th>
<td>{formatDateTime(order.updatedAt)}</td>
</tr>
<tr>
<th></th>
<td>{formatDateTime(order.scannedAt)}</td>
<th></th>
<td>{formatDateTime(order.confirmedAt)}</td>
</tr>
<tr>
<th>退</th>
<td>{order.rejectCount}</td>
<th></th>
<td>{formatDateTime(new Date().toISOString())}</td>
<th></th>
<td colSpan={3}>{WORK_ORDER_STATUS_LABEL[order.workOrderStatus]}</td>
</tr>
<tr>
<th></th>
+14
View File
@@ -28,6 +28,7 @@
.electronic-form-meta {
justify-self: end;
text-align: center;
}
.electronic-form-qr {
@@ -36,6 +37,13 @@
object-fit: contain;
}
.electronic-form-hotline {
margin: 6px 0 0;
font-size: 12px;
font-weight: 600;
white-space: nowrap;
}
.electronic-form-table {
width: 100%;
border-collapse: collapse;
@@ -58,6 +66,12 @@
font-weight: 600;
}
.electronic-form-section {
background: #e5e7eb;
font-weight: 700;
text-align: center;
}
.electronic-form-code {
color: #165dff;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;