| | |
| | | import _ from 'lodash'; |
| | | import { DataGrid } from '@mui/x-data-grid'; |
| | | import DictionarySelect from "../components/DictionarySelect"; |
| | | import DictSelect from "../components/DictSelect"; |
| | | |
| | | const AsnOrderModal = (props) => { |
| | | const { open, setOpen, asnId } = props; |
| | |
| | | const translate = useTranslate(); |
| | | const notify = useNotify(); |
| | | const refresh = useRefresh(); |
| | | const [disabled, setDisabled] = useState(false) |
| | | |
| | | const [createDialog, setCreateDialog] = useState(false); |
| | | |
| | | useEffect(() => { |
| | |
| | | if (reason !== "backdropClick") { |
| | | setOpen(false); |
| | | refresh(); |
| | | setFormData({ type: '' }) |
| | | setFormData({ type: '', wkType: '' }) |
| | | setTableData([]) |
| | | } |
| | | }; |
| | | |
| | | const [formData, setFormData] = useState({ |
| | | type: '', |
| | | wkType: '', |
| | | }); |
| | | |
| | | const [tabelData, setTableData] = useState([]); |
| | |
| | | }; |
| | | |
| | | const handleSubmit = async () => { |
| | | 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); |
| | |
| | | notify(res.data.msg); |
| | | } |
| | | } else { |
| | | setOpen(false); |
| | | const parmas = { |
| | | "orders": formData, |
| | | "items": tabelData, |
| | | } |
| | | const res = await request.post(`/asnOrder/items/update`, parmas); |
| | | if (res?.data?.code === 200) { |
| | | setOpen(false); |
| | | refresh(); |
| | | } else { |
| | | notify(res.data.msg); |
| | | } |
| | | } |
| | | setDisabled(false) |
| | | |
| | | }; |
| | | |
| | |
| | | } |
| | | } |
| | | |
| | | const requestSetHead = async () => { |
| | | if (asnId !== 0) { |
| | | const res = await request.post(`/asnOrder/update`, { ...formData }); |
| | | refresh() |
| | | } |
| | | } |
| | | const [selectedRows, setSelectedRows] = useState([]); |
| | | |
| | | const handleDeleteItem = () => { |
| | | const newTableData = _.filter(tabelData, (item) => !selectedRows.includes(item.matnrId)); |
| | | setTableData(newTableData); |
| | | } |
| | | |
| | | return ( |
| | | <> |
| | |
| | | <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}> |
| | | <Form> |
| | | <Grid container spacing={2}> |
| | | <Grid item xs={4}> |
| | | <DictionarySelect |
| | | <Grid item md={4}> |
| | | <DictSelect |
| | | label={translate("table.field.asnOrder.type")} |
| | | name="type" |
| | | value={formData.type} |
| | | onChange={(e) => handleChange(+e.target.value, 'type')} |
| | | size="small" |
| | | dictTypeCode="sys_bill_type" |
| | | onChange={(e) => handleChange(e.target.value, 'type')} |
| | | dictTypeCode="sys_order_type" |
| | | required |
| | | /> |
| | | |
| | | |
| | | </Grid> |
| | | |
| | | {/* <Grid item xs={4}> |
| | | <TextField |
| | | label={translate('table.field.asnOrder.wkType')} |
| | | name="wkType" |
| | | value={formData.wkType} |
| | | onChange={handleChange} |
| | | variant="outlined" |
| | | size="small" |
| | | /> |
| | | </Grid> */} |
| | | <Grid item md={4}> |
| | | <DictSelect |
| | | label={translate("table.field.asnOrder.wkType")} |
| | | value={formData.wkType} |
| | | onChange={(e) => handleChange(e.target.value, 'wkType')} |
| | | dictTypeCode="sys_business_type" |
| | | required |
| | | /> |
| | | </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} />} |
| | | {/* {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} ></AsnOrderModalTable> |
| | | <AsnOrderModalTable tabelData={tabelData} setTableData={setTableData} asnId={asnId} selectedRows={selectedRows} setSelectedRows={setSelectedRows} ></AsnOrderModalTable> |
| | | </Box> |
| | | </DialogContent> |
| | | <DialogActions sx={{ position: 'sticky', bottom: 0, backgroundColor: 'background.paper', zIndex: 1000 }}> |
| | | <Toolbar sx={{ width: '100%', justifyContent: 'space-between' }} > |
| | | <Button onClick={handleSubmit} variant="contained" startIcon={<SaveIcon />}> |
| | | <Button disabled={disabled} onClick={handleSubmit} variant="contained" startIcon={<SaveIcon />}> |
| | | {translate('toolbar.confirm')} |
| | | </Button> |
| | | </Toolbar> |
| | |
| | | |
| | | export default AsnOrderModal; |
| | | |
| | | const AsnOrderModalTable = ({ tabelData, setTableData, asnId }) => { |
| | | const AsnOrderModalTable = ({ tabelData, setTableData, asnId, selectedRows, setSelectedRows }) => { |
| | | const translate = useTranslate(); |
| | | const notify = useNotify(); |
| | | |
| | | const columns = [ |
| | | { |
| | | field: 'action', |
| | | headerName: '操作', |
| | | minWidth: 100, |
| | | sticky: 'right', |
| | | flex: 1, |
| | | renderCell: (params) => ( |
| | | <Tooltip title="Delete"> |
| | | <IconButton onClick={() => handleDelete(params.row)}> |
| | | <Delete /> |
| | | </IconButton> |
| | | </Tooltip> |
| | | ), |
| | | }, |
| | | { |
| | | field: 'matnrId', |
| | | headerName: translate('table.field.asnOrderItem.matnrId'), |
| | | minWidth: 100, |
| | | flex: 1, |
| | | editable: false, |
| | | }, |
| | | const [columns, setColumns] = useState([ |
| | | |
| | | { |
| | | field: 'maktx', |
| | | headerName: translate('table.field.asnOrderItem.maktx'), |
| | | minWidth: 100, |
| | | flex: 1, |
| | | editable: true, |
| | | width: 250, |
| | | editable: false, |
| | | }, |
| | | { |
| | | field: 'poDetlId', |
| | | headerName: translate('table.field.asnOrderItem.poDetlId'), |
| | | minWidth: 100, |
| | | flex: 1, |
| | | }, |
| | | { |
| | | field: 'poDetlCode', |
| | | headerName: translate('table.field.asnOrderItem.poDetlCode'), |
| | | minWidth: 100, |
| | | flex: 1, |
| | | field: 'maktxCode', |
| | | headerName: translate('table.field.asnOrderItem.maktxCode'), |
| | | width: 130, |
| | | editable: false, |
| | | }, |
| | | { |
| | | field: 'anfme', |
| | | headerName: translate('table.field.asnOrderItem.anfme'), |
| | | minWidth: 100, |
| | | flex: 1, |
| | | editable: true, |
| | | }, |
| | | { |
| | | field: 'stockUnit', |
| | | headerName: translate('table.field.asnOrderItem.stockUnit'), |
| | | minWidth: 100, |
| | | flex: 1, |
| | | editable: true, |
| | | }, |
| | | { |
| | | 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: true, |
| | |
| | | flex: 1, |
| | | editable: true, |
| | | }, |
| | | // { |
| | | // 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: 'qrcode', |
| | | headerName: translate('table.field.asnOrderItem.qrcode'), |
| | | field: 'platItemId', |
| | | headerName: translate('table.field.asnOrderItem.platItemId'), |
| | | minWidth: 100, |
| | | flex: 1, |
| | | editable: true, |
| | | }, |
| | | { |
| | | field: 'barcode', |
| | | headerName: translate('table.field.asnOrderItem.barcode'), |
| | | minWidth: 100, |
| | | flex: 1, |
| | | editable: true, |
| | | }, |
| | | { |
| | | field: 'packName', |
| | | headerName: translate('table.field.asnOrderItem.packName'), |
| | | minWidth: 100, |
| | | flex: 1, |
| | | editable: true, |
| | | }, |
| | | |
| | | ]; |
| | | { |
| | | 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 requestSetBody = async (row) => { |
| | | if (asnId !== 0) { |
| | | const res = await request.post(`/asnOrderItem/update`, row); |
| | | } |
| | | |
| | | |
| | | ]) |
| | | |
| | | 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(tabelData, (item) => item.matnrId !== row.matnrId); |
| | | const newData = _.filter(cdata.current, (item) => item.matnrId !== row.matnrId); |
| | | setTableData(newData); |
| | | }; |
| | | |
| | |
| | | ) |
| | | ); |
| | | |
| | | requestSetBody(newRow) |
| | | return newRow; |
| | | }; |
| | | |
| | | |
| | | |
| | | const handleSelectionChange = (ids) => { |
| | | setSelectedRows(ids) |
| | | |
| | | }; |
| | | |
| | | return ( |
| | | <div style={{ height: 400, width: '100%' }}> |
| | |
| | | disableColumnSorting |
| | | disableMultipleColumnsSorting |
| | | processRowUpdate={processRowUpdate} |
| | | autoPageSize |
| | | editMode="row" |
| | | checkboxSelection |
| | | onRowSelectionModelChange={handleSelectionChange} |
| | | selectionModel={selectedRows} |
| | | sx={{ |
| | | '& .MuiDataGrid-cell input': { |
| | | border: '1px solid #ccc' |
| | | }, |
| | | }} |
| | | /> |
| | | </div> |
| | | ); |