import { Dialog, DialogActions, DialogContent, DialogTitle, Box, LinearProgress, Grid, } from "@mui/material";
|
import React, { useState, useRef, useEffect, useMemo, memo } from "react";
|
import {
|
Toolbar,
|
Button,
|
useTranslate,
|
useNotify,
|
useRefresh,
|
useGetList,
|
} from 'react-admin';
|
import request from '@/utils/request';
|
import { styled } from '@mui/material/styles';
|
import { PAGE_DRAWER_WIDTH, OPERATE_MODE, DEFAULT_PAGE_SIZE } from '@/config/setting';
|
import { DataGrid, useGridApiContext, GridActionsCellItem, useGridApiRef } from '@mui/x-data-grid';
|
import DialogCloseButton from "../../components/DialogCloseButton";
|
|
|
const OutOrderPreview = (props) => {
|
const { open, setOpen, record, selectedIds, setCloseParent } = props;
|
const translate = useTranslate();
|
const gridRef = useGridApiRef();
|
const [rows, setRows] = useState([]);
|
const notify = useNotify();
|
const refresh = useRefresh();
|
const handleClose = async (event, reason) => {
|
if (reason !== "backdropClick") {
|
// const res = await request.get(`/outStock/items/cancel/` + selectedIds);
|
setOpen(false);
|
setCloseParent(false)
|
}
|
};
|
|
if (!selectedIds) { return }
|
|
const { data, isLoading, error } = useGetList('/deliveryItem/edit', {
|
pagination: { page: 1, perPage: 1000 },
|
filter: { deleted: 0, ids: selectedIds }
|
});
|
|
return (
|
<Dialog
|
open={open}
|
onClose={handleClose}
|
aria-labelledby="form-dialog-title"
|
aria-hidden
|
fullWidth
|
maxWidth="lg"
|
>
|
<DialogTitle id="form-dialog-title" sx={{
|
position: 'sticky',
|
top: 0,
|
backgroundColor: 'background.paper',
|
zIndex: 1000
|
}}>
|
{translate('create.title')}
|
<Box sx={{ position: 'absolute', top: 8, right: 8, zIndex: 1001 }}>
|
<DialogCloseButton onClose={handleClose} />
|
</Box>
|
</DialogTitle>
|
<DialogContent>
|
<Grid container xl={12}>
|
<Grid item xl={12}>
|
<Box display="flex" sx={{ height: 400, width: '100%', '& .RaConfigurable-root': { width: '100%' } }}>
|
<LinearProgress sx={{ height: "2px", position: 'absolute', top: 0, left: 0, right: 0, }} />
|
<OrderPreview rows={data} gridRef={gridRef} />
|
</Box >
|
</Grid>
|
</Grid>
|
<Toolbar sx={{ justifyContent: 'end' }}>
|
<ConfirmButton label="toolbar.confirm" variant="contained" size="large" gridRef={gridRef} setOpen={setOpen} setCloseParent={setCloseParent}/>
|
</Toolbar>
|
</DialogContent>
|
</Dialog>
|
)
|
}
|
|
export default OutOrderPreview;
|
|
const ConfirmButton = ({ gridRef, setOpen, setCloseParent }) => {
|
const refresh = useRefresh();
|
const notify = useNotify();
|
const confirm = async () => {
|
const items = gridRef.current?.getSortedRows();
|
const { data: { code, msg } } = await request.post(`/outStock/generate/orders`, { ids: items });
|
if (code === 200) {
|
notify(msg);
|
refresh()
|
setOpen(false)
|
setCloseParent(false)
|
} else {
|
notify(msg);
|
}
|
}
|
|
return (
|
<Button label="toolbar.confirm" variant="contained" size="large" onClick={confirm} />
|
)
|
}
|
|
const OrderPreview = ({ rows, gridRef }) => {
|
gridRef.current = useGridApiRef();
|
|
const columns = [
|
{ field: 'matnrCode', headerName: '物料编码', width: 110 },
|
{ field: 'maktx', headerName: '物料名称', width: 190 },
|
{
|
field: 'anfme', headerName: '出库数量', width: 110, type: 'number', editable: true,
|
valueGetter: (value, row) => {
|
return row.anfme - row.workQty - row.qty;
|
},
|
},
|
{
|
field: 'workQty', headerName: '剩余数量', width: 110, type: 'number',
|
valueGetter: (value, row) => {
|
return row.anfme - row.workQty - row.qty;
|
},
|
},
|
{ field: 'unit', headerName: '单位', width: 110 },
|
{ field: 'splrBatch', headerName: '批次', width: 110 },
|
{ field: 'splrName', headerName: '供应商', width: 110 },
|
{ field: 'updateTime', headerName: '更新时间', width: 110 },
|
{ field: 'updateBy$', headerName: '更新人员', width: 110 },
|
]
|
|
return (
|
<DataGrid
|
storeKey={"outOrderItemPreview"}
|
rows={rows}
|
columns={columns}
|
apiRef={gridRef}
|
disableRowSelectionOnClick
|
hideFooterPagination={true} // 隐藏分页控件
|
hideFooter={true}
|
onRowSelectionModelChange={(ids) => {
|
setSelectedIds(ids)
|
}}
|
/>
|
)
|
}
|
