| | |
| | | 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; |
| | | |