Merge branch 'devlop' of http://47.97.1.152:5880/r/wms-master into devlop

skyouc

2025-03-28 7aa1d1fac96e4241ccf35aa3a19d95d62fab623b

Merge branch 'devlop' of http://47.97.1.152:5880/r/wms-master into devlop

 rsf-admin/src/i18n/en.js

@@ -685,6 +685,7 @@
        batchStockLevel: "batchStockLevel",
        batchWarehouseAreas: "batchWarehouseAreas",
        batchLocType: "batchLocType",
        batchPrint: "batch print",
    },
};


 rsf-admin/src/i18n/zh.js

@@ -695,6 +695,7 @@
        batchFlagCheck: "批量免检",
        batchWarehouseAreas: "批量库区",
        batchLocType: "批量库位类型",
        batchPrint: "批量打印",
    },
};


 rsf-admin/src/page/asnOrder/AsnOrderList.jsx

@@ -138,8 +138,8 @@
        <StyledDatagrid
          preferenceKey='asnOrder'
          bulkActionButtons={<> <InspectionsButton /><BulkDeleteButton mutationMode={OPERATE_MODE} /></>}
          rowClick={(id, resource, record) => false}
          expand={(e) => <AsnOrderPanel key={Math.floor(Math.random() * 100)} />}
          rowClick={() => false}
          expand={<AsnOrderPanel />}
          expandSingle={true}
          omit={['id', 'createTime', 'createBy', 'memo']}
        >

 rsf-admin/src/page/asnOrder/AsnOrderPanel.jsx

@@ -3,7 +3,9 @@
import {
    useTranslate,
    useRecordContext,
    useNotify
    useNotify,
    useRefresh,
    useListContext,
} from 'react-admin';
import PanelTypography from "../components/PanelTypography";
import * as Common from '@/utils/common'
@@ -11,6 +13,7 @@
import request from '@/utils/request';
import debounce from 'lodash/debounce';
import { DataGrid } from '@mui/x-data-grid';
import PrintModal from './PrintModal';
const AsnOrderPanel = () => {
    const record = useRecordContext();
    if (!record) return null;
@@ -106,13 +109,23 @@
            headerName: translate('table.field.asnOrderItem.splrName')
        },
        {
            field: 'barcode',
            field: 'trackCode',
            headerName: translate('table.field.asnOrderItem.barcode')
        },
        {
            field: 'packName',
            headerName: translate('table.field.asnOrderItem.packName')
        }]
        },
        {
            field: 'action',
            headerName: '操作',
            width: 70,
            lockPosition: 'left',
            renderCell: (params) => (
                <PrintButton rows={[params.row.id]} />
            ),

        },]

    const [selectedRows, setSelectedRows] = useState([]);

@@ -124,13 +137,6 @@
        setMaktx(value)
    }

    const wakbarcode = () => {

    }

    const wakprint = () => {

    }


    return (
@@ -143,8 +149,7 @@
                <TextField value={maktx} onChange={(e) => maktxChange(e.target.value)} label="搜索物料" variant="outlined" sx={{ width: '300px' }} />

                <div style={{ display: 'flex', gap: '10px' }}>
                    <Button variant="contained" onClick={wakbarcode}>生成条码</Button>
                    <Button variant="contained" onClick={wakprint}>打印</Button>
                    <PrintsButton rows={selectedRows} />
                </div>
            </div>

@@ -153,6 +158,7 @@
                size="small"
                rows={rows}
                columns={columns}
                disableRowSelectionOnClick
                checkboxSelection
                onRowSelectionModelChange={handleSelectionChange}
                selectionModel={selectedRows}
@@ -166,3 +172,57 @@
};

export default AsnOrderPanel;

const PrintsButton = ({ rows }) => {
    const record = useRecordContext();
    const { resource, selectedIds } = useListContext();
    const notify = useNotify();
    const refresh = useRefresh();
    const translate = useTranslate();

    const [createDialog, setCreateDialog] = useState(false);

    const modalChange = () => {
        if (rows?.length === 0) {
            notify('请选择物料');
            return;
        } else {
            setCreateDialog(true)
        }

    }

    return (
        <>
            <Button size="small" variant="contained" color="secondary" onClick={modalChange}>{translate("toolbar.batchPrint")}</Button>

            <PrintModal
                open={createDialog}
                setOpen={setCreateDialog}
                rows={rows}
            />
        </>
    )
}

const PrintButton = ({ rows }) => {
    const record = useRecordContext();

    const notify = useNotify();
    const refresh = useRefresh();

    const [createDialog, setCreateDialog] = useState(false);
    const translate = useTranslate();

    return (
        <>
            <Button size="small" variant="contained" color="secondary" onClick={() => setCreateDialog(true)}>{translate("toolbar.print")}</Button>

            <PrintModal
                open={createDialog}
                setOpen={setCreateDialog}
                rows={rows}
            />
        </>
    )
}

 rsf-admin/src/page/asnOrder/PrintModal.jsx

New file
@@ -0,0 +1,310 @@
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,
    Grid,
    TextField,
    Box,
    Button,
    Radio,
    RadioGroup,
    FormControlLabel,
    FormControl,
    FormLabel,
    TableRow,
    TableCell,
    Tooltip,
    IconButton,
    styled


} from '@mui/material';
import DialogCloseButton from "@/page/components/DialogCloseButton";
import DictionarySelect from "@/page/components/DictionarySelect";
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 _ from 'lodash';
import { DataGrid } from '@mui/x-data-grid';
import StatusSelectInput from "@/page/components/StatusSelectInput";

import { useReactToPrint } from "react-to-print";
import jsbarcode from 'jsbarcode'
import { el } from "date-fns/locale";

const PrintModal = ({ open, setOpen, rows }) => {
    const refresh = useRefresh();
    const translate = useTranslate();
    const notify = useNotify();
    const contentRef = useRef(null);
    const reactToPrintFn = useReactToPrint({ contentRef });

    const handleClose = (event, reason) => {
        if (reason !== "backdropClick") {
            setOpen(false);
        }
    };

    const [value, setValue] = useState('temp1');

    const handleChange = (event) => {
        setValue(event.target.value);
    };

    const handlePrint = () => {
        // handleClose()
        reactToPrintFn()
    };

    return (
        <Dialog open={open} maxWidth="sm" fullWidth>
            <DialogCloseButton onClose={handleClose} />
            <DialogTitle>{translate('toolbar.print')}</DialogTitle>
            <DialogContent >
                <FormControl >
                    <RadioGroup
                        row
                        aria-labelledby="demo-controlled-radio-buttons-group"
                        name="controlled-radio-buttons-group"
                        value={value}
                        onChange={handleChange}
                        size="small"
                        sx={{ justifyContent: 'center' }}
                    >
                        <FormControlLabel value="temp1" control={<Radio />} label="模板1" size="small" />
                    </RadioGroup>
                </FormControl>

                <Box>
                    <div style={{ textAlign: 'center', display: 'flex', justifyContent: 'center' }}>
                        <table
                            className="contain"
                            style={{
                                overflow: 'hidden',
                                fontSize: 'small',
                                tableLayout: 'fixed',
                                width: '280px',
                                borderCollapse: 'collapse', // 合并边框
                                border: '1px solid black' // 设置表格整体边框
                            }}
                        >
                            <tbody>
                                <tr style={{ height: '74px' }}>
                                    <td
                                        align="center"
                                        colSpan={3}
                                        style={{ border: '1px solid black' }} // 设置单元格边框
                                    >
                                        商品编码
                                    </td>
                                    <td
                                        align="center"
                                        className="barcode"
                                        colSpan={9}
                                        style={{ border: '1px solid black' }}
                                    >
                                        <img className="template-code" src={'/img/barcode.jpeg'} style={{ width: '90%' }} alt="Barcode" />
                                        <div style={{ letterSpacing: '2px', marginTop: '1px', textAlign: 'center' }}>
                                            <span>{'xxxxxx'}</span>
                                        </div>
                                    </td>
                                </tr>
                                <tr style={{ height: '74px' }}>
                                    <td
                                        align="center"
                                        colSpan={3}
                                        style={{ border: '1px solid black' }}
                                    >
                                        商品
                                    </td>
                                    <td
                                        align="center"
                                        colSpan={5}
                                        style={{
                                            overflow: 'hidden',
                                            whiteSpace: 'nowrap',
                                            textOverflow: 'ellipsis',
                                            border: '1px solid black'
                                        }}
                                    >
                                        {'xxxxxxxx'}
                                    </td>
                                    <td
                                        align="center"
                                        colSpan={2}
                                        style={{ border: '1px solid black' }}
                                    >
                                        备注
                                    </td>
                                    <td
                                        align="center"
                                        colSpan={2}
                                        style={{ border: '1px solid black' }}
                                    >
                                        {'xx'}
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <style>{`
                    @media print {
                    .print-content {
                            display: block!important;
                        }
                    }`} </style>
                    <div ref={contentRef} className="print-content" style={{ textAlign: 'center', display: 'none' }}>
                        <PrintTemp key={'bb'} rows={rows} />
                    </div>
                </Box>
            </DialogContent>
            <DialogActions sx={{ position: 'sticky', bottom: 0, backgroundColor: 'background.paper', zIndex: 1000 }}>
                <Box sx={{ width: '100%', display: 'flex', justifyContent: 'space-between' }}>
                    <Button onClick={handlePrint} variant="contained" startIcon={<SaveIcon />}>
                        {translate('toolbar.confirm')}
                    </Button>
                </Box>
            </DialogActions>
        </Dialog >
    );
}

export default PrintModal;

const PrintTemp = ({ rows }) => {
    const notify = useNotify();
    const [data, setData] = useState([]);
    const http = async () => {
        const res = await request.post(`/asnOrderItem/many/${rows?.join()}`);
        if (res?.data?.code === 200) {
            let val = res.data.data.map((el => {
                return {
                    barcode: '/img/barcode.jpeg',
                    code: el.trackCode,
                    name: el.maktx,
                    memo: el.memo || ''
                }
            }))
            setData(val)
            setTimeout(() => {
                val.forEach((el) => {
                    jsbarcode(`#barcode${el.code}`, el.code, { height: 30 });
                });
            }, 10);

        } else {
            notify(res.data.msg);
        }
    }

    useEffect(() => {
        if (rows?.length > 0) {
            http();
        }

    }, [rows]);


    return (
        <>
            {data.map((item, index) => (
                <table
                    key={index}
                    className="contain"
                    style={{
                        overflow: 'hidden',
                        fontSize: 'small',
                        tableLayout: 'fixed',
                        width: '520px',
                        borderCollapse: 'collapse',
                        borderSpacing: 0,
                        margin: '0 auto',
                        marginTop: '10px',
                    }}
                >
                    <tbody>
                        <tr style={{ height: '74px' }}>
                            <td align="center" colSpan={3} style={{ border: '1px solid black' }} >
                                商品编码
                            </td>
                            <td
                                align="center"
                                className="barcode"
                                colSpan={9}
                                style={{ border: '1px solid black' }}
                            >
                                <img id={"barcode" + item.code} style={{ width: '70%', verticalAlign: 'middle' }} />
                                {/* <img className="template-code" src={item.barcode} style={{ width: '90%', verticalAlign: 'middle' }} alt="Barcode" /> */}
                                {/* <div style={{ letterSpacing: '2px', marginTop: '1px', textAlign: 'center' }}>
                                    <span>{item.code}</span>
                                </div> */}
                            </td>
                        </tr>
                        <tr style={{ height: '74px' }}>
                            <td
                                align="center"
                                colSpan={3}
                                style={{ border: '1px solid black' }}
                            >
                                商品
                            </td>
                            <td
                                align="center"
                                colSpan={5}
                                style={{
                                    overflow: 'hidden',
                                    whiteSpace: 'nowrap',
                                    textOverflow: 'ellipsis',
                                    border: '1px solid black'
                                }}
                            >
                                {item.name}
                            </td>
                            <td
                                align="center"
                                colSpan={2}
                                style={{ border: '1px solid black' }}
                            >
                                备注
                            </td>
                            <td
                                align="center"
                                colSpan={2}
                                style={{ border: '1px solid black' }}
                            >
                                {item.memo}
                            </td>
                        </tr>
                    </tbody>
                </table>
            ))}

        </>
    )
}