jason
/
FPSMS-frontend
2
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

update scan putaway

master
kelvinsuen 3 months ago
parent
1b88bd5f10
commit
865a7d8e6f
1 changed files with 113 additions and 71 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +113
    -71
      src/components/PutAwayScan/PutAwayModal.tsx

+ 113
- 71
src/components/PutAwayScan/PutAwayModal.tsx View File

@@ -10,6 +10,7 @@ import {
TextField, TextField,
Typography, Typography,
Paper, Paper,
Divider,
} from "@mui/material"; } from "@mui/material";
import { useCallback, useEffect, useLayoutEffect, useMemo, useState } from "react"; import { useCallback, useEffect, useLayoutEffect, useMemo, useState } from "react";
import ReactQrCodeScanner, { import ReactQrCodeScanner, {
@@ -25,7 +26,7 @@ import {
import { StockInLine } from "@/app/api/po"; import { StockInLine } from "@/app/api/po";
import { WarehouseResult } from "@/app/api/warehouse"; import { WarehouseResult } from "@/app/api/warehouse";
// import { QrCodeInfo } from "@/app/api/qrcde"; // import { QrCodeInfo } from "@/app/api/qrcde";
import { Check, QrCode } from "@mui/icons-material";
import { Check, QrCode, ErrorOutline, CheckCircle } from "@mui/icons-material";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { useSearchParams } from "next/navigation"; import { useSearchParams } from "next/navigation";
import { useQrCodeScannerContext } from "../QrCodeScannerProvider/QrCodeScannerProvider"; import { useQrCodeScannerContext } from "../QrCodeScannerProvider/QrCodeScannerProvider";
@@ -110,6 +111,11 @@ const PutAwayModal: React.FC<Props> = ({ open, onClose, warehouse, stockInLineId
}); });
const errors = formProps.formState.errors; const errors = formProps.formState.errors;


useEffect(() => {
if (itemDetail) {
startScanner();
}
}, [itemDetail])


const closeHandler = useCallback<NonNullable<ModalProps["onClose"]>>( const closeHandler = useCallback<NonNullable<ModalProps["onClose"]>>(
(...args) => { (...args) => {
@@ -130,6 +136,12 @@ const PutAwayModal: React.FC<Props> = ({ open, onClose, warehouse, stockInLineId
[], [],
); );


const startScanner = () => {
// setIsOpenScanner(true);
scanner.startScan();
console.log("%c Scanning started ", "color:cyan");
};

const openScanner = () => { const openScanner = () => {
setIsOpenScanner(true); setIsOpenScanner(true);
scanner.startScan(); scanner.startScan();
@@ -138,7 +150,7 @@ const PutAwayModal: React.FC<Props> = ({ open, onClose, warehouse, stockInLineId


useEffect(() => { useEffect(() => {
if (warehouseId > 0) { // Scanned Warehouse if (warehouseId > 0) { // Scanned Warehouse
if (isOpenScanner) {
if (scanner.isScanning) {
setIsOpenScanner(false); setIsOpenScanner(false);
setVerified(true); setVerified(true);
scanner.stopScan(); scanner.stopScan();
@@ -288,38 +300,109 @@ const PutAwayModal: React.FC<Props> = ({ open, onClose, warehouse, stockInLineId
<Typography variant="h4"> <Typography variant="h4">
處理上架 處理上架
</Typography> </Typography>

<Grid item xs={12}> <Grid item xs={12}>
<StockInForm itemDetail={itemDetail} disabled={true} putawayMode={true}/> <StockInForm itemDetail={itemDetail} disabled={true} putawayMode={true}/>
</Grid> </Grid>
<Paper sx={{ padding: 2, width: "100%" }}>
<Grid container spacing={2}>
<Grid item xs={3}>
<TextField
type="number" // TODO fix the "e" input
label={t("putQty")}
fullWidth
defaultValue={itemDetail.demandQty}
onChange={(e) => {
const value = e.target.value;
validateQty(Number(value));
setPutQty(Number(value));
}}
// onBlur={(e) => {
// const value = e.target.value;
// setPutQty(Number(value));
// validateQty(Number(value));
// }}
// disabled={true}
// {...register("acceptedQty", {
// required: "acceptedQty required!",
// })}
error={qtyError !== ""}
helperText={qtyError}
/>
<Paper sx={{ padding: 2, width: "100%", backgroundColor: verified ? '#bceb19' : '#FCD34D' }}>
<Grid
container
spacing={2}
direction="row"
justifyContent="space-between"
alignItems="strecth"
sx={{ width: '100%' }}
>
<Grid item xs={5}>
<Box sx={{
mb: 2, p: 2, backgroundColor: verified ? '#bceb19' : '#FCD34D', borderRadius: 0,
display: 'flex', flexDirection: 'row', gap: 1, flexWrap: 'wrap' }}
>
<Grid container>
{verified? (
<>
<CheckCircle sx={{color:"green", fontSize: "35px"}}/>
<Typography variant="h5" component="h2" sx={{ fontWeight: 'bold', color: 'black' }} noWrap>
掃瞄完成
</Typography>
</>
) : (
<>
<ErrorOutline sx={{color:"red", fontSize: "35px"}}/>
<Typography variant="h5" component="h2" sx={{ fontWeight: 'bold', color: 'black' }} noWrap>
請掃瞄倉庫二維碼
</Typography>
</>
)
}
<QrCode sx={{fontSize: "35px"}}/>
</Grid>
<Grid container>
<Typography variant="h4" sx={{ fontWeight: 'bold', color: 'black' }} noWrap>
{`${warehouseId > 0 ? warehouse.find((w) => w.id == warehouseId)?.name
: warehouse.find((w) => w.id == 3)?.name}`}
</Typography>
</Grid>

</Box>
</Grid> </Grid>
<Grid item xs={3}> <Grid item xs={3}>
<Button
<Box sx={{ height: '100%', p: 2, textAlign: 'center' }}>
<TextField
type="number" // TODO fix the "e" input
label={t("putQty")}
fullWidth
sx={{fontSize: "25px", height: "100%"}}
defaultValue={itemDetail.demandQty}
onChange={(e) => {
const value = e.target.value;
validateQty(Number(value));
setPutQty(Number(value));
}}
// onBlur={(e) => {
// const value = e.target.value;
// setPutQty(Number(value));
// validateQty(Number(value));
// }}
// disabled={true}
// {...register("acceptedQty", {
// required: "acceptedQty required!",
// })}
error={qtyError !== ""}
helperText={qtyError}
/>
</Box>
</Grid>
<Grid item xs={4}>
<Box
sx={{
p: 2,
textAlign: 'center',
height: '100%', // Ensure D stretches to full height
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}>
<Button
id="putawaySubmit"
type="submit"
variant="contained"
startIcon={<Check />}
color="primary"
// sx={{ mx: 3, minWidth: "120px", height: "120px",
// padding: "12px 12px", fontSize: "24px"}}
sx={{
flex: "0 0 auto",
padding: "8px 16px",
fontSize: { xs: "16px", sm: "20px", md: "24px" },
whiteSpace: "nowrap",
textAlign: "center",}}
// onClick={formProps.handleSubmit()}
disabled={!verified}
>
{t("confirm putaway")}
</Button>
</Box>
{/* <Button
id="scanWarehouse" id="scanWarehouse"
variant="contained" variant="contained"
startIcon={<QrCode />} startIcon={<QrCode />}
@@ -335,49 +418,8 @@ const PutAwayModal: React.FC<Props> = ({ open, onClose, warehouse, stockInLineId
onClick={openScanner}> onClick={openScanner}>


{t("scan warehouse")} {t("scan warehouse")}
</Button>
</Grid>
<Grid item xs={3}>
<TextField
key={warehouseId}
label={t("warehouse")}
fullWidth
disabled={true}
value={
warehouseId > 0 ? warehouse.find((w) => w.id == warehouseId)?.name
: warehouse.find((w) => w.id == 3)?.name
// : warehouse.find((w) => w.id == itemDetail.defaultWarehouseId)?.name //TODO fix empty
}
// {...register("acceptedQty", {
// required: "acceptedQty required!",
// })}
error={!verified}
helperText={verified ? "掃碼完成" : "等待掃碼"}
/>
</Grid>
{/* <Stack direction="row" justifyContent="flex-end" sx={{ mt: 1 }}> */}
<Grid item xs={3}>
<Button
id="putawaySubmit"
type="submit"
variant="contained"
startIcon={<Check />}
color="primary"
// sx={{ mx: 3, minWidth: "120px", height: "120px",
// padding: "12px 12px", fontSize: "24px"}}
sx={{
flex: "0 0 auto",
padding: "8px 16px",
fontSize: { xs: "16px", sm: "20px", md: "24px" },
whiteSpace: "nowrap",
textAlign: "center",}}
// onClick={formProps.handleSubmit()}
disabled={!verified}
>
{t("confirm putaway")}
</Button>
</Button> */}
</Grid> </Grid>
</Grid> </Grid>
</Paper> </Paper>
</Stack> </Stack>


Write Preview
Loading…
Cancel
Save