web/src/pages/DictVspPage/DictVspPage.jsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { NameTask, TaskInfoContainer } from '../../components/common/SwitchFormTask/SwitchFormTask.style';
 
 import { Box, CircularProgress, Stack } from '@mui/material';
@@ -11,6 +11,7 @@ import { HeaderPortal } from '../../components/common/HeaderPortal';
 import { ROLES_NAME_ID } from '../../constants/constants';
 import { PageContainer } from '../../components/common/PageContainer';
 import DictVspFilters from './components/DictVspFilters';
+import DictVspModals from './components/DictVspModals';
 import TableDictVsp from './components/TableDictVsp';
 
 const DictVspInfo = () => {
@@ -30,6 +31,7 @@ function DictVspPage() {
 	const [ssps, setSsps] = useState([]);
 	const [selectedSsp, setSelectedSsp] = useState(null);
 	const { user } = useAuth();
+	const modalsRef = useRef(null);
 
 	const loadData = useCallback(async () => {
 		if (!user) return;
@@ -68,7 +70,7 @@ function DictVspPage() {
 		loadData();
 	}, [loadData]);
 
-	const handleAdd = async (formData) => {
+	const handleAdd = useCallback(async (formData) => {
 		try {
 			const response = await DictVspApi.create(formData);
 			if (response.success) {
@@ -82,9 +84,9 @@ function DictVspPage() {
 			toast.error(error.response?.data?.message || 'Ошибка создания ВСП');
 			throw error;
 		}
-	};
+	}, []);
 
-	const handleEdit = async (formData) => {
+	const handleEdit = useCallback(async (formData) => {
 		try {
 			const response = await DictVspApi.update(formData.id, formData);
 			if (response.success) {
@@ -98,9 +100,9 @@ function DictVspPage() {
 			toast.error(error.response?.data?.message || 'Ошибка обновления ВСП');
 			throw error;
 		}
-	};
+	}, []);
 
-	const handleDelete = async (vspId) => {
+	const handleDelete = useCallback(async (vspId) => {
 		try {
 			const response = await DictVspApi.delete(vspId);
 			if (response.success) {
@@ -114,7 +116,11 @@ function DictVspPage() {
 			toast.error(error.response?.data?.message || 'Ошибка удаления ВСП');
 			throw error;
 		}
-	};
+	}, []);
+
+	const handleAddClick = useCallback(() => modalsRef.current?.openAdd(), []);
+	const handleEditClick = useCallback((item) => modalsRef.current?.openEdit(item), []);
+	const handleExportClick = useCallback(() => modalsRef.current?.openExport(), []);
 
 	if (isLoading) {
 		return (
@@ -139,12 +145,18 @@ function DictVspPage() {
 						)}
 						<TableDictVsp
 							data={dictVspData}
-							ssps={ssps}
 							selectedSsp={selectedSsp}
+							onAddClick={handleAddClick}
+							onEditClick={handleEditClick}
+							onExportClick={handleExportClick}
+							loading={isLoading}
+						/>
+						<DictVspModals
+							ref={modalsRef}
+							ssps={ssps}
 							onAdd={handleAdd}
 							onEdit={handleEdit}
 							onDelete={handleDelete}
-							loading={isLoading}
 						/>
 					</Box>
 				</Stack>

web/src/pages/DictVspPage/components/DictVspModals.jsx

@@ -0,0 +1,65 @@
+import { forwardRef, useCallback, useImperativeHandle, useState } from 'react';
+import ModalEditAddVsp from './Modals/ModalEditAddVsp';
+import ModalExport from './Modals/ModalExport';
+
+// Состояние модалок живёт здесь, а не в таблице: открытие/закрытие не перерисовывает MRT.
+const DictVspModals = forwardRef(({ onAdd, onEdit, onDelete, ssps }, ref) => {
+	const [modalOpen, setModalOpen] = useState(false);
+	const [modalExportOpen, setModalExportOpen] = useState(false);
+	const [editingItem, setEditingItem] = useState(null);
+	const [saveLoading, setSaveLoading] = useState(false);
+
+	useImperativeHandle(
+		ref,
+		() => ({
+			openAdd: () => {
+				setEditingItem(null);
+				setModalOpen(true);
+			},
+			openEdit: (item) => {
+				setEditingItem(item);
+				setModalOpen(true);
+			},
+			openExport: () => setModalExportOpen(true),
+		}),
+		[],
+	);
+
+	const handleSave = async (formData) => {
+		setSaveLoading(true);
+		try {
+			if (editingItem) {
+				await onEdit?.({ ...formData, id: editingItem.id });
+			} else {
+				await onAdd?.(formData);
+			}
+			setModalOpen(false);
+		} catch (error) {
+			console.error('Error saving:', error);
+		} finally {
+			setSaveLoading(false);
+		}
+	};
+
+	const closeEdit = useCallback(() => setModalOpen(false), []);
+	const closeExport = useCallback(() => setModalExportOpen(false), []);
+
+	return (
+		<>
+			<ModalEditAddVsp
+				open={modalOpen}
+				onClose={closeEdit}
+				onSave={handleSave}
+				onDelete={onDelete}
+				initialData={editingItem}
+				loading={saveLoading}
+				ssps={ssps}
+			/>
+			<ModalExport open={modalExportOpen} onClose={closeExport} ssps={ssps} />
+		</>
+	);
+});
+
+DictVspModals.displayName = 'DictVspModals';
+
+export default DictVspModals;

web/src/pages/DictVspPage/components/TableDictVsp.jsx

@@ -1,55 +1,19 @@
 import { Box, IconButton, Stack, Typography } from '@mui/material';
 import { MaterialReactTable, useMaterialReactTable } from 'material-react-table';
-import { useMemo, useRef, useState } from 'react';
+import { memo, useMemo, useRef } from 'react';
 import { useAuth } from '../../../app/context/AuthProvider';
 import { PrimaryButton, PrimaryOutlinedButton } from '../../../components/common/Buttons/Buttons';
 import { EditPenSvg } from '../../../components/common/icons/icons';
 import { ROLES_NAME_ID } from '../../../constants/constants';
-import ModalEditAddVsp from './Modals/ModalEditAddVsp';
+import { filterVspBySsp } from '../utils/filterVspBySsp';
-import ModalExport from './Modals/ModalExport';
 
-const TableDictVsp = ({ data, onEdit, onDelete, onAdd, loading = false, ssps, selectedSsp }) => {
+const ROW_ESTIMATED_HEIGHT = 54;
+
+const TableDictVsp = ({ data, onEditClick, onAddClick, onExportClick, loading = false, selectedSsp }) => {
 	const { user } = useAuth();
-	const [modalOpen, setModalOpen] = useState(false);
-	const [modalExportOpen, setModalExportOpen] = useState(false);
-	const [editingItem, setEditingItem] = useState(null);
-	const [saveLoading, setSaveLoading] = useState(false);
 	const tableContainerRef = useRef(null);
 
-	const filteredData = useMemo(() => {
+	const filteredData = useMemo(() => filterVspBySsp(data, selectedSsp), [data, selectedSsp]);
-		if (!selectedSsp) {
-			return data;
-		}
-		return data.filter((item) => item.ssp_id === selectedSsp.id);
-	}, [data, selectedSsp]);
-
-	const handleEdit = (item) => {
-		setEditingItem(item);
-		setModalOpen(true);
-	};
-
-	const handleAdd = () => {
-		setEditingItem(null);
-		setModalOpen(true);
-	};
-
-	const handleExport = () => [setModalExportOpen(true)];
-
-	const handleSave = async (formData) => {
-		setSaveLoading(true);
-		try {
-			if (editingItem) {
-				await onEdit?.({ ...formData, id: editingItem.id });
-			} else {
-				await onAdd?.(formData);
-			}
-			setModalOpen(false);
-		} catch (error) {
-			console.error('Error saving:', error);
-		} finally {
-			setSaveLoading(false);
-		}
-	};
 
 	const columns = useMemo(
 		() => [
@@ -70,7 +34,7 @@ const TableDictVsp = ({ data, onEdit, onDelete, onAdd, loading = false, ssps, se
 			{
 				accessorKey: 'system_code',
 				header: 'Код РФ',
-				size: 180,
+				size: 100,
 				minSize: 50,
 				maxSize: 100,
 				Cell: ({ cell }) => (
@@ -98,9 +62,9 @@ const TableDictVsp = ({ data, onEdit, onDelete, onAdd, loading = false, ssps, se
 			{
 				accessorKey: 'regional_branch',
 				header: 'Региональный филиал/ССП',
-				size: 120,
+				size: 186,
 				minSize: 100,
-				maxSize: 150,
+				maxSize: 200,
 				Cell: ({ cell }) => <Typography variant='body2'>{cell.getValue() || '-'}</Typography>,
 				enableColumnActions: false,
 				enableSorting: false,
@@ -128,7 +92,7 @@ const TableDictVsp = ({ data, onEdit, onDelete, onAdd, loading = false, ssps, se
 			{
 				accessorKey: 'approved_format',
 				header: 'Утверждённый формат',
-				size: 150,
+				size: 159,
 				minSize: 120,
 				maxSize: 180,
 				Cell: ({ cell }) => <Typography variant='body2'>{cell.getValue() || '-'}</Typography>,
@@ -138,7 +102,7 @@ const TableDictVsp = ({ data, onEdit, onDelete, onAdd, loading = false, ssps, se
 			{
 				accessorKey: 'open_date',
 				header: 'Дата открытия ВСП',
-				size: 130,
+				size: 138,
 				minSize: 110,
 				maxSize: 150,
 				Cell: ({ cell }) => {
@@ -151,7 +115,7 @@ const TableDictVsp = ({ data, onEdit, onDelete, onAdd, loading = false, ssps, se
 			{
 				accessorKey: 'close_date',
 				header: 'Дата закрытия ВСП',
-				size: 130,
+				size: 137,
 				minSize: 110,
 				maxSize: 150,
 				Cell: ({ cell }) => {
@@ -245,6 +209,9 @@ const TableDictVsp = ({ data, onEdit, onDelete, onAdd, loading = false, ssps, se
 		enableGlobalFilter: false,
 		enableSorting: false,
 		enablePagination: false,
+		enableRowVirtualization: true,
+		// Высоту строк MRT измеряет сам (по умолчанию): «Примечания» многострочные (pre-wrap).
+		rowVirtualizerOptions: { overscan: 5, estimateSize: () => ROW_ESTIMATED_HEIGHT },
 		positionActionsColumn: 'last',
 
 		// Включаем изменение размера колонок для лучшего UX при горизонтальном скролле
@@ -279,8 +246,8 @@ const TableDictVsp = ({ data, onEdit, onDelete, onAdd, loading = false, ssps, se
 					Справочник объектов
 				</Typography>
 				<Stack spacing={'.5rem'} direction={'row'}>
-					<PrimaryOutlinedButton onClick={handleExport}>Экспортировать</PrimaryOutlinedButton>
+					<PrimaryOutlinedButton onClick={onExportClick}>Экспортировать</PrimaryOutlinedButton>
-					{user.role_id == ROLES_NAME_ID.admin && <PrimaryButton onClick={handleAdd}>+ Добавить объект</PrimaryButton>}
+					{user.role_id == ROLES_NAME_ID.admin && <PrimaryButton onClick={onAddClick}>+ Добавить объект</PrimaryButton>}
 				</Stack>
 			</Box>
 		),
@@ -307,6 +274,8 @@ const TableDictVsp = ({ data, onEdit, onDelete, onAdd, loading = false, ssps, se
 				size: 80,
 				muiTableHeadCellProps: {
 					align: 'center',
+					// В grid-раскладке th — колонка flex, align center иначе центрирует заголовок по вертикали.
+					sx: { justifyContent: 'flex-start' },
 				},
 				muiTableBodyCellProps: {
 					align: 'center',
@@ -325,7 +294,7 @@ const TableDictVsp = ({ data, onEdit, onDelete, onAdd, loading = false, ssps, se
 					}}>
 					<IconButton
 						size='small'
-						onClick={() => handleEdit(row.original)}
+						onClick={() => onEditClick(row.original)}
 						sx={{
 							padding: '4px',
 							'&:hover': {
@@ -479,23 +448,10 @@ const TableDictVsp = ({ data, onEdit, onDelete, onAdd, loading = false, ssps, se
 	});
 
 	return (
-		<>
+		<Box sx={{ position: 'relative', width: '100%' }}>
-			<Box sx={{ position: 'relative', width: '100%' }}>
+			<MaterialReactTable table={table} />
-				<MaterialReactTable table={table} />
+		</Box>
-			</Box>
-
-			<ModalEditAddVsp
-				open={modalOpen}
-				onClose={() => setModalOpen(false)}
-				onSave={handleSave}
-				onDelete={onDelete}
-				initialData={editingItem}
-				loading={saveLoading}
-				ssps={ssps}
-			/>
-			<ModalExport open={modalExportOpen} onClose={() => setModalExportOpen(false)} ssps={ssps} />
-		</>
 	);
 };
 
-export default TableDictVsp;
+export default memo(TableDictVsp);

web/src/pages/DictVspPage/utils/filterVspBySsp.js

@@ -0,0 +1,6 @@
+export const filterVspBySsp = (data, selectedSsp) => {
+	if (!selectedSsp) {
+		return data;
+	}
+	return data.filter((item) => item.ssp_id === selectedSsp.id);
+};

web/src/pages/DictVspPage/utils/filterVspBySsp.test.js

@@ -0,0 +1,25 @@
+import assert from 'node:assert/strict';
+import test from 'node:test';
+import { filterVspBySsp } from './filterVspBySsp.js';
+
+const data = [
+	{ id: 1, ssp_id: 10 },
+	{ id: 2, ssp_id: 20 },
+	{ id: 3, ssp_id: 10 },
+];
+
+test('без выбранного ССП возвращает те же данные (ссылка не меняется)', () => {
+	assert.equal(filterVspBySsp(data, null), data);
+	assert.equal(filterVspBySsp(data, undefined), data);
+});
+
+test('с выбранным ССП оставляет только его ВСП, порядок сохраняется', () => {
+	assert.deepEqual(
+		filterVspBySsp(data, { id: 10 }).map((v) => v.id),
+		[1, 3],
+	);
+});
+
+test('ССП без ВСП даёт пустой список', () => {
+	assert.deepEqual(filterVspBySsp(data, { id: 99 }), []);
+});