|  |  |  | 
|---|
|  |  |  | import { Box, Card, Grid, LinearProgress } from "@mui/material"; | 
|---|
|  |  |  | import { Box, Card, Grid, LinearProgress, Select, MenuItem, ListItemText, Tooltip } from "@mui/material"; | 
|---|
|  |  |  | import React, { useState, useRef, useEffect, useMemo } from "react"; | 
|---|
|  |  |  | import { | 
|---|
|  |  |  | List, | 
|---|
|  |  |  | 
|---|
|  |  |  | } from 'react-admin'; | 
|---|
|  |  |  | import { PAGE_DRAWER_WIDTH, OPERATE_MODE, DEFAULT_PAGE_SIZE, DEFAULT_ITEM_PAGE_SIZE } from '@/config/setting'; | 
|---|
|  |  |  | import { styled } from '@mui/material/styles'; | 
|---|
|  |  |  | import { DataGrid } from '@mui/x-data-grid'; | 
|---|
|  |  |  | import { DataGrid, useGridApiContext } from '@mui/x-data-grid'; | 
|---|
|  |  |  | import request from '@/utils/request'; | 
|---|
|  |  |  | import DictSelect from "../../components/DictSelect"; | 
|---|
|  |  |  | import ConfirmationNumberOutlinedIcon from '@mui/icons-material/ConfirmationNumberOutlined'; | 
|---|
|  |  |  | import CloseSharpIcon from '@mui/icons-material/CloseSharp'; | 
|---|
|  |  |  | import ConfirmButton from '../../components/ConfirmButton'; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const StyledDatagrid = styled(DatagridConfigurable)(({ theme }) => ({ | 
|---|
|  |  |  | '& .css-1vooibu-MuiSvgIcon-root': { | 
|---|
|  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const OutStockPublic = (props) => { | 
|---|
|  |  |  | const { record, open } = props; | 
|---|
|  |  |  | const { record, open, setOpen } = props; | 
|---|
|  |  |  | const dataGridRef = useRef(null); | 
|---|
|  |  |  | const notify = useNotify(); | 
|---|
|  |  |  | const [rows, setRows] = useState({}); | 
|---|
|  |  |  | const translate = useTranslate(); | 
|---|
|  |  |  | const [selectedIds, setSelectedIds] = React.useState([]); | 
|---|
|  |  |  | const [formData, setFormData] = useState({ | 
|---|
|  |  |  | orderId: record?.id | 
|---|
|  |  |  | }); | 
|---|
|  |  |  | 
|---|
|  |  |  | if (formData.waveId == null && formData.waveId == undefined) { | 
|---|
|  |  |  | return | 
|---|
|  |  |  | } | 
|---|
|  |  |  | const res = await request.post('/outStock/order/getOutTaskItems', { ...formData }); | 
|---|
|  |  |  | if (res?.data?.code === 200) { | 
|---|
|  |  |  | setRows(res.data.data.records) | 
|---|
|  |  |  | const { data: { code, data, msg } } = await request.post('/outStock/order/getOutTaskItems', { ...formData }); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | if (code === 200) { | 
|---|
|  |  |  | setRows(data) | 
|---|
|  |  |  | } else { | 
|---|
|  |  |  | notify(res.data.msg); | 
|---|
|  |  |  | notify(msg); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | 
|---|
|  |  |  | [name]: value | 
|---|
|  |  |  | })); | 
|---|
|  |  |  | }; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | return ( | 
|---|
|  |  |  | <> | 
|---|
|  |  |  | <Box> | 
|---|
|  |  |  | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | </ReferenceInput> | 
|---|
|  |  |  | </Form> | 
|---|
|  |  |  | {/* <DictSelect | 
|---|
|  |  |  | label={translate("table.field.waveRule.type")} | 
|---|
|  |  |  | onChange={(e) => handleChange(e.target.value, 'type')} | 
|---|
|  |  |  | value={formData.type} | 
|---|
|  |  |  | dictTypeCode="sys_wave_rule_code" | 
|---|
|  |  |  | required | 
|---|
|  |  |  | /> */} | 
|---|
|  |  |  | <List | 
|---|
|  |  |  | resource="outStockItem" | 
|---|
|  |  |  | storeKey='outStockItem' | 
|---|
|  |  |  | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | }} | 
|---|
|  |  |  | ref={dataGridRef} | 
|---|
|  |  |  | checkboxSelection | 
|---|
|  |  |  | onRowSelectionModelChange={(ids) => { | 
|---|
|  |  |  | setSelectedIds(ids) | 
|---|
|  |  |  | }} | 
|---|
|  |  |  | pageSizeOptions={[15, 25, 35, 45]} | 
|---|
|  |  |  | disableRowSelectionOnClick | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | </Box> | 
|---|
|  |  |  | <Box sx={{ textAlign: 'center' }}> | 
|---|
|  |  |  | <Button label="toolbar.close" variant="outlined" size="medium" startIcon={<CloseSharpIcon />} sx={{ margin: '3.5em' }} /> | 
|---|
|  |  |  | <Button label="toolbar.confirm" variant="contained" size="medium" startIcon={<ConfirmationNumberOutlinedIcon />} /> | 
|---|
|  |  |  | <CloseButton setOpen={setOpen} /> | 
|---|
|  |  |  | <SubmitButton selectedIds={selectedIds} setSelectedIds={setSelectedIds} /> | 
|---|
|  |  |  | </Box> | 
|---|
|  |  |  | </Card> | 
|---|
|  |  |  | </Grid> | 
|---|
|  |  |  | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | //提交按钮 | 
|---|
|  |  |  | const SubmitButton = ({ selectedIds, setSelectedIds }) => { | 
|---|
|  |  |  | const submit = () => { | 
|---|
|  |  |  | if (selectedIds.length  < 1) {return} | 
|---|
|  |  |  | console.log(selectedIds); | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const rows = [ | 
|---|
|  |  |  | { id: 1, locCode: '03-02-1-2-1', container: 'Snow', batch: 'Jon', curQty: 14 }, | 
|---|
|  |  |  | { id: 2, locCode: '03-02-1-2-1', container: 'Lannister', batch: 'Cersei', curQty: 31 }, | 
|---|
|  |  |  | { id: 3, locCode: '03-02-1-2-1', container: 'Lannister', batch: 'Jaime', curQty: 31 }, | 
|---|
|  |  |  | { id: 4, locCode: '03-02-1-2-1', container: 'Stark', batch: 'Arya', curQty: 11 }, | 
|---|
|  |  |  | { id: 5, locCode: '03-02-1-2-1', container: 'Targaryen', batch: 'Daenerys', curQty: null }, | 
|---|
|  |  |  | { id: 6, locCode: '03-02-1-2-1', container: 'Melisandre', batch: null, curQty: 150 }, | 
|---|
|  |  |  | { id: 7, locCode: '03-02-1-2-1', container: 'Clifford', batch: 'Ferrara', curQty: 44 }, | 
|---|
|  |  |  | { id: 8, locCode: '03-02-1-2-1', container: 'Frances', batch: 'Rossini', curQty: 36 }, | 
|---|
|  |  |  | { id: 9, locCode: '03-02-1-2-1', container: 'Roxie', batch: 'Harvey', curQty: 65 }, | 
|---|
|  |  |  | ] | 
|---|
|  |  |  | return ( | 
|---|
|  |  |  | <ConfirmButton | 
|---|
|  |  |  | label="toolbar.confirm" | 
|---|
|  |  |  | variant="contained" | 
|---|
|  |  |  | size="medium" | 
|---|
|  |  |  | onConfirm={submit} | 
|---|
|  |  |  | startIcon={<ConfirmationNumberOutlinedIcon />} | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | ) | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | //关闭按钮 | 
|---|
|  |  |  | const CloseButton = ({ setOpen }) => { | 
|---|
|  |  |  | const close = () => { | 
|---|
|  |  |  | setOpen(false) | 
|---|
|  |  |  | } | 
|---|
|  |  |  | return ( | 
|---|
|  |  |  | <Button | 
|---|
|  |  |  | label="toolbar.close" | 
|---|
|  |  |  | variant="outlined" | 
|---|
|  |  |  | size="medium" | 
|---|
|  |  |  | onClick={close} | 
|---|
|  |  |  | startIcon={<CloseSharpIcon />} | 
|---|
|  |  |  | sx={{ margin: '3.5em' }} /> | 
|---|
|  |  |  | ) | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const columns = [ | 
|---|
|  |  |  | { field: 'id', headerName: 'ID', width: 40 }, | 
|---|
|  |  |  | { field: 'locCode', headerName: '库位', width: 110 }, | 
|---|
|  |  |  | { field: 'container', headerName: '容器', width: 120 }, | 
|---|
|  |  |  | { field: 'barcode', headerName: '容器', width: 120 }, | 
|---|
|  |  |  | { field: 'batch', headerName: '批次', width: 90 }, | 
|---|
|  |  |  | { field: 'unit', headerName: '单位', width: 90 }, | 
|---|
|  |  |  | { field: 'curQty', headerName: '本次出库数量', width: 110 }, | 
|---|
|  |  |  | { field: 'siteNo', headerName: '出库口', width: 90 }, `` | 
|---|
|  |  |  | { field: 'workQty', headerName: '本次出库数量', width: 110 }, | 
|---|
|  |  |  | { | 
|---|
|  |  |  | field: 'staNo', | 
|---|
|  |  |  | headerName: '出库口', | 
|---|
|  |  |  | width: 90, | 
|---|
|  |  |  | type: 'singleSelect', | 
|---|
|  |  |  | editable: true, | 
|---|
|  |  |  | renderCell: (params) => ( | 
|---|
|  |  |  | <OutStockSiteNo value={params.value} /> | 
|---|
|  |  |  | ), | 
|---|
|  |  |  | renderEditCell: (params) => ( | 
|---|
|  |  |  | <OutStockSite {...params} /> | 
|---|
|  |  |  | ), | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | ] | 
|---|
|  |  |  |  | 
|---|
|  |  |  | 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 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 > | 
|---|
|  |  |  | ) | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | export default OutStockPublic; | 
|---|
|  |  |  |  | 
|---|