diff --git a/src/components/Qc/QcComponent.tsx b/src/components/Qc/QcComponent.tsx index 4f8f335..862b02c 100644 --- a/src/components/Qc/QcComponent.tsx +++ b/src/components/Qc/QcComponent.tsx @@ -487,6 +487,7 @@ useEffect(() => { @@ -511,6 +512,7 @@ useEffect(() => { diff --git a/src/components/Qc/QcForm.tsx b/src/components/Qc/QcForm.tsx index 5333bef..22f1810 100644 --- a/src/components/Qc/QcForm.tsx +++ b/src/components/Qc/QcForm.tsx @@ -20,9 +20,11 @@ import { QcFormInput, QcResult } from "@/app/api/qc"; interface Props { rows: QcResult[]; disabled?: boolean; + /** When true, use smaller typography and inputs to match 來貨詳情 (e.g. in QcStockInModal). */ + compactLayout?: boolean; } -const QcForm: React.FC = ({ rows, disabled = false }) => { +const QcForm: React.FC = ({ rows, disabled = false, compactLayout = false }) => { const { t } = useTranslation("purchaseOrder"); const apiRef = useGridApiRef(); const { @@ -71,7 +73,7 @@ const QcForm: React.FC = ({ rows, disabled = false }) => { sx={{ lineHeight: 1.5, padding: "4px", - fontSize: 18, + fontSize: compactLayout ? 14 : 18, }} > {`${params.row.order ?? "N/A"}. ${params.value}`}
@@ -161,8 +163,9 @@ const QcForm: React.FC = ({ rows, disabled = false }) => { onMouseDown={(e) => e.stopPropagation()} onKeyDown={(e) => e.stopPropagation()} inputProps={{ min: 0 }} + size={compactLayout ? "small" : "medium"} sx={{ width: '100%', - "& .MuiInputBase-input": { + "& .MuiInputBase-input": compactLayout ? undefined : { padding: "0.75rem", fontSize: 24, }, @@ -202,7 +205,7 @@ const QcForm: React.FC = ({ rows, disabled = false }) => { onMouseDown={(e) => e.stopPropagation()} onKeyDown={(e) => e.stopPropagation()} sx={{ width: '100%', - "& .MuiInputBase-input": { + "& .MuiInputBase-input": compactLayout ? undefined : { padding: "0.75rem", fontSize: 24, }, @@ -211,7 +214,7 @@ const QcForm: React.FC = ({ rows, disabled = false }) => { ); }, }, - ], []) + ], [compactLayout, t, setValue, qcDisabled]) // const getRowId = (row :any) => { // return qcRecord.findIndex(qc => qc == row);