trace-system/frontend
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refine aftersales form labels and signature

Browse Source
This commit is contained in:
Frudrax Cheng
2026-06-02 10:29:45 +08:00
parent cb88f18166
commit d216a25364
5 changed files with 61 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/Aftersales.tsx
+8 -8
View File
@@ -137,12 +137,12 @@ function AftersalesPage() {
), ),
}, },
{ {
title: '客户公司', title: '公司名称',
dataIndex: 'companyName', dataIndex: 'companyName',
key: 'companyName', key: 'companyName',
}, },
{ {
title: '联系人', title: '企业联系人',
dataIndex: 'contactName', dataIndex: 'contactName',
key: 'contactName', key: 'contactName',
width: 100, width: 100,
@@ -236,7 +236,7 @@ function AftersalesPage() {
> >
<Space style={{ marginBottom: 16, flexWrap: 'wrap' }}> <Space style={{ marginBottom: 16, flexWrap: 'wrap' }}>
<Input.Search <Input.Search
placeholder="搜索工单号/公司/联系人" placeholder="搜索工单号/公司/企业联系人"
allowClear allowClear
style={{ width: 260 }} style={{ width: 260 }}
onSearch={(v) => { onSearch={(v) => {
@@ -325,8 +325,8 @@ function AftersalesPage() {
<Form form={createForm} layout="vertical" onFinish={handleCreate}> <Form form={createForm} layout="vertical" onFinish={handleCreate}>
<Form.Item <Form.Item
name="companyName" name="companyName"
label="客户公司" label="公司名称"
rules={[{ required: true, message: '请输入客户公司' }]} rules={[{ required: true, message: '请输入公司名称' }]}
> >
<Input placeholder="例如：浙江北凡科技" /> <Input placeholder="例如：浙江北凡科技" />
</Form.Item> </Form.Item>
@@ -339,10 +339,10 @@ function AftersalesPage() {
</Form.Item> </Form.Item>
<Form.Item <Form.Item
name="contactName" name="contactName"
label="联系人" label="企业联系人"
rules={[{ required: true, message: '请输入联系人' }]} rules={[{ required: true, message: '请输入企业联系人' }]}
> >
<Input placeholder="联系人姓名" /> <Input placeholder="企业联系人姓名" />
</Form.Item> </Form.Item>
<Form.Item <Form.Item
name="contactPhone" name="contactPhone"
src/pages/AftersalesConfirm.tsx
+1 -1
View File
@@ -191,7 +191,7 @@ function AftersalesConfirmPage() {
<span className="value">{order.companyAddress}</span> <span className="value">{order.companyAddress}</span>
</div> </div>
<div className="detail-item"> <div className="detail-item">
<span className="label">联系人</span> <span className="label">企业联系人</span>
<span className="value">{order.contactName}</span> <span className="value">{order.contactName}</span>
</div> </div>
<div className="detail-item"> <div className="detail-item">
src/pages/AftersalesDetail.tsx
+24 -21
View File
@@ -238,10 +238,14 @@ function AftersalesDetailPage() {
.electronic-form-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 13px; } .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, .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-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 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-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; } .electronic-form-text { min-height: 72px; white-space: pre-wrap; }
.electronic-form-signature { display: flex; justify-content: flex-end; margin-top: 18px; }
.electronic-form-signature-box { width: 240px; text-align: center; }
.electronic-form-signature-title { margin: 0 0 8px; font-weight: 600; }
.electronic-form-signature-img { max-width: 220px; max-height: 90px; object-fit: contain; }
.electronic-form-signature-line { height: 64px; border-bottom: 1px solid #1f2937; }
</style> </style>
</head> </head>
<body>${formNode.outerHTML}</body> <body>${formNode.outerHTML}</body>
@@ -378,7 +382,7 @@ function AftersalesDetailPage() {
<Divider /> <Divider />
<Descriptions column={2} size="small" bordered style={{ marginBottom: 24 }}> <Descriptions column={2} size="small" bordered style={{ marginBottom: 24 }}>
<Descriptions.Item label="客户公司">{order.companyName}</Descriptions.Item> <Descriptions.Item label="公司名称">{order.companyName}</Descriptions.Item>
<Descriptions.Item label="处理人"> <Descriptions.Item label="处理人">
{order.technician?.name || '-'} {order.technician?.name || '-'}
</Descriptions.Item> </Descriptions.Item>
@@ -430,8 +434,8 @@ function AftersalesDetailPage() {
<Space style={{ display: 'flex' }} size={16}> <Space style={{ display: 'flex' }} size={16}>
<Form.Item <Form.Item
name="contactName" name="contactName"
label="联系人" label="企业联系人"
rules={[{ required: true, message: '请输入联系人' }]} rules={[{ required: true, message: '请输入企业联系人' }]}
style={{ flex: 1 }} style={{ flex: 1 }}
> >
<Input /> <Input />
@@ -565,11 +569,6 @@ function AftersalesDetailPage() {
</div> </div>
<table className="electronic-form-table"> <table className="electronic-form-table">
<tbody> <tbody>
<tr>
<td colSpan={4} className="electronic-form-section">
工单信息
</td>
</tr>
<tr> <tr>
<th>售后码</th> <th>售后码</th>
<td className="electronic-form-code">{order.serialNumber}</td> <td className="electronic-form-code">{order.serialNumber}</td>
@@ -577,27 +576,17 @@ function AftersalesDetailPage() {
<td>{SERVICE_TYPE_LABEL[order.serviceType]}</td> <td>{SERVICE_TYPE_LABEL[order.serviceType]}</td>
</tr> </tr>
<tr> <tr>
<td colSpan={4} className="electronic-form-section"> <th>公司名称</th>
客户信息
</td>
</tr>
<tr>
<th>客户公司</th>
<td>{order.companyName}</td> <td>{order.companyName}</td>
<th>公司位置</th> <th>公司位置</th>
<td>{order.companyAddress}</td> <td>{order.companyAddress}</td>
</tr> </tr>
<tr> <tr>
<th>联系人</th> <th>企业联系人</th>
<td>{order.contactName}</td> <td>{order.contactName}</td>
<th>联系电话</th> <th>联系电话</th>
<td>{order.contactPhone}</td> <td>{order.contactPhone}</td>
</tr> </tr>
<tr>
<td colSpan={4} className="electronic-form-section">
处理信息
</td>
</tr>
<tr> <tr>
<th>处理人</th> <th>处理人</th>
<td>{order.technician?.name || '-'}</td> <td>{order.technician?.name || '-'}</td>
@@ -622,6 +611,20 @@ function AftersalesDetailPage() {
</tr> </tr>
</tbody> </tbody>
</table> </table>
<div className="electronic-form-signature">
<div className="electronic-form-signature-box">
<p className="electronic-form-signature-title">客户签名</p>
{order.signature ? (
<img
src={order.signature}
alt="客户签名"
className="electronic-form-signature-img"
/>
) : (
<div className="electronic-form-signature-line" />
)}
</div>
</div>
</div> </div>
</Modal> </Modal>
src/pages/Dashboard.tsx
+1 -1
View File
@@ -215,7 +215,7 @@ function DashboardPage() {
</a> </a>
), ),
}, },
{ title: '客户公司', dataIndex: 'companyName', key: 'companyName' }, { title: '公司名称', dataIndex: 'companyName', key: 'companyName' },
{ {
title: '服务类型', title: '服务类型',
dataIndex: 'serviceType', dataIndex: 'serviceType',
src/pages/styles/AftersalesDetail.css
+27 -6
View File
@@ -66,12 +66,6 @@
font-weight: 600; font-weight: 600;
} }
.electronic-form-section {
background: #e5e7eb;
font-weight: 700;
text-align: center;
}
.electronic-form-code { .electronic-form-code {
color: #165dff; color: #165dff;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
@@ -84,6 +78,33 @@
white-space: pre-wrap; white-space: pre-wrap;
} }
.electronic-form-signature {
display: flex;
justify-content: flex-end;
margin-top: 18px;
}
.electronic-form-signature-box {
width: 240px;
text-align: center;
}
.electronic-form-signature-title {
margin: 0 0 8px;
font-weight: 600;
}
.electronic-form-signature-img {
max-width: 220px;
max-height: 90px;
object-fit: contain;
}
.electronic-form-signature-line {
height: 64px;
border-bottom: 1px solid #1f2937;
}
@media (max-width: 720px) { @media (max-width: 720px) {
.electronic-form-header { .electronic-form-header {
align-items: flex-start; align-items: flex-start;