| | |
| | | import { useNavigate, useLocation } from 'react-router-dom'; |
| | | import { |
| | | List, |
| | | DatagridConfigurable, |
| | | DataTable, |
| | | SearchInput, |
| | | TopToolbar, |
| | | SelectColumnsButton, |
| | | ColumnsButton, |
| | | EditButton, |
| | | FilterButton, |
| | | CreateButton, |
| | |
| | | Button, |
| | | useRefresh, |
| | | Pagination, |
| | | useSidebarState, |
| | | } from 'react-admin'; |
| | | import { Box, Typography, Card, Stack, Dialog, DialogActions, DialogTitle, LinearProgress } from '@mui/material'; |
| | | import { styled } from '@mui/material/styles'; |
| | |
| | | |
| | | import { PAGE_DRAWER_WIDTH, OPERATE_MODE, DEFAULT_PAGE_SIZE } from '@/config/setting'; |
| | | import { fetchInOrderItemColumns } from '../config/orderItemColumns'; |
| | | |
| | | const StyledDatagrid = styled(DatagridConfigurable)(({ theme }) => ({ |
| | | '& .css-1vooibu-MuiSvgIcon-root': { |
| | | height: '.9em', |
| | | |
| | | }, |
| | | '& .RaDatagrid-row': { |
| | | cursor: 'auto' |
| | | }, |
| | | '& .column-name': { |
| | | }, |
| | | '& .opt': { |
| | | width: 200 |
| | | }, |
| | | })); |
| | | |
| | | const filters = [ |
| | | <SearchInput source="condition" alwaysOn />, |
| | |
| | | actions={( |
| | | <TopToolbar> |
| | | <FilterButton /> |
| | | <SelectColumnsButton preferenceKey='asnOrderItem' /> |
| | | <ColumnsButton storeKey='asnOrderItem' /> |
| | | <ExportButton /> |
| | | </TopToolbar> |
| | | )} |
| | | perPage={DEFAULT_PAGE_SIZE} |
| | | pagination={<Pagination rowsPerPageOptions={[5, 10, 20, 25, 50, 100]} />} |
| | | > |
| | | <DynamicFields /> |
| | | <DynamicFields drawerVal={drawerVal} /> |
| | | </List> |
| | | <PageDrawer |
| | | title='AsnOrderItem Detail' |
| | |
| | | |
| | | export default AsnOrderItemList; |
| | | |
| | | const DynamicFields = (props) => { |
| | | const DynamicFields = ({ drawerVal }) => { |
| | | const translate = useTranslate(); |
| | | const notify = useNotify(); |
| | | const [columns, setColumns] = useState([]); |
| | | const { isLoading } = useListContext(); |
| | | const refresh = useRefresh(); |
| | | const [sidebarIsOpen] = useSidebarState(); |
| | | |
| | | const omittedFields = [ |
| | | 'id', 'orderId', 'orderCode', 'poCode', 'poId', 'wkType', 'type', 'checkType', |
| | | 'spec', 'model', 'purQty', 'purUnit', 'qrcode', 'trackCode', 'splrCode', |
| | | 'splrName', 'projectCode', 'supplierId', 'supplierName', 'priceUnitId', |
| | | 'shipperId', 'businessTime', 'extendFields.[businessTime]', |
| | | 'extendFields.[wkType]', 'extendFields.[type]' |
| | | ]; |
| | | |
| | | useEffect(() => { |
| | | getDynamicFields(); |
| | | }, []); |
| | |
| | | } |
| | | } |
| | | |
| | | const sidebarWidth = sidebarIsOpen ? 200 : 50; |
| | | const contentPadding = 10; // 预留边距 |
| | | const rightDrawerWidth = drawerVal ? PAGE_DRAWER_WIDTH : 0; |
| | | const boxMaxWidth = `calc(100vw - ${sidebarWidth + rightDrawerWidth + contentPadding}px)`; |
| | | // 计算 maxHeight: 100vh - (Header+Tabs 86px) - (Toolbar ~50px) - (Filters ~60px) - (Pagination ~50px) - (Padding ~40px) ≈ 290px |
| | | const boxMaxHeight = `calc(100vh - 210px)`; |
| | | |
| | | return ( |
| | | <Box sx={{ position: 'relative', minHeight: "60vh", }}> |
| | | <Box sx={{ |
| | | position: 'relative', |
| | | maxHeight: boxMaxHeight, |
| | | maxWidth: boxMaxWidth, |
| | | overflowX: 'auto', |
| | | overflowY: 'auto', |
| | | '& .MuiTableCell-root': { |
| | | whiteSpace: 'nowrap', |
| | | } |
| | | }}> |
| | | {isLoading && ( |
| | | <LinearProgress |
| | | sx={{ |
| | |
| | | /> |
| | | )} |
| | | {columns.length > 0 && |
| | | <StyledDatagrid |
| | | preferenceKey='asnOrderItem' |
| | | <DataTable |
| | | storeKey='asnOrderItem' |
| | | bulkActionButtons={false} |
| | | rowClick={(id, resource, record) => false} |
| | | omit={['id', 'orderId', 'orderCode', 'poCode', 'poId', 'wkType', 'type', 'checkType', 'spec', 'model', 'purQty', 'purUnit', 'qrcode', 'trackCode', 'splrCode', 'splrName', 'projectCode', 'supplierId', 'supplierName', 'priceUnitId', 'shipperId', 'businessTime', 'extendFields.[businessTime]', 'extendFields.[wkType]', 'extendFields.[type]']} |
| | | // omit={['id', 'orderId', 'poDetlId', 'matnrId', 'spec', 'model', 'purQty', 'purUnit', 'qrcode', 'trackCode', 'splrCode', 'platWorkCode', 'projectCode', 'createBy', 'createTime']} |
| | | rowClick={false} |
| | | hiddenColumns={omittedFields} |
| | | > |
| | | {columns.map((column) => column)} |
| | | </StyledDatagrid>} |
| | | {columns |
| | | .map((column) => ( |
| | | <DataTable.Col |
| | | key={column.key || column.props.source} |
| | | source={column.props.source} |
| | | label={column.props.label} |
| | | > |
| | | {column} |
| | | </DataTable.Col> |
| | | )) |
| | | } |
| | | </DataTable>} |
| | | </Box> |
| | | ) |
| | | } |