import React, { useState, useRef, useEffect, useMemo } from "react";
|
import {
|
CreateBase,
|
useTranslate,
|
TextInput,
|
NumberInput,
|
BooleanInput,
|
DateInput,
|
SaveButton,
|
SelectInput,
|
ReferenceInput,
|
ReferenceArrayInput,
|
AutocompleteInput,
|
Toolbar,
|
required,
|
useDataProvider,
|
useNotify,
|
Form,
|
useCreateController,
|
useListContext,
|
useRefresh,
|
} from 'react-admin';
|
import {
|
Dialog,
|
DialogActions,
|
DialogContent,
|
DialogTitle,
|
Stack,
|
Grid,
|
TextField,
|
Box,
|
Button,
|
Paper,
|
TableContainer,
|
Table,
|
TableHead,
|
TableBody,
|
TableRow,
|
TableCell,
|
Tooltip,
|
IconButton,
|
styled,
|
Select,
|
MenuItem
|
|
|
} from '@mui/material';
|
import DialogCloseButton from "../../components/DialogCloseButton";
|
import StatusSelectInput from "../../components/StatusSelectInput";
|
import ConfirmButton from "../../components/ConfirmButton";
|
import AsnWareModal from "./AsnWareModal";
|
import { useForm, Controller, useWatch, FormProvider, useFormContext } from "react-hook-form";
|
import SaveIcon from '@mui/icons-material/Save';
|
import request from '@/utils/request';
|
import { Add, Edit, Delete } from '@mui/icons-material';
|
import _, { set } from 'lodash';
|
import { DataGrid, useGridApiRef } from '@mui/x-data-grid';
|
import DictionarySelect from "../../components/DictionarySelect";
|
import DictSelect from "../../components/DictSelect";
|
import "./asnOrder.css";
|
|
const AsnOrderModal = (props) => {
|
const { open, setOpen, asnId, billReload } = props;
|
|
const translate = useTranslate();
|
const notify = useNotify();
|
const refresh = useRefresh();
|
const [disabled, setDisabled] = useState(false)
|
|
const [createDialog, setCreateDialog] = useState(false);
|
|
const tableRef = useRef();
|
|
useEffect(() => {
|
if (open && asnId !== 0) {
|
requestGetHead()
|
requestGetBody()
|
}
|
setDisabled(false)
|
}, [open])
|
|
const handleClose = (event, reason) => {
|
if (reason !== "backdropClick") {
|
setOpen(false);
|
refresh();
|
setFormData({ type: '', wkType: '' })
|
setTableData([])
|
}
|
};
|
|
const [formData, setFormData] = useState({
|
type: '',
|
wkType: '',
|
poCode: '',
|
logisNo: '',
|
arrTime: ''
|
});
|
|
const [tabelData, setTableData] = useState([]);
|
|
|
const handleChange = (value, name) => {
|
setFormData((prevData) => ({
|
...prevData,
|
[name]: value
|
}));
|
console.log(formData);
|
};
|
|
const resetData = () => {
|
setFormData({
|
type: '',
|
wkType: '',
|
poCode: '',
|
logisNo: '',
|
arrTime: ''
|
})
|
setTableData([])
|
}
|
|
const setFinally = () => {
|
const rows = tableRef.current.state.editRows;
|
for (const key in rows) {
|
const find = tabelData.find(item => item.matnrId === +key);
|
find.anfme = rows[key].anfme.value;
|
}
|
setTableData([...tabelData]);
|
}
|
|
const handleSubmit = async () => {
|
setFinally()
|
setDisabled(true)
|
|
if (asnId === 0) {
|
const parmas = {
|
"orders": formData,
|
"items": tabelData,
|
}
|
|
const res = await request.post(`/asnOrder/items/save`, parmas);
|
if (res?.data?.code === 200) {
|
setOpen(false);
|
refresh();
|
billReload?.current()
|
resetData()
|
} else {
|
notify(res.data.msg);
|
}
|
} else {
|
const parmas = {
|
"orders": formData,
|
"items": tabelData,
|
}
|
const res = await request.post(`/asnOrder/items/update`, parmas);
|
if (res?.data?.code === 200) {
|
setOpen(false);
|
refresh();
|
billReload?.current()
|
resetData()
|
} else {
|
notify(res.data.msg);
|
}
|
}
|
setDisabled(false)
|
|
};
|
|
|
const handleDelete = async () => {
|
const res = await request.post(`/asnOrder/remove/${asnId}`);
|
if (res?.data?.code === 200) {
|
setOpen(false);
|
refresh();
|
} else {
|
notify(res.data.msg);
|
}
|
};
|
|
const requestGetHead = async () => {
|
const res = await request.get(`/asnOrder/${asnId}`);
|
if (res?.data?.code === 200) {
|
setFormData(res.data.data)
|
} else {
|
notify(res.data.msg);
|
}
|
}
|
|
const requestGetBody = async () => {
|
const res = await request.post(`/asnOrderItem/page`, { asnId });
|
if (res?.data?.code === 200) {
|
setTableData(res.data.data.records)
|
} else {
|
notify(res.data.msg);
|
}
|
}
|
|
const [selectedRows, setSelectedRows] = useState([]);
|
|
|
|
const handleDeleteItem = () => {
|
const newTableData = _.filter(tabelData, (item) => !selectedRows.includes(item.matnrId));
|
setTableData(newTableData);
|
}
|
|
return (
|
<>
|
<Dialog
|
open={open}
|
onClose={handleClose}
|
aria-labelledby="form-dialog-title"
|
aria-hidden
|
fullWidth
|
disableRestoreFocus
|
maxWidth="lg" // 'xs' | 'sm' | 'md' | 'lg' | 'xl'
|
>
|
<DialogTitle id="form-dialog-title" sx={{
|
position: 'sticky',
|
top: 0,
|
backgroundColor: 'background.paper',
|
zIndex: 1000
|
}}>
|
{translate('create.title')}
|
<Box sx={{ position: 'absolute', top: 8, right: 8, zIndex: 1001 }}>
|
<DialogCloseButton onClose={handleClose} />
|
</Box>
|
</DialogTitle>
|
<DialogContent sx={{ mt: 2 }}>
|
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
|
<Form defaultValues={formData}>
|
<Grid container spacing={2}>
|
<Grid item md={3}>
|
<DictSelect
|
label={translate("table.field.asnOrder.type")}
|
value={formData.type}
|
onChange={(e) => handleChange(e.target.value, 'type')}
|
dictTypeCode="sys_order_type"
|
required
|
/>
|
</Grid>
|
<Grid item md={3}>
|
<DictSelect
|
label={translate("table.field.asnOrder.wkType")}
|
value={formData.wkType}
|
onChange={(e) => handleChange(e.target.value, 'wkType')}
|
dictTypeCode="sys_business_type"
|
required
|
/>
|
</Grid>
|
<Grid item md={3}>
|
<TextField
|
label={translate("table.field.asnOrder.poCode")}
|
value={formData.poCode}
|
onChange={(e) => handleChange(e.target.value, 'poCode')}
|
/>
|
</Grid>
|
<Grid item md={3}>
|
<TextField
|
label={translate("table.field.asnOrder.logisNo")}
|
value={formData.logisNo}
|
onChange={(e) => handleChange(e.target.value, 'logisNo')}
|
/>
|
</Grid>
|
|
<Grid item md={3}>
|
{/* <TextField
|
label={translate("table.field.asnOrder.arrTime")}
|
value={formData.arrTime}
|
onChange={(e) => handleChange(e.target.value, 'arrTime')}
|
/> */}
|
<DateInput
|
source="arrTime"
|
label="table.field.asnOrder.arrTime"
|
value={formData.arrTime}
|
onChange={(e) => handleChange(e.target.value, 'arrTime')}
|
/>
|
|
</Grid>
|
</Grid>
|
</Form>
|
</Box>
|
|
<Box sx={{ mt: 2 }}>
|
<Stack direction="row" spacing={2}>
|
<Button variant="contained" onClick={() => setCreateDialog(true)}>新增物料</Button>
|
{/* {asnId !== '' && <ConfirmButton label={'删除'} variant="outlined" color="error" onConfirm={handleDelete} />} */}
|
<ConfirmButton label={'删除'} variant="outlined" color="error" onConfirm={handleDeleteItem} />
|
</Stack>
|
</Box>
|
<Box sx={{ mt: 2 }}>
|
<AsnOrderModalTable tabelData={tabelData} setTableData={setTableData} asnId={asnId} selectedRows={selectedRows} setSelectedRows={setSelectedRows} tableRef={tableRef}></AsnOrderModalTable>
|
</Box>
|
</DialogContent>
|
<DialogActions sx={{ position: 'sticky', bottom: 0, backgroundColor: 'background.paper', zIndex: 1000 }}>
|
<Toolbar sx={{ width: '100%', justifyContent: 'space-between' }} >
|
<Button disabled={disabled} onClick={handleSubmit} variant="contained" startIcon={<SaveIcon />}>
|
{translate('toolbar.confirm')}
|
</Button>
|
</Toolbar>
|
</DialogActions>
|
|
</Dialog>
|
|
<AsnWareModal
|
open={createDialog}
|
setOpen={setCreateDialog}
|
data={tabelData}
|
setData={setTableData}
|
/>
|
</>
|
)
|
}
|
|
export default AsnOrderModal;
|
|
const SelectInputSplrNameEditCell = (params) => {
|
const [formData, setFormData] = useState([{}])
|
useEffect(() => {
|
getOptions();
|
}, []);
|
const getOptions = async () => {
|
const parmas = {
|
"type": "supplier"
|
}
|
const {
|
data: { code, data, msg },
|
} = await request.post("companys/page",parmas);
|
if (code === 200) {
|
setFormData(data.records)
|
console.log(data.records)
|
} else {
|
notify(msg);
|
}
|
}
|
|
return (
|
<Select
|
value={params.value}
|
onChange={(e) =>{
|
params.api.setEditCellValue({
|
id: params.id,
|
field: params.field,
|
value: e.target.value,
|
})
|
// 找到选中的供应商记录
|
const selectedSupplier = formData.find(supplier => supplier.name === e.target.value);
|
|
// 如果找到对应的供应商记录，同时更新splrCode字段
|
if (selectedSupplier) {
|
params.api.setEditCellValue({
|
id: params.id,
|
field: 'splrCode',
|
value: selectedSupplier.id,
|
});
|
}
|
|
}
|
|
}
|
fullWidth
|
|
>
|
{formData.map(e => {
|
return(
|
<MenuItem value={e.name} children={e.name} key={e.id} />
|
);
|
|
})}
|
|
</Select>
|
);
|
};
|
|
const SelectInputSplrCodeEditCell = (params) => {
|
const [formData, setFormData] = useState([{}])
|
useEffect(() => {
|
getOptions();
|
}, []);
|
const getOptions = async () => {
|
const parmas = {
|
"type": "supplier"
|
}
|
const {
|
data: { code, data, msg },
|
} = await request.post("companys/page",parmas);
|
if (code === 200) {
|
setFormData(data.records)
|
console.log(data.records)
|
} else {
|
notify(msg);
|
}
|
}
|
|
return (
|
<Select
|
value={params.value}
|
onChange={(e) =>{
|
params.api.setEditCellValue({
|
id: params.id,
|
field: params.field,
|
value: e.target.value,
|
})
|
const selectedSupplier = formData.find(supplier => supplier.id === e.target.value);
|
|
// 如果找到对应的供应商记录，同时更新splrCode字段
|
if (selectedSupplier) {
|
params.api.setEditCellValue({
|
id: params.id,
|
field: 'splrName',
|
value: selectedSupplier.name,
|
});
|
}
|
}
|
|
}
|
fullWidth
|
|
>
|
{formData.map(e => {
|
return(
|
<MenuItem value={e.id} children={e.name} key={e.id} />
|
);
|
|
})}
|
|
</Select>
|
);
|
};
|
|
|
|
|
const AsnOrderModalTable = ({ tabelData, setTableData, asnId, selectedRows, setSelectedRows, tableRef }) => {
|
const translate = useTranslate();
|
const notify = useNotify();
|
|
const [columns, setColumns] = useState([
|
|
{
|
field: 'maktx',
|
headerName: translate('table.field.asnOrderItem.maktx'),
|
width: 250,
|
editable: false,
|
},
|
{
|
field: 'matnrCode',
|
headerName: translate('table.field.asnOrderItem.matnrCode'),
|
width: 130,
|
editable: false,
|
},
|
{
|
field: 'anfme',
|
headerName: translate('table.field.asnOrderItem.anfme')+"*",
|
type: 'number',
|
minWidth: 100,
|
flex: 1,
|
editable: true,
|
valueFormatter: (val) => val < 0 ? 0 : val,
|
headerClassName: "custom",
|
},
|
{
|
field: 'splrCode',
|
headerName: translate('table.field.asnOrderItem.splrCode')+"*",
|
minWidth: 100,
|
flex: 1,
|
editable: true,
|
renderEditCell: (params) => (
|
<SelectInputSplrCodeEditCell {...params} />
|
),
|
headerClassName: "custom",
|
},
|
{
|
field: 'splrName',
|
headerName: translate('table.field.asnOrderItem.splrName')+"*",
|
minWidth: 100,
|
flex: 1,
|
editable: true,
|
renderEditCell: (params) => (
|
<SelectInputSplrNameEditCell {...params} />
|
),
|
headerClassName: "custom",
|
},
|
// {
|
// field: 'packName',
|
// headerName: translate('table.field.asnOrderItem.packName'),
|
// minWidth: 100,
|
// flex: 1,
|
// editable: true,
|
// },
|
// {
|
// field: 'poDetlId',
|
// headerName: translate('table.field.asnOrderItem.poDetlId'),
|
// minWidth: 100,
|
// flex: 1,
|
// },
|
{
|
field: 'poCode',
|
headerName: translate('table.field.asnOrderItem.poDetlCode')+"*",
|
minWidth: 100,
|
flex: 1,
|
editable: true,
|
headerClassName: "custom",
|
},
|
|
{
|
field: 'stockUnit',
|
headerName: translate('table.field.asnOrderItem.stockUnit'),
|
minWidth: 100,
|
flex: 1,
|
editable: false,
|
},
|
// {
|
// field: 'purQty',
|
// headerName: translate('table.field.asnOrderItem.purQty'),
|
// minWidth: 100,
|
// flex: 1,
|
// editable: true,
|
// },
|
{
|
field: 'purUnit',
|
headerName: translate('table.field.asnOrderItem.purUnit'),
|
minWidth: 100,
|
flex: 1,
|
editable: false,
|
},
|
|
|
|
])
|
|
const action = {
|
field: 'action',
|
headerName: '操作',
|
width: 70,
|
lockPosition: 'left',
|
renderCell: (params) => (
|
<Tooltip title="Delete">
|
<IconButton onClick={() => handleDelete(params.row)}>
|
<Delete />
|
</IconButton>
|
</Tooltip>
|
),
|
|
}
|
|
let cdata = useRef([]);
|
|
|
useEffect(() => {
|
getDynamicFields();
|
}, []);
|
|
useEffect(() => {
|
cdata.current = tabelData
|
}, [tabelData]);
|
|
|
const getDynamicFields = async () => {
|
const {
|
data: { code, data, msg },
|
} = await request.get("/fields/enable/list");
|
if (code === 200) {
|
const cols = data.map(el => ({
|
field: el.fields,
|
headerName: el.fieldsAlise,
|
minWidth: 100,
|
flex: 1,
|
editable: false
|
}))
|
setColumns([...columns, ...cols, action])
|
} else {
|
notify(msg);
|
}
|
}
|
|
|
|
const handleDelete = (row) => {
|
const newData = _.filter(cdata.current, (item) => item.matnrId !== row.matnrId);
|
setTableData(newData);
|
};
|
|
|
const processRowUpdate = (newRow, oldRow) => {
|
const rows = tabelData.map((r) =>
|
r.matnrId === newRow.matnrId ? { ...newRow } : r
|
)
|
setTableData(rows)
|
// setTableData((prevData) =>
|
// prevData.map((r) =>
|
// r.matnrId === newRow.matnrId ? { ...newRow } : r
|
// )
|
|
// );
|
|
return newRow;
|
};
|
|
|
|
const handleSelectionChange = (ids) => {
|
setSelectedRows(ids)
|
|
};
|
|
tableRef.current = useGridApiRef();
|
|
|
return (
|
<div style={{ height: 400, width: '100%' }}>
|
<DataGrid
|
apiRef={tableRef}
|
rows={tabelData}
|
columns={columns}
|
disableRowSelectionOnClick
|
getRowId={(row) => row.matnrId}
|
disableColumnFilter
|
disableColumnSelector
|
disableColumnSorting
|
disableMultipleColumnsSorting
|
processRowUpdate={processRowUpdate}
|
initialState={{
|
pagination: {
|
paginationModel: {
|
pageSize: 25,
|
},
|
},
|
}}
|
pageSizeOptions={[10, 25, 50, 100]}
|
editMode="row"
|
checkboxSelection
|
onRowSelectionModelChange={handleSelectionChange}
|
selectionModel={selectedRows}
|
sx={{
|
'& .MuiDataGrid-cell input': {
|
border: '1px solid #ccc'
|
},
|
}}
|
/>
|
</div>
|
);
|
};
|
