|  |  |  | 
|---|
|  |  |  | 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, | 
|---|
|  |  |  | 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, | 
|---|
|  |  |  | } from 'react-admin'; | 
|---|
|  |  |  | import { Box, Typography, Card, Stack } from '@mui/material'; | 
|---|
|  |  |  | import { styled } from '@mui/material/styles'; | 
|---|
|  |  |  | 
|---|
|  |  |  | import * as Common from '@/utils/common'; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const StyledDatagrid = styled(DatagridConfigurable)(({ theme }) => ({ | 
|---|
|  |  |  | '& .css-1vooibu-MuiSvgIcon-root': { | 
|---|
|  |  |  | height: '.9em' | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | '& .RaDatagrid-row': { | 
|---|
|  |  |  | cursor: 'auto' | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | '& .column-name': { | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | '& .opt': { | 
|---|
|  |  |  | width: 200 | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | '& .css-1vooibu-MuiSvgIcon-root': { | 
|---|
|  |  |  | height: '.9em' | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | '& .RaDatagrid-row': { | 
|---|
|  |  |  | cursor: 'auto' | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | '& .column-name': { | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | '& .opt': { | 
|---|
|  |  |  | width: 200 | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | })); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const filters = [ | 
|---|
|  |  |  | <SearchInput source="condition" alwaysOn />, | 
|---|
|  |  |  | <DateInput label='common.time.after' source="timeStart" alwaysOn />, | 
|---|
|  |  |  | <DateInput label='common.time.before' source="timeEnd" alwaysOn />, | 
|---|
|  |  |  | <TextInput source="code" label="table.field.purchase.code" />, | 
|---|
|  |  |  | <TextInput source="type" label="table.field.purchase.type" />, | 
|---|
|  |  |  | <TextInput source="source" label="table.field.purchase.source" />, | 
|---|
|  |  |  | <DateInput source="preArr" label="table.field.purchase.preArr" />, | 
|---|
|  |  |  | <NumberInput source="anfme" label="table.field.purchase.anfme" />, | 
|---|
|  |  |  | <NumberInput source="qty" label="table.field.purchase.qty" />, | 
|---|
|  |  |  | <NumberInput source="workQty" label="table.field.purchase.workQty" />, | 
|---|
|  |  |  | <TextInput source="channel" label="table.field.purchase.channel" />, | 
|---|
|  |  |  | <TextInput source="platCode" label="table.field.purchase.platCode" />, | 
|---|
|  |  |  | <DateInput source="startTime" label="table.field.purchase.startTime" />, | 
|---|
|  |  |  | <DateInput source="endTime" label="table.field.purchase.endTime" />, | 
|---|
|  |  |  | <TextInput source="project" label="table.field.purchase.project" />, | 
|---|
|  |  |  | <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 | 
|---|
|  |  |  | />, | 
|---|
|  |  |  | <SearchInput source="condition" alwaysOn />, | 
|---|
|  |  |  | <TextInput source="code" label="table.field.purchase.code" />, | 
|---|
|  |  |  | <TextInput source="type" label="table.field.purchase.type" />, | 
|---|
|  |  |  | <TextInput source="source" label="table.field.purchase.source" />, | 
|---|
|  |  |  | <DateInput source="preArr" label="table.field.purchase.preArr" />, | 
|---|
|  |  |  | <NumberInput source="anfme" label="table.field.purchase.anfme" />, | 
|---|
|  |  |  | <NumberInput source="qty" label="table.field.purchase.qty" />, | 
|---|
|  |  |  | <NumberInput source="workQty" label="table.field.purchase.workQty" />, | 
|---|
|  |  |  | <TextInput source="channel" label="table.field.purchase.channel" />, | 
|---|
|  |  |  | <TextInput source="platCode" label="table.field.purchase.platCode" />, | 
|---|
|  |  |  | <DateInput source="startTime" label="table.field.purchase.startTime" />, | 
|---|
|  |  |  | <DateInput source="endTime" label="table.field.purchase.endTime" />, | 
|---|
|  |  |  | <TextInput source="project" label="table.field.purchase.project" />, | 
|---|
|  |  |  | <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 PurchaseList = () => { | 
|---|
|  |  |  | const translate = useTranslate(); | 
|---|
|  |  |  | const translate = useTranslate(); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const [createDialog, setCreateDialog] = useState(false); | 
|---|
|  |  |  | const [drawerVal, setDrawerVal] = useState(false); | 
|---|
|  |  |  | const [createDialog, setCreateDialog] = useState(false); | 
|---|
|  |  |  | const [drawerVal, setDrawerVal] = useState(false); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | 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.purchase"} | 
|---|
|  |  |  | empty={<EmptyData onClick={() => { setCreateDialog(true) }} />} | 
|---|
|  |  |  | filters={filters} | 
|---|
|  |  |  | sort={{ field: "create_time", order: "desc" }} | 
|---|
|  |  |  | actions={( | 
|---|
|  |  |  | <TopToolbar> | 
|---|
|  |  |  | <FilterButton /> | 
|---|
|  |  |  | <MyCreateButton onClick={() => { setCreateDialog(true) }} /> | 
|---|
|  |  |  | <SelectColumnsButton preferenceKey='purchase' /> | 
|---|
|  |  |  | <MyExportButton /> | 
|---|
|  |  |  | </TopToolbar> | 
|---|
|  |  |  | )} | 
|---|
|  |  |  | perPage={DEFAULT_PAGE_SIZE} | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <StyledDatagrid | 
|---|
|  |  |  | preferenceKey='purchase' | 
|---|
|  |  |  | bulkActionButtons={() => <BulkDeleteButton mutationMode={OPERATE_MODE} />} | 
|---|
|  |  |  | rowClick={(id, resource, record) => false} | 
|---|
|  |  |  | expand={() => <PurchasePanel />} | 
|---|
|  |  |  | expandSingle={true} | 
|---|
|  |  |  | omit={['id', 'createTime', 'createBy', 'memo']} | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <NumberField source="id" /> | 
|---|
|  |  |  | <TextField source="code" label="table.field.purchase.code" /> | 
|---|
|  |  |  | <TextField source="type" label="table.field.purchase.type" /> | 
|---|
|  |  |  | <TextField source="source" label="table.field.purchase.source" /> | 
|---|
|  |  |  | <DateField source="preArr" label="table.field.purchase.preArr" showTime /> | 
|---|
|  |  |  | <NumberField source="anfme" label="table.field.purchase.anfme" /> | 
|---|
|  |  |  | <NumberField source="qty" label="table.field.purchase.qty" /> | 
|---|
|  |  |  | <NumberField source="workQty" label="table.field.purchase.workQty" /> | 
|---|
|  |  |  | <TextField source="channel" label="table.field.purchase.channel" /> | 
|---|
|  |  |  | <TextField source="platCode" label="table.field.purchase.platCode" /> | 
|---|
|  |  |  | <DateField source="startTime" label="table.field.purchase.startTime" showTime /> | 
|---|
|  |  |  | <DateField source="endTime" label="table.field.purchase.endTime" showTime /> | 
|---|
|  |  |  | <TextField source="project" label="table.field.purchase.project" /> | 
|---|
|  |  |  | const navigate = useNavigate(); | 
|---|
|  |  |  | const assign = (record) => { | 
|---|
|  |  |  | navigate(`/purchaseItem?poId=${record.id}`); | 
|---|
|  |  |  | }; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <ReferenceField source="updateBy" label="common.field.updateBy" reference="user" link={false} sortable={false}> | 
|---|
|  |  |  | <TextField source="nickname" /> | 
|---|
|  |  |  | </ReferenceField> | 
|---|
|  |  |  | <DateField source="updateTime" label="common.field.updateTime" showTime /> | 
|---|
|  |  |  | <ReferenceField source="createBy" label="common.field.createBy" reference="user" link={false} sortable={false}> | 
|---|
|  |  |  | <TextField source="nickname" /> | 
|---|
|  |  |  | </ReferenceField> | 
|---|
|  |  |  | <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} /> | 
|---|
|  |  |  | <WrapperField cellClassName="opt" label="common.field.opt"> | 
|---|
|  |  |  | <EditButton sx={{ padding: '1px', fontSize: '.75rem' }} /> | 
|---|
|  |  |  | <DeleteButton sx={{ padding: '1px', fontSize: '.75rem' }} mutationMode={OPERATE_MODE} /> | 
|---|
|  |  |  | </WrapperField> | 
|---|
|  |  |  | </StyledDatagrid> | 
|---|
|  |  |  | </List> | 
|---|
|  |  |  | <PurchaseCreate | 
|---|
|  |  |  | open={createDialog} | 
|---|
|  |  |  | setOpen={setCreateDialog} | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | <PageDrawer | 
|---|
|  |  |  | title='Purchase Detail' | 
|---|
|  |  |  | drawerVal={drawerVal} | 
|---|
|  |  |  | setDrawerVal={setDrawerVal} | 
|---|
|  |  |  | > | 
|---|
|  |  |  | </PageDrawer> | 
|---|
|  |  |  | </Box> | 
|---|
|  |  |  | ) | 
|---|
|  |  |  | 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.purchase"} | 
|---|
|  |  |  | empty={<EmptyData onClick={() => { setCreateDialog(true) }} />} | 
|---|
|  |  |  | filters={filters} | 
|---|
|  |  |  | sort={{ field: "create_time", order: "desc" }} | 
|---|
|  |  |  | actions={( | 
|---|
|  |  |  | <TopToolbar> | 
|---|
|  |  |  | <FilterButton /> | 
|---|
|  |  |  | <MyCreateButton onClick={() => { setCreateDialog(true) }} /> | 
|---|
|  |  |  | <SelectColumnsButton preferenceKey='purchase' /> | 
|---|
|  |  |  | <MyExportButton /> | 
|---|
|  |  |  | </TopToolbar> | 
|---|
|  |  |  | )} | 
|---|
|  |  |  | perPage={DEFAULT_PAGE_SIZE} | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <StyledDatagrid | 
|---|
|  |  |  | preferenceKey='purchase' | 
|---|
|  |  |  | bulkActionButtons={() => <BulkDeleteButton mutationMode={OPERATE_MODE} />} | 
|---|
|  |  |  | rowClick={(id, resource, record) => false} | 
|---|
|  |  |  | expand={() => <PurchasePanel />} | 
|---|
|  |  |  | expandSingle={true} | 
|---|
|  |  |  | omit={['id', 'createTime', 'createBy', 'memo']} | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <NumberField source="id" /> | 
|---|
|  |  |  | <MyField | 
|---|
|  |  |  | source="code" | 
|---|
|  |  |  | label="table.field.purchase.code" | 
|---|
|  |  |  | onClick={(event, record, val) => { | 
|---|
|  |  |  | event.stopPropagation(); | 
|---|
|  |  |  | assign(record); | 
|---|
|  |  |  | }} | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | <TextField source="type" label="table.field.purchase.type" /> | 
|---|
|  |  |  | <TextField source="source" label="table.field.purchase.source" /> | 
|---|
|  |  |  | <DateField source="preArr" label="table.field.purchase.preArr" showTime /> | 
|---|
|  |  |  | <NumberField source="anfme" label="table.field.purchase.anfme" /> | 
|---|
|  |  |  | <NumberField source="qty" label="table.field.purchase.qty" /> | 
|---|
|  |  |  | <NumberField source="workQty" label="table.field.purchase.workQty" /> | 
|---|
|  |  |  | <TextField source="channel" label="table.field.purchase.channel" /> | 
|---|
|  |  |  | <TextField source="platCode" label="table.field.purchase.platCode" /> | 
|---|
|  |  |  | <DateField source="startTime" label="table.field.purchase.startTime" showTime /> | 
|---|
|  |  |  | <DateField source="endTime" label="table.field.purchase.endTime" showTime /> | 
|---|
|  |  |  | <TextField source="project" label="table.field.purchase.project" /> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <ReferenceField source="updateBy" label="common.field.updateBy" reference="user" link={false} sortable={false}> | 
|---|
|  |  |  | <TextField source="nickname" /> | 
|---|
|  |  |  | </ReferenceField> | 
|---|
|  |  |  | <DateField source="updateTime" label="common.field.updateTime" showTime /> | 
|---|
|  |  |  | <ReferenceField source="createBy" label="common.field.createBy" reference="user" link={false} sortable={false}> | 
|---|
|  |  |  | <TextField source="nickname" /> | 
|---|
|  |  |  | </ReferenceField> | 
|---|
|  |  |  | <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} /> | 
|---|
|  |  |  | <WrapperField cellClassName="opt" label="common.field.opt"> | 
|---|
|  |  |  | <EditButton sx={{ padding: '1px', fontSize: '.75rem' }} /> | 
|---|
|  |  |  | <DeleteButton sx={{ padding: '1px', fontSize: '.75rem' }} mutationMode={OPERATE_MODE} /> | 
|---|
|  |  |  | </WrapperField> | 
|---|
|  |  |  | </StyledDatagrid> | 
|---|
|  |  |  | </List> | 
|---|
|  |  |  | <PurchaseCreate | 
|---|
|  |  |  | open={createDialog} | 
|---|
|  |  |  | setOpen={setCreateDialog} | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | <PageDrawer | 
|---|
|  |  |  | title='Purchase Detail' | 
|---|
|  |  |  | drawerVal={drawerVal} | 
|---|
|  |  |  | setDrawerVal={setDrawerVal} | 
|---|
|  |  |  | > | 
|---|
|  |  |  | </PageDrawer> | 
|---|
|  |  |  | </Box> | 
|---|
|  |  |  | ) | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | export default PurchaseList; | 
|---|