From 169584e2c9c3e71969821daa69c4d48d845b3078 Mon Sep 17 00:00:00 2001
From: "CANCERYS\\kw093" <kw093a011@gmail.com>
Date: Mon, 27 Apr 2026 11:48:17 +0800
Subject: [PATCH] update workbenchprintlabel to show QRcode

---
 .../WorkbenchGoodPickExecutionDetail.tsx      |  8 ++
 .../WorkbenchLotLabelPrintModal.tsx           | 96 +++++++++----------
 .../JoWorkbench/newJobPickExecution.tsx       |  8 ++
 .../PickOrderSearch/PickOrderSearch.tsx       |  3 +-
 .../WorkbenchPickExecution.tsx                |  5 +-
 5 files changed, 70 insertions(+), 50 deletions(-)

diff --git a/src/components/DoWorkbench/WorkbenchGoodPickExecutionDetail.tsx b/src/components/DoWorkbench/WorkbenchGoodPickExecutionDetail.tsx
index 21b6cc7..54abc51 100644
--- a/src/components/DoWorkbench/WorkbenchGoodPickExecutionDetail.tsx
+++ b/src/components/DoWorkbench/WorkbenchGoodPickExecutionDetail.tsx
@@ -561,6 +561,14 @@ const [pickOrderSwitching, setPickOrderSwitching] = useState(false);
   const [workbenchLotLabelContextLot, setWorkbenchLotLabelContextLot] =
     useState<any | null>(null);
 
+  useEffect(() => {
+    if (!qrScanSuccess || !workbenchLotLabelModalOpen) return;
+    setWorkbenchLotLabelModalOpen(false);
+    setWorkbenchLotLabelInitialPayload(null);
+    setWorkbenchLotLabelReminderText(null);
+    setWorkbenchLotLabelContextLot(null);
+  }, [qrScanSuccess, workbenchLotLabelModalOpen]);
+
     //  Add these missing state variables after line 352
     const [isManualScanning, setIsManualScanning] = useState<boolean>(false);
     // Track processed QR codes by itemId+stockInLineId combination for better lot confirmation handling
diff --git a/src/components/DoWorkbench/WorkbenchLotLabelPrintModal.tsx b/src/components/DoWorkbench/WorkbenchLotLabelPrintModal.tsx
index 7f3773a..e6abd6d 100644
--- a/src/components/DoWorkbench/WorkbenchLotLabelPrintModal.tsx
+++ b/src/components/DoWorkbench/WorkbenchLotLabelPrintModal.tsx
@@ -36,6 +36,7 @@ import {
   fetchWorkbenchPrinters,
   printWorkbenchLotLabel,
 } from "@/app/api/doworkbench/actions";
+import { QRCodeSVG } from "qrcode.react";
 
 type ScanPayload = {
   itemId: number;
@@ -66,6 +67,7 @@ type QrCodeAnalysisResponse = {
   sameItemLots: Array<{
     lotNo: string;
     inventoryLotLineId: number;
+    stockInLineId?: number | null;
     availableQty: number;
     uom: string;
     warehouseCode?: string | null;
@@ -175,9 +177,9 @@ const WorkbenchLotLabelPrintModal: React.FC<WorkbenchLotLabelPrintModalProps> =
   const [printingLotLineId, setPrintingLotLineId] = useState<number | null>(
     null,
   );
-  const [workbenchScanPickLotLineId, setWorkbenchScanPickLotLineId] = useState<
-    number | null
-  >(null);
+  const [qrVisibleLotLineId, setQrVisibleLotLineId] = useState<number | null>(
+    null,
+  );
 
   const [snackbar, setSnackbar] = useState<{
     open: boolean;
@@ -195,7 +197,7 @@ const WorkbenchLotLabelPrintModal: React.FC<WorkbenchLotLabelPrintModalProps> =
     setAnalysis(null);
     setPrintQty(1);
     setPrintingLotLineId(null);
-    setWorkbenchScanPickLotLineId(null);
+    setQrVisibleLotLineId(null);
   }, []);
 
   useEffect(() => {
@@ -383,6 +385,7 @@ const WorkbenchLotLabelPrintModal: React.FC<WorkbenchLotLabelPrintModalProps> =
       ? {
           lotNo: scanned?.lotNo ?? "",
           inventoryLotLineId: scannedLotLineId,
+          stockInLineId: Number(scanned?.stockInLineId ?? 0) || null,
           availableQty: Math.max(fromApi, fromTable) as number,
           uom: (scannedRow?.uom ?? triggerLotUom ?? "") as string,
           warehouseCode:
@@ -465,33 +468,6 @@ const WorkbenchLotLabelPrintModal: React.FC<WorkbenchLotLabelPrintModalProps> =
     [selectedPrinterId, printQty],
   );
 
-  const handleWorkbenchScanPickOne = useCallback(
-    async (inventoryLotLineId: number, lotNo: string) => {
-      if (!onWorkbenchScanPick) return;
-      setWorkbenchScanPickLotLineId(inventoryLotLineId);
-      try {
-        const n = Number(submitQty);
-        const qtyPayload =
-          Number.isFinite(n) && n >= 0 ? { qty: n } : {};
-        await onWorkbenchScanPick({ inventoryLotLineId, lotNo, ...qtyPayload });
-        setSnackbar({
-          open: true,
-          message: `掃碼提貨成功：Lot ${lotNo}`,
-          severity: "success",
-        });
-      } catch (e) {
-        setSnackbar({
-          open: true,
-          message: e instanceof Error ? e.message : "掃碼提貨失敗",
-          severity: "error",
-        });
-      } finally {
-        setWorkbenchScanPickLotLineId(null);
-      }
-    },
-    [onWorkbenchScanPick, submitQty],
-  );
-
   return (
     <Dialog open={open} onClose={onClose} maxWidth="md" fullWidth>
       <DialogTitle>批號標籤列印（提貨台）</DialogTitle>
@@ -664,14 +640,20 @@ const WorkbenchLotLabelPrintModal: React.FC<WorkbenchLotLabelPrintModalProps> =
                   {filteredLots.map((lot) => {
                     const isPrinting =
                       printingLotLineId === lot.inventoryLotLineId;
-                    const isScanPicking =
-                      workbenchScanPickLotLineId === lot.inventoryLotLineId;
                     const loc = String(lot.warehouseCode ?? "").trim();
-                    const canWorkbenchPick =
+                    const canShowLotQr =
                       !!onWorkbenchScanPick &&
                       !!analysis &&
                       !analysisLoading &&
                       !disableScanPick;
+                    const lotQrPayload =
+                      Number.isFinite(Number(analysis?.itemId)) &&
+                      Number.isFinite(Number(lot.stockInLineId))
+                        ? {
+                            itemId: Number(analysis?.itemId),
+                            stockInLineId: Number(lot.stockInLineId),
+                          }
+                        : null;
                     return (
                       <Box
                         key={lot.inventoryLotLineId}
@@ -713,7 +695,7 @@ const WorkbenchLotLabelPrintModal: React.FC<WorkbenchLotLabelPrintModalProps> =
                         >
                           <Button
                             variant="contained"
-                            disabled={!canPrint || isPrinting || isScanPicking}
+                            disabled={!canPrint || isPrinting}
                             onClick={() =>
                               void handlePrintOne(
                                 lot.inventoryLotLineId,
@@ -732,30 +714,48 @@ const WorkbenchLotLabelPrintModal: React.FC<WorkbenchLotLabelPrintModalProps> =
                               variant="outlined"
                               color="secondary"
                               title={
-                                disableScanPick
-                                  ? "此出庫行已掃碼或已完成，無法再掃碼提貨"
+                                !lotQrPayload
+                                  ? "此列無法取得 QR payload（需 stockInLineId）"
+                                  : disableScanPick
+                                    ? "此出庫行已掃碼或已完成，無法顯示 QR"
                                   : undefined
                               }
                               disabled={
-                                !canWorkbenchPick ||
-                                isPrinting ||
-                                isScanPicking
+                                !canShowLotQr || !lotQrPayload || isPrinting
                               }
                               onClick={() =>
-                                void handleWorkbenchScanPickOne(
-                                  lot.inventoryLotLineId,
-                                  lot.lotNo,
+                                setQrVisibleLotLineId((prev) =>
+                                  prev === lot.inventoryLotLineId
+                                    ? null
+                                    : lot.inventoryLotLineId,
                                 )
                               }
                             >
-                              {isScanPicking ? (
-                                <CircularProgress size={18} />
-                              ) : (
-                                "掃碼提貨"
-                              )}
+                              顯示 QR
                             </Button>
                           ) : null}
                         </Stack>
+                        {qrVisibleLotLineId === lot.inventoryLotLineId &&
+                        lotQrPayload ? (
+                          <Box
+                            sx={{
+                              mt: 1.5,
+                              ml: "auto",
+                              p: 1.5,
+                              borderRadius: 1,
+                              border: "1px dashed",
+                              borderColor: "divider",
+                              textAlign: "center",
+                              minWidth: 220,
+                            }}
+                          >
+                            <QRCodeSVG
+                              value={JSON.stringify(lotQrPayload)}
+                              size={160}
+                              includeMargin
+                            />
+                          </Box>
+                        ) : null}
                       </Box>
                     );
                   })}
diff --git a/src/components/JoWorkbench/newJobPickExecution.tsx b/src/components/JoWorkbench/newJobPickExecution.tsx
index a37cccb..c90f38f 100644
--- a/src/components/JoWorkbench/newJobPickExecution.tsx
+++ b/src/components/JoWorkbench/newJobPickExecution.tsx
@@ -739,6 +739,14 @@ const JobPickExecution: React.FC<Props> = ({ filterArgs, onBackToList }) => {
   const [workbenchLotLabelReminderText, setWorkbenchLotLabelReminderText] =
     useState<string | null>(null);
 
+  useEffect(() => {
+    if (!qrScanSuccess || !workbenchLotLabelModalOpen) return;
+    setWorkbenchLotLabelModalOpen(false);
+    setWorkbenchLotLabelInitialPayload(null);
+    setWorkbenchLotLabelContextLot(null);
+    setWorkbenchLotLabelReminderText(null);
+  }, [qrScanSuccess, workbenchLotLabelModalOpen]);
+
   //  Add these missing state variables
   const [isManualScanning, setIsManualScanning] = useState<boolean>(false);
   const [processedQrCodes, setProcessedQrCodes] = useState<Set<string>>(
diff --git a/src/components/PickOrderSearch/PickOrderSearch.tsx b/src/components/PickOrderSearch/PickOrderSearch.tsx
index 7e10458..382d81e 100644
--- a/src/components/PickOrderSearch/PickOrderSearch.tsx
+++ b/src/components/PickOrderSearch/PickOrderSearch.tsx
@@ -123,6 +123,7 @@ const PickOrderSearch: React.FC<Props> = () => {
          {/* <Tab label={t("Release")} iconPosition="end" /> */}
           {/* <Tab label={t("Pick Execution")} iconPosition="end" /> */}
           <Tab label={t("Pick Execution")} iconPosition="end" />
+          {/* <Tab label={t("old Pick Execution")} iconPosition="end" /> */}
         </Tabs>
       </Box>
 
@@ -131,7 +132,7 @@ const PickOrderSearch: React.FC<Props> = () => {
         p: 2
       }}>
        {tabIndex === 2 && <WorkbenchPickExecution filterArgs={filterArgs} />}
-       {/* {tabIndex === 3 && <PickExecution filterArgs={filterArgs} />} */} 
+       {/* {tabIndex === 3 && <PickExecution filterArgs={filterArgs} />}  */}
         {tabIndex === 0 && (
           <NewCreateItem 
             filterArgs={filterArgs} 
diff --git a/src/components/PickOrderSearch/WorkbenchPickExecution.tsx b/src/components/PickOrderSearch/WorkbenchPickExecution.tsx
index 8b89097..1f427d1 100644
--- a/src/components/PickOrderSearch/WorkbenchPickExecution.tsx
+++ b/src/components/PickOrderSearch/WorkbenchPickExecution.tsx
@@ -605,6 +605,9 @@ const WorkbenchPickExecution: React.FC<Props> = ({ filterArgs }) => {
             ),
           );
         }
+        setWorkbenchLotLabelModalOpen(false);
+        setWorkbenchLotLabelContextLot(null);
+        setWorkbenchLotLabelInitialPayload(null);
         await refreshReleasedTopRowsAfterMutation();
       } catch (e) {
         console.error(e);
@@ -1627,7 +1630,6 @@ const WorkbenchPickExecution: React.FC<Props> = ({ filterArgs }) => {
         hideScanSection={workbenchLotLabelInitialPayload != null || workbenchLotLabelContextLot != null}
         triggerLotAvailableQty={workbenchLotLabelContextLot?.availableQty ?? null}
         triggerLotUom={workbenchLotLabelContextLot?.uomDesc ?? null}
-        onWorkbenchScanPick={handleWorkbenchLotLabelScanPick}
         submitQty={
           workbenchLotLabelContextLot?.stockOutLineId
             ? Number(resolveSingleSubmitQty(workbenchLotLabelContextLot))
@@ -1647,6 +1649,7 @@ const WorkbenchPickExecution: React.FC<Props> = ({ filterArgs }) => {
           }
           setQtyBySolId((prev) => ({ ...prev, [solId]: qty }));
         }}
+        onWorkbenchScanPick={handleWorkbenchLotLabelScanPick}
       />
       <ManualLotConfirmationModal
         open={manualLotConfirmationOpen}