| import React, { useState, useEffect } from "react"; | 
| import { | 
|     Dialog, | 
|     DialogActions, | 
|     DialogContent, | 
|     DialogTitle, | 
|     Stack, | 
|     Grid, | 
|     Box, | 
|     Button, | 
|     Paper, | 
|     styled, | 
|     Tooltip, | 
|     IconButton, | 
|     TextField, | 
| } from '@mui/material'; | 
|   | 
| import { EDIT_MODE, DEFAULT_START_PAGE, DEFAULT_ITEM_PAGE_SIZE, DEFAULT_PAGE_SIZE, REFERENCE_INPUT_PAGESIZE } from '@/config/setting'; | 
| import { useTranslate, useNotify, useRefresh, DatagridConfigurable, useGetOne } from 'react-admin'; | 
| import DialogCloseButton from "../../components/DialogCloseButton"; | 
| import { Add, Edit, Delete, Save } from '@mui/icons-material'; | 
| import SaveIcon from '@mui/icons-material/Save'; | 
| import { DataGrid } from '@mui/x-data-grid'; | 
| import request from '@/utils/request'; | 
|   | 
| const StyledDatagrid = styled(DatagridConfigurable)(({ theme }) => ({ | 
|     '& .css-1vooibu-MuiSvgIcon-root': { | 
|         height: '.9em' | 
|     }, | 
|     '& .RaDatagrid-row': { | 
|         cursor: 'auto' | 
|     }, | 
|     '& .opt': { | 
|         width: 180 | 
|     }, | 
| })); | 
|   | 
| const SelectLocsRevise = (props) => { | 
|     const { open, setOpen, locRevise } = props; | 
|     const handleClose = (event, reason) => { | 
|         if (reason !== "backdropClick") { | 
|             setOpen(false); | 
|         } | 
|     }; | 
|     const dicts = JSON.parse(localStorage.getItem('sys_dicts'))?.filter(dict => (dict.dictTypeCode == 'sys_stock_revise_type')) || []; | 
|     const [page, setPage] = useState({ page: DEFAULT_START_PAGE, pageSize: DEFAULT_PAGE_SIZE }); | 
|     const [formData, setFormData] = useState({ useStatus: 'F', code: null }); | 
|     const [selectedRows, setSelectedRows] = useState([]); | 
|     const [isLoading, setIsLoading] = useState(false); | 
|     const [tableData, setTableData] = useState([]); | 
|     const [rowCount, setRowCount] = useState(0); | 
|     const translate = useTranslate(); | 
|     const refresh = useRefresh(); | 
|     const notify = useNotify(); | 
|   | 
|     const handleChange = (e) => { | 
|         const { name, value } = e.target; | 
|         setFormData(() => ({ | 
|             ...formData, | 
|             [name]: value | 
|         })); | 
|     }; | 
|   | 
|     const handleSubmit = () => { | 
|         const selectedData = tableData.filter(item => selectedRows.includes(item.id)); | 
|         const value = selectedData.map((el => { | 
|             return { | 
|                 id: el.id, | 
|                 locCode: el.code, | 
|                 areaId: el.areaId, | 
|                 barcode: el.barcode || '', | 
|                 channel: el.channel || '', | 
|                 col: el.col, | 
|                 lev: el.lev, | 
|                 row: el.row, | 
|                 type: el.type, | 
|                 useStatus: el.useStatus, | 
|                 warehouseId: el.warehouseId, | 
|             } | 
|         })); | 
|   | 
|         saveReviseLog(value); | 
|     }; | 
|   | 
|     const saveReviseLog = async (values) => { | 
|         const parmas = { | 
|             reviseId: locRevise, | 
|             items: values, | 
|         } | 
|         const res = await request.post(`/reviseLog/items/save`, parmas); | 
|         if (res?.data?.code === 200) { | 
|             setOpen(false); | 
|             refresh() | 
|         } else { | 
|             notify(res.data.msg); | 
|         } | 
|     } | 
|   | 
|     const getData = async () => { | 
|         setIsLoading(true) | 
|         const res = await request.post(`/loc/page`, { | 
|             ...formData, | 
|             current: page?.page, | 
|             pageSize: page?.pageSize, | 
|             orderBy: "create_time desc" | 
|         }); | 
|         if (res?.data?.code === 200) { | 
|             setTableData(res.data.data.records); | 
|             setRowCount(res.data?.data?.total); | 
|         } else { | 
|             notify(res.data.msg); | 
|         } | 
|         setIsLoading(false) | 
|     }; | 
|   | 
|     useEffect(() => { | 
|         getData(); | 
|     }, [open, page]); | 
|   | 
|     const handleSearch = () => { | 
|         getData() | 
|     }; | 
|   | 
|     return ( | 
|         <Dialog | 
|             open={open} | 
|             onClose={handleClose} | 
|             aria-labelledby="form-dialog-title" | 
|             fullWidth | 
|             disableRestoreFocus | 
|             maxWidth="xl" | 
|         > | 
|             <DialogTitle id="form-dialog-title" sx={{ | 
|                 position: 'sticky', | 
|                 top: 0, | 
|                 backgroundColor: 'background.paper', | 
|                 zIndex: 1000 | 
|             }}> | 
|                 {translate("common.action.newAddMats")} | 
|                 <Box sx={{ position: 'absolute', top: 8, right: 8, zIndex: 1001 }}> | 
|                     <DialogCloseButton onClose={handleClose} /> | 
|                 </Box> | 
|             </DialogTitle> | 
|             <DialogContent sx={{ mt: 2 }}> | 
|                 {/* <Box> | 
|                     <List | 
|                         sx={{ | 
|                             flexGrow: 1, | 
|                             marginRight: 1, | 
|                             transition: (theme) => | 
|                                 theme.transitions.create(['all'], { | 
|                                     duration: theme.transitions.duration.enteringScreen, | 
|                                 }), | 
|                         }} | 
|                         resource="loc" | 
|                         title={"menu.loc"} | 
|                         empty={false} | 
|                         filter={{ useStatus: 'F' }} | 
|                         filters={filters} | 
|                         sort={{ field: "'row'" }} | 
|                         actions={false} | 
|                         perPage={DEFAULT_PAGE_SIZE} | 
|                         aside={false} | 
|                     > | 
|                         <StyledDatagrid | 
|                             preferenceKey='loc' | 
|                             align="left" | 
|                             bulkActionButtons={false} | 
|                             rowClick={() => false} | 
|                             omit={['id', 'areaId', 'type', 'barcode']} | 
|                         > | 
|                             <NumberField source="id" /> | 
|                             <TextField source="code" label="table.field.locItem.locCode" /> | 
|                         </StyledDatagrid> | 
|                     </List> | 
|                 </Box> */} | 
|                 <Box> | 
|                     <Box component="form" onSubmit={handleSubmit} sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}> | 
|                         <Grid container spacing={2} md={6}> | 
|                             <Grid item md={4}> | 
|                                 <TextField | 
|                                     label={translate('table.field.locItem.locCode')} | 
|                                     name="code" | 
|                                     value={formData.code} | 
|                                     onChange={handleChange} | 
|                                     size="small" | 
|                                 /> | 
|                             </Grid> | 
|                             <Grid item md={2} sx={{ margin: 'auto' }}> | 
|                                 <Button variant="contained" onClick={handleSearch}>{translate("toolbar.query")}</Button> | 
|                             </Grid> | 
|                         </Grid> | 
|                     </Box> | 
|                     <Box sx={{ mt: 2, height: 600, width: '100%' }}> | 
|                         <AsnWareModalTable | 
|                             tableData={tableData} | 
|                             setTableData={setTableData} | 
|                             page={page} | 
|                             rowCount={rowCount} | 
|                             setPage={setPage} | 
|                             isLoading={isLoading} | 
|                             selectedRows={selectedRows} | 
|                             setSelectedRows={setSelectedRows} | 
|                         /> | 
|                     </Box> | 
|                 </Box> | 
|             </DialogContent> | 
|             <DialogActions sx={{ position: 'sticky', bottom: 0, backgroundColor: 'background.paper', zIndex: 1000 }}> | 
|                 <Box sx={{ width: '100%', display: 'flex', justifyContent: 'flex-end' }}> | 
|                     <Button onClick={handleSubmit} variant="contained" startIcon={<SaveIcon />}> | 
|                         {translate('toolbar.confirm')} | 
|                     </Button> | 
|                 </Box> | 
|             </DialogActions> | 
|         </Dialog> | 
|     ); | 
| }; | 
|   | 
| export default SelectLocsRevise; | 
|   | 
| const AsnWareModalTable = ({ tableData, setTableData, page, isLoading, pageSize, setPage, rowCount, selectedRows, setSelectedRows }) => { | 
|     const translate = useTranslate(); | 
|     const notify = useNotify(); | 
|   | 
|     const [columns, setColumns] = useState([ | 
|         { | 
|             field: 'code', | 
|             headerName: translate('table.field.locItem.locCode'), | 
|             width: 110, | 
|             editable: false, | 
|         }, | 
|         { | 
|             field: 'warehouseId$', | 
|             headerName: translate('table.field.loc.warehouseId'), | 
|             minWidth: 100, | 
|             flex: 1, | 
|             editable: false, | 
|         }, | 
|         { | 
|             field: 'areaId$', | 
|             headerName: translate('table.field.loc.areaId'), | 
|             width: 130, | 
|             editable: false, | 
|         }, | 
|         { | 
|             field: 'typeIds$', | 
|             headerName: translate('table.field.loc.type'), | 
|             minWidth: 100, | 
|             flex: 1, | 
|             editable: false, | 
|         }, | 
|         { | 
|             field: 'barcode', | 
|             headerName: translate('table.field.loc.barcode'), | 
|             minWidth: 100, | 
|             flex: 1, | 
|             editable: false, | 
|         }, | 
|         { | 
|             field: 'useStatus$', | 
|             headerName: translate('table.field.loc.useStatus') + "*", | 
|             minWidth: 100, | 
|             flex: 1, | 
|             editable: false, | 
|         }, | 
|         { | 
|             field: 'channel', | 
|             headerName: translate('table.field.loc.channel'), | 
|             minWidth: 100, | 
|             flex: 1, | 
|             editable: false, | 
|         }, | 
|         { | 
|             field: 'row', | 
|             headerName: translate('table.field.loc.row'), | 
|             minWidth: 100, | 
|             flex: 1, | 
|             editable: false, | 
|         }, | 
|         { | 
|             field: 'col', | 
|             headerName: translate('table.field.loc.col'), | 
|             minWidth: 100, | 
|             flex: 1, | 
|             editable: false, | 
|         }, | 
|         { | 
|             field: 'lev', | 
|             headerName: translate('table.field.loc.lev'), | 
|             minWidth: 100, | 
|             flex: 1, | 
|             editable: false, | 
|         }, | 
|         // { | 
|         //     field: 'action', | 
|         //     headerName: '操作', | 
|         //     width: 140, | 
|         //     lockPosition: 'left', | 
|         //     renderCell: (params) => ( | 
|         //         <Tooltip title="Delete"> | 
|         //             <IconButton onClick={() => handleDelete(params.row)}> | 
|         //                 <Delete /> | 
|         //             </IconButton> | 
|         //             <IconButton onClick={() => handleDelete(params.row)}> | 
|         //                 <Save /> | 
|         //             </IconButton> | 
|         //         </Tooltip> | 
|         //     ), | 
|         // } | 
|     ]) | 
|   | 
|   | 
|     const handleSelectionChange = (ids) => { | 
|         setSelectedRows(ids) | 
|     }; | 
|   | 
|     return ( | 
|         <div style={{ width: '100%' }}> | 
|             <DataGrid | 
|                 sx={{ height: 600 }} | 
|                 size="small" | 
|                 rows={tableData} | 
|                 columns={columns} | 
|                 checkboxSelection | 
|                 onRowSelectionModelChange={handleSelectionChange} | 
|                 selectionModel={selectedRows} | 
|                 disableColumnMenu={true} | 
|                 disableColumnSorting | 
|                 disableMultipleColumnsSorting | 
|                 rowCount={rowCount} | 
|                 paginationMode="server" | 
|                 paginationModel={page} | 
|                 onPaginationModelChange={setPage} | 
|                 loading={isLoading} | 
|                 slotProps={{ | 
|                     loadingOverlay: { | 
|                         variant: 'linear-progress', | 
|                         noRowsVariant: 'linear-progress', | 
|                     }, | 
|                 }} | 
|             /> | 
|         </div> | 
|     ); | 
| }; |