| | |
| | | import ConfirmButton from '../../components/ConfirmButton'; |
| | | import { Delete, Edit, Add } from '@mui/icons-material'; |
| | | import OutStockSiteDialog from "./OutStockSiteDialog"; |
| | | import { color } from "framer-motion"; |
| | | |
| | | const StyledDatagrid = styled(DatagridConfigurable)(({ theme }) => ({ |
| | | '& .css-1vooibu-MuiSvgIcon-root': { |
| | |
| | | }, |
| | | '& .column-maktx': { |
| | | width: 200 |
| | | }, |
| | | '& .RaBulkActionsToolbar-toolbar': { |
| | | display: 'none' |
| | | } |
| | | |
| | | })); |
| | | |
| | | const OutStockPublic = (props) => { |
| | | const { record, open, setOpen } = props; |
| | | const notify = useNotify(); |
| | | const gridRef = useGridApiRef(); |
| | | const [rows, setRows] = useState({}); |
| | | const [rows, setRows] = useState([]); |
| | | const translate = useTranslate(); |
| | | const [selectedIds, setSelectedIds] = useState([]); |
| | | const [formData, setFormData] = useState({ |
| | |
| | | setDialog(false); |
| | | setSelectedValue(value); |
| | | const newRows = rows.map(item => { |
| | | return { |
| | | return selectedIds.includes(item?.id) ? { |
| | | ...item, |
| | | siteNo: value?.site |
| | | } |
| | | } : item |
| | | }) |
| | | setRows(newRows); |
| | | }; |
| | |
| | | /> |
| | | <StyledDatagrid |
| | | preferenceKey='outStockItem' |
| | | bulkActionButtons={false} |
| | | bulkActionButtons={<></>} |
| | | rowClick={false} |
| | | omit={['id', 'splrName', 'qty', 'poCode', 'workQty']} |
| | | > |
| | |
| | | gridRef={gridRef} |
| | | setRows={setRows} |
| | | record={record} |
| | | formData={formData} |
| | | selectedIds={selectedIds} |
| | | setDialog={setDialog} |
| | | setSelectedIds={setSelectedIds} |
| | |
| | | ); |
| | | } |
| | | |
| | | const PreviewTable = ({ rows, gridRef, setRows, record, selectedIds, setSelectedIds, setDialog }) => { |
| | | const PreviewTable = ({ rows, gridRef, setRows, record, selectedIds, setSelectedIds, setDialog, formData }) => { |
| | | gridRef.current = useGridApiRef(); |
| | | const translate = useTranslate(); |
| | | |
| | | const columns = [ |
| | | useEffect(() => { |
| | | if (selectedIds.length > 0) { |
| | | console.log(selectedIds); |
| | | } |
| | | }, [selectedIds]) |
| | | |
| | | |
| | | const baseColumns = [ |
| | | // { field: 'id', headerName: 'ID', width: 40 }, |
| | | { field: 'locCode', headerName: '库位', width: 110 }, |
| | | { field: 'barcode', headerName: '容器', width: 120 }, |
| | |
| | | <OutStockSite {...params} /> |
| | | ), |
| | | }, |
| | | { |
| | | field: 'actions', |
| | | type: 'actions', |
| | | headerName: '操作', |
| | | with: 120, |
| | | getActions: (params) => [ |
| | | <GridActionsCellItem |
| | | icon={<Delete />} |
| | | label="Delete" |
| | | onClick={() => handleDelete(params.row, rows, setRows)} |
| | | />, |
| | | ] |
| | | }, |
| | | ] |
| | | |
| | | 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]; |
| | | |
| | | /** |
| | | * 删除事件 |
| | |
| | | const { value } = props; |
| | | return ( |
| | | value > 0 ? |
| | | <Box |
| | | sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }} |
| | | > |
| | | <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> |
| | | : |
| | | <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}> |
| | | <span style={{ color: 'red' }}>{translate('common.edit.title.insuffInventory')}</span> |
| | | </Box> |
| | | ); |
| | | }); |
| | |
| | | return null; |
| | | } |
| | | return ( |
| | | <Box |
| | | sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }} |
| | | > |
| | | <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}> |
| | | <span>{value}</span> |
| | | </Box> |
| | | ); |
| | |
| | | const selectSiteNo = () => { |
| | | setDialog(true) |
| | | } |
| | | |
| | | return ( |
| | | selectedIds.length > 0 ? <Box sx={{ |
| | | <Box sx={{ |
| | | p: 1, |
| | | display: 'flex', |
| | | justifyContent: 'flex-end', |
| | |
| | | label="toolbar.modiftySite" |
| | | size="medium" |
| | | sx={{ mr: 1 }} /> |
| | | </Box> : <></> |
| | | </Box> |
| | | ); |
| | | } |
| | | |
| | |
| | | columns={columns} |
| | | slots={{ toolbar: CustomToolBar }} |
| | | apiRef={gridRef} |
| | | initialState={{ |
| | | pagination: { |
| | | paginationModel: { |
| | | pageSize: 15, |
| | | }, |
| | | }, |
| | | }} |
| | | checkboxSelection |
| | | disableRowSelectionOnClick |
| | | pageSizeOptions={[15, 25, 35, 45]} |
| | | hideFooterPagination={true} // 隐藏分页控件 |
| | | hideFooter={false} |
| | | onRowSelectionModelChange={(ids) => { |
| | | setSelectedIds(ids) |
| | | }} |