|  |  | 
 |  |  |     DeleteButton, | 
 |  |  | } from 'react-admin'; | 
 |  |  | import { Stack, Grid, Box, Typography, Dialog, DialogTitle, DialogContent, TextField, Button, DialogActions } from '@mui/material'; | 
 |  |  | import { EDIT_MODE, DEFAULT_START_PAGE, DEFAULT_PAGE_SIZE, REFERENCE_INPUT_PAGESIZE } from '@/config/setting'; | 
 |  |  | import DialogCloseButton from "../../components/DialogCloseButton.jsx"; | 
 |  |  | import { EDIT_MODE, REFERENCE_INPUT_PAGESIZE } from '@/config/setting'; | 
 |  |  | import StatusSelectInput from "../../components/StatusSelectInput"; | 
 |  |  | import CustomerTopToolBar from "../../components/EditTopToolBar"; | 
 |  |  | import TreeSelectInput from "@/page/components/TreeSelectInput"; | 
 |  |  | 
 |  |  |  | 
 |  |  |  | 
 |  |  | const CreateBySelectMats = (props) => { | 
 |  |  |     const { open, setOpen, data, setData } = props; | 
 |  |  |  | 
 |  |  |     const [page, setPage] = useState(0); | 
 |  |  |     const { open, setOpen, data, setData, queryForm } = props; | 
 |  |  |     const [page, setPage] = useState({ page: DEFAULT_START_PAGE, pageSize: DEFAULT_PAGE_SIZE }); | 
 |  |  |     const [rowCount, setRowCount] = useState(0); | 
 |  |  |     const [isLoading, setIsLoading] = useState(false); | 
 |  |  |     const [formData, setFormData] = useState({}); | 
 |  |  |     const [tableData, setTableData] = useState([]); | 
 |  |  |     const [dyFields, setDyFields] = useState([]); | 
 |  |  |     const [pageSize, setPageSize] = useState(25); | 
 |  |  |     const [selectedRows, setSelectedRows] = useState([]); | 
 |  |  |  | 
 |  |  |     const translate = useTranslate(); | 
 |  |  |     const notify = useNotify(); | 
 |  |  |     const refresh = useRefresh(); | 
 |  |  |  | 
 |  |  |  | 
 |  |  |  | 
 |  |  |     const handleClose = (event, reason) => { | 
 |  |  |         if (reason !== "backdropClick") { | 
 |  |  |             setOpen(false); | 
 |  |  |         } | 
 |  |  |     }; | 
 |  |  |  | 
 |  |  |  | 
 |  |  |     const handleChange = (e) => { | 
 |  |  |         const { name, value } = e.target; | 
 |  |  | 
 |  |  |                 return acc; | 
 |  |  |             }, {}); | 
 |  |  |             return { | 
 |  |  |                 id: el.id, | 
 |  |  |                 matnrId: el.matnrId, | 
 |  |  |                 maktx: el.maktx, | 
 |  |  |                 matnrCode: el.matnrCode, | 
 |  |  | 
 |  |  |                 batch: el.batch, | 
 |  |  |                 spec: el.spec, | 
 |  |  |                 model: el.model, | 
 |  |  |                 fieldsIndex: el.fieldsIndex, | 
 |  |  |                 stockUnit: el.unit || '', | 
 |  |  |                 ...dynamicFields | 
 |  |  |             } | 
 |  |  |         })); | 
 |  |  |         setData([...data, ...value]); | 
 |  |  |  | 
 |  |  |         console.log(data); | 
 |  |  |         setOpen(false); | 
 |  |  |         reset(); | 
 |  |  |     }; | 
 |  |  |  | 
 |  |  |     const getData = async () => { | 
 |  |  |         const res = await request.post(`/transfer/locs/items`, { | 
 |  |  |         let params = { | 
 |  |  |             ...formData, | 
 |  |  |             current: page, | 
 |  |  |             pageSize: pageSize, | 
 |  |  |             orgAreaId: queryForm?.orgAreaId, | 
 |  |  |             current: page?.page, | 
 |  |  |             pageSize: page?.pageSize, | 
 |  |  |             orderBy: "create_time desc" | 
 |  |  |         }); | 
 |  |  |         }; | 
 |  |  |         setIsLoading(true) | 
 |  |  |         const res = await request.post(`/transfer/locs/items`, params); | 
 |  |  |         if (res?.data?.code === 200) { | 
 |  |  |             const { data } = res.data; | 
 |  |  |             setTableData(data?.records); | 
 |  |  | 
 |  |  |         } else { | 
 |  |  |             notify(res.data.msg); | 
 |  |  |         } | 
 |  |  |         setIsLoading(false) | 
 |  |  |     }; | 
 |  |  |  | 
 |  |  |     useEffect(() => { | 
 |  |  | 
 |  |  |             aria-labelledby="form-dialog-title" | 
 |  |  |             fullWidth | 
 |  |  |             disableRestoreFocus | 
 |  |  |             maxWidth="lg" | 
 |  |  |             maxWidth="xl" | 
 |  |  |         > | 
 |  |  |             <DialogTitle id="form-dialog-title" sx={{ | 
 |  |  |                 position: 'sticky', | 
 |  |  | 
 |  |  |                     </Grid> | 
 |  |  |                 </Box> | 
 |  |  |  | 
 |  |  |                 <Box sx={{ mt: 2, height: 400, width: '100%' }}> | 
 |  |  |                 <Box sx={{ mt: 2, height: 600, width: '100%' }}> | 
 |  |  |                     <SelectMatsTableView | 
 |  |  |                         tableData={tableData} | 
 |  |  |                         setTableData={setTableData} | 
 |  |  | 
 |  |  |                         rowCount={rowCount} | 
 |  |  |                         pageSize={pageSize} | 
 |  |  |                         setPage={setPage} | 
 |  |  |                         isLoading={isLoading} | 
 |  |  |                         setPageSize={setPageSize} | 
 |  |  |                         dyFields={dyFields} | 
 |  |  |                         setDyFields={setDyFields} | 
 |  |  | 
 |  |  | export default CreateBySelectMats; | 
 |  |  |  | 
 |  |  |  | 
 |  |  | const SelectMatsTableView = ({ tableData, page, pageSize, setPage, setPageSize, rowCount, setTableData, selectedRows, setSelectedRows, dyFields, setDyFields }) => { | 
 |  |  | const SelectMatsTableView = ({ tableData, page, isLoading, pageSize, setPage, setPageSize, rowCount, setTableData, selectedRows, setSelectedRows, dyFields, setDyFields }) => { | 
 |  |  |     const translate = useTranslate(); | 
 |  |  |     const notify = useNotify(); | 
 |  |  |     const [extendColumns, setExtendColumns] = useState([]); | 
 |  |  | 
 |  |  |     const [columns, setColumns] = useState([ | 
 |  |  |         { field: 'maktx', headerName: translate('table.field.matnr.name'), width: 300 }, | 
 |  |  |         { field: 'matnrCode', headerName: translate('table.field.matnr.code'), width: 200 }, | 
 |  |  |         // { field: 'groupId$', headerName: translate('table.field.matnr.groupId'), width: 100 }, | 
 |  |  |         { field: 'locCode', headerName: translate('table.field.locItem.locCode'), width: 100 }, | 
 |  |  |         { field: 'spec', headerName: translate('table.field.matnr.spec'), width: 100 }, | 
 |  |  |         { field: 'batch', headerName: translate('table.field.locItem.batch'), width: 100 }, | 
 |  |  |         { field: 'model', headerName: translate('table.field.matnr.model'), width: 100 }, | 
 |  |  | 
 |  |  |     const handleSelectionChange = (ids) => { | 
 |  |  |         setSelectedRows(ids) | 
 |  |  |     }; | 
 |  |  |  | 
 |  |  |     useEffect(() => { | 
 |  |  |         console.log('------->'); | 
 |  |  |         console.log(page); | 
 |  |  |     }, [page]) | 
 |  |  |  | 
 |  |  |     useEffect(() => { | 
 |  |  |         if (extendColumns == undefined || extendColumns.length < 1) { | 
 |  |  | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     return ( | 
 |  |  |         <div style={{ height: 400, width: '100%' }}> | 
 |  |  |         <div style={{ height: 590, width: '100%' }}> | 
 |  |  |             <DataGrid | 
 |  |  |                 size="small" | 
 |  |  |                 rows={tableData} | 
 |  |  |                 page={page} | 
 |  |  |                 pageSize={pageSize} | 
 |  |  |                 columns={columns} | 
 |  |  |                 pagination | 
 |  |  |                 checkboxSelection | 
 |  |  |                 rowCount={rowCount} | 
 |  |  |                 onRowSelectionModelChange={handleSelectionChange} | 
 |  |  |                 onPageChange={(newPage) => setPage(newPage)} | 
 |  |  |                 onPageSizeChange={(newPageSize) => setPageSize(newPageSize)} | 
 |  |  |                 selectionModel={selectedRows} | 
 |  |  |                 columns={columns} | 
 |  |  |                 paginationMode="server" | 
 |  |  |                 paginationModel={page} | 
 |  |  |                 checkboxSelection | 
 |  |  |                 onPaginationModelChange={setPage} | 
 |  |  |                 onRowSelectionModelChange={handleSelectionChange} | 
 |  |  |                 selectionModel={selectedRows} | 
 |  |  |                 disableColumnMenu={true} | 
 |  |  |                 initialState={{ | 
 |  |  |                     pagination: { | 
 |  |  |                         paginationModel: { | 
 |  |  |                             pageSize: 25, | 
 |  |  |                         }, | 
 |  |  |                     }, | 
 |  |  |                 }} | 
 |  |  |                 pageSizeOptions={[15, 25, 50, 100]} | 
 |  |  |                 disableColumnSorting | 
 |  |  |                 disableMultipleColumnsSorting | 
 |  |  |                 loading={isLoading} | 
 |  |  |                 slotProps={{ | 
 |  |  |                     loadingOverlay: { | 
 |  |  |                         variant: 'linear-progress', | 
 |  |  |                         noRowsVariant: 'linear-progress', | 
 |  |  |                     }, | 
 |  |  |                 }} | 
 |  |  |             /> | 
 |  |  |         </div> | 
 |  |  |     ); |