root/protoc-frontend
1
Fork 0
Code Pull Requests Actions Packages Projects Releases Activity

починка багов

Browse Source
This commit is contained in:
Artem
2025-07-23 16:08:50 +03:00
parent 3fc352f8e9
commit 907b3e315e
24 changed files with 1249 additions and 1430 deletions
Download Patch File Download Diff File Expand all files Collapse all files

595
src/page/ProtocolCreation/Page.tsx
View File

@@ -1,105 +1,15 @@
import DualSpreadsheet from '@/component/DualSpreadsheet/DualSpreadsheet'
import { StandardsSelector } from '@/component/StandardsElement/StandardsSelector'
import { Badge } from '@/component/ui/badge'
import { Button } from '@/component/ui/button'
import { Checkbox } from '@/component/ui/checkbox'
import { Input } from '@/component/ui/input'
import { Label } from '@/component/ui/label'
import { RadioGroup, RadioGroupItem } from '@/component/ui/radio-group'
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from '@/component/ui/select'
import { Textarea } from '@/component/ui/textarea'
import { getElementDefinition } from '@/entitiy/element/model/interface'
import { useTemplateContext } from '@/entitiy/template/model/TemplateContext'
import { cellAddressToCoordinates } from '@/lib/cell-utils'
import { useToast } from '@/lib/hooks/useToast'
import { getLatestFileForTemplate } from '@/service/fileApiService'
import { Template, TemplateElement } from '@/type/template'
import { ArrowLeft, FileText, Grid, Save, Settings, Wrench } from 'lucide-react'
import { ArrowLeft, FileText, Grid, Save } from 'lucide-react'
import { FC, useEffect, useMemo, useRef, useState } from 'react'
import { useNavigate, useParams } from 'react-router-dom'
// Моковые данные для эталонов (такие же как в StandardsSelector)
const mockStandards = [
{
id: '1',
name: 'Эталон массы 1 кг',
shortName: 'ЭМ-1кг',
type: 'Масса',
registryNumber: 'ГРСИ 12345-01',
range: '0.5-2 кг',
accuracy: '±0.001 г',
certificateNumber: 'СИ-2024-001',
validUntil: '2025-12-31',
},
{
id: '2',
name: 'Эталон длины 1 м',
shortName: 'ЭД-1м',
type: 'Длина',
registryNumber: 'ГРСИ 12345-02',
range: '0.5-2 м',
accuracy: '±0.001 мм',
certificateNumber: 'СИ-2024-002',
validUntil: '2025-06-30',
},
{
id: '3',
name: 'Эталон температуры 20°C',
shortName: 'ЭТ-20°C',
type: 'Температура',
registryNumber: 'ГРСИ 12345-03',
range: '15-25°C',
accuracy: '±0.01°C',
certificateNumber: 'СИ-2024-003',
validUntil: '2025-03-15',
},
{
id: '4',
name: 'Эталон давления 1 Па',
shortName: 'ЭД-1Па',
type: 'Давление',
registryNumber: 'ГРСИ 12345-04',
range: '0.5-2 Па',
accuracy: '±0.001 Па',
certificateNumber: 'СИ-2024-004',
validUntil: '2025-09-20',
},
{
id: '5',
name: 'Эталон времени 1 с',
shortName: 'ЭВ-1с',
type: 'Время',
registryNumber: 'ГРСИ 12345-05',
range: '0.5-2 с',
accuracy: '±0.000001 с',
certificateNumber: 'СИ-2024-005',
validUntil: '2025-12-01',
},
]
// Функция для получения данных эталона по ID
const getStandardById = (id: string) => {
return mockStandards.find(standard => standard.id === id)
}
// Функция для получения типа эталона в сокращенном виде
const getStandardTypeBadge = (type: string) => {
switch (type) {
case 'Манометр грузопоршневой':
return 'МГП'
case 'Калибратор давления':
return 'КД'
default:
return 'МО'
}
}
interface ProtocolFormProps {
template: Template
onSave: (data: Record<string, any>) => void
@@ -113,297 +23,52 @@ interface FormElementProps {
}
const FormElement: FC<FormElementProps> = ({ element, value, onChange }) => {
const [isStandardsDialogOpen, setIsStandardsDialogOpen] = useState(false)
// Получаем определение элемента из реестра
const elementDefinition = getElementDefinition(element.type)
const renderInput = () => {
switch (element.type) {
case 'text':
// Используем определение элемента из реестра для рендеринга
const textDefinition = getElementDefinition('text')
if (textDefinition && textDefinition.Render) {
return (
<textDefinition.Render
config={element as any}
value={value}
onChange={onChange}
/>
)
}
return (
<Input
placeholder={element.placeholder}
value={value || ''}
onChange={e => onChange(e.target.value)}
required={element.required}
/>
)
case 'textarea':
return (
<Textarea
placeholder={element.placeholder}
value={value || ''}
onChange={e => onChange(e.target.value)}
required={element.required}
rows={3}
/>
)
case 'number':
return (
<Input
type="number"
placeholder={element.placeholder}
value={value || ''}
onChange={e =>
onChange(e.target.value ? parseFloat(e.target.value) : '')
}
required={element.required}
/>
)
case 'date':
return (
<Input
type="date"
value={value || ''}
onChange={e => onChange(e.target.value)}
required={element.required}
/>
)
case 'select':
return (
<Select value={value || ''} onValueChange={onChange}>
<SelectTrigger>
<SelectValue
placeholder={element.placeholder || 'Выберите значение'}
/>
</SelectTrigger>
<SelectContent>
{element.options?.map(option => (
<SelectItem key={option.value} value={option.value}>
{option.label}
</SelectItem>
))}
</SelectContent>
</Select>
)
case 'radio':
return (
<RadioGroup value={value || ''} onValueChange={onChange}>
{element.options?.map(option => (
<div key={option.value} className="flex items-center space-x-2">
<RadioGroupItem
value={option.value}
id={`${element.id}-${option.value}`}
/>
<label
htmlFor={`${element.id}-${option.value}`}
className="text-sm font-medium"
>
{option.label}
</label>
</div>
))}
</RadioGroup>
)
case 'checkbox':
return (
<div className="flex items-center space-x-2">
<Checkbox
checked={!!value}
onCheckedChange={onChange}
id={element.id}
/>
<label htmlFor={element.id} className="text-sm font-medium">
{element.placeholder || 'Отметить'}
</label>
</div>
)
case 'standards':
const selectedStandards = Array.isArray(value) ? value : []
const selectedStandardsData = selectedStandards
.map(id => getStandardById(id))
.filter(Boolean)
return (
<div className="space-y-2">
{/* Блок с измерительными эталонами */}
<div>
<div className="mb-2 flex items-center justify-between">
<Label className="text-sm font-medium">Эталоны</Label>
<Button
variant="outline"
size="sm"
onClick={() => setIsStandardsDialogOpen(true)}
className="h-7 px-2"
>
<Settings className="mr-1 h-3 w-3" />
Настроить
</Button>
</div>
<div className="space-y-2">
{selectedStandardsData.length > 0 ? (
<div className="space-y-1.5">
{selectedStandardsData.map(
(standard, index) =>
standard && (
<div
key={standard.id}
className="flex items-center gap-2 rounded-md bg-muted/30 p-2 text-sm"
>
<div className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-primary/10">
<span className="text-xs font-medium text-primary">
{index + 1}
</span>
</div>
<div className="min-w-0 flex-1">
<div className="truncate text-xs font-medium text-foreground">
{standard.shortName}
</div>
<div className="text-xs text-muted-foreground">
{standard.accuracy} • {standard.range}
</div>
</div>
<Badge
variant="secondary"
className="shrink-0 text-xs"
>
<Wrench className="mr-1 h-3 w-3" />
{getStandardTypeBadge(standard.type)}
</Badge>
</div>
)
)}
</div>
) : (
<div className="rounded-md border border-dashed bg-muted/30 p-3 text-center text-sm text-muted-foreground">
<Settings className="mx-auto mb-1 h-4 w-4 opacity-50" />
Эталоны не выбраны
</div>
)}
</div>
</div>
<StandardsSelector
isOpen={isStandardsDialogOpen}
onClose={() => setIsStandardsDialogOpen(false)}
value={selectedStandards}
onChange={onChange}
registryNumber={
element.targetCells?.[0]?.displayName || 'ГРСИ 12345'
}
/>
</div>
)
case 'calibration_conditions':
// Используем определение элемента из реестра для рендеринга
const elementDefinition = getElementDefinition('calibration_conditions')
if (elementDefinition && elementDefinition.Render) {
return (
<elementDefinition.Render
config={element as any}
value={value}
onChange={onChange}
/>
)
}
return null
case 'button_group':
// Используем определение элемента из реестра для рендеринга
const buttonGroupDefinition = getElementDefinition('button_group')
if (buttonGroupDefinition && buttonGroupDefinition.Render) {
return (
<buttonGroupDefinition.Render
config={element as any}
value={value}
onChange={onChange}
/>
)
}
return null
default:
return null
}
// Если определение элемента не найдено, показываем ошибку
if (!elementDefinition) {
return (
<div className="rounded-md border border-red-200 bg-red-50 p-3 text-sm text-red-700">
Элемент типа "{element.type}" не найден в реестре
</div>
)
}
// Проверяем, использует ли элемент определение из реестра для рендеринга
const elementDefinition = getElementDefinition(element.type)
const usesElementRender =
elementDefinition &&
elementDefinition.Render &&
(element.type === 'text' ||
element.type === 'calibration_conditions' ||
element.type === 'button_group')
const renderElement = () => (
<elementDefinition.Render
config={element as any}
value={value}
onChange={onChange}
/>
)
return (
<div className="space-y-3">
{/* Показываем label и индикатор ячеек только если элемент не использует свой Render компонент */}
{!usesElementRender && (
<div className="flex items-start justify-between gap-2">
<div className="flex items-center gap-1">
<label className="text-sm font-medium text-gray-900">
{element.label}
</label>
{element.required && (
<span className="-mt-1.5 inline-block h-1 w-1 rounded-full bg-red-500" />
)}
</div>
{/* Индикатор ячеек */}
{element.targetCells && element.targetCells.length > 0 && (
<div className="group/cells relative">
<Grid className="h-3 w-3 cursor-help text-gray-500 opacity-60 transition-opacity hover:opacity-100" />
<div className="pointer-events-none absolute right-0 top-full z-50 mt-2 whitespace-nowrap rounded bg-gray-900 p-2 text-xs text-white opacity-0 shadow-lg transition-opacity group-hover/cells:opacity-100">
<div className="mb-1 font-medium">Целевые ячейки:</div>
{element.targetCells.map((cell, i) => (
<div key={i} className="font-mono">
{cell.sheet}!{cell.cell}
{cell.displayName && (
<span className="ml-1 text-gray-300">
({cell.displayName})
</span>
)}
</div>
))}
</div>
{/* Показываем индикатор ячеек для всех элементов */}
{element.targetCells && element.targetCells.length > 0 && (
<div className="flex justify-end">
<div className="group/cells relative">
<Grid className="h-3 w-3 cursor-help text-gray-500 opacity-60 transition-opacity hover:opacity-100" />
<div className="pointer-events-none absolute right-0 top-full z-50 mt-2 whitespace-nowrap rounded bg-gray-900 p-2 text-xs text-white opacity-0 shadow-lg transition-opacity group-hover/cells:opacity-100">
<div className="mb-1 font-medium">Целевые ячейки:</div>
{element.targetCells.map((cell, i) => (
<div key={i} className="font-mono">
{cell.sheet}!{cell.cell}
{cell.displayName && (
<span className="ml-1 text-gray-300">
({cell.displayName})
</span>
)}
</div>
))}
</div>
)}
</div>
</div>
)}
{/* Для элементов с собственными Render компонентами показываем только индикатор ячеек */}
{usesElementRender &&
element.targetCells &&
element.targetCells.length > 0 && (
<div className="flex justify-end">
<div className="group/cells relative">
<Grid className="h-3 w-3 cursor-help text-gray-500 opacity-60 transition-opacity hover:opacity-100" />
<div className="pointer-events-none absolute right-0 top-full z-50 mt-2 whitespace-nowrap rounded bg-gray-900 p-2 text-xs text-white opacity-0 shadow-lg transition-opacity group-hover/cells:opacity-100">
<div className="mb-1 font-medium">Целевые ячейки:</div>
{element.targetCells.map((cell, i) => (
<div key={i} className="font-mono">
{cell.sheet}!{cell.cell}
{cell.displayName && (
<span className="ml-1 text-gray-300">
({cell.displayName})
</span>
)}
</div>
))}
</div>
</div>
</div>
)}
{renderInput()}
{/* Рендер элемента через единый интерфейс */}
{renderElement()}
</div>
)
}
@@ -423,54 +88,29 @@ const ProtocolForm: FC<ProtocolFormProps> = ({ template, onSave, onBack }) => {
// Прямо обновляем движок, чтобы формулы пересчитались
if (engineRef.current) {
const element = template.elements.find(el => el.id === elementId)
if (element && element.targetCells) {
const cells = element.targetCells
cells.forEach((tc, idx) => {
let cellValue: any = value
// Специальная обработка для массивов эталонов
if (element.type === 'standards' && Array.isArray(value)) {
cellValue = getStandardById(value[idx] as string)?.name || ''
}
// Специальная обработка для условий калибровки
if (
element.type === 'calibration_conditions' &&
typeof value === 'object' &&
value !== null
) {
const propsOrder = [
'temperature',
'humidity',
'pressure',
'voltage',
'frequency',
'lastUpdated',
] as const
cellValue = (value as any)[propsOrder[idx]] ?? ''
}
// Специальная обработка для группы кнопок
if (element.type === 'button_group' && typeof value === 'string') {
// Найдем соответствующий option для получения label
const buttonOption = element.options?.find(
opt => opt.value === value
)
cellValue = buttonOption ? buttonOption.label : value
}
const { row, col } = cellAddressToCoordinates(tc.cell)
const sheetName =
tc.sheet === 'R' || tc.sheet === 'Calculations' ? 'R' : 'L'
engineRef.current.setCellValueWithoutRecalc(
sheetName,
row,
col,
cellValue
if (element) {
// Получаем определение элемента
const elementDefinition = getElementDefinition(element.type)
if (elementDefinition) {
// Используем единый интерфейс для получения пар ячейка-значение
const cellValues = elementDefinition.mapToCellValues(
element as any,
value
)
})
engineRef.current.debouncedRecalc()
// Записываем все значения в соответствующие ячейки
cellValues.forEach(({ target, value: cellValue }) => {
const { row, col } = cellAddressToCoordinates(target.cell)
engineRef.current.setCellValueWithoutRecalc(
target.sheet,
row,
col,
cellValue
)
})
engineRef.current.debouncedRecalc()
}
}
}
}
@@ -503,28 +143,22 @@ const ProtocolForm: FC<ProtocolFormProps> = ({ template, onSave, onBack }) => {
let value = formData[el.id]
if (value === undefined || value === null) value = ''
let cells =
el.targetCells && el.targetCells.length > 0
? el.targetCells
: undefined
if ((!cells || cells.length === 0) && el.type) {
const def = getElementDefinition(el.type as any)
if (def?.mapToCells) cells = def.mapToCells(el as any)
}
// Получаем определение элемента
const elementDefinition = getElementDefinition(el.type)
if (elementDefinition) {
// Используем единый интерфейс для получения пар ячейка-значение
const cellValues = elementDefinition.mapToCellValues(el as any, value)
// === Новая логика распределения значений по ячейкам ===
if (!cells || cells.length === 0) return
// 1) Массив (например, standards) -> каждой ячейке своё значение
if (el.type === 'standards' && Array.isArray(value)) {
cells.forEach((tc, idx) => {
const cellValue = getStandardById(value[idx] as string)?.name || ''
const { row, col } = cellAddressToCoordinates(tc.cell)
if (tc.sheet === 'Calculations') {
// Записываем все значения в соответствующие ячейки
cellValues.forEach(({ target, value: cellValue }) => {
const { row, col } = cellAddressToCoordinates(target.cell)
if (target.sheet === 'Calculations') {
toast.warning('Обнаружен лист Calculations')
}
const sheetName =
tc.sheet === 'R' || tc.sheet === 'Calculations' ? 'R' : 'L'
target.sheet === 'R' || target.sheet === 'Calculations'
? 'R'
: 'L'
engineRef.current.setCellValueWithoutRecalc(
sheetName,
row,
@@ -532,85 +166,7 @@ const ProtocolForm: FC<ProtocolFormProps> = ({ template, onSave, onBack }) => {
cellValue
)
})
return
}
// Обработка любых других массивов
if (Array.isArray(value)) {
cells.forEach((tc, idx) => {
const cellValue = value[idx] ?? ''
const { row, col } = cellAddressToCoordinates(tc.cell)
const sheetName =
tc.sheet === 'R' || tc.sheet === 'Calculations' ? 'R' : 'L'
engineRef.current.setCellValueWithoutRecalc(
sheetName,
row,
col,
cellValue
)
})
return
}
// 2) Объект условия калибровки -> пишем свойства по порядку
if (
el.type === 'calibration_conditions' &&
typeof value === 'object' &&
value !== null
) {
const propsOrder = [
'temperature',
'humidity',
'pressure',
'voltage',
'frequency',
'lastUpdated',
] as const
cells.forEach((tc, idx) => {
const cellValue = (value as any)[propsOrder[idx]] ?? ''
const { row, col } = cellAddressToCoordinates(tc.cell)
const sheetName =
tc.sheet === 'R' || tc.sheet === 'Calculations' ? 'R' : 'L'
engineRef.current.setCellValueWithoutRecalc(
sheetName,
row,
col,
cellValue
)
})
return
}
// 3) Группа кнопок -> записываем label выбранной кнопки
if (el.type === 'button_group' && typeof value === 'string') {
const buttonOption = el.options?.find(opt => opt.value === value)
const cellValue = buttonOption ? buttonOption.label : value
cells.forEach(tc => {
const { row, col } = cellAddressToCoordinates(tc.cell)
const sheetName =
tc.sheet === 'R' || tc.sheet === 'Calculations' ? 'R' : 'L'
engineRef.current.setCellValueWithoutRecalc(
sheetName,
row,
col,
cellValue
)
})
return
}
// 4) Примитив или прочие объекты -> одно значение во все ячейки
cells.forEach(tc => {
const { row, col } = cellAddressToCoordinates(tc.cell)
const sheetName =
tc.sheet === 'R' || tc.sheet === 'Calculations' ? 'R' : 'L'
engineRef.current.setCellValueWithoutRecalc(
sheetName,
row,
col,
value
)
})
})
// 2. Пересчитываем формулы
@@ -630,8 +186,6 @@ const ProtocolForm: FC<ProtocolFormProps> = ({ template, onSave, onBack }) => {
)
})
// console.log('[DBG] Final cells_to_update', cellsToUpdate)
// Получаем последний файл для шаблона
const latestFile = await getLatestFileForTemplate(template.id)
if (!latestFile) {
@@ -645,8 +199,6 @@ const ProtocolForm: FC<ProtocolFormProps> = ({ template, onSave, onBack }) => {
template_id: template.id,
}
console.log('[DBG] POST body', body)
const resp = await fetch('/api/protocols/', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
@@ -746,13 +298,14 @@ const ProtocolForm: FC<ProtocolFormProps> = ({ template, onSave, onBack }) => {
{/* Основное содержимое */}
<div className="flex-1 overflow-hidden">
{/* Всегда монтируем DualSpreadsheet, скрываем/показываем через hidden */}
<div className={`${showSpreadsheet ? 'block' : 'hidden'} h-full`}>
<DualSpreadsheet
templateData={template.excelData ? { L: template.excelData } : {}}
mergedCells={template.mergedCells || []}
templateId={template.id}
onEngineReady={engine => (engineRef.current = engine)}
onEngineReady={engine => {
engineRef.current = engine
}}
enableAutoSave={false}
/>
</div>