derek
/
FPSMS-frontend
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

[Template only.] update for po ui template.

master
cyril.tsui 2 weeks ago
parent
3131c54c39
commit
8768daab84
5 changed files with 101 additions and 61 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +4
    -4
      src/components/InventorySearch/InventorySearch.tsx
  2. +71
    -37
      src/components/PoDetail/PoDetail.tsx
  3. +15
    -15
      src/components/PoDetail/PoInputGrid.tsx
  4. +8
    -3
      src/components/StyledDataGrid/StyledDataGrid.tsx
  5. +3
    -2
      src/i18n/zh/purchaseOrder.json

+ 4
- 4
src/components/InventorySearch/InventorySearch.tsx View File

@@ -104,10 +104,10 @@ const InventorySearch: React.FC<Props> = ({ inventories }) => {
break; break;
case "paging": case "paging":
setFilteredInventories((fi) => setFilteredInventories((fi) =>
orderBy(
uniqBy([...fi, ...response.records], "id"),
["id"], ["desc"]
));
// orderBy(
uniqBy([...fi, ...response.records], "id")
// , ["id"], ["desc"])
);
} }
} }
}, [inventoriesPagingController, setInventoriesPagingController]) }, [inventoriesPagingController, setInventoriesPagingController])


+ 71
- 37
src/components/PoDetail/PoDetail.tsx View File

@@ -86,7 +86,10 @@ const PoDetail: React.FC<Props> = ({ po, qc, warehouse }) => {
const [rows, setRows] = useState<PurchaseOrderLine[]>( const [rows, setRows] = useState<PurchaseOrderLine[]>(
purchaseOrder.pol || [], purchaseOrder.pol || [],
); );
const [row, setRow] = useState(rows[0]);
const [stockInLine, setStockInLine] = useState(rows[0].stockInLine);
const [processedQty, setProcessedQty] = useState(rows[0].processed);

const searchParams = useSearchParams(); const searchParams = useSearchParams();
// const [currPoStatus, setCurrPoStatus] = useState(purchaseOrder.status); // const [currPoStatus, setCurrPoStatus] = useState(purchaseOrder.status);


@@ -115,7 +118,7 @@ const PoDetail: React.FC<Props> = ({ po, qc, warehouse }) => {
}, [purchaseOrder]); }, [purchaseOrder]);


function Row(props: { row: PurchaseOrderLine }) { function Row(props: { row: PurchaseOrderLine }) {
const { row } = props;
const { row } = props;
const [firstReceiveQty, setFirstReceiveQty] = useState<number>() const [firstReceiveQty, setFirstReceiveQty] = useState<number>()
const [secondReceiveQty, setSecondReceiveQty] = useState<number>() const [secondReceiveQty, setSecondReceiveQty] = useState<number>()
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
@@ -144,7 +147,7 @@ const PoDetail: React.FC<Props> = ({ po, qc, warehouse }) => {
return ( return (
<> <>
<TableRow sx={{ "& > *": { borderBottom: "unset" }, color: "black" }}> <TableRow sx={{ "& > *": { borderBottom: "unset" }, color: "black" }}>
<TableCell>
{/* <TableCell>
<IconButton <IconButton
disabled={purchaseOrder.status.toLowerCase() === "pending"} disabled={purchaseOrder.status.toLowerCase() === "pending"}
aria-label="expand row" aria-label="expand row"
@@ -153,25 +156,25 @@ const PoDetail: React.FC<Props> = ({ po, qc, warehouse }) => {
> >
{open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />} {open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
</IconButton> </IconButton>
</TableCell>
</TableCell> */}
<TableCell align="left">{row.itemNo}</TableCell> <TableCell align="left">{row.itemNo}</TableCell>
<TableCell align="left">{row.itemName}</TableCell> <TableCell align="left">{row.itemName}</TableCell>
<TableCell align="left">{integerFormatter.format(row.qty)}</TableCell>
<TableCell align="left">{integerFormatter.format(processedQty)}</TableCell>
<TableCell align="right">{integerFormatter.format(row.qty)}</TableCell>
<TableCell align="right">{integerFormatter.format(processedQty)}</TableCell>
<TableCell align="left">{row.uom?.code}</TableCell> <TableCell align="left">{row.uom?.code}</TableCell>
<TableCell align="left">
<TableCell align="right">
{decimalFormatter.format(totalWeight)} {weightUnit} {decimalFormatter.format(totalWeight)} {weightUnit}
</TableCell> </TableCell>
{/* <TableCell align="left">{weightUnit}</TableCell> */} {/* <TableCell align="left">{weightUnit}</TableCell> */}
<TableCell align="left">{decimalFormatter.format(row.price)}</TableCell>
<TableCell align="right">{decimalFormatter.format(row.price)}</TableCell>
{/* <TableCell align="left">{row.expiryDate}</TableCell> */} {/* <TableCell align="left">{row.expiryDate}</TableCell> */}
<TableCell align="left">{t(`${currStatus.toLowerCase()}`)}</TableCell> <TableCell align="left">{t(`${currStatus.toLowerCase()}`)}</TableCell>
{/* <TableCell align="left">
<TableCell align="right">
0 0
</TableCell> </TableCell>
<TableCell align="left">
<TableCell align="center">
<TextField <TextField
label="輸入數量"
label="輸入來貨數量"
type="text" // Use type="text" to allow validation in the change handler type="text" // Use type="text" to allow validation in the change handler
variant="outlined" variant="outlined"
value={secondReceiveQty} value={secondReceiveQty}
@@ -183,14 +186,19 @@ const PoDetail: React.FC<Props> = ({ po, qc, warehouse }) => {
} }
}} }}
/> />
</TableCell> */}
</TableCell>
<TableCell align="center">
<Button variant="contained">
提交
</Button>
</TableCell>
</TableRow> </TableRow>
<TableRow>
{/* <TableRow> */}
{/* <TableCell /> */} {/* <TableCell /> */}
<TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={12}>
<Collapse in={true} timeout="auto" unmountOnExit>
{/* <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={12}> */}
{/* <Collapse in={true} timeout="auto" unmountOnExit> */}
{/* <Collapse in={open} timeout="auto" unmountOnExit> */} {/* <Collapse in={open} timeout="auto" unmountOnExit> */}
<Table>
{/* <Table>
<TableBody> <TableBody>
<TableRow> <TableRow>
<TableCell align="right"> <TableCell align="right">
@@ -208,10 +216,10 @@ const PoDetail: React.FC<Props> = ({ po, qc, warehouse }) => {
</TableCell> </TableCell>
</TableRow> </TableRow>
</TableBody> </TableBody>
</Table>
</Collapse>
</TableCell>
</TableRow>
</Table> */}
{/* </Collapse> */}
{/* </TableCell> */}
{/* </TableRow> */}
</> </>
); );
} }
@@ -321,7 +329,7 @@ const PoDetail: React.FC<Props> = ({ po, qc, warehouse }) => {
</Typography> </Typography>
</Grid> </Grid>
</Grid> </Grid>
{false ? (<Grid container xs={12} justifyContent="start">
{true ? (<Grid container xs={12} justifyContent="start">
<Grid item xs={3}> <Grid item xs={3}>
<TextField <TextField
label={t("dnNo")} label={t("dnNo")}
@@ -342,7 +350,7 @@ const PoDetail: React.FC<Props> = ({ po, qc, warehouse }) => {
label={t("dnDate")} label={t("dnDate")}
type="text" // Use type="text" to allow validation in the change handler type="text" // Use type="text" to allow validation in the change handler
variant="outlined" variant="outlined"
defaultValue={"07/08/2025"}
defaultValue={"11/08/2025"}
// value={secondReceiveQty} // value={secondReceiveQty}
// onChange={handleChange} // onChange={handleChange}
InputProps={{ InputProps={{
@@ -365,14 +373,14 @@ const PoDetail: React.FC<Props> = ({ po, qc, warehouse }) => {
item item
xs={6} xs={6}
display="flex" display="flex"
justifyContent="end"
alignItems="end"
// justifyContent="center"
alignItems="center"
> >
<Button onClick={onOpenScanner}>{t("Accept submit")}</Button>
<Button variant={"contained"} onClick={onOpenScanner}>提交</Button>
</Grid> </Grid>
</Grid>) : undefined} </Grid>) : undefined}
<Grid container xs={12} justifyContent="space-between"> <Grid container xs={12} justifyContent="space-between">
{/* <Grid item xs={4}> */} {/* <Grid item xs={4}> */}
{/* scanner */} {/* scanner */}
{/* </Grid> */} {/* </Grid> */}
@@ -403,22 +411,22 @@ const PoDetail: React.FC<Props> = ({ po, qc, warehouse }) => {
<Table aria-label="collapsible table" stickyHeader> <Table aria-label="collapsible table" stickyHeader>
<TableHead> <TableHead>
<TableRow> <TableRow>
<TableCell /> {/* for the collapse button */}
<TableCell>{t("itemNo")}</TableCell>
<TableCell align="left">{t("itemName")}</TableCell>
<TableCell align="left">{t("qty")}</TableCell>
<TableCell align="left">{t("processed")}</TableCell>
{/* <TableCell /> for the collapse button */}
<TableCell sx={{ width: '125px' }}>{t("itemNo")}</TableCell>
<TableCell align="left" sx={{ width: '125px' }}>{t("itemName")}</TableCell>
<TableCell align="right">{t("qty")}</TableCell>
<TableCell align="right">{t("processed")}</TableCell>
<TableCell align="left">{t("uom")}</TableCell> <TableCell align="left">{t("uom")}</TableCell>
<TableCell align="left">{t("total weight")}</TableCell>
<TableCell align="right">{t("total weight")}</TableCell>
{/* <TableCell align="left">{t("weight unit")}</TableCell> */} {/* <TableCell align="left">{t("weight unit")}</TableCell> */}
<TableCell align="left">{`${t("price")} (HKD)`}</TableCell>
<TableCell align="right">{`${t("price")} (HKD)`}</TableCell>
{/* <TableCell align="left">{t("expiryDate")}</TableCell> */} {/* <TableCell align="left">{t("expiryDate")}</TableCell> */}
<TableCell align="left">{t("status")}</TableCell>
<TableCell align="left"sx={{ width: '75px' }}>{t("status")}</TableCell>
{/* start == true && firstInQty == null ? no hide : hide*/} {/* start == true && firstInQty == null ? no hide : hide*/}
{/* {renderFieldCondition(FIRST_IN_FIELD) ? <TableCell align="left">{t("receivedQty")}</TableCell> : undefined} */}
{renderFieldCondition(FIRST_IN_FIELD) ? <TableCell align="right">{t("receivedQty")}</TableCell> : undefined}
{/* start == true && firstInQty == null ? hide and disabled : no hide*/} {/* start == true && firstInQty == null ? hide and disabled : no hide*/}
{/* {renderFieldCondition(SECOND_IN_FIELD) ? <TableCell align="left">{t("dnQty")}</TableCell> : undefined} */}
{/* <TableCell align="left">{"add icon button"}</TableCell> */}
{renderFieldCondition(SECOND_IN_FIELD) ? <TableCell align="center" sx={{ width: '150px' }}>{t("dnQty")}(以訂單單位計算)</TableCell> : undefined}
<TableCell align="center" sx={{ width: '100px' }}></TableCell>
</TableRow> </TableRow>
</TableHead> </TableHead>
<TableBody> <TableBody>
@@ -429,6 +437,32 @@ const PoDetail: React.FC<Props> = ({ po, qc, warehouse }) => {
</Table> </Table>
</TableContainer> </TableContainer>
</Grid> </Grid>
<Grid item xs={12}>
<Typography variant="h6">已選擇: {row.itemNo}-{row.itemName}</Typography>
</Grid>
<Grid item xs={12}>
<TableContainer component={Paper} sx={{ width: 'fit-content', overflow: 'auto' }}>
<Table>
<TableBody>
<TableRow>
<TableCell align="right">
<Box>
<PoInputGrid
qc={qc}
setRows={setRows}
stockInLine={stockInLine}
setStockInLine={setStockInLine}
setProcessedQty={setProcessedQty}
itemDetail={row}
warehouse={warehouse}
/>
</Box>
</TableCell>
</TableRow>
</TableBody>
</Table>
</TableContainer>
</Grid>
</Grid> </Grid>
{/* tab 2 */} {/* tab 2 */}
<Grid sx={{ display: tabIndex === 1 ? "block" : "none" }}> <Grid sx={{ display: tabIndex === 1 ? "block" : "none" }}>


+ 15
- 15
src/components/PoDetail/PoInputGrid.tsx View File

@@ -406,16 +406,16 @@ function PoInputGrid({


const columns = useMemo<GridColDef[]>( const columns = useMemo<GridColDef[]>(
() => [ () => [
{
field: "itemNo",
headerName: t("itemNo"),
width: 100,
// flex: 0.4,
},
// {
// field: "itemNo",
// headerName: t("itemNo"),
// width: 100,
// // flex: 0.4,
// },
{ {
field: "dnNo", field: "dnNo",
headerName: t("dnNo"), headerName: t("dnNo"),
width: 100,
width: 125,
renderCell: () => { renderCell: () => {
return <>DN0000001</> return <>DN0000001</>
} }
@@ -424,23 +424,23 @@ function PoInputGrid({
{ {
field: "dnDate", field: "dnDate",
headerName: t("dnDate"), headerName: t("dnDate"),
width: 100,
width: 125,
renderCell: () => { renderCell: () => {
return <>07/08/2025</> return <>07/08/2025</>
} }
// flex: 0.4, // flex: 0.4,
}, },
{
field: "itemName",
headerName: t("itemName"),
width: 100,
// flex: 0.6,
},
// {
// field: "itemName",
// headerName: t("itemName"),
// width: 100,
// // flex: 0.6,
// },
{ {
field: "acceptedQty", field: "acceptedQty",
headerName: t("acceptedQty"), headerName: t("acceptedQty"),
// flex: 0.5, // flex: 0.5,
width: 100,
width: 125,
type: "number", type: "number",
// editable: true, // editable: true,
// replace with tooltip + content // replace with tooltip + content


+ 8
- 3
src/components/StyledDataGrid/StyledDataGrid.tsx View File

@@ -7,8 +7,9 @@ const StyledDataGrid = styled(DataGrid)(({ theme }) => ({
backgroundColor: theme.palette.grey[50], backgroundColor: theme.palette.grey[50],
}, },
"& .MuiDataGrid-columnHeaderTitle": { "& .MuiDataGrid-columnHeaderTitle": {
borderBottom: "none",
color: theme.palette.grey[700], color: theme.palette.grey[700],
fontSize: 12,
fontSize: 16,
fontWeight: 600, fontWeight: 600,
lineHeight: 2, lineHeight: 2,
letterSpacing: 0.5, letterSpacing: 0.5,
@@ -17,8 +18,12 @@ const StyledDataGrid = styled(DataGrid)(({ theme }) => ({
"& .MuiDataGrid-columnSeparator": { "& .MuiDataGrid-columnSeparator": {
color: theme.palette.primary.main, color: theme.palette.primary.main,
}, },
"& .MuiDataGrid-row:nth-of-type(even)": {
backgroundColor: theme.palette.grey[200], // Light grey for even rows
// "& .MuiDataGrid-row:nth-of-type(even)": {
// backgroundColor: theme.palette.grey[200], // Light grey for even rows
// },
'& .MuiDataGrid-cell': {
borderBottomColor: theme.palette.divider,
padding: '1px 6px',
}, },
})); }));




+ 3
- 2
src/i18n/zh/purchaseOrder.json View File

@@ -37,7 +37,7 @@
"price": "訂單貨值", "price": "訂單貨值",
"processed": "已處理數量", "processed": "已處理數量",
"expiryDate": "到期日", "expiryDate": "到期日",
"acceptedQty": "是次訂單/來貨/巳來貨數量",
"acceptedQty": "是次來貨數量",
"weight": "重量", "weight": "重量",
"start": "開始", "start": "開始",
"qc": "質量控制", "qc": "質量控制",
@@ -57,6 +57,7 @@
"received": "已收貨", "received": "已收貨",
"completed": "已完成", "completed": "已完成",
"rejected": "已拒絕", "rejected": "已拒絕",
"status": "狀態",


"acceptedQty must not greater than": "接受數量不得大於", "acceptedQty must not greater than": "接受數量不得大於",
"minimal value is 1": "最小值為1", "minimal value is 1": "最小值為1",
@@ -93,7 +94,7 @@
"receivedQty": "已來貨數量", "receivedQty": "已來貨數量",
"dnQty": "送貨單數量", "dnQty": "送貨單數量",


"Accept submit": "接受來貨",
"Accept submit": "處理來貨",
"qc processing": "處理來貨及品檢", "qc processing": "處理來貨及品檢",
"putawayBtn": "上架", "putawayBtn": "上架",
"dnNo": "送貨單編號", "dnNo": "送貨單編號",


Write Preview
Loading…
Cancel
Save