skyouc
2025-06-10 d7bb8c43b17253b46c6a466cff5545e8b4bcaad3
rsf-admin/src/page/orders/outStock/OutStockPublic.jsx
@@ -1,4 +1,4 @@
import { Box, Card, Grid, LinearProgress } from "@mui/material";
import { Box, Card, Grid, LinearProgress, Select, MenuItem, ListItemText, Tooltip, IconButton } from "@mui/material";
import React, { useState, useRef, useEffect, useMemo } from "react";
import {
    List,
@@ -13,7 +13,6 @@
    ExportButton,
    BulkDeleteButton,
    WrapperField,
    Toolbar,
    useRecordContext,
    useTranslate,
    useNotify,
@@ -36,16 +35,17 @@
    SimpleForm,
    required,
    Form,
    SaveButton,
    useRefresh,
    useGetList,
    useGetOne,
    useRedirect,
} from 'react-admin';
import { PAGE_DRAWER_WIDTH, OPERATE_MODE, DEFAULT_PAGE_SIZE, DEFAULT_ITEM_PAGE_SIZE } from '@/config/setting';
import { styled } from '@mui/material/styles';
import { DataGrid } from '@mui/x-data-grid';
import { DataGrid, useGridApiContext, GridActionsCellItem, useGridApiRef } from '@mui/x-data-grid';
import request from '@/utils/request';
import DictSelect from "../../components/DictSelect";
import ConfirmationNumberOutlinedIcon from '@mui/icons-material/ConfirmationNumberOutlined';
import CloseSharpIcon from '@mui/icons-material/CloseSharp';
import ConfirmButton from '../../components/ConfirmButton';
import { Delete, Edit, Add } from '@mui/icons-material';
const StyledDatagrid = styled(DatagridConfigurable)(({ theme }) => ({
    '& .css-1vooibu-MuiSvgIcon-root': {
@@ -54,16 +54,22 @@
    '& .RaDatagrid-row': {
        cursor: 'auto'
    },
    '& .column-maktx': {
        width: 200
    }
}));
const OutStockPublic = (props) => {
    const { record, open } = props;
    const { record, open, setOpen } = props;
    const notify = useNotify();
    const gridRef = useGridApiRef();
    const [rows, setRows] = useState({});
    const translate = useTranslate();
    const [selectedIds, setSelectedIds] = React.useState([]);
    const [formData, setFormData] = useState({
        orderId: record?.id
    });
    const translate = useTranslate();
    useEffect(() => {
        getWaveRule()
    }, [formData, open])
@@ -72,11 +78,12 @@
        if (formData.waveId == null && formData.waveId == undefined) {
            return
        }
        const res = await request.post('/outStock/order/getOutTaskItems', {...formData});
        if (res?.data?.code === 200) {
            setRows(res.data.data.records)
        const { data: { code, data, msg } } = await request.post('/outStock/order/getOutTaskItems', { ...formData });
        if (code === 200) {
            setRows(data)
        } else {
            notify(res.data.msg);
            notify(msg);
        }
    }
@@ -87,11 +94,13 @@
        }));
    };
    gridRef.current = useGridApiRef();
    return (
        <>
            <Box>
                <Grid sx={{ display: "flex" }} container rowSpacing={2} columnSpacing={2}>
                    <Grid item xl={6} gap={2} >
                    <Grid item xl={5.7} gap={2} >
                        <Card>
                            <Form>
                                <ReferenceInput
@@ -106,13 +115,6 @@
                                    />
                                </ReferenceInput>
                            </Form>
                            {/* <DictSelect
                                label={translate("table.field.waveRule.type")}
                                onChange={(e) => handleChange(e.target.value, 'type')}
                                value={formData.type}
                                dictTypeCode="sys_wave_rule_code"
                                required
                            /> */}
                            <List
                                resource="outStockItem"
                                storeKey='outStockItem'
@@ -137,7 +139,7 @@
                                    preferenceKey='outStockItem'
                                    bulkActionButtons={false}
                                    rowClick={false}
                                    omit={['id', 'splrName', 'qty', 'poCode']}
                                    omit={['id', 'splrName', 'qty', 'poCode', 'workQty']}
                                >
                                    <NumberField source="id" />
                                    <TextField source="asnCode" label="table.field.outStockItem.asnCode" />
@@ -153,12 +155,13 @@
                            </List>
                        </Card>
                    </Grid>
                    <Grid item xl={6} gap={2}>
                    <Grid item xl={6.3} gap={2}>
                        <Card>
                            <Box>
                            <Box sx={{ height: 500, width: '100%' }}>
                                <DataGrid
                                    rows={rows}
                                    columns={columns}
                                    apiRef={gridRef}
                                    initialState={{
                                        pagination: {
                                            paginationModel: {
@@ -166,9 +169,16 @@
                                            },
                                        },
                                    }}
                                    checkboxSelection
                                    pageSizeOptions={[15, 25, 35, 45]}
                                    disableRowSelectionOnClick
                                    onRowSelectionModelChange={(ids) => {
                                        setSelectedIds(ids)
                                    }}
                                />
                            </Box>
                            <Box sx={{ textAlign: 'center' }}>
                                <CloseButton setOpen={setOpen} />
                                <SubmitButton selectedIds={selectedIds} setSelectedIds={setSelectedIds} gridRef={gridRef} />
                            </Box>
                        </Card>
                    </Grid>
@@ -179,29 +189,158 @@
}
//提交按钮
const SubmitButton = ({ selectedIds, setSelectedIds, gridRef }) => {
    const notify = useNotify();
    const refresh = useRefresh();
    const redirect = useRedirect();
    const submit = async () => {
        const items = gridRef.current?.getSortedRows();
        const { data: { code, data, msg } } = await request.post('/outStock/generate/tasks', { items });
        if (code == 200) {
            refresh();
            redirect("/task")
        } else {
            notify(msg);
        }
    }
    return (
        <ConfirmButton
            label="toolbar.confirm"
            variant="contained"
            size="medium"
            onConfirm={submit}
            startIcon={<ConfirmationNumberOutlinedIcon />}
        />
    )
}
const rows = [
    { id: 1, locCode: '03-02-1-2-1', container: 'Snow', batch: 'Jon', curQty: 14 },
    { id: 2, locCode: '03-02-1-2-1', container: 'Lannister', batch: 'Cersei', curQty: 31 },
    { id: 3, locCode: '03-02-1-2-1', container: 'Lannister', batch: 'Jaime', curQty: 31 },
    { id: 4, locCode: '03-02-1-2-1', container: 'Stark', batch: 'Arya', curQty: 11 },
    { id: 5, locCode: '03-02-1-2-1', container: 'Targaryen', batch: 'Daenerys', curQty: null },
    { id: 6, locCode: '03-02-1-2-1', container: 'Melisandre', batch: null, curQty: 150 },
    { id: 7, locCode: '03-02-1-2-1', container: 'Clifford', batch: 'Ferrara', curQty: 44 },
    { id: 8, locCode: '03-02-1-2-1', container: 'Frances', batch: 'Rossini', curQty: 36 },
    { id: 9, locCode: '03-02-1-2-1', container: 'Roxie', batch: 'Harvey', curQty: 65 },
]
//关闭按钮
const CloseButton = ({ setOpen }) => {
    const close = () => {
        setOpen(false)
    }
    return (
        <Button
            label="toolbar.close"
            variant="outlined"
            size="medium"
            onClick={close}
            startIcon={<CloseSharpIcon />}
            sx={{ margin: '3.5em' }} />
    )
}
const columns = [
    { field: 'id', headerName: 'ID', width: 40 },
    { field: 'locCode', headerName: '库位', width: 110 },
    { field: 'container', headerName: '容器', width: 120 },
    { field: 'barcode', headerName: '容器', width: 120 },
    { field: 'batch', headerName: '批次', width: 90 },
    { field: 'unit', headerName: '单位', width: 90 },
    { field: 'curQty', headerName: '本次出库数量', width: 110 },
    { field: 'siteNo', headerName: '出库口', width: 90 }, ``
    { field: 'outQty', headerName: '本次出库数量', width: 110 },
    {
        field: 'siteNo',
        headerName: '出库口',
        width: 90,
        type: 'singleSelect',
        editable: true,
        renderCell: (params) => (
            <OutStockSiteNo value={params.value} />
        ),
        renderEditCell: (params) => (
            <OutStockSite {...params} />
        ),
    },
    {
        field: 'actions',
        type: 'actions',
        headerName: '操作',
        with: 120,
        getActions: (params) => [
            <GridActionsCellItem
                icon={<Delete />}
                label="Delete"
                onClick={() => handleDelete(params.row.id)}
            />,
        ]
    },
]
/**
 * 删除事件
 * @param {*} params
 */
const handleDelete = (params) => {
    console.log(params);
}
const OutStockSiteNo = React.memo(function OutStockSiteNo(props) {
    const { value } = props;
    if (!value) {
        return null;
    }
    return (
        <Box
            sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}
        >
            <span>{value}</span>
        </Box>
    );
});
const OutStockSite = (params) => {
    const { id, field, siteNo, row: { staNos } } = params;
    const apiRef = useGridApiContext();
    const handleChange = async (event) => {
        await apiRef.current.setEditCellValue(
            { id, field, value: event.target.value },
            event,
        );
        apiRef.current.stopCellEditMode({ id, field });
    };
    const handleClose = (event, reason) => {
        if (reason === 'backdropClick') {
            apiRef.current.stopCellEditMode({ id, field });
        }
    };
    return (
        <Select
            value={siteNo}
            onChange={handleChange}
            MenuProps={{
                onClose: handleClose,
            }}
            sx={{
                height: '100%',
                '& .MuiSelect-select': {
                    display: 'flex',
                    alignItems: 'center',
                    pl: 1,
                },
            }}
            autoFocus
            fullWidth
            open
        >
            {staNos.map((option) => {
                return (
                    <MenuItem
                        key={option}
                        value={option.staNo}
                    >
                        <ListItemText sx={{ overflow: 'hidden' }} primary={option.staNo} />
                    </MenuItem>
                );
            })}
        </Select >
    )
}
export default OutStockPublic;