diff --git a/src/components/InputDataGrid/InputDataGrid.tsx b/src/components/InputDataGrid/InputDataGrid.tsx index bea6875..3f5ff68 100644 --- a/src/components/InputDataGrid/InputDataGrid.tsx +++ b/src/components/InputDataGrid/InputDataGrid.tsx @@ -21,6 +21,7 @@ import { GridRowModel, GridRowModes, GridRowModesModel, + GridRowParams, GridRowSelectionModel, GridToolbarContainer, GridValidRowModel, @@ -63,6 +64,7 @@ export type TableRow = Partial< isActive: boolean | undefined; _isNew: boolean; _error: E; + _disableDelete: boolean; } & ResultWithId >; @@ -76,6 +78,7 @@ export interface InputDataGridProps { showRemoveBtn?: boolean; addRowDefaultValue?: Partial; _setRowModesModel?: Dispatch>; + _setRowSelectionModel?: Dispatch>; } export interface SelectionInputDataGridProps { @@ -89,6 +92,7 @@ export interface SelectionInputDataGridProps { showRemoveBtn?: boolean; addRowDefaultValue?: Partial; _setRowModesModel?: Dispatch>; + _setRowSelectionModel?: Dispatch>; } export type Props = @@ -118,6 +122,7 @@ function InputDataGrid({ showRemoveBtn = true, addRowDefaultValue = {}, _setRowModesModel = undefined, + _setRowSelectionModel = undefined, }: Props) { const { t, @@ -157,9 +162,15 @@ function InputDataGrid({ `${formKey}_active`, ) as GridRowSelectionModel; // console.log(rowModel); - return rowModel; + return rowModel ?? []; }); + useEffect(() => { + if (_setRowSelectionModel) { + _setRowSelectionModel(rowSelectionModel) + } + }, [rowSelectionModel]) + const handleSave = useCallback( (id: GridRowId) => () => { setRowModesModel((prevRowModesModel) => ({ @@ -259,7 +270,9 @@ function InputDataGrid({ headerName: "", flex: 0.5, cellClassName: "actions", - getActions: ({ id }: { id: GridRowId }) => { + getActions: (params: GridRowParams>) => { + const id = params.id + const _disableDelete = Boolean(params.row._disableDelete) const isInEditMode = rowModesModel[id]?.mode === GridRowModes.Edit; if (isInEditMode) { return [ @@ -284,6 +297,7 @@ function InputDataGrid({ } label="Delete" + disabled={_disableDelete} sx={{ color: "error.main", }} @@ -349,7 +363,8 @@ function InputDataGrid({ rowSelectionModel={rowSelectionModel} apiRef={apiRef} rows={rows} - columns={!checkboxSelection ? _columns : columns} + // columns={!checkboxSelection ? _columns : columns} + columns={_columns} editMode="row" autoHeight sx={{ @@ -377,15 +392,17 @@ function InputDataGrid({ return classname; }} slots={ - !checkboxSelection - ? { + // !checkboxSelection + // ? + { footer: FooterToolbar, noRowsOverlay: NoRowsOverlay, } - : undefined + // : undefined } slotProps={ - !checkboxSelection && Boolean(needAdd) + // !checkboxSelection && Boolean(needAdd) + Boolean(needAdd) ? { footer: { child: footer }, } diff --git a/src/components/PoDetail/PutAwayForm.tsx b/src/components/PoDetail/PutAwayForm.tsx index 839d749..e3ccf3a 100644 --- a/src/components/PoDetail/PutAwayForm.tsx +++ b/src/components/PoDetail/PutAwayForm.tsx @@ -28,6 +28,7 @@ import { GridRenderCellParams, GridRenderEditCellParams, useGridApiRef, + GridRowSelectionModel, } from "@mui/x-data-grid"; import InputDataGrid from "../InputDataGrid"; import { TableRow } from "../InputDataGrid/InputDataGrid"; @@ -60,6 +61,7 @@ interface Props { disabled: boolean; // qc: QcItemWithChecks[]; setRowModesModel: Dispatch>; + setRowSelectionModel: Dispatch>; } type EntryError = | { @@ -81,7 +83,7 @@ const style = { width: "auto", }; -const PutAwayForm: React.FC = ({ itemDetail, warehouse, disabled, setRowModesModel }) => { +const PutAwayForm: React.FC = ({ itemDetail, warehouse, disabled, setRowModesModel, setRowSelectionModel }) => { const { t } = useTranslation("purchaseOrder"); const apiRef = useGridApiRef(); const { @@ -534,7 +536,7 @@ const PutAwayForm: React.FC = ({ itemDetail, warehouse, disabled, setRowM {/* */} apiRef={apiRef} - checkboxSelection={false} + checkboxSelection={true} _formKey={"putAwayLines"} columns={columns} validateRow={validation} @@ -542,6 +544,7 @@ const PutAwayForm: React.FC = ({ itemDetail, warehouse, disabled, setRowM showRemoveBtn={false} addRowDefaultValue={addRowDefaultValue} _setRowModesModel={setRowModesModel} + _setRowSelectionModel={setRowSelectionModel} /> diff --git a/src/components/PoDetail/QcStockInModalVer2.tsx b/src/components/PoDetail/QcStockInModalVer2.tsx index 0b29914..4578d75 100644 --- a/src/components/PoDetail/QcStockInModalVer2.tsx +++ b/src/components/PoDetail/QcStockInModalVer2.tsx @@ -21,7 +21,7 @@ import StockInFormVer2 from "./StockInFormVer2"; import QcComponent from "./QcComponent"; import { dummyPutAwayLine, dummyQCData } from "./dummyQcTemplate"; import PutAwayForm from "./PutAwayForm"; -import { GridRowModes, useGridApiRef } from "@mui/x-data-grid"; +import { GridRowModes, GridRowSelectionModel, useGridApiRef } from "@mui/x-data-grid"; import {submitDialogWithWarning} from "../Swal/CustomAlerts"; import { INPUT_DATE_FORMAT, arrayToDateString, dayjsToInputDateString } from "@/app/utils/formatUtil"; import dayjs from "dayjs"; @@ -33,6 +33,7 @@ import { SessionWithTokens } from "@/config/authConfig"; import { GridRowModesModel } from "@mui/x-data-grid"; import { isEmpty } from "lodash"; import { EscalationCombo } from "@/app/api/user"; +import { truncateSync } from "fs"; const style = { @@ -103,7 +104,7 @@ const defaultNewValue = useMemo(() => { dnDate: arrayToDateString(itemDetail.dnDate, "input")?? dayjsToInputDateString(dayjs()), // putAwayLines: dummyPutAwayLine, // putAwayLines: itemDetail.putAwayLines.map((line) => (return {...line, printQty: 1})) ?? [], - putAwayLines: itemDetail.putAwayLines?.map((line) => ({...line, printQty: 1, _isNew: false})) ?? [], + putAwayLines: itemDetail.putAwayLines?.map((line) => ({...line, printQty: 1, _isNew: false, _disableDelete: true})) ?? [], // qcResult: (itemDetail.qcResult && itemDetail.qcResult?.length > 0) ? itemDetail.qcResult : [],//[...dummyQCData], escResult: (itemDetail.escResult && itemDetail.escResult?.length > 0) ? itemDetail.escResult : [], productionDate: itemDetail.productionDate ? arrayToDateString(itemDetail.productionDate, "input") : undefined, @@ -366,6 +367,7 @@ const [qcItems, setQcItems] = useState(dummyQCData) // Put away model const [pafRowModesModel, setPafRowModesModel] = useState({}) + const [pafRowSelectionModel, setPafRowSelectionModel] = useState([]) const pafSubmitDisable = useMemo(() => { // console.log("%c mode: ", "background:#90EE90; color:red", Object.entries(pafRowModesModel)) // console.log("%c mode: ", "background:pink; color:#87CEEB", Object.entries(pafRowModesModel)) @@ -441,11 +443,14 @@ const [qcItems, setQcItems] = useState(dummyQCData) alert("列印數量不正確!"); return; } - + // console.log(pafRowSelectionModel) + const printList = formProps.watch("putAwayLines")?.filter((line) => ((pafRowSelectionModel ?? []).some((model) => model === line.id))) ?? [] + const printQty = printList.reduce((acc, cur) => acc + cur.printQty, 0) + // console.log(printQty) const data: PrintQrCodeForSilRequest = { stockInLineId: itemDetail.id, printerId: selectedPrinter.id, - printQty: formProps.watch("putAwayLines")?.reduce((acc, cur) => acc + cur.printQty, 0) + printQty: printQty } const response = await printQrCodeForSil(data); if (response) { @@ -454,7 +459,7 @@ const [qcItems, setQcItems] = useState(dummyQCData) } finally { setIsPrinting(() => false) } - }, [itemDetail.id]); + }, [itemDetail.id, pafRowSelectionModel]); const acceptQty = formProps.watch("acceptedQty") @@ -499,6 +504,7 @@ const [qcItems, setQcItems] = useState(dummyQCData) warehouse={warehouse!} disabled={viewOnly} setRowModesModel={setPafRowModesModel} + setRowSelectionModel={setPafRowSelectionModel} /> {isPrinting ? t("Printing") : t("print")}