#修改 1. 采购单界面优化及修改

DESKTOP-LMJ82IJ\Eno

2025-04-13 cc2984eeb289b54cfa193dde558417c46f309e8f

 rsf-admin/src/page/basicInfo/locAreaMat/LocAreaMatPanel.jsx

@@ -15,6 +15,8 @@
import ConfirmModal from "@/page/components/ConfirmModal";
import { DataGrid } from '@mui/x-data-grid';
import request from '@/utils/request';
import { haveChildren } from '@/utils/common';


const LocAreaMatPanel = () => {
    const record = useRecordContext();
@@ -25,10 +27,10 @@
    const columns = [
        { field: 'id', headerName: 'ID', width: 100 },
        { field: 'areaId$', headerName: translate('table.field.locAreaMatRela.areaId'), width: 100 },
        { field: 'locId$', headerName: translate('table.field.locAreaMatRela.locId'), width: 100 },
        { field: 'locTypeId$', headerName: translate('table.field.locAreaMatRela.locTypeId'), width: 100 },
        { field: 'matnrId$', headerName: translate('table.field.locAreaMatRela.matnrId'), width: 100 },
        { field: 'groupId$', headerName: translate('table.field.locAreaMatRela.groupId'), width: 100 },
        { field: 'locTypeId$', headerName: translate('table.field.locAreaMatRela.locTypeId'), width: 100 },
        { field: 'locId$', headerName: translate('table.field.locAreaMatRela.locId'), width: 100 },
        {
            field: 'action',
            headerName: '操作',
@@ -59,7 +61,11 @@
    }

    const [parmas, setParmas] = useState({
        current: 1,
        pageSize: 99,
        areaMatId: record.id,
        locTypeId: '',
        groupId: '',
    });

    const [tableData, setTableData] = useState([]);
@@ -90,7 +96,7 @@
        const { data: { code, data, msg } } = await request.get(`/locAreaMatRela/groups/${record.id}`);

        if (code === 200) {
            setMatnrTree(data || [])
            setMatnrTree(haveChildren(data) || [])
        } else {
            notify(msg);
        }
@@ -100,7 +106,7 @@
        const { data: { code, data, msg } } = await request.get(`/locAreaMatRela/locType/${record.id}`);

        if (code === 200) {
            setLocTree(data || [])
            setLocTree(haveChildren(data) || [])
        } else {
            notify(msg);
        }
@@ -111,12 +117,12 @@
        <Grid container spacing={2}>
            {/* 物料分组 */}
            <Grid item xs={2}>
                <MatnrTree matnrTree={matnrTree} setParmas={setParmas} reload={reload} />
                <MatnrTree matnrTree={matnrTree} parmas={parmas} setParmas={setParmas} reload={reload} />
            </Grid>

            {/* 库位类型 */}
            <Grid item xs={2}>
                <LocTree locTree={locTree} setParmas={setParmas} reload={reload} />
                <LocTree locTree={locTree} parmas={parmas} setParmas={setParmas} reload={reload} />
            </Grid>

            {/* 其他内容 */}
@@ -129,7 +135,14 @@
                    disableColumnMenu={true}
                    disableColumnSorting
                    disableMultipleColumnsSorting
                    columnBufferPx={100}
                    initialState={{
                        pagination: {
                            paginationModel: {
                                pageSize: 10,
                            },
                        },
                    }}
                    pageSizeOptions={[10]}
                />
            </Grid>
        </Grid>
@@ -139,7 +152,7 @@
export default LocAreaMatPanel;


const MatnrTree = ({ matnrTree, setParmas, reload }) => {
const MatnrTree = ({ matnrTree, parmas, setParmas, reload }) => {

    const record = useRecordContext();
    const notify = useNotify();
@@ -214,7 +227,7 @@
            groupId: selectedItems
        }

        const res = await request.post(`/locAreaMatRela/group/remove/`, parmas);
        const res = await request.post(`/locAreaMatRela/group/remove`, parmas);
        if (res?.data?.code === 200) {
            reload()
            notify(res.data.msg);
@@ -231,30 +244,34 @@
    };

    const handleNodeSelect = (event, nodeId) => {
        event.stopPropagation()
        event.stopPropagation();
        parmas.groupId = nodeId;
        parmas.locTypeId = '';
        setParmas(parmas)
        reload()
    };

    return (
        <Card sx={{ p: 1 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', paddingBottom: '3px', marginBottom: '3px', borderBottom: '1px dashed #d4d4d4' }}>
                <div style={{ fontSize: '17px' }}>物料分组</div>
                <div style={{ display: 'flex', alignItems: 'center', gap: '3px' }}>
                {/* <div style={{ display: 'flex', alignItems: 'center', gap: '3px' }}>
                    <AddIcon color={'info'} sx={{ cursor: 'pointer' }} onClick={() => handleAdd()} />

                    <DeleteIcon color={'warning'} sx={{ cursor: 'pointer' }} onClick={() => handleDelete()} />
                </div>
                </div> */}
            </div>

            <RichTreeView
                expansionTrigger="iconContainer"
                checkboxSelection
                multiSelect
                // checkboxSelection
                // multiSelect
                items={matnrTree}
                apiRef={apiRef}
                selectedItems={selectedItems}
                getItemId={(item) => item.id}
                getItemLabel={(item) => item.name}
                defaultExpandedItems={['grid']}
                selectedItems={selectedItems}
                onSelectedItemsChange={handleSelectedItemsChange}
                onItemSelectionToggle={handleItemSelectionToggle}
                onItemClick={handleNodeSelect}
@@ -276,7 +293,7 @@
    )
}

const LocTree = ({ locTree, setParmas, reload }) => {
const LocTree = ({ locTree, setParmas, parmas, reload }) => {

    const record = useRecordContext();
    const notify = useNotify();
@@ -347,7 +364,7 @@
            typeId: selectedItems
        }

        const res = await request.post(`/locAreaMatRela/locType/remove/`, parmas);
        const res = await request.post(`/locAreaMatRela/locType/remove`, parmas);
        if (res?.data?.code === 200) {
            reload()
            notify(res.data.msg);
@@ -364,34 +381,37 @@
    };

    const handleNodeSelect = (event, nodeId) => {
        // event.preventDefault();
        console.log(nodeId)
        event.stopPropagation();
        parmas.locTypeId = nodeId;
        parmas.groupId = '';
        setParmas(parmas)
        reload()
    };

    return (
        <Card sx={{ p: 1 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', paddingBottom: '3px', marginBottom: '3px', borderBottom: '1px dashed #d4d4d4' }}>
                <div style={{ fontSize: '17px' }}>库位类型</div>
                <div style={{ display: 'flex', alignItems: 'center', gap: '3px' }}>
                {/* <div style={{ display: 'flex', alignItems: 'center', gap: '3px' }}>
                    <AddIcon color={'info'} sx={{ cursor: 'pointer' }} onClick={() => handleAdd()} />

                    <DeleteIcon color={'warning'} sx={{ cursor: 'pointer' }} onClick={() => handleDelete()} />
                </div>
                </div> */}
            </div>

            <RichTreeView
                expansionTrigger="iconContainer"
                checkboxSelection
                multiSelect
                items={locTree}
                apiRef={apiRef}
                selectedItems={selectedItems}
                getItemId={(item) => item.id}
                getItemLabel={(item) => item.name}
                defaultExpandedItems={['grid']}
                onSelectedItemsChange={handleSelectedItemsChange}
                onItemSelectionToggle={handleItemSelectionToggle}
                onItemClick={handleNodeSelect}
                onItemSelectionToggle={handleItemSelectionToggle}
                // checkboxSelection
                // multiSelect
                selectedItems={selectedItems}
                onSelectedItemsChange={handleSelectedItemsChange}
            />

            <BindLocModal