import React, { useState, useRef, useEffect, useMemo, useCallback } from "react";
|
import { useNavigate, useLocation } from 'react-router-dom';
|
import {
|
List,
|
DataTable,
|
SearchInput,
|
TopToolbar,
|
ColumnsButton,
|
EditButton,
|
FilterButton,
|
CreateButton,
|
ExportButton,
|
BulkDeleteButton,
|
WrapperField,
|
useRecordContext,
|
useTranslate,
|
useNotify,
|
useListContext,
|
FunctionField,
|
TextField,
|
NumberField,
|
DateField,
|
BooleanField,
|
ReferenceField,
|
TextInput,
|
DateTimeInput,
|
DateInput,
|
SelectInput,
|
NumberInput,
|
ReferenceInput,
|
ReferenceArrayInput,
|
AutocompleteInput,
|
DeleteButton,
|
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 PageDrawer from "../../components/PageDrawer";
|
|
import { PAGE_DRAWER_WIDTH, OPERATE_MODE, DEFAULT_PAGE_SIZE } from '@/config/setting';
|
import { fetchInOrderItemColumns } from '../config/orderItemColumns';
|
|
const filters = [
|
<SearchInput source="condition" alwaysOn />,
|
<NumberInput source="orderId" label="table.field.asnOrderItem.orderId" />,
|
<TextInput source="orderCode" label="table.field.asnOrderItem.orderCode" />,
|
// <TextInput source="poDetlId" label="table.field.asnOrderItem.poDetlId" />,
|
// <TextInput source="poDetlCode" label="table.field.asnOrderItem.poDetlCode" />,
|
<TextInput source="matnrId" label="table.field.asnOrderItem.matnrId" />,
|
<TextInput source="maktx" label="table.field.asnOrderItem.maktx" />,
|
<TextInput source="platOrderCode" label="table.field.asnOrderItem.platOrderCode" />,
|
<TextInput source="platWorkCode" label="table.field.asnOrderItem.platWorkCode" />,
|
<TextInput source="projectCode" label="table.field.asnOrderItem.projectCode" />,
|
<NumberInput source="anfme" label="table.field.asnOrderItem.anfme" />,
|
<TextInput source="stockUnit" label="table.field.asnOrderItem.stockUnit" />,
|
<NumberInput source="purQty" label="table.field.asnOrderItem.purQty" />,
|
<TextInput source="purUnit" label="table.field.asnOrderItem.purUnit" />,
|
<NumberInput source="qty" label="table.field.asnOrderItem.qty" />,
|
<TextInput source="splrCode" label="table.field.asnOrderItem.splrCode" />,
|
<TextInput source="splrName" label="table.field.asnOrderItem.splrName" />,
|
<TextInput source="qrcode" label="table.field.asnOrderItem.qrcode" />,
|
<TextInput source="trackCode" label="table.field.asnOrderItem.barcode" />,
|
<TextInput source="packName" label="table.field.asnOrderItem.packName" />,
|
<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 AsnOrderItemList = () => {
|
const translate = useTranslate();
|
const [drawerVal, setDrawerVal] = useState(false);
|
|
return (
|
<>
|
<Box display="flex">
|
<List
|
resource="asnOrderItem/in"
|
sx={{
|
flexGrow: 1,
|
transition: (theme) =>
|
theme.transitions.create(['all'], {
|
duration: theme.transitions.duration.enteringScreen,
|
}),
|
marginRight: drawerVal ? `${PAGE_DRAWER_WIDTH}px` : 0,
|
}}
|
title={"menu.asnOrderItem"}
|
empty={false}
|
filters={filters}
|
sort={{ field: "create_time", order: "desc" }}
|
actions={(
|
<TopToolbar>
|
<FilterButton />
|
<ColumnsButton storeKey='asnOrderItem' />
|
<ExportButton />
|
</TopToolbar>
|
)}
|
perPage={DEFAULT_PAGE_SIZE}
|
pagination={<Pagination rowsPerPageOptions={[5, 10, 20, 25, 50, 100]} />}
|
>
|
<DynamicFields drawerVal={drawerVal} />
|
</List>
|
<PageDrawer
|
title='AsnOrderItem Detail'
|
drawerVal={drawerVal}
|
setDrawerVal={setDrawerVal}
|
>
|
</PageDrawer>
|
</Box>
|
</>
|
)
|
}
|
|
export default AsnOrderItemList;
|
|
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 getDynamicFields = async () => {
|
const result = await fetchInOrderItemColumns();
|
if (result.success) {
|
const hiddenSources = [
|
'splrName',
|
'businessTime', 'extendFields.[businessTime]',
|
'wkType', 'extendFields.[wkType]',
|
'type', 'extendFields.[type]'
|
];
|
const columns = result.columns.filter(col => !hiddenSources.includes(col.props.source));
|
setColumns(columns);
|
} else {
|
notify(result.msg);
|
}
|
}
|
|
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',
|
maxHeight: boxMaxHeight,
|
maxWidth: boxMaxWidth,
|
overflowX: 'auto',
|
overflowY: 'auto',
|
'& .MuiTableCell-root': {
|
whiteSpace: 'nowrap',
|
}
|
}}>
|
{isLoading && (
|
<LinearProgress
|
sx={{
|
height: "2px",
|
position: 'absolute',
|
top: 0,
|
left: 0,
|
right: 0,
|
}}
|
/>
|
)}
|
{columns.length > 0 &&
|
<DataTable
|
storeKey='asnOrderItem'
|
bulkActionButtons={false}
|
rowClick={false}
|
hiddenColumns={omittedFields}
|
>
|
{columns
|
.map((column) => (
|
<DataTable.Col
|
key={column.key || column.props.source}
|
source={column.props.source}
|
label={column.props.label}
|
>
|
{column}
|
</DataTable.Col>
|
))
|
}
|
</DataTable>}
|
</Box>
|
)
|
}
|
