From c3bd7262ff89c7594ec368f76ea910e6212769af Mon Sep 17 00:00:00 2001
From: skyouc
Date: 星期二, 29 四月 2025 13:53:03 +0800
Subject: [PATCH] 1. 出库单新增修改优化
---
rsf-admin/src/page/orders/outStock/AsnOrderModal.jsx | 643 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 643 insertions(+), 0 deletions(-)
diff --git a/rsf-admin/src/page/orders/outStock/AsnOrderModal.jsx b/rsf-admin/src/page/orders/outStock/AsnOrderModal.jsx
new file mode 100644
index 0000000..6c2dc38
--- /dev/null
+++ b/rsf-admin/src/page/orders/outStock/AsnOrderModal.jsx
@@ -0,0 +1,643 @@
+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);
+
+ // 濡傛灉鎵惧埌瀵瑰簲鐨勪緵搴斿晢璁板綍锛屽悓鏃舵洿鏂皊plrCode瀛楁
+ 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);
+
+ // 濡傛灉鎵惧埌瀵瑰簲鐨勪緵搴斿晢璁板綍锛屽悓鏃舵洿鏂皊plrCode瀛楁
+ 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>
+ );
+};
+
--
Gitblit v1.9.1