|
import { Box, Card, Grid, LinearProgress, Select, MenuItem, ListItemText, TextField } from "@mui/material";
|
import React, { useState, useRef, useEffect, useMemo } from "react";
|
import QueryStatsIcon from '@mui/icons-material/QueryStats';
|
import request from '@/utils/request';
|
import { DataGrid, useGridApiContext, GridActionsCellItem, useGridApiRef } from '@mui/x-data-grid';
|
import {
|
List,
|
Button,
|
useTranslate,
|
useNotify,
|
useListContext,
|
NumberField,
|
ReferenceInput,
|
AutocompleteInput,
|
required,
|
Form,
|
useRefresh,
|
useRedirect,
|
TextInput,
|
} from 'react-admin';
|
|
const CheckPreviewTable = (props) => {
|
const { rows, gridRef, setRows, record, lefSelectedIds, setLeftSelectedIds, selectedMatnr, setDialog, formData } = props;
|
// const translate = useTranslate();
|
// const refresh = useRefresh();
|
// const notify = useNotify();
|
gridRef.current = useGridApiRef();
|
const translate = useTranslate();
|
|
// useEffect(() => {
|
// if (lefSelectedIds.length > 0) {
|
// console.log(lefSelectedIds);
|
// }
|
// }, [lefSelectedIds])
|
|
const baseColumns = [
|
{ field: 'locCode', headerName: '库位', width: 110 },
|
{ field: 'barcode', headerName: '容器', width: 120 },
|
{ field: 'matnrCode', headerName: '物料编码', width: 120 },
|
{ field: 'batch', headerName: '批次', width: 90 },
|
{ field: 'unit', headerName: '单位', width: 60 },
|
{
|
field: 'anfme', headerName: '库存数量', width: 110,
|
renderCell: (params) => (
|
<OutStockAnfme value={params.value} />
|
)
|
},
|
{
|
field: 'siteNo',
|
headerName: '出库口',
|
width: 90,
|
type: 'singleSelect',
|
editable: true,
|
renderCell: (params) => (
|
<OutStockSiteNo value={params.value} />
|
),
|
renderEditCell: (params) => (
|
<OutStockSite {...params} />
|
),
|
},
|
]
|
|
const optAction = {
|
field: 'actions',
|
type: 'actions',
|
headerName: translate('common.field.opt'),
|
with: 120,
|
getActions: (params) => [
|
<GridActionsCellItem
|
icon={<Delete />}
|
label="Delete"
|
onClick={() => handleDelete(params.row, rows, setRows)}
|
/>,
|
]
|
}
|
|
const columns = (formData.waveId == 15 || formData.waveId == 16) ? [...baseColumns] : [...baseColumns, optAction];
|
|
/**
|
* 删除事件
|
* @param {*} params
|
*/
|
const handleDelete = (params, rows, setRows) => {
|
const outRows = rows.filter(row => {
|
return row.id !== params.id
|
})
|
setRows(outRows)
|
}
|
|
const OutStockAnfme = React.memo(function OutStockAnfme(props) {
|
const { value } = props;
|
return (
|
value > 0 ?
|
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
<span>{value}</span>
|
</Box>
|
:
|
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
<span style={{ color: 'red' }}>{translate('common.edit.title.insuffInventory')}</span>
|
</Box>
|
);
|
});
|
|
const OutStockSiteNo = React.memo(function OutStockSiteNo(props) {
|
const { value } = props;
|
if (!value) {
|
return null;
|
}
|
return (
|
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
<span>{value}</span>
|
</Box>
|
);
|
});
|
|
const CustomToolBar = () => {
|
const [queryParams, setQueryParams] = useState({ locCode: null, channel: null, matnrCode: selectedMatnr });
|
const notify = useNotify();
|
const queryClick = async () => {
|
const { data: { code, data, msg } } = await request.post('/check/locs/', queryParams);
|
if (code === 200) {
|
setRows(data)
|
} else {
|
notify(msg);
|
}
|
}
|
|
const handleChange = (e) => {
|
const { name, value } = e.target;
|
setQueryParams(() => ({
|
...queryParams,
|
[name]: value
|
}));
|
|
};
|
|
const selectSiteNo = () => {
|
setDialog(true)
|
}
|
return (
|
<>
|
<Box sx={{
|
p: 1,
|
display: 'flex',
|
justifyContent: 'space-between',
|
borderTop: '1px solid rgba(224, 224, 224, 1)'
|
}}>
|
<Box sx={{
|
'& > :not(style)': { m: 1, width: '25ch' },
|
display: 'flex',
|
}}>
|
<TextField
|
label={translate("table.field.stockTransfer.inputLoc")}
|
size="small"
|
name="locCode"
|
value={queryParams?.locCode}
|
onChange={handleChange}
|
sx={{ mr: 1 }} />
|
|
<TextField
|
label={translate("table.field.stockTransfer.inputChannel")}
|
size="small"
|
name="channel"
|
value={queryParams?.channel}
|
onChange={handleChange}
|
sx={{ mr: 1 }} />
|
|
<Box sx={{
|
'& > :not(style)': { m: 1, width: '11ch' },
|
}}>
|
<Button variant="contained"
|
size="medium"
|
startIcon={<QueryStatsIcon />}
|
label="toolbar.query"
|
onClick={queryClick} />
|
</Box>
|
</Box>
|
<Box sx={{
|
'& > :not(style)': { m: 1, width: '13ch' },
|
}}>
|
<Button
|
onClick={selectSiteNo}
|
variant="outlined"
|
label="toolbar.modiftySite"
|
size="medium"
|
sx={{ mr: 1 }} />
|
</Box>
|
</Box>
|
|
</>
|
);
|
}
|
|
|
const OutStockSite = (params) => {
|
const { id, field, siteNo, row: { staNos } } = params;
|
const apiRef = useGridApiContext();
|
const handleChange = async (event) => {
|
await apiRef.current.setEditCellValue(
|
{ id, field, value: event.target.value },
|
event,
|
);
|
apiRef.current.stopCellEditMode({ id, field });
|
};
|
|
const handleClose = (event, reason) => {
|
if (reason === 'backdropClick') {
|
apiRef.current.stopCellEditMode({ id, field });
|
}
|
};
|
|
return (
|
<Select
|
value={siteNo}
|
onChange={handleChange}
|
MenuProps={{
|
onClose: handleClose,
|
}}
|
sx={{
|
height: '100%',
|
'& .MuiSelect-select': {
|
display: 'flex',
|
alignItems: 'center',
|
pl: 1,
|
},
|
}}
|
autoFocus
|
fullWidth
|
open
|
>
|
{staNos.map((option) => {
|
return (
|
<MenuItem
|
key={option}
|
value={option.staNo}
|
>
|
<ListItemText sx={{ overflow: 'hidden' }} primary={option.staNo} />
|
</MenuItem>
|
);
|
})}
|
</Select >
|
)
|
}
|
|
return (
|
<Box sx={{ maxHeight: 780 }}>
|
<DataGrid
|
sx={{ maxHeight: 730 }}
|
storeKey={"locItemPreview"}
|
rows={rows}
|
columns={columns}
|
slots={{ toolbar: CustomToolBar }}
|
apiRef={gridRef}
|
checkboxSelection
|
disableRowSelectionOnClick
|
hideFooterPagination={true} // 隐藏分页控件
|
hideFooter={false}
|
onRowSelectionModelChange={(ids) => {
|
setLeftSelectedIds(ids)
|
}}
|
/>
|
</Box>
|
|
)
|
}
|
|
export default CheckPreviewTable;
|
