import React, { useState, useRef, useEffect, useMemo } from "react";
|
import { useWatch, useFormContext } from "react-hook-form";
|
import {
|
CreateBase,
|
useTranslate,
|
TextInput,
|
NumberInput,
|
BooleanInput,
|
DateInput,
|
SaveButton,
|
SelectInput,
|
ReferenceInput,
|
ReferenceArrayInput,
|
AutocompleteInput,
|
Toolbar,
|
required,
|
useDataProvider,
|
useNotify,
|
Form,
|
useCreateController,
|
useListContext,
|
useRefresh,
|
Edit,
|
useRedirect,
|
} 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,
|
Typography,
|
Card,
|
Autocomplete,
|
} from '@mui/material';
|
import { EDIT_MODE, REFERENCE_INPUT_PAGESIZE } from '@/config/setting';
|
import ConfirmButton from "../../components/ConfirmButton";
|
import TreeSelectInput from "@/page/components/TreeSelectInput";
|
import { DataGrid, useGridApiRef } from '@mui/x-data-grid';
|
import DictSelect from "../../components/DictSelect";
|
import AddIcon from '@mui/icons-material/Add';
|
import DeleteIcon from '@mui/icons-material/Delete';
|
import request from '@/utils/request';
|
import LocItemInfoModal from "../components/locItemInfoModal";
|
import { Delete } from '@mui/icons-material';
|
import _, { set } from 'lodash';
|
import StaSelect from "../components/StaSelect";
|
import { redirect } from "react-router";
|
import { number } from "prop-types";
|
|
const StockTransferList = () => {
|
|
const [createDialog, setCreateDialog] = useState(false);
|
const [tabelData, setTableData] = useState([]);
|
const [selectedRows, setSelectedRows] = useState([]);
|
const [sta, setSta] = useState("");
|
const notify = useNotify();
|
const tableRef = useRef();
|
tableRef.current = useGridApiRef();
|
const translate = useTranslate();
|
|
const [orgLoc, setOrgLoc] = useState("");
|
const [tarLoc, setTarLoc] = useState("");
|
const [tarLocList, setTarLocList] = useState([]);
|
|
useEffect(() => {
|
if (orgLoc === "" || orgLoc.length < 7) {
|
return;
|
}
|
selectLocItem().then((is) => {
|
if (is) {
|
selectAreaNoUse();
|
}
|
|
});
|
},[orgLoc])
|
|
|
const selectLocItem = async() =>{
|
const {
|
data: { code, data, msg },
|
} = await request.post("/locItem/useO/page",{
|
locCode: orgLoc,
|
current: 1,
|
pageSize: 100,
|
orderBy: "create_time desc"
|
});
|
if (code === 200) {
|
if(data.total !== 0) {
|
setTableData(data.records);
|
return true;
|
}
|
|
}
|
return false;
|
}
|
|
const selectAreaNoUse = async() =>{
|
const {
|
data: { code, data, msg },
|
} = await request.post("/loc/areaNoUse/list",{
|
locCode: orgLoc
|
});
|
if (code === 200) {
|
const newData = data.map((item) => {
|
return {
|
label: item,
|
id: item
|
}
|
|
})
|
setTarLocList(newData);
|
}
|
|
}
|
|
|
const handleDeleteItem = () => {
|
const newTableData = _.filter(tabelData, (item) => !selectedRows.includes(item.matnrId));
|
setTableData(newTableData);
|
}
|
|
// 添加一个处理新数据的函数，设置outQty默认值
|
const handleSetData = (newData) => {
|
// 为新添加的数据设置outQty默认值为anfme的值
|
const dataWithDefaultQty = newData.map(item => ({
|
...item,
|
outQty: item.outQty || item.anfme // 如果outQty已存在则保留，否则使用anfme的值
|
}));
|
setTableData([...tabelData, ...dataWithDefaultQty]);
|
};
|
|
|
|
return (
|
<>
|
<Card sx={{ p: 2, mb: 2, mt: 2 }}>
|
<Form>
|
<Grid container spacing={2}>
|
<Grid item xs={12}>
|
<Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 1 }}>
|
<Typography variant="h6" >
|
{translate('table.field.stockTransfer.inputLoc')}
|
</Typography>
|
<Box sx={{ display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 1 }}>
|
<Stack direction='row' spacing={2} minWidth={200}>
|
<TextField
|
label={translate("table.field.stockTransfer.orgLoc")}
|
onChange={(event) => setOrgLoc(event.target.value)}
|
/>
|
</Stack>
|
<>{"——"}</>
|
<Stack direction='row' spacing={2} minWidth={200}>
|
<Autocomplete
|
disablePortal
|
options={tarLocList}
|
renderInput={(params) => (
|
<TextField {...params} label={translate("table.field.stockTransfer.tarLoc")} />
|
)}
|
onChange={(event, value) => setTarLoc(value)}
|
/>
|
</Stack>
|
</Box>
|
|
<Stack direction='row' spacing={2} minWidth={200}>
|
<SubmitButton
|
orgLoc={orgLoc}
|
tarLoc={tarLoc}
|
tabelData={tabelData}
|
/>
|
</Stack>
|
</Box>
|
</Grid>
|
</Grid>
|
</Form>
|
</Card>
|
<Card sx={{ mb: 2 }}>
|
<Box sx={{}}>
|
<ModalTable tabelData={tabelData} setTableData={setTableData} selectedRows={selectedRows} setSelectedRows={setSelectedRows} tableRef={tableRef}></ModalTable>
|
</Box>
|
</Card>
|
<LocItemInfoModal
|
open={createDialog}
|
setOpen={setCreateDialog}
|
data={tabelData}
|
setData={handleSetData}
|
/>
|
|
</>
|
)
|
}
|
|
export default StockTransferList;
|
|
const SubmitButton = (props) => {
|
const translate = useTranslate();
|
const notify = useNotify();
|
const redirect = useRedirect();
|
const refresh = useRefresh();
|
const { orgLoc, tarLoc, tabelData } = props;
|
const move = () => {
|
if (orgLoc === "" || orgLoc === undefined || orgLoc === null) {
|
notify("请输入源库位");
|
return;
|
}
|
// if (tarLoc === "" || tarLoc === undefined || tarLoc === null) {
|
// notify("请输入目标库位");
|
// return;
|
// }
|
if (tabelData.length === 0) {
|
notify("源库位明细无，请检查库位状态");
|
return;
|
}
|
http(orgLoc, tarLoc?.id)
|
}
|
const http = async (orgLoc, tarLoc) => {
|
const { data: { code, data, msg } } = await request.post(`/locItem/move/task`, { orgLoc, tarLoc });
|
if (code === 200) {
|
notify(msg);
|
refresh()
|
redirect("/task")
|
} else {
|
notify(msg);
|
}
|
}
|
return (
|
<ConfirmButton
|
variant="contained"
|
color="primary"
|
onConfirm={move}
|
label={"table.field.outBound.createTask"}
|
>
|
</ConfirmButton>
|
)
|
|
}
|
|
const ModalTable = ({ tabelData, setTableData, selectedRows, setSelectedRows, tableRef }) => {
|
const translate = useTranslate();
|
const notify = useNotify();
|
|
const [columns, setColumns] = useState([
|
{
|
field: 'locCode',
|
headerName: translate('table.field.locItem.locCode'),
|
width: 100,
|
editable: false,
|
},
|
{
|
field: 'anfme',
|
headerName: translate('table.field.locItem.anfme'),
|
type: 'number',
|
width: 100,
|
editable: false,
|
},
|
// {
|
// field: 'workQty',
|
// headerName: translate('table.field.locItem.workQty'),
|
// width: 100,
|
// type: 'number',
|
// editable: false,
|
// },
|
{
|
field: 'locCode',
|
headerName: translate('table.field.locItem.locCode'),
|
width: 100,
|
editable: false,
|
},
|
{
|
field: 'matnrCode',
|
headerName: translate('table.field.locItem.matnrCode'),
|
width: 130,
|
editable: false,
|
},
|
{
|
field: 'maktx',
|
headerName: translate('table.field.locItem.maktx'),
|
width: 250,
|
editable: false,
|
},
|
{
|
field: 'batch',
|
headerName: translate('table.field.locItem.batch'),
|
width: 250,
|
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])
|
} else {
|
notify(msg);
|
}
|
}
|
|
|
const handleDelete = (row) => {
|
const newData = _.filter(cdata.current, (item) => item.id !== row.id);
|
setTableData(newData);
|
};
|
|
|
const processRowUpdate = (newRow, oldRow) => {
|
const rows = tabelData.map((r) =>
|
r.id === newRow.id ? { ...newRow } : r
|
)
|
setTableData(rows)
|
return newRow;
|
};
|
|
const handleSelectionChange = (ids) => {
|
setSelectedRows(ids)
|
};
|
|
tableRef.current = useGridApiRef();
|
|
return (
|
<div style={{ height: 500, width: '100%' }}>
|
<DataGrid
|
apiRef={tableRef}
|
rows={tabelData}
|
columns={columns}
|
checkboxSelection = {false}
|
disableRowSelectionOnClick
|
getRowId={(row) => row.matnrId ? row.matnrId : row.id}
|
disableColumnFilter
|
disableColumnSelector
|
disableColumnSorting
|
disableMultipleColumnsSorting
|
processRowUpdate={processRowUpdate}
|
initialState={{
|
pagination: {
|
paginationModel: {
|
pageSize: 25,
|
},
|
},
|
}}
|
pageSizeOptions={[10, 25, 50, 100]}
|
editMode="row"
|
onRowSelectionModelChange={handleSelectionChange}
|
selectionModel={selectedRows}
|
sx={{
|
'& .MuiDataGrid-cell input': {
|
border: '1px solid #ccc'
|
},
|
}}
|
/>
|
</div>
|
);
|
};
|
