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