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,
|
AutocompleteInput,
|
DeleteButton,
|
useRefresh,
|
Button
|
|
} from 'react-admin';
|
import { Box, Typography, Card, Stack, LinearProgress, Tooltip } from '@mui/material';
|
import { styled } from '@mui/material/styles';
|
import MatnrCreate from "./MatnrCreate";
|
import MatnrPanel from "./MatnrPanel";
|
import EmptyData from "@/page/components/EmptyData";
|
import MyCreateButton from "@/page/components/MyCreateButton";
|
import MyExportButton from '@/page/components/MyExportButton';
|
import PageDrawer from "@/page/components/PageDrawer";
|
import TooltipField from "@/page/components/TooltipField";
|
import { PAGE_DRAWER_WIDTH, OPERATE_MODE, DEFAULT_PAGE_SIZE } from '@/config/setting';
|
import * as Common from '@/utils/common';
|
import ImportButton from "../../components/ImportButton";
|
import MatListAside from './MatnrListAside';
|
import { display, height, width } from "@mui/system";
|
import DashboardIcon from '@mui/icons-material/Dashboard';
|
import EditIcon from '@mui/icons-material/Edit';
|
import PrintIcon from '@mui/icons-material/Print';
|
import request from '@/utils/request';
|
import BatchModal from './BatchModal';
|
import BatchGropuModal from './BatchGropuModal';
|
import PrintModal from './PrintModal';
|
import LinkIcon from '@mui/icons-material/Link';
|
import BindModal from './BindModal';
|
|
const StyledDatagrid = styled(DatagridConfigurable)(({ theme }) => ({
|
'& .css-1vooibu-MuiSvgIcon-root': {
|
height: '.9em'
|
},
|
|
'& .RaDatagrid-row': {
|
cursor: 'auto'
|
},
|
'& .RaList-content': {
|
width: '200px'
|
},
|
'& .RaList-main': {
|
minHeight: '90vh'
|
},
|
'& .column-name': {
|
},
|
'& .opt': {
|
width: 200
|
},
|
'& .name': {
|
width: '100px',
|
|
},
|
'& .name .MuiTypography-root': {
|
whiteSpace: 'nowrap',
|
overflow: 'hidden',
|
textOverflow: 'ellipsis',
|
display: 'block',
|
width: '200px',
|
},
|
'& .RaDatagrid-table': {
|
width: '100%',
|
position: 'relative',
|
}
|
}));
|
|
const filters = [
|
<SearchInput source="condition" alwaysOn />,
|
<TextInput source="name" label="table.field.matnr.name" alwaysOn />,
|
<TextInput source="code" label="table.field.matnr.code" alwaysOn />,
|
<ReferenceInput source="shipperId$" label="table.field.matnr.shipperId" reference="shipper">
|
<AutocompleteInput label="table.field.matnr.shipperId" optionText="name" filterToQuery={(val) => ({ name: val })} />
|
</ReferenceInput>,
|
<ReferenceInput source="groupId$" label="table.field.matnr.groupId" reference="matnrGroup" >
|
<AutocompleteInput label="table.field.matnr.groupId" optionText="code" filterToQuery={(val) => ({ code: val })} />
|
</ReferenceInput>,
|
<ReferenceInput source="rglarId" label="table.field.matnr.rglarId" reference="rglarId">
|
<AutocompleteInput label="table.field.matnr.rglarId" optionText="code" filterToQuery={(val) => ({ code: val })} />
|
</ReferenceInput>,
|
<TextInput source="platCode" label="table.field.matnr.platCode" />,
|
<TextInput source="spec" label="table.field.matnr.spec" />,
|
<TextInput source="model" label="table.field.matnr.model" />,
|
<NumberInput source="weight" label="table.field.matnr.weight" />,
|
<TextInput source="color" label="table.field.matnr.color" />,
|
<TextInput source="size" label="table.field.matnr.size" />,
|
<TextInput source="describle" label="table.field.matnr.describle" />,
|
<NumberInput source="nromNum" label="table.field.matnr.nromNum" />,
|
<TextInput source="unit" label="table.field.matnr.unit" />,
|
<TextInput source="purchaseUnit" label="table.field.matnr.purUnit" />,
|
<TextInput source="stockUnit" label="table.field.matnr.stockUnit" />,
|
<SelectInput source="stockLeval" label="table.field.matnr.stockLevel"
|
choices={[
|
{ id: 0, name: ' A' },
|
{ id: 1, name: ' B' },
|
{ id: 2, name: 'C' },
|
]}
|
/>,
|
<SelectInput source="isLabelMange" label="table.field.matnr.isLabelMange"
|
choices={[
|
{ id: 0, name: ' 否' },
|
{ id: 1, name: ' 是' },
|
]}
|
/>,
|
<NumberInput source="safeQty" label="table.field.matnr.safeQty" />,
|
<NumberInput source="minQty" label="table.field.matnr.minQty" />,
|
<NumberInput source="maxQty" label="table.field.matnr.maxQty" />,
|
<NumberInput source="stagn" label="table.field.matnr.stagn" />,
|
<NumberInput source="valid" label="table.field.matnr.valid" />,
|
<NumberInput source="validWarn" label="table.field.matnr.validWarn" />,
|
<NumberInput source="flagCheck" label="table.field.matnr.flagCheck" />,
|
|
<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 MatnrListContent = (props) => {
|
const translate = useTranslate();
|
const notify = useNotify();
|
const { isLoading } = useListContext();
|
|
const [columns, setColumns] = useState([]);
|
const refresh = useRefresh();
|
|
useEffect(() => {
|
getDynamicFields();
|
}, []);
|
|
const getDynamicFields = async () => {
|
try {
|
const {
|
data: { code, data, msg },
|
} = await request.get("/fields/enable/list");
|
if (code === 200) {
|
const arr = [
|
<NumberField key="id" source="id" />,
|
<TooltipField key="name" source="name" label="table.field.matnr.name" cellClassName="name" />,
|
<TextField key="code" source="code" label="table.field.matnr.code" />,
|
<TextField key="shipperId$" source="shipperId$" label="table.field.matnr.shipperId" />,
|
<ReferenceField key="groupId" source="groupId" label="table.field.matnr.groupId" reference="matnrGroup" link={false} sortable={false}>
|
<TextField source="name" />
|
</ReferenceField>,
|
<TextField key="platCode" source="platCode" label="table.field.matnr.platCode" />,
|
<TextField key="spec" source="spec" label="table.field.matnr.spec" />,
|
<TextField key="model" source="model" label="table.field.matnr.model" />,
|
<NumberField key="weight" source="weight" label="table.field.matnr.weight" />,
|
<TextField key="describle" source="describle" label="table.field.matnr.describle" />,
|
<NumberField key="nromNum" source="nromNum" label="table.field.matnr.nromNum" />,
|
<TextField key="unit" source="unit" label="table.field.matnr.unit" />,
|
<TextField key="purchaseUnit" source="purchaseUnit" label="table.field.matnr.purUnit" />,
|
<TextField key="stockUnit" source="stockUnit" label="table.field.matnr.stockUnit" />,
|
<TextField key="stockLeval$" source="stockLeval$" label="table.field.matnr.stockLevel" sortable={false} />,
|
<TextField key="flagLabelMange$" source="flagLabelMange$" label="table.field.matnr.isLabelMange" sortable={false} />,
|
<NumberField key="safeQty" source="safeQty" label="table.field.matnr.safeQty" />,
|
<NumberField key="minQty" source="minQty" label="table.field.matnr.minQty" />,
|
<NumberField key="maxQty" source="maxQty" label="table.field.matnr.maxQty" />,
|
<NumberField key="stagn" source="stagn" label="table.field.matnr.stagn" />,
|
<NumberField key="valid" source="valid" label="table.field.matnr.valid" />,
|
<NumberField key="validWarn" source="validWarn" label="table.field.matnr.validWarn" />,
|
<BooleanField key="flagCheck" source="flagCheck" label="table.field.matnr.flagCheck" sortable={false} />,
|
<ReferenceField key="updateBy" source="updateBy" label="common.field.updateBy" reference="user" link={false} sortable={false}>
|
<TextField source="nickname" />
|
</ReferenceField>,
|
<DateField key="updateTime" source="updateTime" label="common.field.updateTime" showTime />,
|
<ReferenceField key="createBy" source="createBy" label="common.field.createBy" reference="user" link={false} sortable={false}>
|
<TextField source="nickname" />
|
</ReferenceField>,
|
<DateField key="createTime" source="createTime" label="common.field.createTime" showTime />,
|
<BooleanField key="statusBool" source="statusBool" label="common.field.status" sortable={false} />,
|
<TextField key="memo" source="memo" label="common.field.memo" sortable={false} />,
|
]
|
const fields = data.map(el => <TextField key={el.fields} source={`extendFields.[${el.fields}]`} label={el.fieldsAlise} />)
|
const opt = <WrapperField key="opt" cellClassName="fixed" className="fixed" label="common.field.opt">
|
<EditButton sx={{ padding: '1px', fontSize: '.75rem' }} />
|
<PrintButton />
|
</WrapperField>
|
setColumns([...arr, ...fields, opt]);
|
|
} else {
|
notify(msg);
|
}
|
} catch (error) {
|
notify('请求出错');
|
}
|
};
|
|
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='matnr'
|
bulkActionButtons={<>
|
<BatchGroupButton />
|
<BatchWarnButton />
|
<BatchFlagButton />
|
<BatchStatusButton />
|
<BatchLevelButton />
|
<BindButton />
|
<BatchPrintButton />
|
<BulkDeleteButton mutationMode={OPERATE_MODE} />
|
</>}
|
rowClick={(id, resource, record) => false}
|
omit={['id', 'shipperId', 'platCode', 'spec', 'model', 'weight', 'color', 'describle'
|
, 'nromNum', 'unit', 'purchaseUnit', 'stockUnit', 'stockLeval', 'isLabelMange', 'safeQty'
|
, 'minQty', 'maxQty', 'stagn', 'valid', 'validWarn', 'flagCheck', 'updateTime', 'updateBy'
|
, 'createTime', 'createBy', 'memo', 'rglarId', 'groupId', 'stockLevel']}
|
>
|
{columns.map((column) => column)}
|
</StyledDatagrid>}
|
</Box>
|
);
|
}
|
|
|
const MatnrList = () => {
|
const translate = useTranslate();
|
const [createDialog, setCreateDialog] = useState(false);
|
const [drawerVal, setDrawerVal] = useState(false);
|
const notify = useNotify();
|
|
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.matnr"}
|
empty={<EmptyData onClick={() => { setCreateDialog(true) }} />}
|
filters={filters}
|
sort={{ field: "create_time", order: "desc" }}
|
actions={(
|
<TopToolbar>
|
<FilterButton />
|
<MyCreateButton onClick={() => { setCreateDialog(true) }} />
|
<SelectColumnsButton preferenceKey='matnr' />
|
<ImportButton value={'matnr'} parmas={{}} />
|
<MyExportButton />
|
</TopToolbar>
|
)}
|
perPage={DEFAULT_PAGE_SIZE}
|
aside={<MatListAside />}
|
>
|
<MatnrListContent />
|
</List>
|
<MatnrCreate
|
open={createDialog}
|
setOpen={setCreateDialog}
|
/>
|
<PageDrawer
|
title='Matnr Detail'
|
drawerVal={drawerVal}
|
setDrawerVal={setDrawerVal}
|
>
|
</PageDrawer>
|
</Box>
|
)
|
}
|
|
MatnrList.Context = React.createContext()
|
|
export default MatnrList;
|
|
const EnableButton = () => {
|
const record = useRecordContext();
|
const notify = useNotify();
|
const refresh = useRefresh();
|
const enable = async () => {
|
const res = await request.post('/loc/update', {
|
...record,
|
status: +!record.status
|
});
|
if (res?.data?.code === 200) {
|
refresh()
|
} else {
|
notify(res.data.msg);
|
}
|
}
|
return (
|
record.status === 1 ?
|
(<Button onClick={enable} label={"toolbar.unenable"}>
|
<DashboardIcon />
|
</Button>) : (<Button onClick={enable} label={"toolbar.enable"}>
|
<DashboardIcon />
|
</Button>)
|
|
)
|
}
|
|
const BatchStatusButton = () => {
|
const record = useRecordContext();
|
const notify = useNotify();
|
const refresh = useRefresh();
|
|
|
const [createDialog, setCreateDialog] = useState(false);
|
|
return (
|
<>
|
<Button onClick={() => setCreateDialog(true)} label={"toolbar.batchStatus"}>
|
<EditIcon />
|
</Button>
|
|
<BatchModal
|
open={createDialog}
|
setOpen={setCreateDialog}
|
fieldType={'status'}
|
/>
|
</>
|
|
)
|
}
|
const BatchLevelButton = () => {
|
const record = useRecordContext();
|
const notify = useNotify();
|
const refresh = useRefresh();
|
|
|
const [createDialog, setCreateDialog] = useState(false);
|
|
return (
|
<>
|
<Button onClick={() => setCreateDialog(true)} label={"toolbar.batchStockLevel"}>
|
<EditIcon />
|
</Button>
|
|
<BatchModal
|
open={createDialog}
|
setOpen={setCreateDialog}
|
fieldType={'stockLevel'}
|
/>
|
</>
|
|
)
|
}
|
|
const BatchWarnButton = () => {
|
const record = useRecordContext();
|
const notify = useNotify();
|
const refresh = useRefresh();
|
|
|
const [createDialog, setCreateDialog] = useState(false);
|
|
return (
|
<>
|
<Button onClick={() => setCreateDialog(true)} label={"toolbar.batchValidWarn"}>
|
<EditIcon />
|
</Button>
|
|
<BatchModal
|
open={createDialog}
|
setOpen={setCreateDialog}
|
fieldType={'validWarn'}
|
/>
|
</>
|
|
)
|
}
|
|
const BatchFlagButton = () => {
|
const record = useRecordContext();
|
const notify = useNotify();
|
const refresh = useRefresh();
|
|
|
const [createDialog, setCreateDialog] = useState(false);
|
|
return (
|
<>
|
<Button onClick={() => setCreateDialog(true)} label={"toolbar.batchFlagCheck"}>
|
<EditIcon />
|
</Button>
|
|
<BatchModal
|
open={createDialog}
|
setOpen={setCreateDialog}
|
fieldType={'flagCheck'}
|
/>
|
</>
|
|
)
|
}
|
|
const BatchGroupButton = () => {
|
const record = useRecordContext();
|
const notify = useNotify();
|
const refresh = useRefresh();
|
|
|
const [createDialog, setCreateDialog] = useState(false);
|
|
return (
|
<>
|
<Button onClick={() => setCreateDialog(true)} label={"toolbar.batchMatnrGropu"}>
|
<EditIcon />
|
</Button>
|
|
<BatchGropuModal
|
open={createDialog}
|
setOpen={setCreateDialog}
|
/>
|
</>
|
|
)
|
}
|
|
const BatchPrintButton = () => {
|
const record = useRecordContext();
|
const { resource, selectedIds } = useListContext();
|
const notify = useNotify();
|
const refresh = useRefresh();
|
|
const [createDialog, setCreateDialog] = useState(false);
|
|
return (
|
<>
|
<Button color="secondary" onClick={() => setCreateDialog(true)} label={"toolbar.print"}>
|
<PrintIcon />
|
</Button>
|
|
<PrintModal
|
open={createDialog}
|
setOpen={setCreateDialog}
|
rows={selectedIds}
|
/>
|
</>
|
)
|
}
|
|
const PrintButton = () => {
|
const record = useRecordContext();
|
|
const notify = useNotify();
|
const refresh = useRefresh();
|
|
const [createDialog, setCreateDialog] = useState(false);
|
|
return (
|
<>
|
<Button color="secondary" onClick={() => setCreateDialog(true)} label={"toolbar.print"}>
|
<PrintIcon />
|
</Button>
|
|
<PrintModal
|
open={createDialog}
|
setOpen={setCreateDialog}
|
rows={[record.id]}
|
/>
|
</>
|
)
|
}
|
|
const BindButton = () => {
|
const record = useRecordContext();
|
const notify = useNotify();
|
const refresh = useRefresh();
|
|
|
const [createDialog, setCreateDialog] = useState(false);
|
|
return (
|
<>
|
<Button onClick={() => setCreateDialog(true)} label={"toolbar.bindloc"}>
|
<LinkIcon />
|
</Button>
|
|
<BindModal
|
open={createDialog}
|
setOpen={setCreateDialog}
|
/>
|
</>
|
|
)
|
}
|
