From e5d2c6f2eb8cc33675308d7d33fd4029d5fd2e34 Mon Sep 17 00:00:00 2001
From: skyouc
Date: 星期二, 20 五月 2025 18:42:11 +0800
Subject: [PATCH] 添加全盘出库 修改任务列表，完成按钮显示逻辑
---
rsf-admin/src/page/orders/asnOrder/AsnOrderModal.jsx | 390 +++++++++++++++++++++++++++++++++----------------------
1 files changed, 235 insertions(+), 155 deletions(-)
diff --git a/rsf-admin/src/page/orders/asnOrder/AsnOrderModal.jsx b/rsf-admin/src/page/orders/asnOrder/AsnOrderModal.jsx
index 6c2dc38..1fdb77c 100644
--- a/rsf-admin/src/page/orders/asnOrder/AsnOrderModal.jsx
+++ b/rsf-admin/src/page/orders/asnOrder/AsnOrderModal.jsx
@@ -43,7 +43,6 @@
Select,
MenuItem
-
} from '@mui/material';
import DialogCloseButton from "../../components/DialogCloseButton";
import StatusSelectInput from "../../components/StatusSelectInput";
@@ -54,10 +53,15 @@
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 { DataGrid, useGridApiRef, GRID_DATE_COL_DEF, GRID_DATETIME_COL_DEF, getGridDateOperators, useGridApiContext } from '@mui/x-data-grid';
+import { LocalizationProvider, DatePicker, DateTimePicker } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import DictionarySelect from "../../components/DictionarySelect";
import DictSelect from "../../components/DictSelect";
import "./asnOrder.css";
+import { 'zhCN' as locale } from 'date-fns/locale';
+import { format, } from 'date-fns';
+import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
const AsnOrderModal = (props) => {
const { open, setOpen, asnId, billReload } = props;
@@ -66,9 +70,7 @@
const notify = useNotify();
const refresh = useRefresh();
const [disabled, setDisabled] = useState(false)
-
const [createDialog, setCreateDialog] = useState(false);
-
const tableRef = useRef();
useEffect(() => {
@@ -121,7 +123,7 @@
const setFinally = () => {
const rows = tableRef.current.state.editRows;
for (const key in rows) {
- const find = tabelData.find(item => item.matnrId === +key);
+ const find = tabelData.find(item => item.id === +key);
find.anfme = rows[key].anfme.value;
}
setTableData([...tabelData]);
@@ -182,7 +184,7 @@
setFormData(res.data.data)
} else {
notify(res.data.msg);
- }
+ }
}
const requestGetBody = async () => {
@@ -199,12 +201,12 @@
const handleDeleteItem = () => {
- const newTableData = _.filter(tabelData, (item) => !selectedRows.includes(item.matnrId));
+ const newTableData = _.filter(tabelData, (item) => !selectedRows.includes(item.id));
setTableData(newTableData);
}
return (
- <>
+ <>
<Dialog
open={open}
onClose={handleClose}
@@ -212,8 +214,8 @@
aria-hidden
fullWidth
disableRestoreFocus
- maxWidth="lg" // 'xs' | 'sm' | 'md' | 'lg' | 'xl'
- >
+ maxWidth="xl" // 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+ >
<DialogTitle id="form-dialog-title" sx={{
position: 'sticky',
top: 0,
@@ -235,6 +237,7 @@
value={formData.type}
onChange={(e) => handleChange(e.target.value, 'type')}
dictTypeCode="sys_order_type"
+ group='1'
required
/>
</Grid>
@@ -242,39 +245,35 @@
<DictSelect
label={translate("table.field.asnOrder.wkType")}
value={formData.wkType}
+ group='1'
onChange={(e) => handleChange(e.target.value, 'wkType')}
dictTypeCode="sys_business_type"
required
/>
</Grid>
- <Grid item md={3}>
+ <Grid item md={2}>
<TextField
label={translate("table.field.asnOrder.poCode")}
value={formData.poCode}
+ variant="filled"
onChange={(e) => handleChange(e.target.value, 'poCode')}
/>
</Grid>
- <Grid item md={3}>
+ <Grid item md={2}>
<TextField
label={translate("table.field.asnOrder.logisNo")}
value={formData.logisNo}
+ variant="filled"
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>
@@ -284,7 +283,7 @@
<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} />
+ <ConfirmButton label={'ra.action.delete'} variant="outlined" color="error" onConfirm={handleDeleteItem} />
</Stack>
</Box>
<Box sx={{ mt: 2 }}>
@@ -298,9 +297,7 @@
</Button>
</Toolbar>
</DialogActions>
-
</Dialog>
-
<AsnWareModal
open={createDialog}
setOpen={setCreateDialog}
@@ -313,119 +310,184 @@
export default AsnOrderModal;
+
+const dateColumnType = {
+ ...GRID_DATE_COL_DEF,
+ resizable: false,
+ renderEditCell: (params) => {
+ return <GridEditDateCell {...params} />;
+ },
+ // filterOperators: getGridDateOperators(false).map((item) => ({
+ // ...item,
+ // InputComponent: GridFilterDateInput,
+ // InputComponentProps: { showTime: false },
+ // })),
+ // valueFormatter: (value) => {
+ // if (value) {
+ // return format(value, 'yyyy-MM-dd', { locale });
+ // }
+ // return '';
+ // },
+}
+
const SelectInputSplrNameEditCell = (params) => {
const [formData, setFormData] = useState([{}])
useEffect(() => {
getOptions();
}, []);
- const getOptions = async () => {
- const parmas = {
- "type": "supplier"
+ const getOptions = async () => {
+ const parmas = {
+ "type": "supplier"
}
const {
data: { code, data, msg },
- } = await request.post("companys/page",parmas);
+ } = await request.post("companys/page", parmas);
if (code === 200) {
setFormData(data.records)
- console.log(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,
- });
- }
+ 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);
- }
-
- }
- fullWidth
-
- >
- {formData.map(e => {
- return(
- <MenuItem value={e.name} children={e.name} key={e.id} />
- );
-
- })}
-
- </Select>
+ // 濡傛灉鎵惧埌瀵瑰簲鐨勪緵搴斿晢璁板綍锛屽悓鏃舵洿鏂皊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 GridEditDateCell = ({ id, field, value, colDef, hasFocus }) => {
+ const apiRef = useGridApiContext();
+ const inputRef = React.useRef(null);
+ const Component = colDef.type === 'dateTime' ? DateTimePicker : DatePicker;
+
+ const handleChange = (newValue) => {
+ apiRef.current.setEditCellValue({ id, field, value: newValue });
+ };
+
+ // useEnhancedEffect(() => {
+ // if (hasFocus) {
+ // inputRef.current.focus();
+ // }
+ // }, [hasFocus]);
+
+ return (
+ <LocalizationProvider dateAdapter={AdapterDayjs}>
+ <DemoContainer components={['DatePicker']}>
+ <DatePicker label="Basic date picker" />
+ </DemoContainer>
+ </LocalizationProvider>
+ // <Component
+ // value={value}
+ // autoFocus
+ // onChange={handleChange}
+ // slotProps={{
+ // textField: {
+ // inputRef,
+ // variant: 'standard',
+ // fullWidth: true,
+ // sx: {
+ // padding: '0 9px',
+ // justifyContent: 'center',
+ // },
+ // InputProps: {
+ // disableUnderline: true,
+ // sx: { fontSize: 'inherit' },
+ // },
+ // },
+ // }}
+ // />
+ );
+}
+
+
+const SelectInputSplrCodeEditCell = (params) => {
const [formData, setFormData] = useState([{}])
useEffect(() => {
getOptions();
}, []);
- const getOptions = async () => {
- const parmas = {
- "type": "supplier"
+ const getOptions = async () => {
+ const parmas = {
+ "type": "supplier"
}
const {
data: { code, data, msg },
- } = await request.post("companys/page",parmas);
+ } = await request.post("companys/page", parmas);
if (code === 200) {
setFormData(data.records)
- console.log(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) {
+ value={params.value}
+ onChange={(e) => {
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>
+ 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>
);
- };
+};
@@ -435,13 +497,6 @@
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'),
@@ -449,8 +504,14 @@
editable: false,
},
{
+ field: 'maktx',
+ headerName: translate('table.field.asnOrderItem.maktx'),
+ width: 250,
+ editable: false,
+ },
+ {
field: 'anfme',
- headerName: translate('table.field.asnOrderItem.anfme')+"*",
+ headerName: translate('table.field.asnOrderItem.anfme') + "*",
type: 'number',
minWidth: 100,
flex: 1,
@@ -458,20 +519,20 @@
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: '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')+"*",
+ headerName: translate('table.field.asnOrderItem.splrName') + "*",
minWidth: 100,
flex: 1,
editable: true,
@@ -480,27 +541,32 @@
),
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')+"*",
+ field: 'platItemId',
+ headerName: translate('table.field.asnOrderItem.platItemId') + "*",
minWidth: 100,
flex: 1,
editable: true,
headerClassName: "custom",
},
+ {
+ field: 'splrBatch',
+ headerName: translate('table.field.asnOrderItem.splrBatch'),
+ minWidth: 100,
+ flex: 1,
+ editable: true,
+ headerClassName: "custom",
+
+ },
+
+ // {
+ // field: 'poCode',
+ // headerName: translate('table.field.asnOrderItem.poDetlCode') + "*",
+ // minWidth: 100,
+ // flex: 1,
+ // editable: true,
+ // headerClassName: "custom",
+ // },
{
field: 'stockUnit',
@@ -510,22 +576,28 @@
editable: false,
},
// {
+ // field: 'prodTime',
+ // headerName: translate('table.field.asnOrderItem.prodTime'),
+ // minWidth: 200,
+ // flex: 1,
+ // ...dateColumnType,
+ // editable: true,
+ // headerClassName: "custom",
+ // },
+ // {
// 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,
- },
-
-
-
+ // {
+ // field: 'purUnit',
+ // headerName: translate('table.field.asnOrderItem.purUnit'),
+ // minWidth: 100,
+ // flex: 1,
+ // editable: false,
+ // },
])
const action = {
@@ -540,7 +612,6 @@
</IconButton>
</Tooltip>
),
-
}
let cdata = useRef([]);
@@ -561,11 +632,21 @@
} = await request.get("/fields/enable/list");
if (code === 200) {
const cols = data.map(el => ({
- field: el.fields,
+ field: el.fields,
+ valueGetter: (value, row) => {
+ if (value != null && value != undefined) {
+ return value;
+ }
+ if (row.extendFields == null ||row.extendFields[el.fields] == null) {
+ return ''
+ } else {
+ return `${row.extendFields[el.fields] == null ? '' : row.extendFields[el.fields]}`;
+ }
+ },
headerName: el.fieldsAlise,
minWidth: 100,
flex: 1,
- editable: false
+ editable: true
}))
setColumns([...columns, ...cols, action])
} else {
@@ -573,17 +654,15 @@
}
}
-
-
const handleDelete = (row) => {
- const newData = _.filter(cdata.current, (item) => item.matnrId !== row.matnrId);
+ const newData = _.filter(cdata.current, (item) => item.id !== row.id);
setTableData(newData);
};
const processRowUpdate = (newRow, oldRow) => {
const rows = tabelData.map((r) =>
- r.matnrId === newRow.matnrId ? { ...newRow } : r
+ r.id === newRow.id ? { ...newRow } : r
)
setTableData(rows)
// setTableData((prevData) =>
@@ -597,8 +676,9 @@
};
-
const handleSelectionChange = (ids) => {
+ console.log(ids);
+
setSelectedRows(ids)
};
@@ -613,7 +693,7 @@
rows={tabelData}
columns={columns}
disableRowSelectionOnClick
- getRowId={(row) => row.matnrId}
+ getRowId={(row) => row.id}
disableColumnFilter
disableColumnSelector
disableColumnSorting
--
Gitblit v1.9.1