|  |  |  | 
|---|
|  |  |  | NumberField, | 
|---|
|  |  |  | ReferenceInput, | 
|---|
|  |  |  | AutocompleteInput, | 
|---|
|  |  |  | useRecordSelection, | 
|---|
|  |  |  | required, | 
|---|
|  |  |  | Form, | 
|---|
|  |  |  | useRefresh, | 
|---|
|  |  |  | useRedirect, | 
|---|
|  |  |  | TextInput, | 
|---|
|  |  |  | } from 'react-admin'; | 
|---|
|  |  |  | import { PAGE_DRAWER_WIDTH, OPERATE_MODE, DEFAULT_PAGE_SIZE, DEFAULT_ITEM_PAGE_SIZE, DEFAULT_TYPE } from '@/config/setting'; | 
|---|
|  |  |  | import { styled } from '@mui/material/styles'; | 
|---|
|  |  |  | import { DataGrid, useGridApiContext, GridActionsCellItem, useGridApiRef } from '@mui/x-data-grid'; | 
|---|
|  |  |  | import request from '@/utils/request'; | 
|---|
|  |  |  | import ConfirmationNumberOutlinedIcon from '@mui/icons-material/ConfirmationNumberOutlined'; | 
|---|
|  |  |  | import CloseSharpIcon from '@mui/icons-material/CloseSharp'; | 
|---|
|  |  |  | import ConfirmButton from '../../components/ConfirmButton'; | 
|---|
|  |  |  | import { Delete, Edit, Add } from '@mui/icons-material'; | 
|---|
|  |  |  | import CheckOrderSiteDialog from "./CheckOrderSiteDialog"; | 
|---|
|  |  |  | import { map } from "lodash"; | 
|---|
|  |  |  | import CheckPreviewTable from "./CheckPreviewTable"; | 
|---|
|  |  |  | import { styled } from '@mui/material/styles'; | 
|---|
|  |  |  | import request from '@/utils/request'; | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const StyledDatagrid = styled(DatagridConfigurable)(({ theme }) => ({ | 
|---|
|  |  |  | '& .css-1vooibu-MuiSvgIcon-root': { | 
|---|
|  |  |  | 
|---|
|  |  |  | '& .column-maktx': { | 
|---|
|  |  |  | width: 200 | 
|---|
|  |  |  | }, | 
|---|
|  |  |  |  | 
|---|
|  |  |  | mt: '60px' | 
|---|
|  |  |  | // '& .RaBulkActionsToolbar-toolbar': { | 
|---|
|  |  |  | //     display: 'none' | 
|---|
|  |  |  | // } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | })); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const CheckOrderPub = (props) => { | 
|---|
|  |  |  | const { record, open, setOpen, setManualDialog } = props; | 
|---|
|  |  |  | const notify = useNotify(); | 
|---|
|  |  |  | const translate = useTranslate(); | 
|---|
|  |  |  | const gridRef = useGridApiRef(); | 
|---|
|  |  |  | const [rows, setRows] = useState([]); | 
|---|
|  |  |  | const [fetchRows, setFetchRows] = useState([]); | 
|---|
|  |  |  | const translate = useTranslate(); | 
|---|
|  |  |  | const [selectItem, setSelectItem] = useState({}); | 
|---|
|  |  |  | const [rowSelectedIds, setRowSelectedIds] = useState([]); | 
|---|
|  |  |  | const [selectedMatnr, setSelectedMatnr] = useState([]); | 
|---|
|  |  |  | const [selectedIds, setSelectedIds] = useState([]); | 
|---|
|  |  |  | const [leftSelectedIds, setLeftSelectedIds] = useState([]); | 
|---|
|  |  |  | const [formData, setFormData] = useState({ orderId: record?.id, waveId: DEFAULT_TYPE }); | 
|---|
|  |  |  | const [dialog, setDialog] = useState(false); | 
|---|
|  |  |  | const [selectedValue, setSelectedValue] = useState({}); | 
|---|
|  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const getLocs = async (ids) => { | 
|---|
|  |  |  | const { data: { code, data, msg } } = await request.post('/check/locs/' + ids); | 
|---|
|  |  |  | let params = { matnrCode: ids } | 
|---|
|  |  |  | const { data: { code, data, msg } } = await request.post('/check/locs/', params); | 
|---|
|  |  |  | if (code === 200) { | 
|---|
|  |  |  | setRows(data) | 
|---|
|  |  |  | const matnrs = selectedMatnr.filter(item => data.some(bigData => bigData.matnrCode === item)); | 
|---|
|  |  |  | // setSelectedMatnr(matnrs) | 
|---|
|  |  |  | } else { | 
|---|
|  |  |  | notify(msg); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const ComfirmButton = () => { | 
|---|
|  |  |  | const { selectedIds, data, onUnselectItems } = useListContext(); | 
|---|
|  |  |  | const { selectedIds, data, onUnselectItems, } = useListContext(); | 
|---|
|  |  |  | const handleRowClick = () => { | 
|---|
|  |  |  | const ids = data.filter(item => selectedIds.includes(item.id)); | 
|---|
|  |  |  | setRowSelectedIds(ids); | 
|---|
|  |  |  | const mas = data.filter(item => selectedIds.includes(item.id)).map(item => item.matnrCode); | 
|---|
|  |  |  | //设置库位信息筛选条件 | 
|---|
|  |  |  | setSelectedMatnr(mas); | 
|---|
|  |  |  | // onUnselectItems() | 
|---|
|  |  |  | onUnselectItems(); | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | return ( | 
|---|
|  |  |  | <Button label="toolbar.confirm" size="medium" onClick={handleRowClick} /> | 
|---|
|  |  |  | record.exceStatus != 3 ? <><Button label="toolbar.confirm" size="medium" onClick={handleRowClick} /></> : <></> | 
|---|
|  |  |  | ) | 
|---|
|  |  |  | }; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | 
|---|
|  |  |  | }; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const handleClose = (value) => { | 
|---|
|  |  |  | console.log(value); | 
|---|
|  |  |  | setDialog(false); | 
|---|
|  |  |  | setSelectedValue(value); | 
|---|
|  |  |  | if (selectedIds.length == 0) { | 
|---|
|  |  |  | if (leftSelectedIds.length == 0) { | 
|---|
|  |  |  | const newRows = rows.map(item => { | 
|---|
|  |  |  | return { | 
|---|
|  |  |  | ...item, | 
|---|
|  |  |  | 
|---|
|  |  |  | setRows(newRows); | 
|---|
|  |  |  | } else { | 
|---|
|  |  |  | const newRows = rows.map(item => { | 
|---|
|  |  |  | return selectedIds.includes(item?.id) ? { | 
|---|
|  |  |  | return leftSelectedIds.includes(item?.id) ? { | 
|---|
|  |  |  | ...item, | 
|---|
|  |  |  | siteNo: value?.site | 
|---|
|  |  |  | } : item | 
|---|
|  |  |  | 
|---|
|  |  |  | <Grid item xl={6.3} gap={2}> | 
|---|
|  |  |  | <Card sx={{ minHeight: 1050, height: 'calc(100% - 10px)', width: '100%' }}> | 
|---|
|  |  |  | <Box> | 
|---|
|  |  |  | <PreviewTable | 
|---|
|  |  |  | <CheckPreviewTable | 
|---|
|  |  |  | rows={rows} | 
|---|
|  |  |  | gridRef={gridRef} | 
|---|
|  |  |  | setRows={setRows} | 
|---|
|  |  |  | record={record} | 
|---|
|  |  |  | formData={formData} | 
|---|
|  |  |  | selectedIds={selectedIds} | 
|---|
|  |  |  | selectedMatnr={selectedMatnr} | 
|---|
|  |  |  | leftSelectedIds={leftSelectedIds} | 
|---|
|  |  |  | setDialog={setDialog} | 
|---|
|  |  |  | setSelectedIds={setSelectedIds} | 
|---|
|  |  |  | setLeftSelectedIds={setLeftSelectedIds} | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | </Box> | 
|---|
|  |  |  | <Box sx={{ textAlign: 'center' }}> | 
|---|
|  |  |  | <CloseButton setOpen={setOpen} /> | 
|---|
|  |  |  | <SubmitButton selectedIds={selectedIds} setSelectedIds={setSelectedIds} rowSelectedIds={rowSelectedIds} gridRef={gridRef} record={record} /> | 
|---|
|  |  |  | <SubmitButton | 
|---|
|  |  |  | leftSelectedIds={leftSelectedIds} | 
|---|
|  |  |  | setOpen={setOpen} | 
|---|
|  |  |  | setLeftSelectedIds={setLeftSelectedIds} | 
|---|
|  |  |  | selectItem={selectItem} | 
|---|
|  |  |  | selectedMatnr={selectedMatnr} | 
|---|
|  |  |  | rowSelectedIds={rowSelectedIds} | 
|---|
|  |  |  | gridRef={gridRef} | 
|---|
|  |  |  | record={record} /> | 
|---|
|  |  |  | </Box> | 
|---|
|  |  |  | </Card> | 
|---|
|  |  |  | </Grid> | 
|---|
|  |  |  | 
|---|
|  |  |  | ); | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const PreviewTable = ({ rows, gridRef, setRows, record, selectedIds, setSelectedIds, setDialog, formData }) => { | 
|---|
|  |  |  | gridRef.current = useGridApiRef(); | 
|---|
|  |  |  | const translate = useTranslate(); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | useEffect(() => { | 
|---|
|  |  |  | if (selectedIds.length > 0) { | 
|---|
|  |  |  | console.log(selectedIds); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, [selectedIds]) | 
|---|
|  |  |  |  | 
|---|
|  |  |  | 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 selectSiteNo = () => { | 
|---|
|  |  |  | setDialog(true) | 
|---|
|  |  |  | } | 
|---|
|  |  |  | return ( | 
|---|
|  |  |  | <Box sx={{ | 
|---|
|  |  |  | p: 1, | 
|---|
|  |  |  | display: 'flex', | 
|---|
|  |  |  | justifyContent: 'flex-end', | 
|---|
|  |  |  | borderTop: '1px solid rgba(224, 224, 224, 1)' | 
|---|
|  |  |  | }}> | 
|---|
|  |  |  | <Button | 
|---|
|  |  |  | onClick={selectSiteNo} | 
|---|
|  |  |  | variant="outlined" | 
|---|
|  |  |  | label="toolbar.modiftySite" | 
|---|
|  |  |  | size="medium" | 
|---|
|  |  |  | sx={{ mr: 1 }} /> | 
|---|
|  |  |  | </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 ( | 
|---|
|  |  |  | <DataGrid | 
|---|
|  |  |  | storeKey={"locItemPreview"} | 
|---|
|  |  |  | rows={rows} | 
|---|
|  |  |  | columns={columns} | 
|---|
|  |  |  | slots={{ toolbar: CustomToolBar }} | 
|---|
|  |  |  | apiRef={gridRef} | 
|---|
|  |  |  | checkboxSelection | 
|---|
|  |  |  | disableRowSelectionOnClick | 
|---|
|  |  |  | hideFooterPagination={true}  // 隐藏分页控件 | 
|---|
|  |  |  | hideFooter={false} | 
|---|
|  |  |  | onRowSelectionModelChange={(ids) => { | 
|---|
|  |  |  | setSelectedIds(ids) | 
|---|
|  |  |  | }} | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | ) | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | //提交按钮 | 
|---|
|  |  |  | const SubmitButton = ({ selectedIds, setSelectedIds, rowSelectedIds, gridRef, record }) => { | 
|---|
|  |  |  | const SubmitButton = ({ leftSelectedIds, setLeftSelectedIds, rowSelectedIds, selectItem, gridRef, record, setOpen, selectedMatnr }) => { | 
|---|
|  |  |  | const notify = useNotify(); | 
|---|
|  |  |  | const refresh = useRefresh(); | 
|---|
|  |  |  | const translate = useTranslate(); | 
|---|
|  |  |  | const redirect = useRedirect(); | 
|---|
|  |  |  | const submit = async () => { | 
|---|
|  |  |  | const items = gridRef.current?.getSortedRows(); | 
|---|
|  |  |  | let selctRecord = items.filter(item => selectedIds.includes(item?.id)); | 
|---|
|  |  |  | let selctRecord = items.filter(item => leftSelectedIds.includes(item?.id)); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | if (selctRecord == undefined || selctRecord.length < 1) { | 
|---|
|  |  |  | notify(translate('common.msg.locEmpty'), { type: 'error' }); | 
|---|
|  |  |  | return | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | //过滤,将库位添加至盘点单明细中 | 
|---|
|  |  |  | const records = rowSelectedIds.map(map =>{ | 
|---|
|  |  |  | const records = rowSelectedIds.map(map => { | 
|---|
|  |  |  | return { | 
|---|
|  |  |  | ...map, | 
|---|
|  |  |  | items: selctRecord.filter(item => item.matnrCode == map.matnrCode) | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }) | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const { data: { code, data, msg } } = await request.post('/check/generate/tasks', records); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | let params = records.filter(record => record?.items.length > 0); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const { data: { code, data, msg } } = await request.post('/check/generate/tasks', params); | 
|---|
|  |  |  | if (code == 200) { | 
|---|
|  |  |  | refresh(); | 
|---|
|  |  |  | redirect("/task") | 
|---|
|  |  |  | setOpen(false) | 
|---|
|  |  |  | } else { | 
|---|
|  |  |  | notify(msg); | 
|---|
|  |  |  | } | 
|---|