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

style: use date picker for manufacture date

Browse Source
This commit is contained in:
Frudrax Cheng
2026-06-05 17:28:27 +08:00
parent 79ce72f8ea
commit bdd5c65091
3 changed files with 18 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+1
View File
@@ -14,6 +14,7 @@
"@ant-design/icons": "^6.1.0",
"antd": "^6.3.1",
"axios": "^1.13.6",
"dayjs": "^1.11.21",
"qrcode": "^1.5.4",
"react": "^19.2.4",
"react-dom": "^19.2.4",
pnpm-lock.yaml
Generated
+10 -7
View File
@@ -17,6 +17,9 @@ importers:
axios:
specifier: ^1.13.6
version: 1.13.6
dayjs:
specifier: ^1.11.21
version: 1.11.21
qrcode:
specifier: ^1.5.4
version: 1.5.4
@@ -872,8 +875,8 @@ packages:
csstype@3.2.3:
resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}
dayjs@1.11.19:
resolution: {integrity: sha512-t5EcLVS6QPBNqM2z8fakk/NKel+Xzshgt8FFKAn+qwlD1pzZWxh0nVCrvFK7ZDb6XucZeF9z8C7CBWTRIVApAw==}
dayjs@1.11.21:
resolution: {integrity: sha512-98IT+HOahAisibz/yjKbzuOBwYcjJ7BCLPzARyHiyEBmRz4fatF+KPJszEHXsGYjUG234aH/cOjW1wwTbKUZlA==}
debug@4.4.3:
resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==}
@@ -1679,7 +1682,7 @@ snapshots:
react: 19.2.4
react-dom: 19.2.4(react@19.2.4)
'@rc-component/picker@1.9.0(dayjs@1.11.19)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
'@rc-component/picker@1.9.0(dayjs@1.11.21)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
dependencies:
'@rc-component/overflow': 1.0.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
'@rc-component/resize-observer': 1.1.1(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
@@ -1689,7 +1692,7 @@ snapshots:
react: 19.2.4
react-dom: 19.2.4(react@19.2.4)
optionalDependencies:
dayjs: 1.11.19
dayjs: 1.11.21
'@rc-component/portal@2.2.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
dependencies:
@@ -2022,7 +2025,7 @@ snapshots:
'@rc-component/mutate-observer': 2.0.1(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
'@rc-component/notification': 1.2.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
'@rc-component/pagination': 1.2.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
'@rc-component/picker': 1.9.0(dayjs@1.11.19)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
'@rc-component/picker': 1.9.0(dayjs@1.11.21)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
'@rc-component/progress': 1.0.2(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
'@rc-component/qrcode': 1.1.1(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
'@rc-component/rate': 1.0.1(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
@@ -2043,7 +2046,7 @@ snapshots:
'@rc-component/upload': 1.1.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
'@rc-component/util': 1.9.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
clsx: 2.1.1
dayjs: 1.11.19
dayjs: 1.11.21
react: 19.2.4
react-dom: 19.2.4(react@19.2.4)
scroll-into-view-if-needed: 3.1.0
@@ -2108,7 +2111,7 @@ snapshots:
csstype@3.2.3: {}
dayjs@1.11.19: {}
dayjs@1.11.21: {}
debug@4.4.3:
dependencies:
src/pages/ProductTraces.tsx
+7 -14
View File
@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
import {
Button,
Card,
DatePicker,
Form,
Image,
Input,
@@ -23,11 +24,12 @@ import {
UploadOutlined,
} from '@ant-design/icons';
import type { UploadFile } from 'antd';
import dayjs, { type Dayjs } from 'dayjs';
import { productTracesApi } from '@/services/api';
import type { CreateProductTraceRequest, ProductTrace, UpdateProductTraceRequest } from '@/types';
type ProductTraceFormValues = Omit<CreateProductTraceRequest, 'manufactureDate'> & {
manufactureDate: string;
manufactureDate: Dayjs;
};
function formatDate(value: string) {
@@ -35,15 +37,6 @@ function formatDate(value: string) {
return new Date(value).toLocaleDateString('zh-CN');
}
function toDateInputValue(value: string) {
if (!value) return '';
return new Date(value).toISOString().slice(0, 10);
}
function dateInputToISOString(value: string) {
return new Date(`${value}T00:00:00+08:00`).toISOString();
}
function ProductTracesPage() {
const [traces, setTraces] = useState<ProductTrace[]>([]);
const [loading, setLoading] = useState(true);
@@ -110,7 +103,7 @@ function ProductTracesPage() {
companyPhone: trace.companyPhone,
deviceInfo: trace.deviceInfo,
warrantyPeriod: trace.warrantyPeriod,
manufactureDate: toDateInputValue(trace.manufactureDate),
manufactureDate: dayjs(trace.manufactureDate),
serialNumber: trace.serialNumber,
officialWebsite: trace.officialWebsite,
});
@@ -133,7 +126,7 @@ function ProductTracesPage() {
companyPhone: values.companyPhone,
deviceInfo: values.deviceInfo,
warrantyPeriod: values.warrantyPeriod,
manufactureDate: dateInputToISOString(values.manufactureDate),
manufactureDate: values.manufactureDate.toDate().toISOString(),
officialWebsite: values.officialWebsite || '',
};
saved = await productTracesApi.update(editingTrace.serialNumber, payload);
@@ -142,7 +135,7 @@ function ProductTracesPage() {
...values,
officialWebsite: values.officialWebsite || '',
serialNumber: values.serialNumber.trim(),
manufactureDate: dateInputToISOString(values.manufactureDate),
manufactureDate: values.manufactureDate.toDate().toISOString(),
};
saved = await productTracesApi.create(payload);
}
@@ -367,7 +360,7 @@ function ProductTracesPage() {
<Input placeholder="例如：1 年 / 2027-06-05 前" />
</Form.Item>
<Form.Item name="manufactureDate" label="出厂日期" rules={[{ required: true, message: '请选择出厂日期' }]}>
<Input type="date" />
<DatePicker style={{ width: '100%' }} />
</Form.Item>
<Form.Item name="serialNumber" label="产品序列号" rules={[{ required: true, message: '请输入产品序列号' }]}>
<Input disabled={Boolean(editingTrace)} />