From c458dd9c84a66ba50cb83adaa3967823ea9effd8 Mon Sep 17 00:00:00 2001 From: skyouc Date: 星期三, 11 六月 2025 11:26:23 +0800 Subject: [PATCH] 出库单明细搜索报错问题修复 --- rsf-admin/src/page/orders/outStock/OutStockPublic.jsx | 372 +++++++++++++++++++++++++++++++++------------------- 1 files changed, 233 insertions(+), 139 deletions(-) diff --git a/rsf-admin/src/page/orders/outStock/OutStockPublic.jsx b/rsf-admin/src/page/orders/outStock/OutStockPublic.jsx index b3b7062..3a9f70b 100644 --- a/rsf-admin/src/page/orders/outStock/OutStockPublic.jsx +++ b/rsf-admin/src/page/orders/outStock/OutStockPublic.jsx @@ -1,4 +1,4 @@ -import { Box, Card, Grid, LinearProgress, Select, MenuItem, ListItemText, Tooltip, IconButton } from "@mui/material"; +import { Box, Card, Grid, LinearProgress, Select, MenuItem, ListItemText } from "@mui/material"; import React, { useState, useRef, useEffect, useMemo } from "react"; import { List, @@ -38,7 +38,7 @@ useRefresh, useRedirect, } from 'react-admin'; -import { PAGE_DRAWER_WIDTH, OPERATE_MODE, DEFAULT_PAGE_SIZE, DEFAULT_ITEM_PAGE_SIZE } from '@/config/setting'; +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'; @@ -46,6 +46,8 @@ import CloseSharpIcon from '@mui/icons-material/CloseSharp'; 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': { @@ -59,27 +61,47 @@ } })); - const OutStockPublic = (props) => { const { record, open, setOpen } = props; const notify = useNotify(); const gridRef = useGridApiRef(); const [rows, setRows] = useState({}); const translate = useTranslate(); - const [selectedIds, setSelectedIds] = React.useState([]); + const [selectedIds, setSelectedIds] = useState([]); const [formData, setFormData] = useState({ - orderId: record?.id + orderId: record?.id, + waveId: DEFAULT_TYPE }); + const [dialog, setDialog] = useState(false); + const [selectedValue, setSelectedValue] = useState({}); + + const handleClickOpen = () => { + setDialog(true); + }; + + const handleClose = (value) => { + setDialog(false); + setSelectedValue(value); + const newRows = rows.map(item => { + return { + ...item, + siteNo: value?.site + } + }) + setRows(newRows); + }; + useEffect(() => { - getWaveRule() - }, [formData, open]) + if (open) { + getWaveRule() + } + }, [open, formData]) const getWaveRule = async () => { if (formData.waveId == null && formData.waveId == undefined) { return } const { data: { code, data, msg } } = await request.post('/outStock/order/getOutTaskItems', { ...formData }); - if (code === 200) { setRows(data) } else { @@ -94,7 +116,6 @@ })); }; - gridRef.current = useGridApiRef(); return ( <> @@ -110,6 +131,7 @@ <AutocompleteInput label="table.field.waveRule.type" onChange={(e) => handleChange(e, 'waveId')} + defaultValue={15} value={formData.type} validate={required()} /> @@ -158,45 +180,228 @@ <Grid item xl={6.3} gap={2}> <Card> <Box sx={{ height: 500, width: '100%' }}> - <DataGrid + <PreviewTable rows={rows} - columns={columns} - apiRef={gridRef} - initialState={{ - pagination: { - paginationModel: { - pageSize: 15, - }, - }, - }} - checkboxSelection - pageSizeOptions={[15, 25, 35, 45]} - onRowSelectionModelChange={(ids) => { - setSelectedIds(ids) - }} + gridRef={gridRef} + setRows={setRows} + record={record} + selectedIds={selectedIds} + setDialog={setDialog} + setSelectedIds={setSelectedIds} /> </Box> <Box sx={{ textAlign: 'center' }}> <CloseButton setOpen={setOpen} /> - <SubmitButton selectedIds={selectedIds} setSelectedIds={setSelectedIds} gridRef={gridRef} /> + <SubmitButton selectedIds={selectedIds} setSelectedIds={setSelectedIds} gridRef={gridRef} record={record} /> </Box> </Card> </Grid> + </Grid> + <Grid> + <OutStockSiteDialog + selectedValue={selectedValue} + open={dialog} + onClose={handleClose} + /> </Grid> </Box> </> ); } +const PreviewTable = ({ rows, gridRef, setRows, record, selectedIds, setSelectedIds, setDialog }) => { + gridRef.current = useGridApiRef(); + const translate = useTranslate(); + + const columns = [ + // { field: 'id', headerName: 'ID', width: 40 }, + { 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: 'outQty', headerName: '鍑哄簱鏁伴噺', width: 110, }, + { + 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} /> + ), + }, + { + field: 'actions', + type: 'actions', + headerName: '鎿嶄綔', + with: 120, + getActions: (params) => [ + <GridActionsCellItem + icon={<Delete />} + label="Delete" + onClick={() => handleDelete(params.row, rows, setRows)} + />, + ] + }, + ] + + /** + * 鍒犻櫎浜嬩欢 + * @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 ( + selectedIds.length > 0 ? <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 + rows={rows} + columns={columns} + slots={{ toolbar: CustomToolBar }} + apiRef={gridRef} + initialState={{ + pagination: { + paginationModel: { + pageSize: 15, + }, + }, + }} + checkboxSelection + disableRowSelectionOnClick + pageSizeOptions={[15, 25, 35, 45]} + onRowSelectionModelChange={(ids) => { + setSelectedIds(ids) + }} + /> + ) +} + + //鎻愪氦鎸夐挳 -const SubmitButton = ({ selectedIds, setSelectedIds, gridRef }) => { +const SubmitButton = ({ selectedIds, setSelectedIds, gridRef, record }) => { const notify = useNotify(); const refresh = useRefresh(); - const redirect = useRedirect(); + const redirect = useRedirect(); const submit = async () => { const items = gridRef.current?.getSortedRows(); - const { data: { code, data, msg } } = await request.post('/outStock/generate/tasks', { items }); + const { data: { code, data, msg } } = await request.post('/outStock/generate/tasks', { items, outId: record?.id }); if (code == 200) { refresh(); redirect("/task") @@ -230,117 +435,6 @@ sx={{ margin: '3.5em' }} /> ) } - -const columns = [ - { field: 'id', headerName: 'ID', width: 40 }, - { field: 'locCode', headerName: '搴撲綅', width: 110 }, - { field: 'barcode', headerName: '瀹瑰櫒', width: 120 }, - { field: 'batch', headerName: '鎵规', width: 90 }, - { field: 'unit', headerName: '鍗曚綅', width: 90 }, - { field: 'outQty', headerName: '鏈鍑哄簱鏁伴噺', width: 110 }, - { - field: 'siteNo', - headerName: '鍑哄簱鍙�', - width: 90, - type: 'singleSelect', - editable: true, - renderCell: (params) => ( - <OutStockSiteNo value={params.value} /> - ), - renderEditCell: (params) => ( - <OutStockSite {...params} /> - ), - }, - { - field: 'actions', - type: 'actions', - headerName: '鎿嶄綔', - with: 120, - getActions: (params) => [ - <GridActionsCellItem - icon={<Delete />} - label="Delete" - onClick={() => handleDelete(params.row.id)} - />, - ] - }, -] - -/** - * 鍒犻櫎浜嬩欢 - * @param {*} params - */ -const handleDelete = (params) => { - console.log(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; -- Gitblit v1.9.1