| import React, { useState, useRef, useEffect, useMemo, useCallback } from "react"; | 
| import { useNavigate } from 'react-router-dom'; | 
| import { | 
|     List, | 
|     DatagridConfigurable, | 
|     SearchInput, | 
|     TopToolbar, | 
|     SelectColumnsButton, | 
|     EditButton, | 
|     FilterButton, | 
|     CreateButton, | 
|     ExportButton, | 
|     BulkDeleteButton, | 
|     WrapperField, | 
|     useRecordContext, | 
|     useTranslate, | 
|     useNotify, | 
|     useListContext, | 
|     FunctionField, | 
|     TextField, | 
|     NumberField, | 
|     DateField, | 
|     BooleanField, | 
|     ReferenceField, | 
|     TextInput, | 
|     DateTimeInput, | 
|     DateInput, | 
|     SelectInput, | 
|     NumberInput, | 
|     ReferenceInput, | 
|     ReferenceArrayInput, | 
|     useRefresh, | 
|     AutocompleteInput, | 
|     DeleteButton, | 
|     useGetRecordId, | 
| } from 'react-admin'; | 
| import { Box, Typography, Card, Stack, LinearProgress } from '@mui/material'; | 
| import { styled } from '@mui/material/styles'; | 
| import PageDrawer from "../components/PageDrawer"; | 
| import { PAGE_DRAWER_WIDTH, OPERATE_MODE, DEFAULT_PAGE_SIZE } from '@/config/setting'; | 
| import request from '@/utils/request'; | 
|   | 
| const StyledDatagrid = styled(DatagridConfigurable)(({ theme }) => ({ | 
|     '& .css-1vooibu-MuiSvgIcon-root': { | 
|         height: '.9em' | 
|     }, | 
|     '& .RaDatagrid-row': { | 
|         cursor: 'auto' | 
|     }, | 
|     '& .column-name': { | 
|     }, | 
|     '& .opt': { | 
|         width: 100 | 
|     }, | 
| })); | 
|   | 
| const filters = [ | 
|     <SearchInput source="condition" alwaysOn />, | 
|     <DateInput label='common.time.after' source="timeStart" />, | 
|     <DateInput label='common.time.before' source="timeEnd" />, | 
|     <NumberInput source="locId" label="table.field.locItem.locId" />, | 
|     <TextInput source="locCode" label="table.field.locItem.locCode" />, | 
|     <NumberInput source="orderId" label="table.field.locItem.orderId" />, | 
|     <TextInput source="type" label="table.field.locItem.type" />, | 
|     <NumberInput source="orderItemId" label="table.field.locItem.orderItemId" />, | 
|     <NumberInput source="wkType" label="table.field.locItem.wkType" />, | 
|     <NumberInput source="matnrId" label="table.field.locItem.matnrId" />, | 
|     <TextInput source="maktx" label="table.field.locItem.maktx" />, | 
|     <TextInput source="matnrCode" label="table.field.locItem.matnrCode" />, | 
|     <TextInput source="trackCode" label="table.field.locItem.trackCode" />, | 
|     <TextInput source="unit" label="table.field.locItem.unit" />, | 
|     <NumberInput source="anfme" label="table.field.locItem.anfme" />, | 
|     <NumberInput source="qty" label="table.field.locItem.qty" />, | 
|     <NumberInput source="workQty" label="table.field.locItem.workQty" />, | 
|     <TextInput source="batch" label="table.field.locItem.batch" />, | 
|     <TextInput source="splrBatch" label="table.field.locItem.splrBatch" />, | 
|     <TextInput source="spec" label="table.field.locItem.spec" />, | 
|     <TextInput source="model" label="table.field.locItem.model" />, | 
|     <TextInput source="fieldsIndex" label="table.field.locItem.fieldsIndex" />, | 
|     <TextInput label="common.field.memo" source="memo" />, | 
|     <SelectInput | 
|         label="common.field.status" | 
|         source="status" | 
|         choices={[ | 
|             { id: '1', name: 'common.enums.statusTrue' }, | 
|             { id: '0', name: 'common.enums.statusFalse' }, | 
|         ]} | 
|         resettable | 
|     />, | 
| ] | 
|   | 
| const LocItemList = () => { | 
|     const translate = useTranslate(); | 
|     const [createDialog, setCreateDialog] = useState(false); | 
|     const [drawerVal, setDrawerVal] = useState(false); | 
|     const locId = useGetRecordId(); | 
|   | 
|     return ( | 
|         <Box display="flex"> | 
|             <List | 
|                 sx={{ | 
|                     flexGrow: 1, | 
|                     transition: (theme) => | 
|                         theme.transitions.create(['all'], { | 
|                             duration: theme.transitions.duration.enteringScreen, | 
|                         }), | 
|                     marginRight: !!drawerVal ? `${PAGE_DRAWER_WIDTH}px` : 0, | 
|                 }} | 
|                 title={"menu.locItem"} | 
|                 empty={false} | 
|                 filter={{locId: locId}} | 
|                 filters={filters} | 
|                 sort={{ field: "create_time", order: "desc" }} | 
|                 actions={( | 
|                     <TopToolbar> | 
|                         <FilterButton /> | 
|                         <SelectColumnsButton preferenceKey='locItem' /> | 
|                     </TopToolbar> | 
|                 )} | 
|                 perPage={DEFAULT_PAGE_SIZE} | 
|             > | 
|                 <DynamicFields /> | 
|             </List> | 
|             <PageDrawer | 
|                 title='LocItem Detail' | 
|                 drawerVal={drawerVal} | 
|                 setDrawerVal={setDrawerVal} | 
|             > | 
|             </PageDrawer> | 
|         </Box> | 
|     ) | 
| } | 
|   | 
| export default LocItemList; | 
|   | 
|   | 
| const DynamicFields = (props) => { | 
|     const translate = useTranslate(); | 
|     const notify = useNotify(); | 
|     const [columns, setColumns] = useState([]); | 
|     const { isLoading } = useListContext(); | 
|     const refresh = useRefresh(); | 
|     useEffect(() => { | 
|         getDynamicFields(); | 
|     }, []); | 
|   | 
|     const getDynamicFields = async () => { | 
|         const { data: { code, data, msg }, } = await request.get("/fields/enable/list"); | 
|         if (code == 200) { | 
|             const arr = [ | 
|                 <NumberField source="id" />, | 
|                 <NumberField source="locId" label="table.field.locItem.locId" />, | 
|                 <TextField source="wareArea" label="table.field.locItem.wareArea" />, | 
|                 <TextField source="locCode" label="table.field.locItem.locCode" />, | 
|                 <NumberField source="orderId" label="table.field.locItem.orderId" />, | 
|                 <TextField source="type$" label="table.field.locItem.type" />, | 
|                 <NumberField source="orderItemId" label="table.field.locItem.orderItemId" />, | 
|                 <NumberField source="wkType$" label="table.field.locItem.wkType" />, | 
|                 <NumberField source="matnrId" label="table.field.locItem.matnrId" />, | 
|                 <TextField source="matnrCode" label="table.field.locItem.matnrCode" />, | 
|                 <TextField source="maktx" label="table.field.locItem.maktx" />, | 
|                 <TextField source="spec" label="table.field.locItem.spec" />, | 
|                 <TextField source="model" label="table.field.locItem.model" />, | 
|                 <TextField source="batch" label="table.field.locItem.batch" />, | 
|                 <TextField source="trackCode" label="table.field.locItem.trackCode" />, | 
|                 <TextField source="unit" label="table.field.locItem.unit" />, | 
|                 <NumberField source="anfme" label="table.field.locItem.anfme" />, | 
|                 <NumberField source="workQty" label="table.field.locItem.workQty" />, | 
|                 <NumberField source="qty" label="table.field.locItem.qty" />, | 
|                 <TextField source="splrBatch" label="table.field.locItem.splrBatch" />, | 
|                 <TextField source="fieldsIndex" label="table.field.locItem.fieldsIndex" />, | 
|             ] | 
|             const fields = data.map(el => <TextField key={el.fields} source={`extendFields.[${el.fields}]`} label={el.fieldsAlise} />) | 
|             const lastArr = [ | 
|                 <TextField source="updateBy$" label="common.field.updateBy" />, | 
|                 <DateField source="updateTime" label="common.field.updateTime" showTime />, | 
|                 <TextField source="createBy$" label="common.field.createBy" />, | 
|                 <DateField source="createTime" label="common.field.createTime" showTime />, | 
|                 <BooleanField source="statusBool" label="common.field.status" sortable={false} />, | 
|                 <TextField source="memo" label="common.field.memo" sortable={false} />, | 
|             ] | 
|             setColumns([...arr, ...fields, ...lastArr]); | 
|         } else { | 
|             notify(msg); | 
|         } | 
|     } | 
|   | 
|     return ( | 
|         <Box sx={{ position: 'relative', minHeight: "60vh", }}> | 
|             {isLoading && ( | 
|                 <LinearProgress | 
|                     sx={{ | 
|                         height: "2px", | 
|                         position: 'absolute', | 
|                         top: 0, | 
|                         left: 0, | 
|                         right: 0, | 
|                     }} | 
|                 /> | 
|             )} | 
|             {columns.length > 0 && | 
|                 <StyledDatagrid | 
|                     preferenceKey='locItem' | 
|                     bulkActionButtons={false} | 
|                     rowClick={false} | 
|                     expand={false} | 
|                     expandSingle={true} | 
|                     omit={['id', 'createTime','spec', 'model', 'locId', 'orderId', 'trackCode', 'orderItemId', 'matnrId', 'splrBatch','createBy', 'memo', 'fieldsIndex']} | 
|                 > | 
|                     {columns.map((column) => column)} | 
|                 </StyledDatagrid>} | 
|         </Box> | 
|     ) | 
| } |