WuYongJie/furniture-3d-system-Wu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(intake): extract non-integrated sku barcode field

Browse Source
This commit is contained in:
WuYongJie 2026-06-08 15:39:33 +08:00
parent c2f8cee9f0
commit 0443b33705
2 changed files with 83 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
furniture-3d-system/src/app/intake/non-integrated/NonIntegratedDetailClient.tsx
View File

@ -34,6 +34,7 @@ import {
SkuNationalStandardComplianceField,
SkuSupplierNameField,
} from "./components/SkuDirectoryFields";
import { SkuBarcodeField } from "./components/SkuBarcodeField";
import { BomPartImageField } from "./components/BomPartImageField";
import { AdaptableBrandField } from "./components/BrandControls";
import {
@ -9151,77 +9152,6 @@ function SkuMaterialField({
);
}
function SkuBarcodeField({
value,
placeholder,
readOnly,
scanLabel,
columnWidth,
onChange,
onOpenScanner,
componentDetailsCount = 0,
onOpenComponentDetails,
onColumnResize,
}: {
value: string;
placeholder?: string;
readOnly: boolean;
scanLabel: string;
columnWidth: number;
onChange: (value: string) => void;
onOpenScanner: () => void;
componentDetailsCount?: number;
onOpenComponentDetails?: () => void;
onColumnResize: (width: number) => void;
}) {
const hasComponentDetails = componentDetailsCount > 0 && onOpenComponentDetails;
const buttonWidth = (readOnly ? 0 : 44) + (hasComponentDetails ? 36 : 0);
return (
<SkuColumnResizableFrame
columnWidth={columnWidth}
minWidth={SKU_COLUMN_DEFAULT_WIDTHS.barcode}
onColumnResize={onColumnResize}
className="flex items-stretch gap-1"
>
<div className="min-w-0 flex-1">
<SkuRowField
value={value}
placeholder={placeholder}
readOnly={readOnly}
mode="singleLineResizable"
columnWidth={Math.max(columnWidth - buttonWidth, 56)}
onChange={onChange}
/>
</div>
{readOnly ? null : (
<Button
type="button"
variant="plain"
size="small"
aria-label={`扫码填入${scanLabel}条码`}
title="扫码填入条码"
className="!h-8 !min-h-8 !shrink-0 !rounded !px-2 !py-0 !text-[11px]"
onClick={onOpenScanner}
>
扫码
</Button>
)}
{hasComponentDetails ? (
<button
type="button"
aria-label={`查看${scanLabel}部件明细`}
title={`查看部件明细（${componentDetailsCount} 个）`}
className="flex h-8 w-8 shrink-0 items-center justify-center rounded border border-apple-separator bg-white text-apple-label-secondary transition hover:border-apple-blue hover:text-apple-blue"
onClick={onOpenComponentDetails}
>
<Search className="h-3.5 w-3.5" aria-hidden="true" />
</button>
) : null}
</SkuColumnResizableFrame>
);
}
function BomBoardMaterialField({
rowId: _rowId,
value,
@ -30450,6 +30380,9 @@ function renderFactoryQualityWorkspace() {
item.model || `SKU ${index + 1}`
}
columnWidth={skuColumnWidths.barcode}
minColumnWidth={
SKU_COLUMN_DEFAULT_WIDTHS.barcode
}
onChange={(value) =>
updateSkuItem(
item.id,

79
furniture-3d-system/src/app/intake/non-integrated/components/SkuBarcodeField.tsx Normal file
View File

@ -0,0 +1,79 @@
import { Search } from "lucide-react";
import Button from "@/components/ui/Button";
import {
SkuColumnResizableFrame,
SkuRowField,
} from "./SkuTableFields";
export function SkuBarcodeField({
value,
placeholder,
readOnly,
scanLabel,
columnWidth,
minColumnWidth,
onChange,
onOpenScanner,
componentDetailsCount = 0,
onOpenComponentDetails,
onColumnResize,
}: {
value: string;
placeholder?: string;
readOnly: boolean;
scanLabel: string;
columnWidth: number;
minColumnWidth: number;
onChange: (value: string) => void;
onOpenScanner: () => void;
componentDetailsCount?: number;
onOpenComponentDetails?: () => void;
onColumnResize: (width: number) => void;
}) {
const hasComponentDetails = componentDetailsCount > 0 && onOpenComponentDetails;
const buttonWidth = (readOnly ? 0 : 44) + (hasComponentDetails ? 36 : 0);
return (
<SkuColumnResizableFrame
columnWidth={columnWidth}
minWidth={minColumnWidth}
onColumnResize={onColumnResize}
className="flex items-stretch gap-1"
>
<div className="min-w-0 flex-1">
<SkuRowField
value={value}
placeholder={placeholder}
readOnly={readOnly}
mode="singleLineResizable"
columnWidth={Math.max(columnWidth - buttonWidth, 56)}
onChange={onChange}
/>
</div>
{readOnly ? null : (
<Button
type="button"
variant="plain"
size="small"
aria-label={`\u626b\u7801\u586b\u5165${scanLabel}\u6761\u7801`}
title={"\u626b\u7801\u586b\u5165\u6761\u7801"}
className="!h-8 !min-h-8 !shrink-0 !rounded !px-2 !py-0 !text-[11px]"
onClick={onOpenScanner}
>
{"\u626b\u7801"}
</Button>
)}
{hasComponentDetails ? (
<button
type="button"
aria-label={`\u67e5\u770b${scanLabel}\u90e8\u4ef6\u660e\u7ec6`}
title={`\u67e5\u770b\u90e8\u4ef6\u660e\u7ec6\uff08${componentDetailsCount} \u4e2a\uff09`}
className="flex h-8 w-8 shrink-0 items-center justify-center rounded border border-apple-separator bg-white text-apple-label-secondary transition hover:border-apple-blue hover:text-apple-blue"
onClick={onOpenComponentDetails}
>
<Search className="h-3.5 w-3.5" aria-hidden="true" />
</button>
) : null}
</SkuColumnResizableFrame>
);
}