New file |
| | |
| | | import React, { useState, useEffect, useCallback, useRef } from "react"; |
| | | import { |
| | | Dialog, |
| | | DialogActions, |
| | | DialogContent, |
| | | DialogTitle, |
| | | Stack, |
| | | Grid, |
| | | TextField, |
| | | Box, |
| | | Button, |
| | | Paper, |
| | | styled, |
| | | RadioGroup, |
| | | Radio, |
| | | FormControlLabel, |
| | | } from '@mui/material'; |
| | | import DialogCloseButton from "../components/DialogCloseButton"; |
| | | import ConfirmButton from "../components/ConfirmButton"; |
| | | import { useTranslate, useNotify, useRefresh } from 'react-admin'; |
| | | import request from '@/utils/request'; |
| | | import { DataGrid, useGridApiRef } from '@mui/x-data-grid'; |
| | | import SaveIcon from '@mui/icons-material/Save'; |
| | | import TreeSelectInput from "@/page/components/TreeSelectInput"; |
| | | import { set, throttle } from 'lodash'; |
| | | |
| | | const InspectModal = (props) => { |
| | | const { open, setOpen, ispectId } = props; |
| | | |
| | | const translate = useTranslate(); |
| | | const notify = useNotify(); |
| | | const refresh = useRefresh(); |
| | | |
| | | const handleClose = (event, reason) => { |
| | | if (reason !== "backdropClick") { |
| | | setOpen(false); |
| | | } |
| | | }; |
| | | |
| | | const [formData, setFormData] = useState({ |
| | | code: '' |
| | | }); |
| | | |
| | | const [tableData, setTableData] = useState([]); |
| | | const [selectedRows, setSelectedRows] = useState([]); |
| | | |
| | | const handleChange = (e) => { |
| | | const { name, value } = e.target; |
| | | setFormData((prevData) => ({ |
| | | ...prevData, |
| | | [name]: value |
| | | })); |
| | | }; |
| | | |
| | | const reset = () => { |
| | | setFormData({ |
| | | code: '' |
| | | }) |
| | | } |
| | | |
| | | const handleSubmit = async () => { |
| | | const data = tableData.filter(el => el.safeQty == 0) |
| | | console.log(data); |
| | | if (data.length) { |
| | | // const { data: { code, data, msg } } = await request.post(`/qlyInspect/selected`, { ids: selectedRows }); |
| | | |
| | | // if (code === 200) { |
| | | // notify(msg); |
| | | // refresh() |
| | | // } else { |
| | | // notify(msg); |
| | | // } |
| | | } |
| | | |
| | | setOpen(false); |
| | | reset(); |
| | | }; |
| | | |
| | | useEffect(() => { |
| | | getData(); |
| | | }, [open]); |
| | | |
| | | |
| | | const getData = async () => { |
| | | const res = await request.post(`/qlyIsptItem/page`, { ispectId, isptStatus: '0' }); |
| | | if (res?.data?.code === 200) { |
| | | const data = res.data.data.records.map(item => { |
| | | return { |
| | | ...item, |
| | | isptResult: '' |
| | | } |
| | | }) |
| | | setTableData(data); |
| | | } else { |
| | | notify(res.data.msg); |
| | | } |
| | | }; |
| | | |
| | | |
| | | |
| | | const handleSearch = () => { |
| | | getData() |
| | | }; |
| | | |
| | | const batchQualified = () => { |
| | | if (selectedRows.length) { |
| | | console.log(selectedRows); |
| | | |
| | | } |
| | | getData() |
| | | } |
| | | |
| | | const batchUnQualified = () => { |
| | | console.log(selectedRows); |
| | | getData() |
| | | } |
| | | |
| | | return ( |
| | | <Dialog |
| | | open={open} |
| | | onClose={handleClose} |
| | | aria-labelledby="form-dialog-title" |
| | | fullWidth |
| | | disableRestoreFocus |
| | | maxWidth="lg" |
| | | > |
| | | <DialogTitle id="form-dialog-title" sx={{ |
| | | position: 'sticky', |
| | | top: 0, |
| | | backgroundColor: 'background.paper', |
| | | zIndex: 1000 |
| | | }}> |
| | | 执行质检 |
| | | <Box sx={{ position: 'absolute', top: 8, right: 8, zIndex: 1001 }}> |
| | | <DialogCloseButton onClose={handleClose} /> |
| | | </Box> |
| | | </DialogTitle> |
| | | <DialogContent sx={{ mt: 2 }}> |
| | | {/* <Box component="form" onSubmit={handleSubmit} sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}> |
| | | <Grid container spacing={2}> |
| | | <Grid item md={4}> |
| | | <TextField |
| | | label={translate('table.field.asnOrder.code')} |
| | | name="code" |
| | | value={formData.code} |
| | | onChange={handleChange} |
| | | size="small" |
| | | /> |
| | | </Grid> |
| | | </Grid> |
| | | </Box> */} |
| | | <Box sx={{ mt: 2 }}> |
| | | {/* <Stack direction="row" spacing={2}> |
| | | <Button variant="contained" onClick={handleSearch}>搜索</Button> |
| | | </Stack> */} |
| | | |
| | | <Stack direction="row" spacing={2}> |
| | | <Button variant="contained" onClick={batchQualified}>批量合格</Button> |
| | | <Button variant="contained" color="error" onClick={batchUnQualified}>批量不合格</Button> |
| | | </Stack> |
| | | </Box> |
| | | <Box sx={{ mt: 2, height: 400, width: '100%' }}> |
| | | <InspectModalTable |
| | | tableData={tableData} |
| | | setTableData={setTableData} |
| | | selectedRows={selectedRows} |
| | | setSelectedRows={setSelectedRows} |
| | | /> |
| | | </Box> |
| | | </DialogContent> |
| | | <DialogActions sx={{ position: 'sticky', bottom: 0, backgroundColor: 'background.paper', zIndex: 1000 }}> |
| | | <Box sx={{ width: '100%', display: 'flex', justifyContent: 'space-between' }}> |
| | | <Button onClick={handleSubmit} variant="contained" startIcon={<SaveIcon />}> |
| | | {translate('toolbar.confirm')} |
| | | </Button> |
| | | </Box> |
| | | </DialogActions> |
| | | </Dialog> |
| | | ); |
| | | }; |
| | | |
| | | export default InspectModal; |
| | | |
| | | const InspectModalTable = ({ tableData, setTableData, selectedRows, setSelectedRows }) => { |
| | | const translate = useTranslate(); |
| | | const notify = useNotify(); |
| | | const apiRef = useGridApiRef(); |
| | | |
| | | const handleSelectionChange = (ids) => { |
| | | setSelectedRows(ids) |
| | | |
| | | }; |
| | | |
| | | |
| | | |
| | | const [columns, setColumns] = useState([ |
| | | // { field: 'id', headerName: 'ID', width: 100 }, |
| | | { field: 'maktx', headerName: translate('table.field.qlyIsptItem.maktx'), width: 200 }, |
| | | { field: 'matnrCode', headerName: translate('table.field.qlyIsptItem.matnrCode') }, |
| | | { field: 'splrName', headerName: translate('table.field.qlyIsptItem.splrName') }, |
| | | { field: 'splrBatch', headerName: translate('table.field.qlyIsptItem.splrBatch') }, |
| | | { field: 'stockBatch', headerName: translate('table.field.qlyIsptItem.stockBatch') }, |
| | | { field: 'rcptQty', headerName: translate('table.field.qlyIsptItem.rcptQty') }, |
| | | { |
| | | field: 'safeQty', headerName: translate('table.field.qlyIsptItem.safeQty'), editable: true, type: 'number', |
| | | renderHeader: () => ( |
| | | <strong> |
| | | {translate('table.field.qlyIsptItem.safeQty')} |
| | | <span style={{ color: '#d32f2f' }}> |
| | | * |
| | | </span> |
| | | </strong> |
| | | ), |
| | | }, |
| | | { |
| | | field: 'isptResult', headerName: translate('table.field.qlyIsptItem.isptResult'), width: 150, type: 'singleSelect', |
| | | editable: true, valueOptions: [{ value: '1', label: '合格' }, { value: '2', label: '不合格' }, { value: '3', label: '待定' }, { value: '4', label: '降级使用' }], |
| | | }, |
| | | |
| | | |
| | | ]) |
| | | |
| | | const processRowUpdate = (newRow, oldRow) => { |
| | | setTableData((prevData) => |
| | | prevData.map((r) => |
| | | r.id === newRow.id ? { ...newRow } : r |
| | | ) |
| | | ); |
| | | |
| | | return newRow; |
| | | }; |
| | | |
| | | |
| | | return ( |
| | | <div style={{ height: 400, width: '100%' }}> |
| | | <DataGrid |
| | | size="small" |
| | | rows={tableData} |
| | | columns={columns} |
| | | checkboxSelection |
| | | onRowSelectionModelChange={handleSelectionChange} |
| | | selectionModel={selectedRows} |
| | | apiRef={apiRef} |
| | | processRowUpdate={processRowUpdate} |
| | | editMode="row" |
| | | disableColumnMenu={true} |
| | | disableColumnSorting |
| | | disableMultipleColumnsSorting |
| | | disableRowSelectionOnClick |
| | | getRowId={(row) => row.id} |
| | | sx={{ |
| | | '& .MuiDataGrid-cell input': { |
| | | border: '1px solid #ccc' |
| | | }, |
| | | }} |
| | | /> |
| | | </div> |
| | | ); |
| | | }; |