|  |  |  | 
|---|
|  |  |  | import { Dialog, DialogActions, DialogContent, DialogTitle, Box } from "@mui/material"; | 
|---|
|  |  |  | import { Dialog, DialogActions, DialogContent, DialogTitle, Box, LinearProgress } from "@mui/material"; | 
|---|
|  |  |  | import React, { useState, useRef, useEffect, useMemo } from "react"; | 
|---|
|  |  |  | import { | 
|---|
|  |  |  | List, | 
|---|
|  |  |  | DatagridConfigurable, | 
|---|
|  |  |  | SearchInput, | 
|---|
|  |  |  | TopToolbar, | 
|---|
|  |  |  | Toolbar, | 
|---|
|  |  |  | Button, | 
|---|
|  |  |  | SelectColumnsButton, | 
|---|
|  |  |  | EditButton, | 
|---|
|  |  |  | 
|---|
|  |  |  | ExportButton, | 
|---|
|  |  |  | BulkDeleteButton, | 
|---|
|  |  |  | WrapperField, | 
|---|
|  |  |  | Toolbar, | 
|---|
|  |  |  | useRecordContext, | 
|---|
|  |  |  | useTranslate, | 
|---|
|  |  |  | useNotify, | 
|---|
|  |  |  | 
|---|
|  |  |  | ReferenceArrayInput, | 
|---|
|  |  |  | AutocompleteInput, | 
|---|
|  |  |  | DeleteButton, | 
|---|
|  |  |  | SimpleForm, | 
|---|
|  |  |  | Form, | 
|---|
|  |  |  | SaveButton, | 
|---|
|  |  |  | useRefresh, | 
|---|
|  |  |  | useGetList, | 
|---|
|  |  |  | } from 'react-admin'; | 
|---|
|  |  |  | import DialogCloseButton from "../../components/DialogCloseButton"; | 
|---|
|  |  |  | import { styled } from '@mui/material/styles'; | 
|---|
|  |  |  | import { PAGE_DRAWER_WIDTH, OPERATE_MODE, DEFAULT_PAGE_SIZE } from '@/config/setting'; | 
|---|
|  |  |  | import { Grid, Stack } from "@mui/system"; | 
|---|
|  |  |  | import { Grid, margin, Stack, width } from "@mui/system"; | 
|---|
|  |  |  | import request from '@/utils/request'; | 
|---|
|  |  |  | import SaveIcon from '@mui/icons-material/Save'; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | import CheckCircleIcon from '@mui/icons-material/CheckCircle'; | 
|---|
|  |  |  | import EditableTextField from "../../components/EditableTextField"; | 
|---|
|  |  |  | import OutOrderPreview from "./OutOrderPreview"; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const StyledDatagrid = styled(DatagridConfigurable)(({ theme }) => ({ | 
|---|
|  |  |  | '& .css-1vooibu-MuiSvgIcon-root': { | 
|---|
|  |  |  | 
|---|
|  |  |  | '& .RaDatagrid-row': { | 
|---|
|  |  |  | cursor: 'auto' | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | '& .column-name': { | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | '& .opt': { | 
|---|
|  |  |  | width: 220 | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | '& .wkType': { | 
|---|
|  |  |  | width: 110 | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | '& .status': { | 
|---|
|  |  |  | width: 90 | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | })); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const StyledForm = styled(Form)(({ theme }) => ({ | 
|---|
|  |  |  | width: '100%', | 
|---|
|  |  |  | marginBottom: '45px', | 
|---|
|  |  |  |  | 
|---|
|  |  |  | '& .MuiGrid-root': { | 
|---|
|  |  |  | margin: '0 10px' | 
|---|
|  |  |  | } | 
|---|
|  |  |  | })); | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const filters = [ | 
|---|
|  |  |  | <SearchInput source="condition" alwaysOn />, | 
|---|
|  |  |  | <DateInput label='common.time.after' source="timeStart" />, | 
|---|
|  |  |  | 
|---|
|  |  |  | ] | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const OutOrderModal = (props) => { | 
|---|
|  |  |  | const { open, setOpen, record } = props; | 
|---|
|  |  |  | const { open, setOpen, preview, setPreview, record } = props; | 
|---|
|  |  |  | const translate = useTranslate(); | 
|---|
|  |  |  | const [params, setParams] = useState({}); | 
|---|
|  |  |  | const [select, setSelect] = useState([]); | 
|---|
|  |  |  | const [drawerVal, setDrawerVal] = useState(false); | 
|---|
|  |  |  | const refresh = useRefresh(); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const handleClose = (event, reason) => { | 
|---|
|  |  |  | if (reason !== "backdropClick") { | 
|---|
|  |  |  | setOpen(false); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }; | 
|---|
|  |  |  | const CustomFilter = () => { | 
|---|
|  |  |  | const { filterValues, setFilters, refetch } = useListContext(); | 
|---|
|  |  |  | const [formValues, setFormValues] = useState(filterValues); | 
|---|
|  |  |  | const handleChange = (event) => { | 
|---|
|  |  |  | if (event.target == undefined || event.target == null) { return } | 
|---|
|  |  |  | setFormValues(formValues => ({ | 
|---|
|  |  |  | ...formValues, | 
|---|
|  |  |  | [event.target.name]: event.target.value, | 
|---|
|  |  |  | })); | 
|---|
|  |  |  | }; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const handleSubmit = (event) => { | 
|---|
|  |  |  | setParams(formValues) | 
|---|
|  |  |  | }; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | return ( | 
|---|
|  |  |  | <StyledForm> | 
|---|
|  |  |  | <Grid container rowSpacing={3} columnSpacing={3} > | 
|---|
|  |  |  | <Stack> | 
|---|
|  |  |  | <TextInput | 
|---|
|  |  |  | source="condition" | 
|---|
|  |  |  | label="common.action.search" | 
|---|
|  |  |  | resettable | 
|---|
|  |  |  | defaultValue={params?.condition} | 
|---|
|  |  |  | onChange={handleChange} /> | 
|---|
|  |  |  | </Stack> | 
|---|
|  |  |  | <Stack> | 
|---|
|  |  |  | <TextInput | 
|---|
|  |  |  | source="deliveryCode" | 
|---|
|  |  |  | label="table.field.deliveryItem.deliveryCode" | 
|---|
|  |  |  | defaultValue={params?.deliveryCode} | 
|---|
|  |  |  | onChange={handleChange} | 
|---|
|  |  |  | resettable | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | </Stack> | 
|---|
|  |  |  | <Stack> | 
|---|
|  |  |  | <TextInput | 
|---|
|  |  |  | source="maktx" | 
|---|
|  |  |  | label="table.field.deliveryItem.matnrName" | 
|---|
|  |  |  | defaultValue={params?.maktx} | 
|---|
|  |  |  | onChange={handleChange} | 
|---|
|  |  |  | resettable | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | </Stack> | 
|---|
|  |  |  | <Stack> | 
|---|
|  |  |  | <TextInput | 
|---|
|  |  |  | source="matnrCode" | 
|---|
|  |  |  | label="table.field.deliveryItem.matnrCode" | 
|---|
|  |  |  | defaultValue={params?.matnrCode} | 
|---|
|  |  |  | resettable | 
|---|
|  |  |  | onChange={handleChange} /> | 
|---|
|  |  |  | </Stack> | 
|---|
|  |  |  | <Stack> | 
|---|
|  |  |  | <TextInput | 
|---|
|  |  |  | source="splrName" | 
|---|
|  |  |  | label="table.field.deliveryItem.splrName" | 
|---|
|  |  |  | defaultValue={params?.splrName} | 
|---|
|  |  |  | resettable | 
|---|
|  |  |  | onChange={handleChange} /> | 
|---|
|  |  |  | </Stack> | 
|---|
|  |  |  | </Grid> | 
|---|
|  |  |  | <DialogActions> | 
|---|
|  |  |  | <Toolbar sx={{ width: '100%', justifyContent: 'end' }}  > | 
|---|
|  |  |  | <SaveButton onClick={handleSubmit} label={"toolbar.query"} /> | 
|---|
|  |  |  | </Toolbar> | 
|---|
|  |  |  | </DialogActions> | 
|---|
|  |  |  | </StyledForm> | 
|---|
|  |  |  | ); | 
|---|
|  |  |  | }; | 
|---|
|  |  |  | return ( | 
|---|
|  |  |  | <Dialog | 
|---|
|  |  |  | 
|---|
|  |  |  | aria-hidden | 
|---|
|  |  |  | fullWidth | 
|---|
|  |  |  | disableRestoreFocus | 
|---|
|  |  |  | maxWidth="lg" | 
|---|
|  |  |  | maxWidth="xl" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <DialogTitle id="form-dialog-title" sx={{ | 
|---|
|  |  |  | position: 'sticky', | 
|---|
|  |  |  | 
|---|
|  |  |  | <DialogContent> | 
|---|
|  |  |  | <Grid item sx={24}> | 
|---|
|  |  |  | <List | 
|---|
|  |  |  | resource="deliveryItem" | 
|---|
|  |  |  | resource="/deliveryItem/filters" | 
|---|
|  |  |  | sx={{ | 
|---|
|  |  |  | flexGrow: 1, | 
|---|
|  |  |  | transition: (theme) => | 
|---|
|  |  |  | 
|---|
|  |  |  | }), | 
|---|
|  |  |  | marginRight: drawerVal ? `${PAGE_DRAWER_WIDTH}px` : 0, | 
|---|
|  |  |  | }} | 
|---|
|  |  |  | storeKey='selectDelivery' | 
|---|
|  |  |  | queryOptions={params} | 
|---|
|  |  |  | filters={<CustomFilter />} | 
|---|
|  |  |  | queryOptions={{ meta: { ...params } }} | 
|---|
|  |  |  | empty={false} | 
|---|
|  |  |  | sort={{ field: "create_time", order: "desc" }} | 
|---|
|  |  |  | actions={( | 
|---|
|  |  |  | 
|---|
|  |  |  | )} | 
|---|
|  |  |  | perPage={DEFAULT_PAGE_SIZE} | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <StyledDatagrid | 
|---|
|  |  |  | preferenceKey='deliveryItem' | 
|---|
|  |  |  | bulkActionButtons={() => <></>} | 
|---|
|  |  |  | rowClick={(id, resource, record) => false} | 
|---|
|  |  |  | expand={false} | 
|---|
|  |  |  | expandSingle={true} | 
|---|
|  |  |  | omit={['id', 'createTime', 'createBy', 'memo', 'workQty', 'startTime', 'endTime', 'updateBy', 'createTime']} | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <NumberField source="id" /> | 
|---|
|  |  |  | <TextField source="matnrCode" label="table.field.deliveryItem.matnrCode" /> | 
|---|
|  |  |  | <TextField source="matnrName" label="table.field.deliveryItem.matnrName" /> | 
|---|
|  |  |  | <TextField source="unit" label="table.field.deliveryItem.unit" /> | 
|---|
|  |  |  | <NumberField source="anfme" label="table.field.deliveryItem.anfme" /> | 
|---|
|  |  |  | <TextField source="splrName" label="table.field.deliveryItem.splrName" /> | 
|---|
|  |  |  | <TextField source="splrBatch" label="table.field.deliveryItem.splrBatch" /> | 
|---|
|  |  |  | <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} /> | 
|---|
|  |  |  | </StyledDatagrid> | 
|---|
|  |  |  | <Box sx={{ position: 'relative', minHeight: "60vh", }}> | 
|---|
|  |  |  | <LinearProgress | 
|---|
|  |  |  | sx={{ height: "2px", position: 'absolute', top: 0, left: 0, right: 0, }} | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | <StyledDatagrid | 
|---|
|  |  |  | preferenceKey='deliveryItem' | 
|---|
|  |  |  | bulkActionButtons={<AddOutStockButton setOpen={setOpen} setPreview={setPreview} setSelect={setSelect} />} | 
|---|
|  |  |  | rowClick={(id, resource, record) => false} | 
|---|
|  |  |  | expand={false} | 
|---|
|  |  |  | expandSingle={true} | 
|---|
|  |  |  | omit={['id', 'createTime', 'createBy', 'memo', 'startTime', 'endTime', 'updateBy', 'createTime']} | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <NumberField source="id" /> | 
|---|
|  |  |  | <TextField source="deliveryCode" label="table.field.deliveryItem.deliveryCode" /> | 
|---|
|  |  |  | <TextField source="matnrCode" label="table.field.deliveryItem.matnrCode" /> | 
|---|
|  |  |  | <TextField source="maktx" label="table.field.deliveryItem.matnrName" /> | 
|---|
|  |  |  | <TextField source="unit" label="table.field.deliveryItem.unit" /> | 
|---|
|  |  |  | <NumberField source="anfme" label="table.field.deliveryItem.anfme" /> | 
|---|
|  |  |  | <NumberField source="workQty" label="table.field.outStockItem.workQty" /> | 
|---|
|  |  |  | <TextField source="splrName" label="table.field.deliveryItem.splrName" /> | 
|---|
|  |  |  | <TextField source="splrBatch" label="table.field.deliveryItem.splrBatch" /> | 
|---|
|  |  |  | <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} /> | 
|---|
|  |  |  | </StyledDatagrid> | 
|---|
|  |  |  | </Box> | 
|---|
|  |  |  | </List> | 
|---|
|  |  |  | </Grid> | 
|---|
|  |  |  | </DialogContent> | 
|---|
|  |  |  | </Grid> | 
|---|
|  |  |  | <Grid> | 
|---|
|  |  |  | <OutOrderPreview open={preview} setOpen={setPreview} selectedIds={select} setCloseParent={setOpen} /> | 
|---|
|  |  |  | </Grid> | 
|---|
|  |  |  | </Dialog > | 
|---|
|  |  |  | ) | 
|---|
|  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | export default OutOrderModal; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const CustomFilter = () => { | 
|---|
|  |  |  | const { filterValues, setFilters } = useListContext('deliveryItem'); | 
|---|
|  |  |  | const [formValues, setFormValues] = useState(filterValues); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const handleChange = (event) => { | 
|---|
|  |  |  | setFormValues(formValues => ({ | 
|---|
|  |  |  | ...formValues, | 
|---|
|  |  |  | [event.target.name]: event.target.value | 
|---|
|  |  |  | })); | 
|---|
|  |  |  | }; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const handleSubmit = (event) => { | 
|---|
|  |  |  | console.log('---------->'); | 
|---|
|  |  |  | console.log(formValues); | 
|---|
|  |  |  | event.preventDefault(); | 
|---|
|  |  |  | setFilters(formValues, null, true); | 
|---|
|  |  |  | }; | 
|---|
|  |  |  | const AddOutStockButton = (props) => { | 
|---|
|  |  |  | const { setOpen, setPreview, setSelect } = props; | 
|---|
|  |  |  | const { selectedIds, onUnselectItems } = useListContext(); | 
|---|
|  |  |  | const notify = useNotify(); | 
|---|
|  |  |  | const refresh = useRefresh(); | 
|---|
|  |  |  | const confirm = async (event) => { | 
|---|
|  |  |  | setPreview(true) | 
|---|
|  |  |  | setSelect(selectedIds); | 
|---|
|  |  |  | onUnselectItems(); | 
|---|
|  |  |  | // refresh(); | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | return ( | 
|---|
|  |  |  | <Form> | 
|---|
|  |  |  | <Grid container rowSpacing={2} columnSpacing={2} > | 
|---|
|  |  |  | <Stack> | 
|---|
|  |  |  | <TextInput | 
|---|
|  |  |  | source="matnrName" | 
|---|
|  |  |  | label="table.field.deliveryItem.matnrName" | 
|---|
|  |  |  | resettable | 
|---|
|  |  |  | onChange={handleChange} | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | </Stack> | 
|---|
|  |  |  | <Stack> | 
|---|
|  |  |  | <TextInput | 
|---|
|  |  |  | source="matnrCode" | 
|---|
|  |  |  | label="table.field.deliveryItem.matnrCode" | 
|---|
|  |  |  | resettable | 
|---|
|  |  |  | onChange={handleChange} /> | 
|---|
|  |  |  | </Stack> | 
|---|
|  |  |  | <Stack> | 
|---|
|  |  |  | <TextInput | 
|---|
|  |  |  | source="splrName" | 
|---|
|  |  |  | label="table.field.deliveryItem.splrName" | 
|---|
|  |  |  | resettable | 
|---|
|  |  |  | onChange={handleChange} /> | 
|---|
|  |  |  | </Stack> | 
|---|
|  |  |  | <Stack> | 
|---|
|  |  |  | <TextInput | 
|---|
|  |  |  | source="splrName" | 
|---|
|  |  |  | label="table.field.deliveryItem.splrName" | 
|---|
|  |  |  | resettable | 
|---|
|  |  |  | onChange={handleChange} /> | 
|---|
|  |  |  | </Stack> | 
|---|
|  |  |  | </Grid> | 
|---|
|  |  |  | <DialogActions> | 
|---|
|  |  |  | <Toolbar sx={{ width: '100%', justifyContent: 'end' }}  > | 
|---|
|  |  |  | <SaveButton onClick={handleSubmit}/> | 
|---|
|  |  |  | {/* <Button variant="contained" label="toolbar.confirm" startIcon={<SaveIcon />} onClick={handleSubmit} /> */} | 
|---|
|  |  |  | </Toolbar> | 
|---|
|  |  |  | </DialogActions> | 
|---|
|  |  |  | </Form> | 
|---|
|  |  |  | ); | 
|---|
|  |  |  | }; | 
|---|
|  |  |  | <Button label={"toolbar.confirmSelect"} onClick={confirm}> | 
|---|
|  |  |  | <CheckCircleIcon /> | 
|---|
|  |  |  | </Button> | 
|---|
|  |  |  | ) | 
|---|
|  |  |  | } | 
|---|